/* THE SIXTH BELL — shared styles. Same world as the main site: night, stone, lamplight. */

@font-face { font-family:"Cinzel"; font-weight:400 900; font-style:normal; font-display:swap;
  src:url(/fonts/Cinzel-var.ttf) format("truetype"); }
@font-face { font-family:"Cormorant Garamond"; font-weight:400; font-style:normal; font-display:swap;
  src:url(/fonts/CG-400.woff2) format("woff2"); }
@font-face { font-family:"Cormorant Garamond"; font-weight:500; font-style:normal; font-display:swap;
  src:url(/fonts/CG-500.woff2) format("woff2"); }
@font-face { font-family:"Cormorant Garamond"; font-weight:600; font-style:normal; font-display:swap;
  src:url(/fonts/CG-600.woff2) format("woff2"); }
@font-face { font-family:"Cormorant Garamond"; font-weight:400; font-style:italic; font-display:swap;
  src:url(/fonts/CG-400i.woff2) format("woff2"); }
@font-face { font-family:"Cormorant Garamond"; font-weight:600; font-style:italic; font-display:swap;
  src:url(/fonts/CG-600i.woff2) format("woff2"); }
@font-face { font-family:"IM Fell"; font-weight:400; font-style:normal; font-display:swap;
  src:url(/fonts/IMFell-400.woff2) format("woff2"); }
@font-face { font-family:"IM Fell"; font-weight:400; font-style:italic; font-display:swap;
  src:url(/fonts/IMFell-400i.woff2) format("woff2"); }
@font-face { font-family:"La Belle Aurore"; font-weight:400; font-style:normal; font-display:swap;
  src:url(/fonts/LaBelle-400.woff2) format("woff2"); }

:root {
  --ink:#100e0b; --ink-2:#161310; --panel:#1e1913;
  --stone-line:#544e40;
  --gold:#d9b476; --gold-bright:#ecc98f; --gold-dim:#9c8256;
  --parchment:#ece1c8; --parchment-dim:#b3a78c;
  --paper:#e9ddbe; --sepia:#5a4630; --hand:#4a3826;
  --wax:#8a2f22;
  --shadow:rgba(0,0,0,.5);
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { background:var(--ink); color:var(--parchment);
  font-family:"Cormorant Garamond","Iowan Old Style",Georgia,serif; }
.wrap { max-width:880px; margin:0 auto; padding:0 clamp(20px,5vw,48px); }
a { color:var(--gold-bright); }
:focus-visible { outline:2px solid var(--gold-bright); outline-offset:3px; }

/* masthead */
.bell-head { border-bottom:1px solid var(--stone-line); background:rgba(16,14,11,.94);
  position:sticky; top:0; z-index:20; backdrop-filter:blur(6px); }
.bell-head-row { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:16px; padding-bottom:16px; flex-wrap:wrap; }
.bell-mark { font-family:"Cinzel",Georgia,serif; font-weight:600; letter-spacing:.16em;
  font-size:.95rem; color:var(--parchment); text-decoration:none; }
.stages { display:flex; gap:10px; align-items:center; }
.stages span { font-family:"IM Fell",Georgia,serif; font-style:italic; font-size:.9rem;
  color:var(--parchment-dim); width:26px; height:26px; border:1px solid var(--stone-line);
  border-radius:50%; display:flex; align-items:center; justify-content:center; }
.stages span.done { color:var(--ink); background:var(--gold-dim); border-color:var(--gold-dim); }
.stages span.here { color:var(--gold-bright); border-color:var(--gold); }
.back-link { font-family:"Cinzel",Georgia,serif; font-size:.82rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--parchment-dim); text-decoration:none; }
.back-link:hover { color:var(--gold-bright); }

/* headings */
.eyebrow { font-family:"Cinzel",Georgia,serif; text-transform:uppercase; font-size:.82rem;
  letter-spacing:.24em; color:var(--gold-dim); margin:0 0 14px; }
h1.pagetitle { font-family:"Cinzel",Georgia,serif; font-weight:700; letter-spacing:.02em;
  font-size:clamp(2rem,5.4vw,3.2rem); line-height:1.08; margin:6px 0 14px;
  color:var(--parchment); text-wrap:balance; }
.sub { font-style:italic; color:var(--parchment-dim); font-size:1.12rem; max-width:58ch; }
main { padding:clamp(40px,8vh,72px) 0 80px; }
.prose p { font-size:1.16rem; line-height:1.75; color:var(--parchment-dim); margin:0 0 18px; }
.prose strong { color:var(--parchment); font-weight:600; }
.prose em { color:var(--gold-bright); }
.rule { display:flex; align-items:center; gap:10px; color:var(--gold-dim); margin:30px 0; }
.rule::before,.rule::after { content:""; flex:1; height:1px; background:var(--stone-line); }
.rule span { width:6px; height:6px; background:var(--gold-dim); transform:rotate(45deg); flex:none; }

/* parchment document */
.paper { background:
    radial-gradient(130% 110% at 22% 8%, #efe4c6 0%, #e4d6ae 58%, #d3c193 100%);
  color:var(--hand); border:1px solid var(--gold-dim);
  box-shadow:0 24px 60px var(--shadow), inset 0 0 60px rgba(90,70,48,.22);
  padding:clamp(22px,4.5vw,44px); margin:26px 0; }
.paper .doc-head { font-family:"IM Fell",Georgia,serif; text-align:center;
  letter-spacing:.14em; font-size:1rem; color:var(--sepia); margin:0 0 4px; }
.paper .doc-sub { font-family:"IM Fell",Georgia,serif; font-style:italic; text-align:center;
  font-size:.9rem; color:#7c6748; margin:0 0 22px; }
.hand { font-family:"La Belle Aurore",cursive; font-size:1.32rem; line-height:1.8; color:var(--hand); }
.hand .ln { display:block; margin:0 0 6px; }
.hand .date { display:block; text-align:right; font-size:1rem; color:#71583c; margin-top:18px; }
.paper .foot { font-family:"IM Fell",Georgia,serif; font-style:italic; font-size:.88rem;
  color:#7c6748; margin-top:20px; text-align:center; }

/* the gate (password) */
.gate { border:1px solid var(--gold-dim); background:var(--panel); padding:clamp(22px,4vw,36px);
  margin:34px 0; text-align:center; }
.gate .q { font-style:italic; font-size:1.25rem; color:var(--gold-bright); margin:0 0 18px; }
.gate form { display:flex; justify-content:center; max-width:420px; margin:0 auto; }
.gate input { font-family:"Cormorant Garamond",serif; font-size:1.1rem; background:var(--ink-2);
  border:1px solid var(--stone-line); border-right:none; color:var(--parchment);
  padding:12px 16px; flex:1; min-width:0; letter-spacing:.06em; }
.gate button { font-family:"Cinzel",Georgia,serif; font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; background:var(--gold); color:var(--ink); border:1px solid var(--gold);
  padding:0 20px; cursor:pointer; }
.gate button:hover { background:var(--gold-bright); }
.gate .msg { min-height:1.4em; margin-top:12px; font-style:italic; color:var(--parchment-dim); }
.gate .msg.no { color:#c98f6a; }
.gate .msg.yes { color:var(--gold-bright); }

/* hints */
details.hints { margin:22px 0; border:1px solid var(--stone-line); background:var(--ink-2); }
details.hints summary { cursor:pointer; padding:14px 18px; font-family:"Cinzel",Georgia,serif;
  font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-dim); }
details.hints summary:hover { color:var(--gold-bright); }
details.hints .h { padding:0 20px 16px; font-style:italic; color:var(--parchment-dim);
  font-size:1.05rem; line-height:1.6; }

/* continue banner */
.onward { border:1px solid var(--gold-dim); background:linear-gradient(180deg, #241d13, #1b1610);
  padding:26px; margin:30px 0; text-align:center; }
.onward .found { font-family:"Cinzel",Georgia,serif; letter-spacing:.2em; text-transform:uppercase;
  font-size:.82rem; color:var(--gold-bright); margin:0 0 10px; }
.onward p { font-style:italic; color:var(--parchment-dim); margin:0 0 18px; }
.btn { display:inline-block; font-family:"Cinzel",Georgia,serif; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:var(--gold);
  border:1px solid var(--gold); padding:13px 24px; cursor:pointer; text-decoration:none; }
.btn:hover { background:var(--gold-bright); }
.btn.ghost { background:none; color:var(--gold-bright); }
.btn.ghost:hover { background:var(--gold); color:var(--ink); }

/* campanile ropes */
.ropes { display:flex; gap:clamp(8px,2.5vw,22px); justify-content:center; align-items:flex-end;
  margin:30px 0 10px; flex-wrap:wrap; }
.rope { background:none; border:none; cursor:pointer; text-align:center; padding:6px; }
.rope svg { display:block; margin:0 auto; }
.rope .bname { font-family:"IM Fell",Georgia,serif; font-style:italic; color:var(--parchment-dim);
  font-size:.95rem; margin-top:6px; display:block; }
.rope .byear { font-family:"IM Fell",Georgia,serif; color:var(--gold-dim); font-size:.82rem; display:block; }
.rope:hover .bname { color:var(--gold-bright); }
.rope:active svg .bellbody, .rope.rung svg .bellbody { fill:rgba(217,180,118,.28); }
.strikes { text-align:center; min-height:2.2em; font-family:"IM Fell",Georgia,serif;
  font-style:italic; color:var(--gold-dim); font-size:1.05rem; letter-spacing:.06em; }
.strikes .s { margin:0 4px; }
.tools { text-align:center; margin-top:8px; }
.tools button { background:none; border:1px solid var(--stone-line); color:var(--parchment-dim);
  font-family:"Cinzel",Georgia,serif; font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; padding:8px 14px; cursor:pointer; }
.tools button:hover { color:var(--gold-bright); border-color:var(--gold-dim); }

/* map page */
/* The chart is 900 units wide. Inside the 880px .wrap it rendered at 0.83
   scale, which put every label under 11px on screen — the drawing was being
   shrunk, not the type. Let it break out of the column and draw at ~1.1x. */
.map-frame { background:
    radial-gradient(120% 90% at 30% 20%, #efe3c4 0%, #e7d9b4 45%, #d9c898 78%, #c9b47e 100%);
  border:1px solid var(--gold-dim); box-shadow:0 24px 60px var(--shadow),
    inset 0 0 80px rgba(90,70,48,.35); padding:clamp(8px,1.6vw,16px); overflow-x:auto; margin:26px 0;
  width:min(1040px,94vw); margin-left:50%; transform:translateX(-50%); }
/* min-width sets how small the chart may draw before the frame scrolls; at
   620 its own lettering fell to ~8px on a phone */
.map-frame svg { display:block; min-width:1000px; width:100%; height:auto; }
.maplabel { font-family:"IM Fell",Georgia,serif; fill:var(--sepia); }
.maplabel.it { font-style:italic; }
.feat { cursor:pointer; }
.feat circle.dot { fill:#8a2f22; stroke:#5a1d14; stroke-width:1; }
.feat:hover circle.dot { fill:#a63a29; }
.feat.picked circle.dot { fill:#d9b476; stroke:#9c8256; }
.feat.picked circle.ring { stroke:#9c8256; opacity:.9; }
.feat circle.ring { fill:none; stroke:#8a2f22; stroke-width:1; opacity:0; }
#triangle { stroke:#8a6423; stroke-width:1.6; fill:rgba(138,47,34,.06); stroke-dasharray:5 4; }
#centroid { fill:#8a2f22; }
#centroid-halo { fill:none; stroke:#8a2f22; stroke-width:1.2; }
.map-tools { text-align:center; }
.map-msg { text-align:center; font-style:italic; color:var(--parchment-dim); min-height:1.5em; margin-top:12px; }

/* lamp page */
.cellar { position:relative; height:min(66vh,540px); border:1px solid var(--stone-line);
  background:#0d0b08; overflow:hidden; margin:26px 0; touch-action:none; }
.cellar .stonework { position:absolute; inset:0;
  background:
    radial-gradient(700px 300px at 20% 110%, #171310 0%, transparent 60%),
    radial-gradient(500px 260px at 85% -10%, #14110d 0%, transparent 55%),
    #0d0b08; }
.glyph { position:absolute; transform:translate(-50%,-50%); font-family:"IM Fell",Georgia,serif;
  font-size:clamp(1.1rem,3vw,1.6rem); letter-spacing:.1em; color:#241e15; cursor:pointer;
  background:none; border:none; padding:8px; transition:color .3s, text-shadow .3s; }
.glyph.lit { color:#8a7350; text-shadow:0 0 14px rgba(217,180,118,.25); }
.glyph.got { color:var(--gold-bright); text-shadow:0 0 18px rgba(236,201,143,.5); cursor:default; }
.lampveil { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle 150px at var(--lx,50%) var(--ly,50%),
    rgba(6,5,3,0) 0%, rgba(6,5,3,.55) 55%, rgba(6,5,3,.965) 85%); }
.notebook { display:flex; gap:12px; justify-content:center; margin:18px 0; }
.notebook .slot { width:56px; height:64px; border:1px solid var(--stone-line); background:var(--ink-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.notebook .slot .num { font-family:"IM Fell",Georgia,serif; font-style:italic; font-size:.82rem;
  color:var(--gold-dim); }
.notebook .slot .ltr { font-family:"Cinzel",Georgia,serif; font-size:1.3rem; color:var(--parchment); min-height:1.3em; }
.notebook .slot.full { border-color:var(--gold-dim); }

/* finale */
.rope-pull { display:flex; flex-direction:column; align-items:center; margin:34px 0; }
#pullrope { background:none; border:none; cursor:grab; -webkit-user-select:none; user-select:none;
  touch-action:none; }
#pullrope:active { cursor:grabbing; }
.pull-hint { font-family:"Cinzel",Georgia,serif; font-size:.82rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold-dim); margin-top:16px; }
.resonance { position:fixed; inset:0; pointer-events:none; display:flex; align-items:center;
  justify-content:center; z-index:50; }
.resonance i { position:absolute; width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(217,180,118,.55); opacity:0; }
@keyframes ringout { from { transform:scale(1); opacity:.65; } to { transform:scale(46); opacity:0; } }
.resonance.on i { animation:ringout 2.8s ease-out forwards; }
.resonance.on i:nth-child(2) { animation-delay:.22s; }
.resonance.on i:nth-child(3) { animation-delay:.44s; }
@media (prefers-reduced-motion: reduce){ .resonance.on i { animation:none; } }

.cert { border:1px solid var(--gold-dim); background:var(--panel); padding:clamp(22px,4vw,36px);
  margin:34px 0; text-align:center; }
.cert h3 { font-family:"Cinzel",Georgia,serif; font-weight:600; font-size:1.3rem; margin:0 0 8px;
  color:var(--parchment); }
.cert p { font-style:italic; color:var(--parchment-dim); margin:0 0 16px; }
.cert .row { display:flex; justify-content:center; gap:0; max-width:430px; margin:0 auto 18px; }
.cert input { font-family:"Cormorant Garamond",serif; font-size:1.1rem; background:var(--ink-2);
  border:1px solid var(--stone-line); border-right:none; color:var(--parchment); padding:12px 16px;
  flex:1; min-width:0; }
.cert canvas { max-width:100%; height:auto; border:1px solid var(--gold-dim);
  box-shadow:0 18px 44px var(--shadow); display:none; margin:0 auto 16px; }
.cert canvas.show { display:block; }
.cert .dl { display:none; }
.cert .dl.show { display:inline-block; }

footer.bell-foot { border-top:1px solid var(--stone-line); background:var(--ink-2); }
.bell-foot .wrap { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-top:22px; padding-bottom:22px; }
.bell-foot span, .bell-foot a { font-size:.85rem; color:var(--parchment-dim); }