/* ═══════════════════════════════════════════════════════════════
   The Footnote† — THE JOE HOUSE MUSEUM · WebGL build
   Scene is rendered by three.js into a canvas; this sheet styles the
   void background, the pooled DOM labels, and the minimal HUD.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --gold:    #E8B53C;
  --mustard: #D4A73E;
  --gold-deep:#9a7426;
  --ink:     #16140f;
  --card-ink:#F2EADD;
  --card-muted:#9a907c;
  --card-rule-2:#4a4334;
}
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(140% 100% at 50% 40%, #26241f 0%, #1a1813 46%, #100f0c 100%);
  color: var(--card-ink);
  font-family: var(--fn-mono);
  overflow: hidden;
}

.viewport { position: fixed; inset: 0; overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.viewport.dragging { cursor: grabbing; }
#labels { position: absolute; inset: 0; pointer-events: none; z-index: 5; }

/* ───────── pooled DOM labels (projected from the GL scene) ──── */
.lbl { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: left, top, transform; }
.lbl.far { opacity: .38; }

.lbl-name  { font-family: var(--fn-mono); font-size: 15px; letter-spacing: .5px; color: var(--card-ink); text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.8); text-align: right; }
.lbl-name.is-house { color: #ffe79a; }
.lbl-count { font-family: var(--fn-serif-display); font-weight: 700; font-size: 25px; letter-spacing: -.5px; color: var(--gold); text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.lbl-count.is-house { color: #ffe79a; }

.lbl-sphere { text-align: center; }
.lbl-sphere .ls-name { font-family: var(--fn-serif-display); font-weight: 600; font-size: 21px; color: var(--card-ink); text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.lbl-sphere .ls-val  { font-family: var(--fn-mono); font-size: 13px; letter-spacing: 1px; color: var(--gold); margin-top: 3px; }
.lbl-sphere.is-house .ls-name { color: var(--gold); }

.lbl-min { text-align: center; }
.lbl-min .lm-min { font-family: var(--fn-serif-display); font-weight: 700; font-size: 26px; color: #e7eef6; line-height: .9; text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.lbl-min .lm-min span { font-family: var(--fn-mono); font-size: 10px; letter-spacing: 1.5px; color: #aebccb; margin-left: 4px; }
.lbl-min .lm-sub { font-family: var(--fn-mono); font-size: 10px; letter-spacing: 1px; color: #8d9cad; margin-top: 4px; text-shadow: 0 1px 6px rgba(0,0,0,.9); }

.lbl-seg { text-align: center; }
.lbl-seg .lg-name { font-family: var(--fn-serif-display); font-weight: 600; font-size: 17px; color: #fefaf0; text-shadow: 0 2px 10px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.9); }
.lbl-seg .lg-val  { font-family: var(--fn-mono); font-size: 13px; letter-spacing: 1px; color: #ffd86b; text-shadow: 0 1px 7px rgba(0,0,0,.9); }
.lbl-seg.is-house .lg-name { color: var(--ink); text-shadow: none; }
.lbl-seg.is-house .lg-val  { color: var(--ink); opacity: .72; text-shadow: none; }

.lbl-title { text-align: center; }
.lbl-title .lt-no { font-family: var(--fn-serif-display); font-weight: 700; font-style: italic; font-size: 28px; color: var(--gold); }
.lbl-title .lt-name { font-family: var(--fn-serif-display); font-weight: 600; font-size: 30px; letter-spacing: -.6px; color: var(--card-ink); margin-top: 2px; }
.lbl-title .lt-dek { font-family: var(--fn-serif-text); font-style: italic; font-size: 15px; color: var(--card-muted); margin-top: 5px; }

.ln-rank { font-family: var(--fn-mono); font-size: 11px; color: #8a7f68; margin-right: 9px; vertical-align: 1px; }
.lbl-name.is-house .ln-rank { color: var(--gold); }
.lbl-foot { font-family: var(--fn-mono); font-size: 12px; letter-spacing: .5px; color: #6b6354; text-align: center; }

/* departures board — a split-flap "train sign" hung in the guest gallery */
.trainboard {
  position: absolute; left: 0; top: 0; transform-origin: center center;
  width: 420px; padding: 13px 16px 12px;
  background: linear-gradient(180deg, #0d0b07, #060503);
  border: 1px solid #2c2618; border-radius: 4px;
  box-shadow: 0 26px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
}
.tb-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid #241f16; padding-bottom: 9px; margin-bottom: 8px; }
.tb-title { font-family: var(--fn-mono); font-size: 14px; letter-spacing: 3px; color: var(--gold); text-transform: uppercase; }
.tb-sub { font-family: var(--fn-mono); font-size: 10px; letter-spacing: 1.5px; color: #6b6354; text-transform: uppercase; }
.tb-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 6px 0; }
.tb-row + .tb-row { border-top: 1px solid #1a160e; }
.tb-name { font-family: var(--fn-serif-text); font-size: 18px; color: var(--card-ink); }
.tb-flap { font-family: var(--fn-mono); font-weight: 500; font-size: 18px; text-align: right; color: #ffd86b; background: #1a160d; border: 1px solid #2c2618; border-radius: 2px; padding: 4px 10px; min-width: 78px; box-shadow: inset 0 -6px 8px rgba(0,0,0,.5); position: relative; }
.tb-flap::after { content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 1px; background: rgba(0,0,0,.55); }
.tb-unit { font-family: var(--fn-mono); font-size: 10px; letter-spacing: 1px; color: #8a7a4a; margin-left: 5px; }
.tb-row.is-house .tb-name { color: var(--gold); }
.tb-row.is-house .tb-flap { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.tb-row.is-house .tb-unit { color: rgba(22,20,15,.6); }
.tb-note { font-family: var(--fn-mono); font-size: 10px; letter-spacing: .4px; line-height: 1.5; color: #6b6354; border-top: 1px solid #241f16; margin-top: 9px; padding-top: 8px; }
.tb-note b { color: var(--mustard); font-weight: 500; }

/* ───────── HUD — minimal chrome in the margins ─────────────── */
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.hud .pe { pointer-events: auto; }
.hud::before, .hud::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; }
.hud::before { top: 0; height: 130px; background: linear-gradient(to bottom, rgba(14,12,8,.72), transparent); }
.hud::after { bottom: 0; height: 110px; background: linear-gradient(to top, rgba(14,12,8,.72), transparent); }

.masthead { position: absolute; left: 46px; top: 30px; }
.mh-kicker { font-family: var(--fn-mono); font-size: 10.5px; letter-spacing: 3px; color: var(--gold); text-transform: uppercase; }
.mh-title { font-family: var(--fn-serif-display); font-weight: 700; font-size: 25px; line-height: 1; letter-spacing: -.8px; margin: 6px 0 0; white-space: nowrap; }
.mh-title em { font-style: italic; color: var(--gold); }
.wm { position: absolute; right: 46px; top: 32px; display: flex; align-items: baseline; gap: 5px; }
.wm-word { font-family: var(--fn-serif-display); font-weight: 600; font-size: 20px; letter-spacing: -.5px; color: var(--card-ink); }
.wm-mark { width: 15px; height: 18px; color: var(--gold); align-self: flex-start; transform: translateY(-2px); }

.toggle-wrap { position: absolute; left: 46px; top: 86px; }
.toggle { display: inline-flex; border: 1px solid var(--card-rule-2); background: rgba(13,11,7,.8); border-radius: 3px; overflow: hidden; }
.toggle button { font-family: var(--fn-mono); font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--card-muted); background: transparent; border: 0; padding: 8px 13px; cursor: pointer; transition: color .16s, background .16s; }
.toggle button + button { border-left: 1px solid var(--card-rule-2); }
.toggle button.active { color: var(--ink); background: var(--gold); }
.toggle-note { margin-top: 8px; max-width: 230px; font-family: var(--fn-serif-text); font-style: italic; font-size: 12.5px; line-height: 1.35; color: var(--card-muted); text-wrap: pretty; }

.dock { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; width: max-content; max-width: 92vw; }
.caption { font-family: var(--fn-serif-text); font-style: italic; font-size: 15px; line-height: 1.4; color: var(--card-muted); text-align: center; text-wrap: pretty; max-width: 680px; }
.caption b { font-style: normal; color: var(--gold); font-weight: 600; }
.chips { display: flex; align-items: center; gap: 8px; }
.chip { font-family: var(--fn-mono); font-size: 11.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--card-muted); background: rgba(22,20,15,.82); border: 1px solid var(--card-rule-2); padding: 8px 14px; cursor: pointer; transition: color .14s, border-color .14s, background .14s; }
.chip:hover { color: var(--gold); border-color: var(--gold-deep); }
.chip.active { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.chip.overview { color: var(--card-ink); }

.microhint { position: absolute; right: 46px; bottom: 30px; text-align: right; font-family: var(--fn-mono); font-size: 10px; letter-spacing: 1px; color: #6b6354; text-transform: uppercase; }

/* the hall (overview) frame shows ONLY the three exhibit titles — no deks */
body.is-hall .lt-dek { display: none; }

/* board stepper — navigate the SELECTED entry one rank at a time (appears
   only while a Full Board placard is open) */
.boardstep { position: absolute; right: 46px; bottom: 60px; display: none; flex-direction: column; align-items: center; gap: 6px; }
.boardstep.show { display: flex; }
.boardstep button { width: 46px; height: 46px; font-size: 19px; line-height: 1; color: var(--card-ink); background: rgba(13,11,7,.82); border: 1px solid var(--card-rule-2); border-radius: 4px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.boardstep button:hover { color: var(--gold); border-color: var(--gold-deep); background: rgba(28,24,15,.9); }
.boardstep button:disabled { opacity: .3; cursor: default; color: var(--card-ink); border-color: var(--card-rule-2); background: rgba(13,11,7,.82); }
.boardstep .bs-cap { font-family: var(--fn-serif-display); font-weight: 700; font-size: 15px; letter-spacing: -.3px; color: var(--gold); }

/* the pyramid block you're inspecting: label pops gold so it's unmistakable */
.lbl-seg.is-sel { z-index: 2; }
.lbl-seg.is-sel .lg-name { color: var(--gold); }
.lbl-seg.is-sel .lg-val { color: var(--gold); }
.lbl-seg.is-sel .lg-name, .lbl-seg.is-sel .lg-val { text-shadow: 0 0 12px rgba(232,181,60,.55), 0 2px 6px rgba(0,0,0,.8); }

/* full-board: the bar you've selected — name + count pop bright gold with a glow */
.lbl-name.is-sel, .lbl-count.is-sel { color: #ffe79a; }
.lbl-name.is-sel { text-shadow: 0 0 11px rgba(255,216,107,.5), 0 2px 8px rgba(0,0,0,.85); }
.lbl-name.is-sel .ln-rank { color: #ffd86b; }
.lbl-count.is-sel { text-shadow: 0 0 13px rgba(255,216,107,.6), 0 2px 8px rgba(0,0,0,.85); }

/* ───────── placard — the footnote behind a clicked piece ───── */
.placard {
  position: absolute; right: 30px; top: 50%; width: 322px;
  transform: translate(118%, -50%); opacity: 0;
  background: linear-gradient(180deg, #1c1810, #130f08);
  border: 1px solid #3a3328; border-left: 2px solid var(--gold);
  box-shadow: -22px 0 56px rgba(0,0,0,.55);
  padding: 24px 24px 18px;
  transition: transform .42s cubic-bezier(.3,.7,.2,1), opacity .3s ease;
}
.placard.open { transform: translate(0, -50%); opacity: 1; }
.placard-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border: 1px solid #3a3328; background: transparent; color: var(--card-muted); font-family: var(--fn-mono); font-size: 15px; line-height: 1; cursor: pointer; transition: color .15s, border-color .15s; }
.placard-close:hover { color: var(--gold); border-color: var(--gold-deep); }
.pc-kicker { font-family: var(--fn-mono); font-size: 10.5px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; }
.pc-name { font-family: var(--fn-serif-display); font-weight: 600; font-size: 28px; line-height: 1.04; letter-spacing: -.6px; color: var(--card-ink); margin: 9px 0 0; text-wrap: balance; }
.pc-big { font-family: var(--fn-serif-display); font-weight: 700; font-size: 46px; line-height: 1; letter-spacing: -1.5px; color: var(--gold); margin: 14px 0 0; }
.pc-big span { font-family: var(--fn-mono); font-weight: 400; font-size: 12px; letter-spacing: 1.5px; color: var(--card-muted); text-transform: uppercase; margin-left: 8px; vertical-align: 6px; }
.pc-sub { font-family: var(--fn-mono); font-size: 11px; letter-spacing: .8px; color: var(--card-muted); text-transform: uppercase; margin-top: 8px; }
.pc-prompt { font-family: var(--fn-mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); margin: 18px 0 -6px; display: flex; align-items: center; gap: 9px; }
.pc-prompt::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, var(--gold-deep), transparent); opacity: .5; }
.pc-line { font-family: var(--fn-serif-text); font-style: italic; font-size: 16px; line-height: 1.5; color: var(--card-ink); margin: 16px 0 0; text-wrap: pretty; }
.pc-link { display: inline-block; margin-top: 4px; font-style: normal; font-family: var(--fn-mono); font-size: 12px; letter-spacing: .5px; color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-deep); }
.pc-link:hover { color: #ffe79a; border-color: var(--gold); }
.pc-method { font-family: var(--fn-mono); font-size: 9.5px; letter-spacing: .3px; line-height: 1.5; color: #6b6354; border-top: 1px solid #2a2419; margin-top: 16px; padding-top: 12px; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE / NARROW — the live-site responsive pass
   Engine adds body.is-mobile; we also guard with a width query so a
   resized desktop window reflows too. Touch targets ≥ 44px, the
   masthead stacks, chips wrap, and the placard becomes a bottom sheet.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .hud::before { height: 168px; }
  .hud::after  { height: 188px; }

  .masthead { left: 18px; top: 16px; right: 64px; }
  .mh-kicker { font-size: 9.5px; letter-spacing: 2px; }
  .mh-title { font-size: 21px; line-height: 1.05; letter-spacing: -.5px; white-space: normal; text-wrap: balance; }

  .wm { right: 16px; top: 18px; gap: 4px; }
  .wm-word { display: none; }            /* just the mark on small screens */
  .wm-mark { width: 19px; height: 23px; transform: none; }

  .toggle-wrap { left: 18px; top: 104px; bottom: auto; }
  .toggle { border-radius: 6px; }
  .toggle button { font-size: 11px; padding: 11px 15px; min-height: 44px; }

  /* stepper: top-right when shown, clear of the bottom-sheet placard */
  .boardstep { right: 14px; bottom: auto; top: 120px; transform: none; flex-direction: row; align-items: center; gap: 8px; }
  .boardstep button { width: 48px; height: 48px; }

  .dock { left: 0; right: 0; bottom: 14px; transform: none; width: auto; max-width: none; padding: 0 14px; gap: 9px; }
  .caption { display: none; }            /* its text overlapped the bars on a phone */
  .chips { flex-wrap: wrap; justify-content: center; gap: 7px; }
  .chip { font-size: 11px; padding: 11px 14px; min-height: 44px; display: flex; align-items: center; border-radius: 6px; }

  .microhint { display: none; }

  /* labels: a touch larger so they read on a phone */
  .lbl-name  { font-size: 13px; }
  /* board: clean name in the gap above the bar (no plate, no left-margin clip) */
  .lbl-bartop { text-align: left; text-transform: uppercase; letter-spacing: .5px; font-size: 12px; color: var(--card-ink); text-shadow: 0 2px 9px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.8); }
  .lbl-bartop.is-house { color: #ffe79a; }
  .lbl-bartop .ln-rank { color: var(--gold); margin-right: 8px; }
  .lbl-count { font-size: 20px; }
  .lbl-sphere .ls-name { font-size: 18px; }
  .lbl-sphere .ls-val  { font-size: 12px; }
  /* pyramid: names ON the blocks (click for the number), kept short to fit */
  .lbl-seg-m { text-align: center; }
  .lbl-seg-m .lg-name { font-size: 11px; letter-spacing: -.2px; white-space: nowrap; }
  .lbl-title .lt-no { font-size: 24px; }
  .lbl-title .lt-name { font-size: 23px; }
  .lbl-title .lt-dek { display: none; }   /* sub-lines overlapped the bars/blocks */

  /* placard → bottom sheet */
  .placard {
    right: 0; left: 0; top: auto; bottom: 0; width: auto;
    border: 0; border-top: 2px solid var(--gold); border-radius: 16px 16px 0 0;
    box-shadow: 0 -22px 56px rgba(0,0,0,.6);
    padding: 20px 20px max(20px, env(safe-area-inset-bottom));
    transform: translate(0, 112%);
    transition: transform .4s cubic-bezier(.3,.7,.2,1), opacity .3s ease;
    max-height: 64vh; overflow-y: auto;
  }
  .placard.open { transform: translate(0, 0); }
  /* lift above the HUD's bottom fade gradient so the lower text stays crisp */
  .placard { z-index: 40; }
  .placard::before {
    content: ''; position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 2px; background: #3a3328;
  }
  .placard-close { top: 14px; right: 14px; width: 40px; height: 40px; font-size: 17px; }
  .pc-name { font-size: 25px; }
  .pc-big { font-size: 40px; }
}

/* ═══════════════════════════════════════════════════════════════
   GUIDED STORY — the default 7-beat walk. Body state classes:
     .story-on / .story-off  — guided vs free roam
     .on-pivot               — the "but wait…" beat (4)
     .narr-marquee           — caption layout switch (else lower card)
     .pivot-hall             — pivot treatment switch (else takeover)
   ═══════════════════════════════════════════════════════════════ */

/* dataset framing — always on, so nobody mistakes a finite slice for all-time */
.scopebadge { position: absolute; left: 50%; top: 17px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; font-family: var(--fn-mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--card-muted); white-space: nowrap; }
.scopebadge b { color: var(--gold); font-weight: 500; }
.scopebadge .sb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(232,181,60,.6); }
.mh-scope { display: none; font-family: var(--fn-mono); font-size: 9px; letter-spacing: 1px; color: var(--gold); margin-top: 6px; }

/* visibility wiring */
.story, .pivot, .tour-btn { display: none; }
body.story-on .story { display: block; }
body.story-off .tour-btn { display: inline-flex; }
body.story-on .dock, body.story-on .toggle-wrap, body.story-on .microhint { display: none; }
body.story-on.on-pivot:not(.pivot-hall) .story { display: none; }
body.story-on.on-pivot:not(.pivot-hall) .pivot { display: flex; }

/* ── the lower story card (default caption layout) ─────────────── */
.story { position: fixed; inset: 0; z-index: 14; pointer-events: none; }
.story-card {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  width: min(640px, 92vw); pointer-events: auto;
  background: linear-gradient(180deg, rgba(28,24,16,.97), rgba(18,15,9,.97));
  border: 1px solid #3a3328; border-top: 2px solid var(--gold); border-radius: 6px;
  padding: 17px 22px 15px; box-shadow: 0 26px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
}
.sc-prog { display: flex; align-items: center; gap: 13px; font-family: var(--fn-mono); font-size: 11px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; }
.sc-dots { display: flex; gap: 6px; }
.sc-dots i { width: 7px; height: 7px; border-radius: 50%; background: #4a4334; transition: background .2s, transform .2s; }
.sc-dots i.on { background: var(--gold); transform: scale(1.18); }
.sc-dots i.piv { border-radius: 1px; transform: rotate(45deg); }
.sc-dots i.piv.on { background: var(--gold); transform: rotate(45deg) scale(1.18); }
.sc-title { font-family: var(--fn-serif-display); font-weight: 700; font-size: 27px; line-height: 1.05; letter-spacing: -.6px; color: var(--card-ink); margin: 9px 0 0; text-wrap: balance; }
.sc-body { font-family: var(--fn-serif-text); font-size: 16px; line-height: 1.5; color: #cabfa9; margin: 9px 0 0; text-wrap: pretty; }
.sc-body b { color: var(--gold); font-weight: 600; }
.sc-body i { color: var(--card-ink); font-style: italic; }
.sc-actions { display: flex; align-items: center; gap: 10px; margin-top: 15px; }
.sc-btn { font-family: var(--fn-mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--card-ink); background: rgba(13,11,7,.7); border: 1px solid var(--card-rule-2); border-radius: 4px; padding: 10px 16px; min-height: 44px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.sc-btn:hover:not(:disabled) { color: var(--gold); border-color: var(--gold-deep); }
.sc-btn:disabled { opacity: .3; cursor: default; }
.sc-next { color: var(--ink); background: var(--gold); border-color: var(--gold); margin-left: auto; }
.sc-next:hover:not(:disabled) { background: #ffd86b; border-color: #ffd86b; color: var(--ink); }
.sc-skip { font-family: var(--fn-mono); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--card-muted); background: transparent; border: 0; cursor: pointer; padding: 10px 4px; }
.sc-skip:hover { color: var(--gold); }
.sc-hint { font-family: var(--fn-mono); font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase; color: #6b6354; margin-top: 11px; }

/* ── edge arrows (used by the marquee layout) ──────────────────── */
.edge-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; display: none; align-items: center; justify-content: center; font-size: 19px; pointer-events: auto; color: var(--card-ink); background: rgba(13,11,7,.74); border: 1px solid var(--card-rule-2); border-radius: 50%; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.edge-arrow:hover:not(:disabled) { color: var(--gold); border-color: var(--gold-deep); }
.edge-arrow:disabled { opacity: .28; cursor: default; }
.edge-arrow.prev { left: 32px; } .edge-arrow.next { right: 32px; }
.edge-arrow.next.is-finish { color: var(--ink); background: var(--gold); border-color: var(--gold); }
body.narr-marquee.story-on:not(.on-pivot) .edge-arrow { display: flex; }

/* ── marquee layout: title rides the top, edges drive nav ──────── */
body.narr-marquee .story-card { bottom: auto; top: 100px; width: min(740px, 92vw); text-align: center; background: none; border: 0; box-shadow: none; padding: 0; }
body.narr-marquee .sc-prog { justify-content: center; }
body.narr-marquee .sc-title { font-size: 40px; text-shadow: 0 3px 20px rgba(0,0,0,.9); }
body.narr-marquee .sc-body { font-size: 18px; max-width: 640px; margin-left: auto; margin-right: auto; text-shadow: 0 2px 14px rgba(0,0,0,.9); }
body.narr-marquee .sc-hint { display: none; }
body.narr-marquee #narrPrev, body.narr-marquee #narrNext { display: none; }
body.narr-marquee .sc-actions { justify-content: center; }
/* …but during a hall-pivot the overlay is off, so the card keeps its own nav */
body.on-pivot.pivot-hall #narrPrev, body.on-pivot.pivot-hall #narrNext { display: inline-flex; }
body.on-pivot.pivot-hall .sc-next { margin-left: 0; }

/* ── in-world caption: the narration projected into the hall ────── */
.lbl-narr { white-space: normal; width: 500px; text-align: center; }
.lbl-narr .ln-cap { display: inline-block; padding: 12px 22px; border-radius: 14px; background: radial-gradient(120% 135% at 50% 50%, rgba(13,11,7,.93) 0%, rgba(13,11,7,.8) 52%, rgba(13,11,7,0) 100%); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); font-family: var(--fn-serif-text); font-size: 20px; line-height: 1.36; color: #ece1c8; text-shadow: 0 2px 14px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.8); text-wrap: pretty; }
.lbl-narr .ln-cap b { color: var(--gold); font-weight: 600; }
.lbl-narr .ln-cap i { font-style: italic; color: #fff4da; }
/* the redundant section sub-headers are cut when the caption carries the point */
body.narr-inworld .lt-dek { display: none; }
/* the bottom card collapses to a slim control pill (the words live in 3D) */
body.narr-inworld:not(.on-pivot) .sc-title,
body.narr-inworld:not(.on-pivot) .sc-body,
body.narr-inworld:not(.on-pivot) .sc-hint { display: none; }
body.narr-inworld:not(.on-pivot) .story-card { width: auto; min-width: 320px; padding: 12px 16px 13px; }
body.narr-inworld:not(.on-pivot) .sc-actions { margin-top: 11px; }

/* ── the pivot takeover ────────────────────────────────────────── */
.pivot { position: fixed; inset: 0; z-index: 36; align-items: center; justify-content: center; pointer-events: none; background: radial-gradient(120% 100% at 50% 44%, rgba(10,9,6,.5), rgba(7,6,4,.92)); }
.pivot-inner { pointer-events: auto; max-width: 760px; padding: 0 28px; text-align: center; }
.pivot-kicker { font-family: var(--fn-mono); font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); }
.pivot-title { font-family: var(--fn-serif-display); font-weight: 700; font-style: italic; font-size: clamp(40px, 6vw, 76px); line-height: 1; letter-spacing: -1px; color: var(--card-ink); margin: 16px 0 0; }
.pivot-body { font-family: var(--fn-serif-text); font-size: clamp(17px, 2.1vw, 22px); line-height: 1.5; color: #d8cdb6; margin: 22px auto 0; max-width: 600px; text-wrap: pretty; }
.pivot-body i { color: var(--gold); font-style: italic; }
.pivot-actions { display: flex; gap: 12px; justify-content: center; margin-top: 30px; }
.pivot-actions .sc-next { margin-left: 0; }
.pivot .sc-skip { margin-top: 16px; }

/* ── TWEAKS panel (host toolbar protocol; hidden until toggled on) ── */
.tweaks { position: absolute; left: 46px; top: 86px; z-index: 60; width: 248px; pointer-events: auto;
  background: linear-gradient(180deg, rgba(28,24,16,.97), rgba(16,13,8,.97));
  border: 1px solid #3a3328; border-top: 2px solid var(--gold); border-radius: 7px;
  box-shadow: 0 24px 64px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  padding: 13px 15px 15px; }
.tweaks[hidden] { display: none; }
.tw-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #2a2419; padding-bottom: 9px; margin-bottom: 12px; }
.tw-title { font-family: var(--fn-mono); font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); }
.tw-close { width: 26px; height: 26px; border: 1px solid #3a3328; background: transparent; color: var(--card-muted); font-family: var(--fn-mono); font-size: 15px; line-height: 1; cursor: pointer; border-radius: 4px; transition: color .15s, border-color .15s; }
.tw-close:hover { color: var(--gold); border-color: var(--gold-deep); }
.tw-row + .tw-row { margin-top: 14px; }
.tw-label { font-family: var(--fn-mono); font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--card-muted); margin-bottom: 7px; }
.tw-seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--card-rule-2); border-radius: 5px; overflow: hidden; width: 100%; }
.tw-seg button { flex: 1 1 auto; font-family: var(--fn-mono); font-size: 10px; letter-spacing: .4px; text-transform: uppercase; color: var(--card-muted); background: rgba(13,11,7,.5); border: 0; padding: 9px 8px; min-height: 40px; cursor: pointer; transition: color .14s, background .14s; }
.tw-seg button + button { border-left: 1px solid var(--card-rule-2); }
.tw-seg button:hover { color: var(--gold); }
.tw-seg button.on { color: var(--ink); background: var(--gold); }
.tw-note { font-family: var(--fn-serif-text); font-style: italic; font-size: 11.5px; line-height: 1.35; color: #8a806c; margin-top: 7px; text-wrap: pretty; }

/* ── beat 5 : the "still said more than…" comparison card ──────── */
.compare { display: none; }
body.story-on.on-compare .compare {
  display: block; position: absolute; right: 34px; top: 50%; transform: translateY(-50%);
  z-index: 18; width: min(360px, 38vw); max-height: 84vh; overflow-y: auto; pointer-events: auto;
  background: linear-gradient(180deg, rgba(24,20,13,.97), rgba(14,11,7,.97));
  border: 1px solid #3a3328; border-left: 2px solid var(--gold); border-radius: 7px;
  box-shadow: -20px 0 56px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  padding: 15px 18px 13px;
}
/* in lower-caption mode the story card slides left so the two never overlap */
body.story-on.on-compare:not(.narr-marquee):not(.narr-inworld) .story-card { left: 26px; transform: none; width: min(420px, 44vw); }
.cmp-kicker { font-family: var(--fn-mono); font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 11px; text-wrap: pretty; }
.cmp-row { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 5px; padding: 7px 0; }
.cmp-row + .cmp-row { border-top: 1px solid #241f16; }
.cmp-name { grid-column: 1; grid-row: 1; font-family: var(--fn-serif-text); font-size: 15px; color: var(--card-ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; }
.cmp-tag { flex-basis: 100%; font-family: var(--fn-serif-text); font-style: italic; font-size: 11.5px; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--gold); opacity: .82; }
.cmp-val { grid-column: 2; grid-row: 1; justify-self: end; align-self: baseline; font-family: var(--fn-mono); font-size: 13px; color: #ffd86b; }
.cmp-bar { grid-column: 1 / -1; grid-row: 2; height: 4px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.cmp-bar i { display: block; height: 100%; background: var(--gold-deep); border-radius: 3px; }
.cmp-row.is-house { padding: 2px 0 8px; }
.cmp-row.is-house .cmp-name { font-family: var(--fn-serif-display); font-weight: 700; font-size: 18px; color: var(--gold); }
.cmp-row.is-house .cmp-bar i { background: var(--gold); }
.cmp-row.is-house .cmp-val { font-size: 16px; font-weight: 700; color: #ffe79a; }
.cmp-foot { font-family: var(--fn-mono); font-size: 9px; letter-spacing: .4px; line-height: 1.5; color: #6b6354; border-top: 1px solid #241f16; margin-top: 10px; padding-top: 8px; }

/* ── headline mode : a down-arrow tying the floating caption to the graph ── */
.story-downarrow { display: none; position: absolute; left: 50%; top: 188px; transform: translateX(-50%);
  font-size: 30px; line-height: 1; color: var(--gold); pointer-events: none;
  text-shadow: 0 2px 14px rgba(0,0,0,.9); animation: dnbob 1.7s ease-in-out infinite; }
body.narr-marquee.story-on:not(.on-pivot) .story-downarrow { display: block; }
@keyframes dnbob { 0%,100% { transform: translate(-50%, 0); opacity: .55; } 50% { transform: translate(-50%, 9px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .story-downarrow { animation: none; } }

/* ── replay button (free-roam mode, top-right under the wordmark) ─ */
.tour-btn { position: absolute; right: 46px; top: 78px; align-items: center; gap: 7px; font-family: var(--fn-mono); font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--gold); background: rgba(13,11,7,.8); border: 1px solid var(--gold-deep); border-radius: 3px; padding: 10px 14px; min-height: 40px; cursor: pointer; pointer-events: auto; transition: color .15s, background .15s; }
.tour-btn:hover { color: var(--ink); background: var(--gold); }

@media (max-width: 720px) {
  .scopebadge { display: none; }
  .mh-scope { display: block; }
  /* mobile is always the lower-card layout — marquee/edge arrows off */
  .edge-arrow { display: none !important; }
  .tweaks { left: 12px; right: 12px; top: 64px; width: auto; }
  .story-downarrow { display: none !important; }
  body.narr-marquee #narrPrev, body.narr-marquee #narrNext { display: inline-flex; }
  /* compare card: a compact strip pinned above the story card */
  body.story-on.on-compare .compare { left: 12px; right: 12px; top: auto; bottom: calc(56vh + 22px); transform: none; width: auto; max-height: 30vh; overflow-y: auto; padding: 13px 15px 12px; }
  body.story-on.on-compare .cmp-kicker { margin-bottom: 9px; }
  body.story-on.on-compare .cmp-row { padding: 6px 0; }
  body.story-on.on-compare .cmp-name { font-size: 14px; }
  body.story-on.on-compare .cmp-row.is-house .cmp-name { font-size: 16px; }
  .story-card, body.narr-marquee .story-card { left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; transform: none; text-align: left; background: linear-gradient(180deg, rgba(28,24,16,.98), rgba(18,15,9,.98)); border: 1px solid #3a3328; border-top: 2px solid var(--gold); box-shadow: 0 -18px 50px rgba(0,0,0,.6); padding: 15px 17px 13px; max-height: 56vh; overflow-y: auto; }
  body.narr-marquee .sc-title { font-size: 23px; text-shadow: none; }
  .sc-title { font-size: 22px; }
  body.narr-marquee .sc-body { font-size: 14.5px; text-shadow: none; margin-left: 0; margin-right: 0; }
  .sc-body { font-size: 14.5px; }
  body.narr-marquee .sc-prog, body.narr-marquee .sc-actions { justify-content: flex-start; }
  .story { z-index: 30; }
  /* in-world framing is desktop-tuned — phones fall back to the lower card */
  body.narr-inworld:not(.on-pivot) .sc-title, body.narr-inworld:not(.on-pivot) .sc-body { display: block; }
  body.narr-inworld:not(.on-pivot) .sc-hint { display: none; }
  .tour-btn { left: 18px; top: 200px; right: auto; bottom: auto; }
  .pivot-title { margin-top: 10px; }
  .pivot-actions { flex-wrap: wrap; }
}