/* ═══ TCM CODEX — the library ═══
   Palette taken from the TCM Codex logo: stone, brass, and lantern light on black.
   Cinzel display, EB Garamond body. Dark is the only mode — the logo IS the theme. */

@font-face {
  font-family: 'EB Garamond';
  src: url('/fonts/EBGaramond.ttf') format('truetype');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('/fonts/EBGaramond-Italic.ttf') format('truetype');
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('/fonts/Cinzel.ttf') format('truetype');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel Decorative';
  src: url('/fonts/CinzelDecorative.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
/* the arcade cabinet's CRT glass — and NOWHERE else on the page (OFL, self-hosted) */
@font-face {
  font-family: 'Press Start 2P';
  src: url('/fonts/PressStart2P.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* Palette sampled directly from assets/logos/Main Logo.png:
   the black ground, the stone of the "TCM" letters, the brass of "CODEX",
   the lantern beam, and the muted tan of "Truth. Scripture. Christ."
   In the logo, stone is the bright ink and brass is the quieter accent. Keep that order.
   (This is the web skin. The Discord embed gold, 0xC9A84C, is untouched.) */
:root {
  --brass: #b8945e;
  --brass-lift: #d3ae76;
  --brass-dim: #7d694f;
  --brass-faint: rgba(184, 148, 94, 0.24);
  /* root fallback for the per-act hue (an element outside any .act stays brass) */
  --act-hue: 201, 168, 76;
  --act-hue-hi: 240, 220, 170;
  --brass-ghost: rgba(184, 148, 94, 0.07);

  --bg: #060505;
  --bg-raise: #0f0d0b;
  --bg-panel: #15120e;
  --bg-sunk: #020202;

  /* Brightened 2026-07-09 (Trevor: "worst issue is visibility") — dim copy was melting
     into the black ground on real phones. Keep the warmth, raise the contrast. */
  --ink: #d9cdb8;
  --ink-bright: #f8f1e2;
  --ink-dim: #b9ab93;
  --ink-faint: #8d8069;

  /* Georgia carries the body: it was drawn for screens and stays readable at phone sizes.
     EB Garamond remains the accent voice for pull quotes and scripture. */
  --serif: Georgia, 'Times New Roman', serif;
  --accent: 'EB Garamond', Georgia, serif;
  --display: 'Cinzel', 'EB Garamond', Georgia, serif;
  --deco: 'Cinzel Decorative', 'Cinzel', 'EB Garamond', Georgia, serif;

  --rule: rgba(184, 148, 94, 0.19);
  --shadow: rgba(0, 0, 0, 0.7);
  --tile: 132px;

  /* per-act accent; each act may retint these (the mind, the engines, the arena) */
  --acc: var(--brass);
  --acc-lift: var(--brass-lift);
  --acc-soft: rgba(211, 174, 118, 0.4);
  --acc-ghost: rgba(184, 148, 94, 0.07);
  --acc-faint: rgba(184, 148, 94, 0.24);
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* the side-entrance reveals ([data-reveal='left'/'right']) hold elements 38px
   off-frame before they animate in — without this clip they widen the layout
   viewport on phones and push the fixed top bar past the screen edge */
html, body { overflow-x: hidden; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* even the highlighter is house gold */
::selection { background: rgba(201, 168, 76, 0.32); color: #f3e8cf; }

/* the film: a fixed vignette + a whisper of grain, so the black reads as depth, not void */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 89;
  pointer-events: none;
  background: radial-gradient(135% 105% at 50% 38%, transparent 62%, rgba(0, 0, 0, 0.34) 100%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* the reading progress hairline */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brass-dim), var(--brass) 70%, var(--brass-lift));
  box-shadow: 0 0 10px rgba(211, 174, 118, 0.65);
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

b { color: var(--ink); font-weight: 600; }

/* headlines never rag into a one-word orphan line on a phone */
h1, h2, h3, h4 { text-wrap: balance; }

.eyebrow {
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--acc);
  margin: 0;
}

/* scroll reveals: each shape enters its own way — up, from a side, out of a blur, at scale */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s ease;
}
html.js [data-reveal='left'] { transform: translateX(-38px); }
html.js [data-reveal='right'] { transform: translateX(38px); }
html.js [data-reveal='zoom'] { transform: scale(0.95) translateY(12px); }
html.js [data-reveal='blur'] { transform: translateY(12px); filter: blur(9px); }
/* fade: no travel at all — for cards whose content owns its own motion
   (the flagship's dawn), so the container doesn't compete with the show */
html.js [data-reveal='fade'] { transform: none; }
html.js [data-reveal].in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
}

/* the drawn-in flourish under an act's title (shared #orn-flourish symbol).
   Everything is styled on the svg root and INHERITED into the use-shadow —
   selectors cannot reach inside <use>. stroke-dasharray/-dashoffset and
   fill-opacity are all inherited SVG properties, so the draw-in still works. */
.flourish {
  display: block;
  width: min(240px, 62%);
  height: 26px;
  margin: 0.7rem auto 0;
  overflow: visible;
  stroke: var(--acc);
  stroke-width: 1.2;
  fill: var(--acc);        /* only the gem rect picks this up (paths pin fill="none") */
  fill-opacity: 0;
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
}
html.js .in .flourish,
html:not(.js) .flourish {
  stroke-dashoffset: 0;
  fill-opacity: 1;
  transition: stroke-dashoffset 1.3s ease 0.25s, fill-opacity 0.5s ease 1.1s;
}
@media (prefers-reduced-motion: reduce) {
  .flourish { stroke-dashoffset: 0 !important; fill-opacity: 1 !important; transition: none !important; }
}

/* ═══ ACT I — the title plate ═══ */

.plate {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4rem 1.5rem 3rem;
  text-align: center;
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--brass-ghost) 0%, transparent 62%),
    var(--bg);
}
/* faint shafts of lantern light falling from above the plate */
.plate::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: conic-gradient(from 178deg at 50% -12%,
    transparent 40.5%, rgba(211, 174, 118, 0.05) 44.5%, transparent 48.5%,
    rgba(211, 174, 118, 0.035) 53%, transparent 57%,
    rgba(211, 174, 118, 0.05) 61.5%, transparent 65.5%);
}
/* embers drift up through the dark while the plate holds (spawned by library.js) */
.embers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.embers span {
  position: absolute;
  left: var(--x);
  bottom: -8px;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--brass-lift);
  box-shadow: 0 0 7px 1px rgba(211, 174, 118, 0.5);
  filter: blur(0.5px);
  opacity: 0;
  animation: ember var(--d) linear var(--delay) infinite;
}
@keyframes ember {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  8% { opacity: var(--o); }
  78% { opacity: var(--o); }
  100% { transform: translateY(-150vh) translateX(-30px); opacity: 0; }
}

/* the curtain rises (the CSS fallback): plays only when the GSAP take is NOT running —
   library.js sets .no-cine when GSAP is missing, motion is reduced, or the visitor
   arrives mid-page. The directed take itself lives in library.js. */
@media (prefers-reduced-motion: no-preference) {
  html.js.no-cine .plate__frame { animation: hero-logo 1.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
  html.js.no-cine .plate__verse { animation: hero-up 0.9s ease 0.4s both; }
  html.js.no-cine .plate .witness { animation: hero-up 0.9s ease 0.58s both; }
  html.js.no-cine .plate__sub { animation: hero-up 0.9s ease 0.7s both; }
  html.js.no-cine .plate__when { animation: hero-up 1.2s ease 0.85s both; }
  html.js.no-cine .plate .prereg { animation: hero-up 0.9s ease 1.05s both; }
  html.js.no-cine .plate .roll { animation: hero-up 0.9s ease 1.15s both; }
  html.js.no-cine .plate .arsenal { animation: hero-up 1s ease 1.25s both; }
  html.js.no-cine .plate .scroll-cue { animation: hero-up 1s ease 1.6s both; }
  @keyframes hero-logo { from { opacity: 0; transform: scale(0.975) translateY(12px); } }
  @keyframes hero-up { from { opacity: 0; transform: translateY(16px); } }
  @keyframes hero-date { from { opacity: 0; letter-spacing: 0.7em; } }
}

/* the GSAP take owns the entrance: every piece waits in the dark until the
   timeline moves it (set before first paint — library.js runs at end of body) */
html.hero-cine .plate__frame,
html.hero-cine .plate__verse p span,
html.hero-cine .plate__versefoot,
html.hero-cine .plate .witness,
html.hero-cine .plate__sub,
html.hero-cine .plate__when,
html.hero-cine .plate .prereg,
html.hero-cine .plate .roll,
html.hero-cine .plate .arsenal,
html.hero-cine .plate .scroll-cue { opacity: 0; }
/* the nav arrives with the take's last beat — visibility too, so a tap can't
   land on an invisible button (the tap itself completes the take instantly) */
html.hero-cine .topnav { opacity: 0; visibility: hidden; }

/* ═══ the boot: the Codex wakes up before the library appears ═══
   Built and removed by library.js, so a no-JS visitor never sees a black screen.
   Decorative: the real headline is in the HTML, and this is aria-hidden. */
/* ═══ the cold open: the frame runs as a console, then powers off like a CRT ═══ */

/* the scrim: everything but the console goes dark until the intro is answered */
.boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
}
/* the console and the embers behind it both sit above the scrim */
html.hero-ask .plate__frame { z-index: 201; min-height: min(62vh, 470px); }
html.hero-ask .embers { z-index: 201; }

.boot__skip {
  position: fixed;
  z-index: 401;   /* above the boot-raised plate (300), always tappable */
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: none;
  border: 0;
  color: var(--ink-faint);
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 0.7rem 1rem;
  cursor: pointer;
  transition: color 0.15s ease;
  touch-action: none;   /* a hold must not turn into a page scroll */
  -webkit-user-select: none;
  user-select: none;
}
.boot__skip:hover { color: var(--brass); }
.boot__skip--holding { color: var(--brass-lift); }
/* the hold ring: fills clockwise over the 2-second hold */
.boot__ring {
  --p: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: conic-gradient(var(--brass-lift) calc(var(--p) * 1%), rgba(184, 148, 94, 0.22) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
}

/* while the console runs, the page behind the scrim must not scroll away */
html.hero-ask, html.hero-ask body { overflow: hidden; }

.term {
  position: absolute;
  inset: clamp(15px, 3.4vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
  overflow: hidden;
  text-align: left;
  font-family: 'Consolas', 'SF Mono', ui-monospace, monospace;
  font-size: clamp(0.9rem, 4vw, 0.95rem);
  line-height: 1.62;
  letter-spacing: 0.01em;
  color: var(--ink-bright);
  transform-origin: 50% 50%;
}
/* once the log overflows, the oldest lines fade as they roll off the top */
.term--rolled {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 3rem);
  mask-image: linear-gradient(180deg, transparent 0, #000 3rem);
}
.term__head { color: var(--brass); white-space: pre-wrap; }
.term__body { white-space: pre-wrap; }
/* the chat name tags: the Codex speaks in brass, you answer in plain ink */
.term__tag { color: var(--brass); font-weight: 700; }
.term__you { white-space: pre-wrap; color: var(--ink-bright); }
.term__you .term__tag { color: var(--ink-dim); font-weight: 400; }
.term__cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.02em;
  margin-left: 0.14em;
  vertical-align: -0.15em;
  background: var(--brass-lift);
  box-shadow: 0 0 14px rgba(211, 174, 118, 0.65);
}
@media (prefers-reduced-motion: no-preference) {
  .term__cursor { animation: bootcaret 1.05s steps(2, jump-none) infinite; }
  @keyframes bootcaret { 50% { opacity: 0; } }
}

/* the language check: each tongue reports in, then greets you */
.term__langs { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.term__lang { display: flex; align-items: baseline; gap: 0.6rem; width: 100%; }
.term__lang b { font-weight: 400; color: var(--ink-dim); flex: 0 0 auto; }
.term__dots {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--brass-faint);
  transform: translateY(-0.28em);
  min-width: 1.2rem;
}
.term__word { color: var(--ink-bright); flex: 0 0 auto; unicode-bidi: isolate; }
.term__gloss { color: var(--ink-dim); flex: 0 0 auto; }
.term__ok { color: var(--brass-lift); flex: 0 0 auto; }

.term__ask { display: flex; gap: 0.8rem; align-items: center; }
.term__btn {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(0.66rem, 2.6vw, 0.72rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass-lift);
  background: var(--brass-ghost);
  border: 1px solid var(--brass-faint);
  padding: 0.72rem 1.5rem 0.7rem;
  padding-left: calc(1.5rem + 0.24em);
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.term__btn:hover:not(:disabled) {
  color: var(--ink-bright);
  border-color: var(--brass);
  background: rgba(184, 148, 94, 0.16);
}
.term__btn:disabled { cursor: default; }
.term__reply {
  white-space: pre-wrap;
  color: var(--brass-lift);
  text-shadow: 0 0 24px rgba(211, 174, 118, 0.35);
}
.term__reply--err { color: #d98b6a; text-shadow: 0 0 24px rgba(217, 139, 106, 0.3); }

/* the wrath sequence: the sentence, typed slow, in judgment red — and the
   letters won't hold still (v154): a chromatic stutter while sentence is passed */
.term__purge {
  white-space: pre-wrap;
  font-size: 1.3em;
  letter-spacing: 0.26em;
  color: #e05a40;
  text-shadow: 0 0 26px rgba(224, 90, 64, 0.6);
}
@media (prefers-reduced-motion: no-preference) {
  /* only while judgment holds the frame — the moment grace drains the red,
     the letters hold still (the line lives on in the rolling log) */
  .plate__frame.wrath .term__purge { animation: purgeflicker 0.34s steps(2, jump-none) infinite; }
  @keyframes purgeflicker {
    0% { text-shadow: -1px 0 rgba(255, 120, 90, 0.55), 1px 0 rgba(140, 20, 8, 0.7), 0 0 26px rgba(224, 90, 64, 0.6); }
    100% { text-shadow: 1px 0 rgba(255, 120, 90, 0.4), -1px 0 rgba(140, 20, 8, 0.55), 0 0 30px rgba(224, 90, 64, 0.7); }
  }
}

/* the CRT power-off: the picture collapses to a line, the line to a dot */
.crt {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.crt > * { grid-area: 1 / 1; }   /* the line and the dedication share the center */
/* the dedication: a near-subliminal ghost riding the white light of the power-off */
.crt__heart {
  opacity: 0;
  font-family: var(--display);
  font-size: clamp(0.58rem, 1.9vw, 0.7rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-indent: 0.34em;            /* recenters the tracked text */
  color: #fff6e0;                 /* the same warm white as the dying scanline */
  text-shadow: 0 0 12px rgba(255, 240, 210, 0.55);
  transform: translateY(-1.7em);  /* hovers just above the collapsing line */
}
.crt__heart b { font-weight: 400; }
.crt__line {
  width: 100%;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #fff6e0 12%, #fff 50%, #fff6e0 88%, transparent);
  box-shadow: 0 0 26px 6px rgba(255, 235, 190, 0.75);
  transform-origin: 50% 50%;
}

/* The frame hangs like a framed painting: a double gold frame — hairline, black mat,
   hairline — over the art's own black ground. Before the painting loads, this same
   frame is the console the intro runs inside. */
.plate__frame {
  width: min(960px, 100%);
  padding: clamp(5px, 1.1vw, 10px);
  background: #010000;
  border: 1px solid var(--brass-dim);
  outline: 1px solid var(--brass-faint);
  outline-offset: 4px;
  box-shadow: 0 18px 50px var(--shadow), 0 0 80px -24px rgba(184, 148, 94, 0.35);
  position: relative;
  overflow: hidden;
  /* the drain back to gold runs SLOW on purpose (v154): grace takes its time —
     the bleed-in overrides this to strike fast below */
  transition: background 1.5s ease, border-color 1.5s ease,
              outline-color 1.5s ease, box-shadow 1.5s ease;
}
/* the heresy override: judgment washes the whole console red — fast in, and the
   vignette PULSES like a klaxon while the sentence is read */
.plate__frame.wrath {
  background: #170302;
  border-color: #93362a;
  outline-color: rgba(224, 90, 64, 0.4);
  box-shadow: 0 18px 50px var(--shadow), 0 0 90px -18px rgba(207, 62, 38, 0.55),
              inset 0 0 110px rgba(170, 40, 22, 0.3);
  transition-duration: 0.45s;
}
@media (prefers-reduced-motion: no-preference) {
  .plate__frame.wrath { animation: wrathpulse 1.4s ease-in-out 0.45s infinite; }
  @keyframes wrathpulse {
    0%, 100% {
      box-shadow: 0 18px 50px var(--shadow), 0 0 90px -18px rgba(207, 62, 38, 0.55),
                  inset 0 0 110px rgba(170, 40, 22, 0.3);
    }
    50% {
      box-shadow: 0 18px 50px var(--shadow), 0 0 130px -14px rgba(207, 62, 38, 0.8),
                  inset 0 0 160px rgba(170, 40, 22, 0.46);
    }
  }
}
.plate__logo { margin: 0; line-height: 0; }
.plate__logo img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--brass-faint);
}
/* every so often the lantern beam sweeps the framed painting */
@media (prefers-reduced-motion: no-preference) {
  .plate__frame::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 246, 214, 0.1) 50%, transparent 62%);
    transform: translateX(-140%);
    animation: logo-sweep 9s ease-in-out 2.4s infinite;
  }
  @keyframes logo-sweep {
    0% { transform: translateX(-140%); }
    24% { transform: translateX(140%); }
    100% { transform: translateX(140%); }
  }
}

/* The verse IS the headline — set as an inscription, not a pull quote.
   Cinzel proper, not Decorative: Decorative's swash caps overlap (TH/OO read as typos).
   The gilding rides the SPANS (one per phrase) so the GSAP take can pour gold into each
   phrase independently without breaking the background-clip. */
.plate__verse {
  margin: 2.6rem auto 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  position: relative;
  isolation: isolate;   /* lets the halo sit behind the text but above the plate */
}
/* the halo: a shaft of lantern light falls on the inscription */
.plate__verse::before {
  content: '';
  position: absolute;
  inset: -34% -18%;
  background: radial-gradient(50% 60% at 50% 46%, rgba(211, 174, 118, 0.13), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.plate__verse p {
  margin: 0;
  font-family: var(--display);
  color: var(--brass-lift);
}
/* each phrase owns its own line — an inscription is carved in lines, not ragged.
   The gold is two layers: the pour, and a sheen band that sweeps the thunder line. */
.plate__verse p span {
  display: block;
  background:
    linear-gradient(115deg, transparent 44%, rgba(255, 247, 224, 0.85) 50%, transparent 56%)
      no-repeat -180% 0 / 220% 100%,
    linear-gradient(180deg, #f7ead0 6%, #d3ae76 55%, #a5834f 96%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* the epitaph line: small, tracked wide, held between two gilded rules */
.plate__v1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  font-weight: 400;
  font-size: clamp(0.98rem, 3.8vw, 1.45rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em;   /* recenter: tracking adds a trailing gap */
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.plate__v1::before,
.plate__v1::after {
  content: '';
  flex: 1 1 1.5rem;
  max-width: 5.2rem;
  height: 1px;
}
.plate__v1::before { background: linear-gradient(90deg, transparent, var(--brass-faint)); }
.plate__v1::after { background: linear-gradient(90deg, var(--brass-faint), transparent); }
/* the thunder line: bigger, blooming, and every so often the gold catches the light */
.plate__v2 {
  font-weight: 700;
  font-size: clamp(2.7rem, 11.5vw, 5.4rem);
  letter-spacing: 0.015em;
  line-height: 1.03;
  filter: drop-shadow(0 10px 34px rgba(184, 148, 94, 0.24));
}
@media (prefers-reduced-motion: no-preference) {
  /* gated behind curtain-on (set when the entrance take is DONE): a running CSS
     animation beats inline styles, so starting earlier would pin the sheen layer's
     background-position and silently override GSAP's gold pour on this very line */
  html.curtain-on .plate__v2 { animation: versesheen 9s ease-in-out 3.5s infinite; }
  @keyframes versesheen {
    0%, 52% { background-position: -180% 0, 0 0; }
    76%, 100% { background-position: 280% 0, 0 0; }
  }
}
.plate__versefoot {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.4rem;
  width: min(430px, 100%);
  margin-left: auto;
  margin-right: auto;
}
.plate__versefoot .plate__rule { flex: 1 1 auto; }
.plate__verse cite {
  flex: 0 0 auto;
  font-family: var(--display);
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass-dim);
  padding-left: 0.3em;
  white-space: nowrap;
}

/* ═══ the cloud of witnesses: the dead who yet speak, one name at a time.
   No drawn cloud, no mist (both rejected — a shape behind the name was the
   mistake): the hero is an epitaph, so each name is set the way a memorial
   sets one. Inscribed large in the gold, dates beneath, nothing around it. ═══ */
.witness {
  margin: 3rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.05rem;
}
/* the cloud is a door (JS grants role="link"): the pointer + a warmer glow are the
   whole affordance — the locked hero gains no new text, no new geometry */
.witness[role='link'] { cursor: pointer; }
.witness[role='link']:hover .witness__row b,
.witness[role='link']:focus-visible .witness__row b {
  filter: drop-shadow(0 6px 30px rgba(211, 174, 118, 0.5));
}
.witness[role='link']:focus-visible { outline: 1px solid var(--brass); outline-offset: 6px; }
.witness__lab {
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  padding-left: 0.34em;
  color: var(--ink-faint);
}
.witness__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--display);
  transition: opacity 0.34s ease, filter 0.34s ease;
  min-height: 4.1em;     /* the inscription never jumps as names change */
}
.witness__row b {
  font-weight: 700;
  font-size: clamp(1.5rem, 5.8vw, 2.1rem);
  line-height: 1;
  letter-spacing: 0.2em;
  padding-left: 0.2em;   /* recenter: tracking hangs off the last glyph */
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, #eedcb6 8%, var(--brass-lift) 46%, var(--brass) 72%, #8a6f3f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 26px rgba(211, 174, 118, 0.22));
  transition: letter-spacing 1.1s cubic-bezier(0.16, 0.7, 0.2, 1);
}
.witness__row i {
  font-style: normal;
  font-size: clamp(0.6rem, 1.9vw, 0.7rem);
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  color: var(--ink-dim);
  white-space: nowrap;
}

.plate__sub {
  max-width: 40ch;
  margin: 1.8rem auto 0;
  color: var(--ink);
  font-family: var(--accent);
  font-size: clamp(1.32rem, 3.9vw, 1.62rem);
  line-height: 1.5;
  text-wrap: balance;
}
/* the aside steps back a half-voice — the ages before her, in a whisper */
.plate__sub-line {
  display: block;
  font-style: italic;
  font-size: 0.86em;
  color: var(--ink-dim);
}
.plate__sub b { color: var(--brass-lift); font-weight: 600; }

/* the date, set like a title card: a gilded rule and a gem above and below */
.plate__when {
  margin: 2.8rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  /* wide enough that the date never wraps — at 460px, desktop's 1.7rem
     tracking-spread line split in two under text-wrap: balance */
  width: min(620px, 100%);
}
.plate__rule {
  width: 100%;
  height: 7px;
  background:
    radial-gradient(3.5px 3.5px at 50% 50%, var(--brass) 55%, transparent 60%),
    linear-gradient(90deg, transparent, var(--brass-faint) 22%, var(--brass-faint) 78%, transparent) center/100% 1px no-repeat;
  background-repeat: no-repeat;
}
.plate__date {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.15rem, 3.8vw, 1.7rem);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  /* moonlight among the gold (v154, Trevor's call): the date is the one line
     on the monument that glows WHITE — everything around it is brass, so the
     when stands apart from the what */
  color: var(--ink-bright);
  padding-left: 0.3em; /* recenter: tracking adds a trailing gap */
  text-shadow: 0 0 22px rgba(248, 241, 226, 0.5), 0 0 64px rgba(248, 241, 226, 0.2);
  text-wrap: balance;
  line-height: 1.3;
}

/* ═══ the arsenal: a swipable rail of every count in the armory ═══ */
.arsenal { width: min(1060px, 100%); margin: 3.2rem 0 0; }
.arsenal__cap {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  justify-content: center;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1.1rem;
  padding-left: 0.34em;
  white-space: nowrap;
}
.arsenal__rule { flex: 0 1 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--brass-faint)); }
.arsenal__rule:last-child { background: linear-gradient(90deg, var(--brass-faint), transparent); }
/* The armory: on phones a flat snap rail — identical cards, swipe or arrow through
   them, the one nearest center wears the sheen, the edges feather out. On a big
   screen with a mouse, library.js upgrades it to the carousel WHEEL: cards standing
   on an invisible ring, the far side showing its card backs as it turns. */
.arsenal__wrap {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.arsenal__wrap.has-wheel {
  perspective: 1250px;
  -webkit-mask-image: none;
  mask-image: none;
}
.arsenal__scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 14px calc(50% - 118px);
}
.arsenal__scroll::-webkit-scrollbar { display: none; }
.arsenal__scroll.is-wheel {
  display: block;
  position: relative;
  height: 250px;
  overflow: visible;
  padding: 0;
  transform-style: preserve-3d;
  will-change: transform;      /* its own layer: the curtain flip can't re-rasterize the ring */
  cursor: grab;
  touch-action: pan-y;         /* horizontal drags spin; vertical still scrolls the page */
  user-select: none;
}
.arsenal__scroll.is-wheel.dragging { cursor: grabbing; }
.is-wheel .stat {
  position: absolute;
  left: 50%; top: 50%;
  margin: -97px 0 0 -118px;
  height: 194px;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.is-wheel .stat__front,
.stat__back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.is-wheel .stat__front {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
/* the card back: what the far side of the wheel shows you */
.stat__back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background:
    radial-gradient(90% 90% at 50% 50%, var(--brass-ghost), transparent 70%),
    var(--bg-panel);
  box-shadow: inset 0 0 0 3px var(--bg-panel), inset 0 0 0 4px var(--brass-faint);
}
.stat__back span { color: var(--brass); font-size: 1.5rem; text-shadow: 0 0 16px rgba(184, 148, 94, 0.6); }
.stat__back i {
  font-family: var(--display);
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brass-dim);
  padding-left: 0.34em;
}
.stat {
  flex: 0 0 auto;
  width: 236px;
  min-height: 168px;
  scroll-snap-align: center;
  border: 1px solid var(--brass-faint);
  background:
    linear-gradient(155deg, rgba(255, 244, 214, 0.1) 0%, transparent 34%),
    radial-gradient(140% 120% at 50% 0%, var(--brass-ghost), transparent 62%),
    var(--bg-raise);
  box-shadow: inset 0 0 0 3px var(--bg-raise), inset 0 0 0 4px var(--brass-faint),
    0 12px 30px var(--shadow);
  padding: 1.55rem 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}
/* the pack sheen: a diagonal light that only the centered card wears */
.stat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 246, 220, 0.13) 46%, transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.stat.is-center {
  border-color: var(--brass);
  box-shadow: inset 0 0 0 3px var(--bg-raise), inset 0 0 0 4px var(--brass-faint),
    0 12px 30px var(--shadow), 0 0 36px -6px rgba(211, 174, 118, 0.4);
}
.stat.is-center::after { opacity: 1; }
.stat__n {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 1.85rem);
  color: var(--brass-lift);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.05;
  white-space: nowrap;
}
.stat__l {
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.stat__s { color: var(--ink-dim); font-size: 0.9rem; line-height: 1.4; font-style: italic; }
.arsenal__hint {
  margin: 1rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--ink-dim);
  font-size: 0.86rem;
  font-style: italic;
}
.arsenal__spin {
  background: none;
  border: 0;
  padding: 0.4rem 0.2rem;
  cursor: pointer;
  color: var(--brass);
  display: grid;
  place-items: center;
}
.arsenal__spin svg { width: 34px; height: 12px; }
.arsenal__spin path { stroke: currentColor; stroke-width: 1.6; }
.arsenal__spin--r svg { transform: scaleX(-1); }
.arsenal__spin:hover { color: var(--brass-lift); }
@media (prefers-reduced-motion: no-preference) {
  .arsenal__spin svg { animation: beckon 2.2s ease-in-out infinite; }
  .arsenal__spin--r svg { animation-name: beckon-r; }
  @keyframes beckon { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
  @keyframes beckon-r { 0%, 100% { transform: scaleX(-1) translateX(0); } 50% { transform: scaleX(-1) translateX(-4px); } }
}

.scroll-cue {
  margin-top: 3rem;
  color: var(--ink-faint);
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
}
.scroll-cue:hover { color: var(--brass); }
.scroll-cue span { font-size: 1rem; letter-spacing: 0; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none; } }

/* ═══ the acts ═══ */

/* (2026-07-11, Trevor's call: the .fdiv seam ornaments and the "no per-act hue" rule
   were RETIRED together — the curtain's crest is now the one seam, and each room
   carries a whisper of its own candlelight. Supersedes the 2026-07-09 decision.) */
/* ═══ THE ROOMS: each act is a raised panel that rides up and COVERS the one
   before it (the curtain — pinned by ScrollTrigger in library.js). The crest
   (hairline + gem) is the panel's carved top edge, so no painted seam exists
   anywhere; each room's candlelight blooms from black BELOW the crest. ═══ */
.act {
  padding: 6rem 1.5rem 5.5rem;
  position: relative;
  border-radius: 26px 26px 0 0;
  background: var(--bg);
  box-shadow: 0 -36px 80px rgba(0, 0, 0, 0.62);
  /* each room's identity rides these (numeral gilding, epigraph cite, veil tint) */
  --act-hue: 201, 168, 76;
  --act-hue-hi: 240, 220, 170;
}
/* the crest hairline */
.act::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 3%, var(--brass-faint) 20%, var(--brass-dim) 50%,
    var(--brass-faint) 80%, transparent 97%);
}
/* the gem, set on the line like a clasp — its GLOW takes the room's hue (v145);
   the metal stays brass. Same rule everywhere, the hue var does the walking. */
.act::after {
  content: '';
  position: absolute;
  top: -5px; left: 50%;
  width: 9px; height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--bg);
  border: 1px solid var(--brass-dim);
  box-shadow: 0 0 14px rgba(var(--act-hue), 0.5);
}
/* each room's own candlelight — amplified v145 (≈1.5×): present, still never a poster */
.act--scale   { background: radial-gradient(90% 55% at 50% 14%, rgba(201, 168, 76, 0.105), transparent 62%), var(--bg); }
.act--mind {
  --act-hue: 104, 122, 198; --act-hue-hi: 172, 186, 235;
  /* v148: the blue reaches further down the room + a second pool behind the
     duel/flex line, so the act head doesn't sit on bare black (Trevor's note) */
  background:
    radial-gradient(90% 70% at 12% 10%, rgba(104, 122, 198, 0.13), transparent 66%),
    radial-gradient(72% 46% at 78% 30%, rgba(104, 122, 198, 0.07), transparent 62%),
    var(--bg);
}
/* the engine room runs violet — the one royal hue no other room wears */
.act--engines {
  --act-hue: 139, 104, 210; --act-hue-hi: 190, 168, 235;
  background:
    radial-gradient(80% 50% at 88% 10%, rgba(139, 104, 210, 0.14), transparent 65%),
    radial-gradient(70% 45% at 6% 72%, rgba(139, 104, 210, 0.075), transparent 60%),
    var(--bg);
}
.act--arena {
  --act-hue: 198, 74, 52; --act-hue-hi: 235, 148, 118;
  background: radial-gradient(90% 60% at 85% 16%, rgba(198, 74, 52, 0.10), transparent 60%), var(--bg);
}
.act--yours {
  --act-hue: 231, 196, 156; --act-hue-hi: 244, 224, 196;
  /* hearthlight (v154, Trevor: "background is bleak"): candleglow falling on the
     gathering from above, a hearth banked low behind the prayer wall, and a warm
     floor the whole room stands on — a lived-in fellowship hall, not a void.
     v155: nudged from parchment toward hearth COPPER to match the room's accent. */
  background:
    radial-gradient(64% 34% at 50% 3%, rgba(231, 196, 156, 0.1), transparent 62%),
    radial-gradient(46% 30% at 12% 46%, rgba(231, 196, 156, 0.05), transparent 60%),
    radial-gradient(50% 32% at 88% 68%, rgba(226, 168, 106, 0.075), transparent 62%),
    radial-gradient(80% 55% at 50% 100%, rgba(231, 196, 156, 0.12), transparent 62%),
    var(--bg);
}
.act--prereg  {
  /* v148: its own light — a soft shaft falling from above onto the register,
     gold ink settling at the floor (was bare black like the lamp + nerd rooms) */
  background:
    radial-gradient(44% 54% at 50% 0%, rgba(240, 205, 130, 0.09), transparent 64%),
    linear-gradient(180deg, rgba(201, 168, 76, 0.035), transparent 22%),
    radial-gradient(110% 44% at 50% 108%, rgba(120, 94, 46, 0.1), transparent 62%),
    var(--bg);
  padding-bottom: 6.5rem;
}
/* ═══ the room accents (v154): each act redefines the SEMANTIC --acc family to its
   own hue, and every touchpoint already styled on --acc (eyebrows, flourish gems,
   mindcard marks, law icons, the ladder's boss row, the conviction meter, the
   placard rubrics, the integrity band's wash) inherits its room's color for free.
   Gold stays the frame — body text, borders, and the brand marks never change;
   only the room's ACCENTS breathe its hue. The scale + prereg rooms deliberately
   keep pure brass (the anchor and the ceremony are gold by design). The lifted
   values run brighter than the --act-hue glows behind them: small-caps eyebrows
   at 0.66rem need the luminance. */
.act--mind {
  --acc: #8a97d4;
  --acc-lift: #b9c3ec;
  --acc-soft: rgba(138, 151, 212, 0.4);
  --acc-ghost: rgba(104, 122, 198, 0.08);
  --acc-faint: rgba(138, 151, 212, 0.26);
}
.act--engines {
  --acc: #a184d9;
  --acc-lift: #c9b6ec;
  --acc-soft: rgba(161, 132, 217, 0.4);
  --acc-ghost: rgba(139, 104, 210, 0.08);
  --acc-faint: rgba(161, 132, 217, 0.26);
}
.act--arena {
  --acc: #cf6a4c;
  --acc-lift: #ee9a7c;
  --acc-soft: rgba(207, 106, 76, 0.42);
  --acc-ghost: rgba(198, 74, 52, 0.09);
  --acc-faint: rgba(207, 106, 76, 0.28);
}
/* v155 (Trevor: "weave in more colors — the gold is too uniform"): the back half gets
   real hue separation. The congregation warms to HEARTH COPPER (a lived-in fire, not
   parchment-gold), the engine room's accent joins its own phosphor signal, the lamp
   deepens to true flame. Prereg stays pure gold on purpose (the ceremony) — its color
   note is now the red wax of the TCM seal. */
.act--yours {
  --acc: #dfa678;
  --acc-lift: #f2c9a2;
  --acc-soft: rgba(223, 166, 120, 0.42);
  --acc-ghost: rgba(223, 166, 120, 0.07);
  --acc-faint: rgba(223, 166, 120, 0.28);
}
.act--nerd {
  --acc: #7cc494;
  --acc-lift: #a8e6c0;
  --acc-soft: rgba(124, 196, 148, 0.4);
  --acc-ghost: rgba(111, 195, 137, 0.07);
  --acc-faint: rgba(124, 196, 148, 0.26);
}
.act--lamp {
  --acc: #e2924a;
  --acc-lift: #f6bd80;
  --acc-soft: rgba(226, 146, 74, 0.42);
  --acc-ghost: rgba(226, 146, 74, 0.07);
  --acc-faint: rgba(226, 146, 74, 0.26);
}
/* The cover order: later rooms ride over earlier ones. The z ladder only bites
   on POSITIONED elements — the .room-stick sticky (added by armCurtain) provides
   that for every room but the last; the last act gets relative below so its z
   still beats the stuck lamp behind it. Descendant selectors kept on purpose. */
/* THE CURTAIN, natively (v129): each room holds still the moment its bottom
   meets the viewport's bottom, and the next room rides over it in ordinary
   flow — position:sticky, the same craft the doors and the turn already use.
   The browser owns the math, so a mid-page height change never breaks a pin
   and never needs a full-page re-measure (the old JS pins froze their numbers
   at arm time; every tap that grew a card cost two ~200ms refreshes). */
/* no inset here: rooms are TALLER than the viewport, so "hold once fully
   scrolled" needs top = viewport − room height, a per-room number armCurtain
   sets inline and the ResizeObserver keeps current (bottom:0 would be the
   sticky-FOOTER behavior — it pulls rooms up early; verified the hard way) */
/* #view-home so this outranks the z-ladder's `#view-home .plate { position: relative }`
   below (an ID selector beats html.class .class). Relative + the inline sticky `top`
   armCurtain writes = the whole hero shifted 1.4 viewports UP out of the page: the
   logo/verse/witnesses unreachable above scroll 0, dead black runway after the armory.
   The plate keeps its relative for the hero-ask phase (z:300 over the boot scrim). */
html.curtain-on #view-home .room-stick { position: sticky; }
html.curtain-on .act--prereg { position: relative; }
/* the veil: each covered room dims under the room riding over it — a paint-over,
   never an opacity fade on the room itself (see-through rooms ghost). armCurtain
   builds one per covered room and drives its opacity from live scroll position. */
.curtain__veil {
  position: absolute;
  inset: 0;
  z-index: 999;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
}
#view-home .plate       { position: relative; z-index: 1; }
#view-home .act--scale  { z-index: 2; }
#view-home .act--mind   { z-index: 3; }
#view-home .act--engines{ z-index: 4; }
#view-home .act--arena  { z-index: 5; }
#view-home .act--yours  { z-index: 6; }
#view-home .act--nerd   { z-index: 7; }
#view-home .act--lamp   { z-index: 8; }
#view-home .act--prereg { z-index: 9; }
#view-home .foot        { position: relative; z-index: 10; background: var(--bg); }
/* breathing room before the first curtain: the armory needs its time on stage
   before Act II rides in (only when the curtain is actually armed) */
html.curtain-on .plate { padding-bottom: min(36vh, 360px); }
/* and the same runway before EVERY curtain: a room's last words must be read
   in peace before the next room rides over them. The final room never pins,
   so it keeps its own natural padding. */
html.curtain-on .act:not(.act--prereg) { padding-bottom: min(30vh, 320px); }
/* the mind's last block (the honest rules) runs tall — the engines curtain
   was arriving mid-read (Trevor, 2026-07-11); give this room a longer runway */
/* .act.act--mind, NOT bare .act--mind: the generic rule above carries
   :not(.act--prereg), which counts as a class and OUTWEIGHS a single-class
   override — the longer mind runway (v118's 46vh and today's 64vh) never
   actually applied until this selector matched its specificity */
html.curtain-on .act.act--mind { padding-bottom: min(64vh, 660px); }
/* during the boot the whole plate must ride ABOVE the scrim — its z-index:1 above
   otherwise creates a stacking context that traps the console's 201 underneath.
   And everything in it except the console goes pointer-inert: the plate's hidden
   children (opacity 0, still hit-testable) would otherwise swallow taps meant for
   the Hold-to-skip button underneath them. */
html.hero-ask #view-home .plate { z-index: 300; }
html.hero-ask #view-home .plate > :not(#frame) { pointer-events: none; }

.act__inner { width: min(1060px, 100%); margin: 0 auto; }

.act__head { text-align: center; margin-bottom: 3.2rem; position: relative; z-index: 0; }
/* the threshold numeral (v145): each act wears its chapter mark, huge and GILDED
   in the room's own hue — a vertical pour of light through the glyph, still air */
.act__head[data-num]::before {
  content: attr(data-num);
  position: absolute;
  left: 50%;
  top: -0.55em;
  transform: translateX(-50%);
  font-family: var(--display); /* Cinzel proper: Decorative's swash I's turn "II" into "TT" */
  font-weight: 700;
  font-size: clamp(6.5rem, 19vw, 11rem);
  line-height: 1;
  background: linear-gradient(to bottom, rgba(var(--act-hue-hi), 0.5), rgba(var(--act-hue), 0.14) 82%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.26;
  pointer-events: none;
  z-index: -1;
}
/* the chapter mark catches the lantern light as its room arrives */
@media (prefers-reduced-motion: no-preference) {
  html.js .act__head[data-num].in::before { animation: numbloom 2.6s ease 0.3s; }
  @keyframes numbloom {
    0%, 100% { opacity: 0.26; }
    28% { opacity: 0.48; }
  }
}
/* the threshold epigraph: one line of scripture states the act's thesis */
.act__epi {
  margin: 1.15rem auto 0;
  max-width: 48ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink-dim);
  text-wrap: pretty;
}
.act__epi cite {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--display);
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(var(--act-hue-hi), 0.62);
}
/* the act's name-plate ticks catch the room's hue too — accent-level, nothing louder */
.act__head .eyebrow { color: rgba(var(--act-hue-hi), 0.78); }
.act__head--tight { margin-bottom: 2.2rem; padding: 0 1.5rem; }
.act__head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  margin: 0.9rem 0 0.5rem;
  letter-spacing: 0.02em;
  color: var(--ink-bright);
  text-wrap: balance;
}
.act__lede {
  color: var(--ink);
  max-width: 56ch;
  margin: 0.9rem auto 0;
  font-size: 1.14rem;
  text-wrap: pretty;
}

/* ═══ ACT II — the scale ═══ */

.biblebar { margin: 0 0 3.4rem; }
.biblebar__cap {
  display: flex;
  justify-content: space-between;
  /* baseline, not stretch: the right label carries a larger <b>, and without
     this its smaller words rode lower than the left label on phones (v154) */
  align-items: baseline;
  gap: 1rem;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.6rem;
}
.biblebar__cap b { color: var(--brass-lift); font-weight: 700; font-size: 0.86rem; }
.biblebar__cap span { white-space: nowrap; }
/* the punchline waits for the bar to finish drawing, then lands */
.biblebar__note {
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--ink-dim);
}
.biblebar__note b { color: var(--ink-bright); }
html.js .biblebar__note { opacity: 0; transition: opacity 1.1s ease 2.6s; }
html.js .biblebar.in .biblebar__note { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html.js .biblebar__note { opacity: 1; transition: none; }
}
.biblebar__track {
  position: relative;
  height: 20px;
  border: 1px solid var(--brass-faint);
  background: var(--bg-panel);
  display: flex;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}
/* 1 part in 741: the Bible's sliver still gets a visible, honest tick */
.biblebar__bible {
  flex: 0 0 max(0.135%, 3px);
  background: var(--ink-bright);
}
.biblebar__lib {
  flex: 1;
  background: linear-gradient(90deg, var(--brass-dim), var(--brass) 55%, var(--brass-lift));
  transform-origin: left center;
  position: relative;
  overflow: hidden;
}
html.js .biblebar__lib { transform: scaleX(0); transition: transform 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; }
html.js .in .biblebar__lib, html.js .biblebar.in .biblebar__lib { transform: none; }
/* a light runs the length of the bar after it lands */
.biblebar__lib::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 248, 224, 0.55) 50%, transparent 70%);
  transform: translateX(-110%);
}
html.js .in .biblebar__lib::after, html.js .biblebar.in .biblebar__lib::after {
  animation: barshine 1.6s ease 2.5s forwards;
}
@keyframes barshine { to { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) {
  html.js .biblebar__lib { transform: none; transition: none; }
  html.js .biblebar__lib::after { animation: none !important; }
}

/* ═══ the Goliath measure ═══ */
.goliath {
  margin: 0 0 3.4rem;
  display: grid;
  grid-template-columns: minmax(150px, 4fr) minmax(0, 8fr);
  gap: 2.4rem;
  align-items: end;
  border: 1px solid var(--rule);
  background:
    radial-gradient(120% 100% at 50% 100%, var(--brass-ghost), transparent 60%),
    var(--bg-raise);
  padding: 2.2rem clamp(1.2rem, 4vw, 2.6rem) 2rem;
}
@media (max-width: 640px) { .goliath { grid-template-columns: 1fr; justify-items: center; gap: 1.8rem; } }
.goliath__unit { display: flex; justify-content: center; }
.goliath__man { display: flex; align-items: stretch; gap: 0.9rem; }
.goliath__big { width: 118px; height: 170px; fill: var(--brass); filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5)); }
.goliath__measure {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 11px;
  /* the measure spans the figure only (the svg bottom is his feet) */
  margin: 2px 0 8px;
}
.goliath__cap-top, .goliath__cap-bot { width: 11px; height: 1px; background: var(--brass); flex: none; }
.goliath__line { flex: 1; width: 1px; background: linear-gradient(180deg, var(--brass), var(--brass-dim)); }
.goliath__height {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
}
.goliath__height b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--brass-lift);
  line-height: 1;
}
.goliath__height span { color: var(--ink-dim); font-size: 0.86rem; font-style: italic; line-height: 1.3; }
.goliath__height .goliath__ref {
  font-family: var(--display);
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: 0.2rem;
}
.goliath__ranks { min-width: 0; width: 100%; }
.goliath__lede { margin: 0 0 0.9rem; color: var(--ink); font-size: 1.08rem; }
.goliath__row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  border-bottom: 1px solid var(--brass-faint);
  padding-bottom: 2px;
}
.goliath__row svg {
  width: calc(100% / 14);
  min-width: 22px;
  height: auto;
  aspect-ratio: 70 / 100;
  fill: var(--brass-dim);
  opacity: 0;
  transform: translateY(8px);
}
html.js .goliath.in .goliath__row svg {
  animation: gr 0.45s ease forwards;
  animation-delay: calc(var(--i) * 70ms);
}
html:not(.js) .goliath__row svg, html.js .goliath__row svg.now { opacity: 1; transform: none; }
@keyframes gr { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .goliath__row svg { opacity: 1 !important; transform: none !important; animation: none !important; }
}
.goliath__row svg:nth-child(4n) { fill: var(--brass); }
.goliath__tally {
  margin: 0.9rem 0 0;
  color: var(--ink);
  font-size: 1.08rem;
}
.goliath__tally b {
  font-family: var(--display);
  color: var(--brass-lift);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.4rem 2.6rem;
  text-align: left;
}
.fact {
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1.55;
  margin: 0;
}
.fact::before {
  content: '✦';
  color: var(--brass);
  font-size: 0.62rem;
  flex: none;
  transform: translateY(-2px);
}
.fact b { font-family: var(--display); color: var(--brass-lift); font-size: 1.02em; }
.fact--turn span { font-style: italic; }
.fact--turn b { color: var(--brass-lift); }
/* each fact strikes its own match: staggered arrival, the star igniting */
html.js .facts .fact:nth-child(2) { transition-delay: 0.14s; }
html.js .facts .fact:nth-child(3) { transition-delay: 0.28s; }
html.js .facts .fact:nth-child(4) { transition-delay: 0.42s; }
@media (prefers-reduced-motion: no-preference) {
  html.js .fact::before {
    transition: transform 0.8s cubic-bezier(0.3, 1.6, 0.4, 1) 0.55s, text-shadow 0.8s ease 0.55s;
  }
  html.js .fact[data-reveal]:not(.in)::before { transform: scale(0.15) translateY(-2px); }
  html.js .fact.in::before { text-shadow: 0 0 14px rgba(211, 174, 118, 0.9); }
}

/* ═══ ACT III — the mind ═══ */

.mind {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 1.4rem;
  margin-bottom: 3.4rem;
}
.mindcard {
  border: 1px solid var(--rule);
  /* the room's own light in the wash (v154) — was brass-ghost like every other box */
  background: linear-gradient(160deg, var(--acc-ghost), transparent 45%), var(--bg-raise);
  padding: 2rem 1.9rem 1.7rem;
  position: relative;
}
/* the ribbon: a hairline of the room's hue laid across the card's top edge,
   like a bookmark left in the box — the one colored thread on a gold frame */
.mindcard::before {
  content: '';
  position: absolute;
  top: -1px; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc-soft) 30%, var(--acc-soft) 70%, transparent);
  pointer-events: none;
}
.mindcard__mark {
  font-family: var(--deco);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--acc);
  line-height: 1;
  margin-bottom: 0.9rem;
  text-shadow: 0 0 24px var(--acc-soft);
}
.mindcard h3 {
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--ink-bright);
  margin: 0 0 0.7rem;
  letter-spacing: 0.02em;
}
.mindcard p { margin: 0 0 0.9rem; color: var(--ink); font-size: 1.02rem; text-wrap: pretty; }
.mindcard i { color: var(--ink); }
.mindcard__kick {
  font-style: italic;
  color: var(--brass-lift) !important;
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
  margin-bottom: 0 !important;
}

/* ── the ask demo: one exchange with the Codex, typed live ── */
.askdemo {
  max-width: 660px;
  margin: 0 auto 3.4rem;
  border: 1px solid var(--rule);
  background: var(--bg-panel);
  box-shadow: 0 18px 50px var(--shadow), 0 0 70px -28px rgba(104, 122, 198, 0.5);
}
.askdemo__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-raise);
}
.askdemo__bar span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--brass-faint);
}
.askdemo__bar i {
  margin-left: auto;
  font-family: var(--display);
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.askdemo__log {
  padding: 1.2rem 1.25rem 1.35rem;
  min-height: 15.5rem;
  font-size: 0.99rem;
  line-height: 1.6;
}
.askdemo__static { padding: 1.2rem 1.25rem; color: var(--ink); }
.askdemo__msg { margin: 0 0 0.85rem; color: var(--ink); overflow-wrap: break-word; }
.askdemo__msg:last-child { margin-bottom: 0; }
.askdemo__tag {
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-right: 0.45rem;
}
.askdemo__msg--you .askdemo__tag { color: var(--ink-dim); }
.askdemo__msg--codex .askdemo__tag { color: var(--brass-lift); }
.askdemo__msg--codex .askdemo__tag::before { content: '✦ '; }
.askdemo__msg b { color: var(--ink-bright); }
.askdemo__msg--status { color: var(--ink-faint); font-style: italic; }
.askdemo__msg--status .askdemo__dots::after {
  content: '…';
  animation: adDots 1.1s steps(4) infinite;
}
@keyframes adDots {
  0% { content: ''; } 25% { content: '·'; } 50% { content: '· ·'; } 75% { content: '· · ·'; }
}
.askdemo__bullet { display: block; padding-left: 1.1rem; position: relative; margin-top: 0.4rem; }
.askdemo__bullet::before {
  content: '✦';
  position: absolute;
  left: 0; top: 0.1em;
  font-size: 0.7em;
  color: var(--acc);
}
.askdemo__cites {
  margin-top: 0.8rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.askdemo__cites b { color: var(--ink-dim); font-weight: 600; }
.askdemo__caret {
  display: inline-block;
  width: 7px; height: 1em;
  vertical-align: text-bottom;
  background: var(--brass-lift);
  animation: adBlink 0.85s steps(1) infinite;
}
@keyframes adBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .askdemo__caret, .askdemo__msg--status .askdemo__dots::after { animation: none; }
}

/* ── the instant demo: the question types, the answer SNAPS — the absence of
   a thinking pause IS the message (contrast with the composed demo below) ── */
.instant {
  margin-top: 1.15rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.05rem;
}
.instant__q { margin: 0 0 0.7rem; color: var(--ink); font-size: 0.99rem; }
.instant__q i { font-style: normal; }
.instant__card {
  border: 1px solid var(--brass-faint);
  background: linear-gradient(160deg, var(--brass-ghost), transparent 50%), var(--bg-panel);
  padding: 1rem 1.1rem 0.95rem;
}
.instant__card[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .instant__card.snap { animation: inssnap 0.55s cubic-bezier(0.2, 1.4, 0.3, 1); }
  @keyframes inssnap {
    0% { transform: scale(0.94); box-shadow: 0 0 0 2px rgba(247, 234, 208, 0.65), 0 0 44px rgba(211, 174, 118, 0.5); }
    100% { transform: none; box-shadow: none; }
  }
  html.js .instant__card.snap .instant__covers img { animation: covpop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) backwards; }
  html.js .instant__card.snap .instant__covers img:nth-child(2) { animation-delay: 0.07s; }
  html.js .instant__card.snap .instant__covers img:nth-child(3) { animation-delay: 0.14s; }
  html.js .instant__card.snap .instant__covers img:nth-child(4) { animation-delay: 0.21s; }
  @keyframes covpop { from { opacity: 0; transform: translateY(9px) scale(0.82); } }
}
.instant__covers { display: flex; gap: 0.45rem; margin-bottom: 0.75rem; }
.instant__covers img {
  width: 46px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid var(--rule);
  box-shadow: 0 4px 10px var(--shadow);
}
.instant__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink-bright);
  margin: 0 0 0.15rem;
  letter-spacing: 0.03em;
}
.instant__n { margin: 0 0 0.6rem; color: var(--ink-dim); font-size: 0.92rem; }
.instant__n b { color: var(--brass-lift); }
.instant__stamp {
  margin: 0;
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
}

/* ── the ask demo: an /ask answer assembling itself — the deliberate opposite
   of the instant card's snap. This one searches, thinks, and then builds the
   answer piece by piece, the verify-seal pressing onto the quote last. ── */
.asklive {
  margin-top: 1.15rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.05rem;
}
/* the status rides ON TOP of the card's reserved space (the card is invisible
   while the engine "thinks"), so nothing on the page ever moves an inch */
.asklive__wrap { position: relative; }
.asklive__status {
  position: absolute;
  top: 0.1rem; left: 0; right: 0;
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.9rem;
}
.asklive__status[hidden] { display: none; }
.asklive__card {
  border: 1px solid var(--brass-faint);
  border-left: 3px solid var(--brass);
  background: linear-gradient(160deg, var(--brass-ghost), transparent 55%), var(--bg-panel);
  padding: 1.05rem 1.15rem 0.95rem;
}
.asklive__sum {
  margin: 0 0 0.75rem;
  font-family: var(--accent);
  font-size: 1.1rem;
  color: var(--ink-bright);
}
.asklive__pt {
  margin: 0 0 0.7rem;
  padding-left: 0.95rem;
  position: relative;
  font-size: 0.97rem;
  color: var(--ink);
}
.asklive__pt::before {
  content: '✦';
  position: absolute;
  left: 0; top: 0.1em;
  font-size: 0.6em;
  color: var(--brass);
}
.asklive__pt b { color: var(--brass-lift); }
.asklive__cite { color: var(--brass-dim); font-size: 0.85em; }
.asklive__quote {
  margin: 0.9rem 0 0.8rem;
  border-left: 2px solid var(--brass-dim);
  padding: 0.15rem 0 0.15rem 0.9rem;
  font-family: var(--accent);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-bright);
}
.asklive__quote p { margin: 0; }
.asklive__quote cite {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--display);
  font-style: normal;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-dim);
}
.asklive__gate {
  display: inline-block;
  margin-top: 0.55rem;
  font-family: var(--display);
  font-style: normal;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-lift);
  border: 1px solid var(--brass-faint);
  padding: 0.28em 0.6em 0.22em;
}
.asklive__cites {
  margin: 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
  color: var(--ink-dim);
}
.asklive__cites b { color: var(--brass-dim); font-weight: 400; }
/* the performance: JS adds .live to stage the assembly; without JS (or with
   reduced motion) everything above is already visible, finished */
/* visibility, NOT display: the hidden card must keep its height, because the
   curtain pins are measured against the page as it is at load — collapsing
   this card made every room below pin ~1300px early (IV arrived mid-Pagano) */
html.js .asklive--armed .asklive__card { visibility: hidden; }
html.js .asklive--armed .asklive__card.live { visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  html.js .asklive--armed .asklive__card.live .asklive__sum,
  html.js .asklive--armed .asklive__card.live .asklive__pt,
  html.js .asklive--armed .asklive__card.live .asklive__quote,
  html.js .asklive--armed .asklive__card.live .asklive__cites {
    animation: alrise 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  html.js .asklive--armed .asklive__card.live .asklive__pt:nth-of-type(2) { animation-delay: 0.5s; }
  html.js .asklive--armed .asklive__card.live .asklive__pt:nth-of-type(3) { animation-delay: 1.0s; }
  html.js .asklive--armed .asklive__card.live .asklive__quote { animation-delay: 1.6s; }
  html.js .asklive--armed .asklive__card.live .asklive__cites { animation-delay: 2.1s; }
  @keyframes alrise { from { opacity: 0; transform: translateY(10px); } }
  /* the seal: pressed on after the quote has settled */
  html.js .asklive--armed .asklive__card.live .asklive__gate {
    animation: algate 0.55s cubic-bezier(0.2, 1.3, 0.35, 1) 2.5s backwards;
  }
  @keyframes algate {
    0% { opacity: 0; transform: scale(1.3); }
    60% { box-shadow: 0 0 0 2px rgba(247, 234, 208, 0.55), 0 0 30px rgba(211, 174, 118, 0.5); }
    100% { opacity: 1; transform: none; box-shadow: none; }
  }
}

.laws { text-align: center; }
.laws__title {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1.6rem;
}
.laws__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  text-align: left;
}
.law { background: var(--bg); padding: 1.5rem 1.5rem 1.2rem; }
/* the three rules take the bench one at a time (v154): left, floor, right —
   and the grid's hairline frame assembles WITH them (hidden while cards fly,
   else the gap-trick background shows as a lit panel behind a moving card) */
@media (prefers-reduced-motion: no-preference) {
  html.js .laws .law {
    opacity: 0;
    transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html.js .laws .law:nth-child(1) { transform: translateX(-34px); }
  html.js .laws .law:nth-child(2) { transform: translateY(28px); transition-delay: 0.18s; }
  html.js .laws .law:nth-child(3) { transform: translateX(34px); transition-delay: 0.36s; }
  html.js .laws.in .law { opacity: 1; transform: none; }
  html.js .laws:not(.in) .laws__grid { background: transparent; border-color: transparent; }
  html.js .laws__grid { transition: background 0.7s ease 0.6s, border-color 0.7s ease 0.6s; }
  /* each icon blooms once as its stroke finishes drawing, then the light settles */
  html.js .laws.in .law:nth-child(1) .law__icon { animation: lawbloom 1.6s ease 1.3s both; }
  html.js .laws.in .law:nth-child(2) .law__icon { animation: lawbloom 1.6s ease 1.6s both; }
  html.js .laws.in .law:nth-child(3) .law__icon { animation: lawbloom 1.6s ease 1.9s both; }
  @keyframes lawbloom {
    0% { filter: none; }
    45% { filter: drop-shadow(0 0 9px var(--acc-soft)); }
    100% { filter: drop-shadow(0 0 3px var(--acc-ghost)); }
  }
}
.law__icon {
  width: 26px;
  height: 30px;
  margin-bottom: 0.7rem;
  stroke: var(--acc);
  stroke-width: 1.5;
  fill: none;
}
.law__icon-fill { fill: var(--acc); stroke: none; }
/* the icons draw themselves as the room arrives, one after another */
html.js .laws .law__icon :not(.law__icon-fill) {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
}
html.js .laws .law__icon .law__icon-fill { fill-opacity: 0; }
html.js .laws.in .law__icon :not(.law__icon-fill) {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.5s ease;
}
html.js .laws.in .law:nth-child(2) .law__icon :not(.law__icon-fill) { transition-delay: 0.3s; }
html.js .laws.in .law:nth-child(3) .law__icon :not(.law__icon-fill) { transition-delay: 0.6s; }
html.js .laws.in .law__icon .law__icon-fill {
  fill-opacity: 1;
  transition: fill-opacity 0.7s ease 1.3s;
}
@media (prefers-reduced-motion: reduce) {
  html.js .laws .law__icon :not(.law__icon-fill) { stroke-dashoffset: 0 !important; transition: none !important; }
  html.js .laws .law__icon .law__icon-fill { fill-opacity: 1 !important; transition: none !important; }
}
.law__name {
  font-family: var(--display);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-lift);
  margin-bottom: 0.5rem;
}
.law p { margin: 0; color: var(--ink-dim); font-size: 1rem; }
.law i { color: var(--ink); }

/* ═══ ACT IV — the engines ═══ */

.engine {
  border-top: 1px solid var(--rule);
  padding: 3.2rem 0 3rem;
  max-width: 74ch;
  margin: 0 auto;
}
.engine:last-of-type { padding-bottom: 0.5rem; }
/* the engine overline: an engraved brass nameplate riveted over each engine.
   (The BIG-numeral watermark variant was tried twice and reverted twice —
   clipping, then just worse; don't bring that one back. The plate is the flavor.) */
/* THE ENGINE NAMEPLATE (redesigned v154, Trevor's call): each engine wears a
   NAME and a MARK — an engraved sigil medallion beside a kicker naming the real
   subsystem ("ENGINE II · THE LIVING CHORUS"), the headline beneath. One hue
   family, but the hall brightens as you walk it: --eng steps the room's violet
   toward candlelight I -> VIII (precomputed literals — same color, different
   light; never eight competing colors). */
.engine__head {
  --eng: var(--act-hue);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.15rem;
  row-gap: 0.3rem;
  align-items: center;
  margin-bottom: 1.2rem;
}
.engine__head[data-num='II'] { --eng: 144, 109, 206; }
.engine__head[data-num='III'] { --eng: 148, 113, 202; }
.engine__head[data-num='IV'] { --eng: 154, 119, 197; }
.engine__head[data-num='V'] { --eng: 160, 124, 192; }
.engine__head[data-num='VI'] { --eng: 165, 130, 188; }
.engine__head[data-num='VII'] { --eng: 171, 136, 183; }
.engine__head[data-num='VIII'] { --eng: 177, 141, 178; }
/* the sigil: an engraved line-mark in the engine's own light, ringed like a
   pressed seal — the one image each engine is remembered by */
.engine__sigil {
  grid-row: 1 / 3;
  width: 54px;
  height: 54px;
  overflow: visible;
}
.engine__sigil .sig__ring {
  fill: none;
  stroke: rgba(var(--eng), 0.4);
  stroke-width: 1;
}
.engine__sigil .sig__line {
  fill: none;
  stroke: rgba(var(--eng), 0.95);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.engine__sigil .sig__dot { fill: rgba(var(--eng), 0.95); }
.engine__sigil .sig__glyph {
  fill: rgba(var(--eng), 0.95);
  font-family: var(--accent);
  font-size: 24px;
  font-style: italic;
  text-anchor: middle;
}
/* the sigil presses in like a seal as its engine arrives */
@media (prefers-reduced-motion: no-preference) {
  html.js .engine .engine__sigil {
    opacity: 0;
    transform: scale(1.25);
    transition: opacity 0.7s ease 0.25s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s,
                filter 0.9s ease 0.6s;
  }
  html.js .engine.in .engine__sigil {
    opacity: 1;
    transform: none;
    filter: drop-shadow(0 0 7px rgba(var(--eng), 0.55));
  }
}
html:not(.js) .engine__sigil,
html.js .engine.in .engine__sigil { filter: drop-shadow(0 0 7px rgba(var(--eng), 0.4)); }
.engine__kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(var(--eng), 0.9);
  white-space: nowrap;
}
.engine__kicker::after {
  content: '';
  flex: 1 1 2rem;
  min-width: 1.5rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--eng), 0.5), rgba(var(--eng), 0.08) 70%, transparent);
}
.engine__head h3 {
  grid-column: 2;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  font-weight: 700;
  color: var(--ink-bright);
  margin: 0;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
@media (max-width: 560px) {
  .engine__sigil { width: 44px; height: 44px; }
  .engine__kicker { font-size: 0.56rem; letter-spacing: 0.24em; }
}
.engine__copy { margin: 0 0 1.6rem; color: var(--ink); font-size: 1.06rem; text-wrap: pretty; }
.engine__copy i { color: var(--ink); }
.engine__note {
  color: var(--ink-faint);
  font-size: 0.9rem;
  margin-top: 0.8rem;
  font-style: italic;
}
/* an engraving floated beside an engine's copy, feathered like the arena's */
.engine__art {
  float: right;
  width: min(275px, 42%);
  margin: 0.3rem 0 0.8rem 1.6rem;
}
.engine__art img {
  width: 100%;
  height: auto;
  display: block;
  filter: sepia(0.25) contrast(1.02);
  opacity: 0.92;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.engine__art figcaption {
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.76rem;
  margin-top: 0.35rem;
}
.engine::after { content: ''; display: block; clear: both; }
/* the atlas's honest footnote: this embed is the lite demo, the real one flies */
/* an inline door inside a note ("the twenty-nine" → the commentary shelf fold):
   the words stay the words — only a dotted brass underline says "this opens" */
.notedoor {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--brass);
  cursor: pointer;
  border-bottom: 1px dotted var(--brass-dim);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.notedoor:hover { color: var(--brass-lift); border-color: var(--brass); }
.notedoor:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }

.engine__note--demo {
  margin-top: 0.9rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--brass-faint);
  background: var(--bg-raise);
}
.engine__note--demo b { color: var(--brass-lift); }
@media (max-width: 620px) {
  .engine__art { float: none; width: min(340px, 100%); margin: 0 auto 1.2rem; }
}
/* the ledger: an engine's real numbers, set like figures in a register — no filler tags */
.ledger {
  margin: 1.7rem 0 0;
  /* a grid, not a flex-wrap (v154): four stats broke 1-2-1 on phones — the
     grid keeps every row aligned at any width */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11em, 100%), 1fr));
  gap: 0.8rem 1.6rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.05rem;
}
/* > direct children only: the numbers inside b carry live-stat spans of
   their own, and the bare descendant selector was shrinking them (the
   "116 commentaries" mismatch) */
.ledger > span {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ledger b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--brass-lift);
  font-variant-numeric: tabular-nums;
}

/* the interlinear — real John 1:1 from the word index */
.interlinear-wrap { margin: 0; }
.interlinear {
  display: flex;
  gap: 0;
  overflow-x: auto;
  border: 1px solid var(--rule);
  background: var(--bg-raise);
  padding: 1.1rem 0.9rem 1rem;
  scrollbar-width: thin;
  /* the verse runs wider than a phone — feather the cut edges so it reads
     as "more words this way", not a finished strip (the .web treatment) */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.il {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  padding: 0.3rem 0.72rem;
  border-right: 1px solid var(--brass-ghost);
}
.il:last-child { border-right: 0; }
.il__gk { font-family: var(--accent); font-size: 1.42rem; color: var(--ink-bright); line-height: 1.2; }
.il__tr { font-style: italic; color: var(--brass); font-size: 0.8rem; }
.il__gl {
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.il--hot { background: var(--brass-ghost); box-shadow: inset 0 -2px 0 var(--brass); }
.il--hot .il__gl { color: var(--brass); }
/* every word IS the tap the real bot answers — .il is a button now */
.il {
  border-top: 0; border-bottom: 0; border-left: 0;
  background: none;
  font: inherit;
  color: inherit;
  transition: background 0.2s ease;
  cursor: pointer;
}
.il:hover { background: var(--brass-ghost); box-shadow: inset 0 -2px 0 var(--brass-dim); }
.il.is-open { background: var(--brass-ghost); box-shadow: inset 0 -2px 0 var(--brass); }
/* the parse card: the tapped word, decoded */
.ilcard {
  border: 1px solid var(--rule);
  border-top: 0;
  background: var(--bg-panel);
  padding: 0.95rem 1.15rem 0.9rem;
  animation: ilcardIn 0.35s ease;
}
@keyframes ilcardIn { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .ilcard { animation: none; } }
.ilcard__head {
  margin: 0 0 0.3rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.ilcard__head b { font-family: var(--accent); font-size: 1.5rem; font-weight: 600; color: var(--ink-bright); }
.ilcard__head i { color: var(--brass); font-size: 0.92rem; }
.ilcard__st {
  margin-left: auto;
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  border: 1px solid var(--rule);
  padding: 0.15rem 0.5rem;
}
.ilcard__mo { margin: 0 0 0.15rem; color: var(--brass-lift); font-size: 0.95rem; }
.ilcard__lm { margin: 0; color: var(--ink-dim); font-size: 0.9rem; font-style: italic; }
/* the deep layers: Dodson's definition, this occurrence's Louw-Nida sense,
   and (for the great words) a verbatim line from the full lexicons */
.ilcard__def { margin: 0.55rem 0 0; color: var(--ink); font-size: 0.92rem; }
.ilcard__sn {
  margin: 0.3rem 0 0;
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ilcard__deep {
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.9rem;
  border-left: 2px solid var(--brass-dim);
  background: var(--bg-sunk);
}
.ilcard__deep p {
  margin: 0 0 0.25rem;
  font-family: var(--accent);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--ink);
}
.ilcard__deep cite { font-style: normal; font-size: 0.78rem; color: var(--ink-faint); }

/* the search demo — one real query, the real count, a verbatim hit */
.searchcard {
  margin: 0 0 1.6rem;
  border: 1px solid var(--rule);
  background: var(--bg-raise);
  padding: 1.2rem 1.3rem 1.15rem;
}
.searchcard__bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid var(--brass-faint);
  background: var(--bg-sunk);
  padding: 0.6rem 0.9rem;
  font-family: var(--accent);
  font-size: 1.08rem;
  font-style: italic;
  color: var(--ink-bright);
}
.searchcard__bar span { color: var(--brass-dim); font-style: normal; font-size: 0.85rem; }
.searchcard__count {
  margin: 0.7rem 0 0.9rem;
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.searchcard__count b { color: var(--brass-lift); font-size: 0.9rem; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.searchcard__hit { border-left: 2px solid var(--brass); padding-left: 1rem; }
.searchcard__snip {
  margin: 0 0 0.4rem;
  font-family: var(--accent);
  font-size: 1.08rem;
  font-style: italic;
  color: var(--ink);
  text-wrap: pretty;
}
.searchcard__snip b { color: var(--brass-lift); font-weight: 600; }
.searchcard__src { margin: 0; color: var(--ink-faint); font-size: 0.86rem; }
.searchcard__src i { color: var(--ink-dim); }
.searchcard__open {
  display: inline-block;
  margin-left: 0.6rem;
  font-family: var(--display);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}

/* the chorus (REBUILT v154) — the quote plate speaks on top; the voices stand
   below it as a rail of real buttons, oldest first. The chorus WALKS the
   centuries on its own when it scrolls in (library.js steps a voice every few
   seconds) until the reader's first tap takes the podium. The plate's height
   is LOCKED to its tallest quote at init, so a swap never moves the page. */
.chorus { margin-bottom: 0.4rem; }
.chorus__quote {
  margin: 0 0 1.15rem;
  border: 1px solid var(--rule);
  background: linear-gradient(160deg, rgba(var(--act-hue), 0.07), transparent 55%), var(--bg-raise);
  padding: 1.6rem 1.7rem 1.2rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* the plate's ribbon: the engines' violet across the top edge (the mindcard grammar) */
.chorus__quote::before {
  content: '';
  position: absolute;
  top: -1px; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--act-hue), 0.55) 30%, rgba(var(--act-hue), 0.55) 70%, transparent);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  /* the words swap inside a LOCKED box — animate the text, never the plate */
  html.js .chorus__quote.swap p,
  html.js .chorus__quote.swap cite { animation: tsin 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
}
.chorus__quote p {
  margin: 0 0 0.9rem;
  font-family: var(--accent);
  font-size: 1.26rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
  text-wrap: pretty;
}
.chorus__quote cite {
  display: block;
  font-style: normal;
  color: var(--ink-faint);
  font-size: 0.86rem;
}
/* .chorus__quote p (0-1-1) would out-cascade a bare class — match it */
.chorus__quote .chorus__meta {
  margin: auto 0 0;
  padding-top: 0.8rem;
  font-family: var(--display);
  font-size: 0.6rem;
  font-style: normal;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(var(--act-hue-hi), 0.6);
}
/* the rail: eleven witnesses on the bench, oldest to newest */
.chorus__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}
.chorus__rail li { display: contents; }
.cv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  font: inherit;
  text-align: center;
  color: inherit;
  cursor: pointer;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--bg-raise);
  padding: 0.5rem 0.85rem 0.45rem;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease,
              box-shadow 0.25s ease;
}
.cv b { color: var(--ink); font-weight: 600; font-size: 0.86rem; line-height: 1.25; transition: color 0.25s ease; }
.cv span {
  color: var(--ink-faint);
  font-size: 0.62rem;
  font-family: var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  transition: color 0.25s ease;
}
.cv:hover, .cv:focus-visible {
  border-color: var(--brass-faint);
  transform: translateY(-1px);
  outline: none;
}
.cv:hover b { color: var(--brass); }
.cv.is-on {
  border-color: var(--brass);
  background:
    linear-gradient(180deg, rgba(var(--act-hue), 0.14), rgba(var(--act-hue), 0.03)),
    var(--bg-raise);
  box-shadow: 0 0 16px -5px rgba(var(--act-hue), 0.7);
}
.cv.is-on b { color: var(--brass-lift); }
.cv.is-on span { color: var(--brass); }
/* while the chorus walks itself, the speaking voice breathes — the reader can
   SEE the machine moving before ever touching it */
@media (prefers-reduced-motion: no-preference) {
  html.js .chorus.walking .cv.is-on { animation: cvbreathe 2.4s ease-in-out infinite; }
  @keyframes cvbreathe {
    0%, 100% { box-shadow: 0 0 16px -5px rgba(var(--act-hue), 0.7); }
    50% { box-shadow: 0 0 24px -4px rgba(var(--act-hue), 0.95); }
  }
}

/* the verse portal card — an illuminated plate, not a flat box */
.versecard {
  position: relative;
  border: 1px solid var(--brass-faint);
  background:
    radial-gradient(120% 110% at 50% 0%, rgba(184, 148, 94, 0.13), transparent 55%),
    radial-gradient(80% 60% at 50% 100%, var(--brass-ghost), transparent 70%),
    var(--bg-raise);
  box-shadow: inset 0 0 0 3px var(--bg-raise), inset 0 0 0 4px var(--brass-faint),
    0 16px 44px var(--shadow), 0 0 64px -18px rgba(211, 174, 118, 0.3);
  padding: 2.2rem 1.8rem 1.9rem;
  text-align: center;
  overflow: hidden;
}
/* corner brackets, like the gilt corners of a bound plate */
.versecard::before, .versecard::after {
  content: '';
  position: absolute;
  width: 26px; height: 26px;
  border: 1px solid var(--brass);
  opacity: 0.75;
}
.versecard::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.versecard::after { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }
.versecard__ref {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--brass-lift);
  margin: 0 0 1rem;
  text-shadow: 0 0 16px rgba(211, 174, 118, 0.4);
}
.versecard__ref::before, .versecard__ref::after {
  content: '';
  height: 1px;
  width: clamp(28px, 8vw, 70px);
  background: linear-gradient(90deg, transparent, var(--brass-faint));
}
.versecard__ref::after { background: linear-gradient(90deg, var(--brass-faint), transparent); }
.versecard__text {
  font-family: var(--accent);
  font-size: 1.24rem;
  font-style: italic;
  color: var(--ink);
  max-width: 52ch;
  margin: 0 auto 1.4rem;
  text-wrap: pretty;
}
.versecard__doors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 0.5rem;
}
.door {
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* lifted from ink-dim/rule (v154): six dim chips read as labels, not doors —
     same visibility class as the how-folds Trevor flagged */
  color: var(--ink);
  border: 1px solid var(--brass-faint);
  background: var(--bg);
  padding: 0.42rem 0.7rem;
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.door:hover {
  color: var(--brass);
  border-color: var(--brass-faint);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px var(--shadow);
}
.door { cursor: pointer; }
.door.is-on {
  color: var(--brass-lift);
  border-color: var(--brass);
  background: var(--bg-raise);
  box-shadow: 0 0 18px -4px rgba(211, 174, 118, 0.45);
}
/* the opened door's panel — real John 3:16 data, swapped in place */
.versecard__panel {
  margin: 1.1rem auto 0;
  max-width: 56ch;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  animation: ilcardIn 0.35s ease;
}
@media (prefers-reduced-motion: reduce) { .versecard__panel { animation: none; } }
.versecard__panel p {
  margin: 0;
  color: var(--ink);
  font-size: 0.97rem;
  line-height: 1.62;
  text-wrap: pretty;
}
/* .versecard__hint now speaks the shared .tryline grammar (v154) */

/* the lands — a place plaque, with the site itself photographed above the brass */
.placecard {
  border: 1px solid var(--rule);
  background: var(--bg-raise);
  padding: 1.5rem 1.6rem 1.3rem;
}
.placecard__photo {
  margin: -1.5rem -1.6rem 1.3rem;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  max-height: 300px;
}
.placecard__photo img {
  width: 100%;
  height: 100%;
  max-height: 300px;
  object-fit: cover;
  display: block;
  filter: sepia(0.16) contrast(1.02);
}
.placecard__credit {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  opacity: 0.75;
}
.placecard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  margin-bottom: 0.7rem;
}
.placecard__name {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink-bright);
  letter-spacing: 0.04em;
}
.placecard__tag {
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.placecard__d { margin: 0 0 0.8rem; color: var(--ink-dim); font-size: 0.98rem; text-wrap: pretty; }
.placecard__refs {
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

/* the person web — a constellation of souls, hung in the night sky of the
   promise (Gen 15:5). The vault is the ONE cold surface on a warm page: the
   gold family reads as stars against it. No-JS readers get the vault + the
   milky breath in pure CSS; the canvas starfield is an enhancement. */
.web-wrap {
  margin: 0;
  --sky-vault:
    radial-gradient(120% 85% at 68% -12%, rgba(106, 118, 168, 0.16), transparent 52%),
    radial-gradient(70% 60% at 22% 8%, rgba(88, 98, 148, 0.10), transparent 60%),
    radial-gradient(100% 130% at 50% 118%, rgba(38, 44, 72, 0.18), transparent 55%),
    linear-gradient(168deg, #0a0c17 0%, #070812 48%, #05060d 100%);
}
.web-epi {
  margin: 0 auto 1rem;
  max-width: 52ch;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.55;
  color: var(--ink-dim);
}
.web-epi cite {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--display);
  font-style: normal;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.web {
  border: 1px solid var(--rule);
  background: var(--sky-vault);
  padding: 1.2rem 1rem 0.8rem;
  overflow-x: auto;
  scrollbar-width: thin;
  /* on a phone the web is wider than the frame — feather the cut edges so it
     reads as "more constellation this way", not a cropped picture */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
/* JS wraps the web in a skywrap: the vault + star canvas move OUT to the wrap
   (outside the scroll box), so the family scrolls past a sky that stands still */
.skywrap { position: relative; background: var(--sky-vault); }
.skywrap .sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.skywrap .web { position: relative; z-index: 1; }
.web--sky { background: transparent; }
.web svg { display: block; min-width: 860px; width: 100%; height: auto; }
.web__tie { stroke: var(--brass-dim); stroke-width: 1; opacity: 0.55; }
.web__tie--gap { stroke-dasharray: 3 6; }
@media (prefers-reduced-motion: no-preference) {
  /* the broken lines drift, like the thread is still being drawn */
  .web__tie--gap { animation: tieflow 2.6s linear infinite; }
  @keyframes tieflow { to { stroke-dashoffset: -18; } }
}
.web__n { fill: var(--brass); filter: drop-shadow(0 0 3px rgba(184, 148, 94, 0.6)); }
.web__n--dim { fill: var(--brass-dim); }
.web__n--end {
  fill: var(--brass-lift);
  filter: drop-shadow(0 0 8px rgba(211, 174, 118, 0.9));
}
/* a slow, uneven shimmer, like stars */
@media (prefers-reduced-motion: no-preference) {
  .web__n { animation: twinkle 3.6s ease-in-out infinite; }
  .web__n:nth-of-type(3n) { animation-delay: 1.2s; }
  .web__n:nth-of-type(3n + 1) { animation-delay: 2.3s; }
  @keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
  .web__n--end { animation: none; }
}
.web__lbl {
  font-family: var(--serif);
  font-size: 15px;
  fill: var(--ink);
  text-anchor: middle;
}
.web__lbl--dim { fill: var(--ink-dim); font-style: italic; }
.web__lbl--end {
  font-family: var(--display);
  font-weight: 700;
  fill: var(--brass-lift);
  font-size: 17px;
}
/* the FULL constellation (JS-built from the genealogy arrays): a fixed-width
   star-road the reader scrolls; the fork wears gold, the two roads violet */
.web--full svg { width: auto; min-width: 0; }
.web--full .web__lbl { font-size: 13px; }
.web--full .web__lbl--end { font-size: 17px; }
.web__lbl--fork { fill: var(--brass-lift); font-weight: 700; }
.web__lbl--branch { fill: #b39ddb; font-style: italic; }
.web__cap {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--ink-faint);
  text-anchor: middle;
}
/* the reader drives: two brass arrows prompt the scroll (no auto-glide) */
.web-wrap { position: relative; }
.webarr {
  position: absolute;
  /* anchored to the MAP's center (padding + 300px svg / 2), not the figure's —
     the figcaption below would otherwise drag the arrows low */
  top: 169px;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  border: 1px solid var(--brass-dim);
  background: rgba(8, 7, 5, 0.74);
  color: var(--brass-lift);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0 0 0.15rem;
  transition: border-color 0.15s ease, color 0.15s ease;
  box-shadow: 0 4px 14px var(--shadow);
}
.webarr:hover { border-color: var(--brass); color: #f0dcb4; }
.webarr--l { left: 0.55rem; }
.webarr--r { right: 0.55rem; }
.webarr[hidden] { display: none; }

/* ═══ the lineage: the two genealogies of Jesus, complete — a golden chain
   of names. The fork (David) and the meeting point (Jesus) wear the gold;
   the two roads out of David (Solomon / Nathan) wear the room's violet. ═══ */
.lineage-wrap { margin: 1.7rem 0 0.5rem; }
/* ── ENGINE IV · the atlas — the land drawn purely from the gazetteer ──────
   No map tiles, no third party: 1,300 geocoded places from tcm_layers/,
   the coastline emerging from dot density alone. Fixed canvas height so
   view changes never move the page (no curtain re-measure needed). */
.atlas { margin: 0 0 1.6rem; }
.atlas__tabs { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.8rem; }
.atab {
  flex: 1 1 calc(50% - 0.45rem);
  font-family: var(--display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 0.58rem 0.45rem 0.52rem;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
@media (min-width: 560px) { .atab { flex: 1 1 0; } }
.atab.is-on { color: var(--brass-lift); border-color: var(--brass); background: var(--brass-ghost); }
.atlas__frame {
  position: relative;
  height: min(62vh, 470px);
  border: 1px solid var(--brass-faint);
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(139, 104, 210, 0.1), transparent 55%),
    var(--bg-sunk);
  overflow: hidden;
}
#atcv { display: block; width: 100%; height: 100%; touch-action: pan-y; }
#atmap { position: absolute; inset: 0; }
/* when the satellite map is live, the ticker rides the TOP edge — the bottom
   belongs to Mapbox's logo + attribution (required by its terms) */
.atlas__frame.is-live .atlas__tick {
  top: 0; bottom: auto;
  /* symmetric side padding clears the zoom buttons at top-right */
  padding: 0.6rem 3.2rem 1.1rem;
  background: linear-gradient(0deg, transparent, rgba(9, 7, 13, 0.85) 55%);
}
/* the popups, dressed for the room */
.mapboxgl-popup-content {
  background: #131019;
  color: var(--ink);
  border: 1px solid var(--brass-faint);
  border-radius: 3px;
  padding: 0.55rem 0.85rem 0.6rem;
  font-family: var(--serif), Georgia, serif;
  font-size: 0.88rem;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
}
.mapboxgl-popup-content b {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  color: var(--brass-lift);
  margin-bottom: 0.12rem;
}
.mapboxgl-popup-content span { color: var(--ink-faint); font-size: 0.8rem; }
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { border-top-color: #131019; }
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip { border-bottom-color: #131019; }
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip { border-right-color: #131019; }
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip { border-left-color: #131019; }
.mapboxgl-ctrl-group { background: rgba(19, 16, 25, 0.85); border: 1px solid var(--brass-faint); }
.mapboxgl-ctrl-group button + button { border-top: 1px solid var(--brass-faint); }
.mapboxgl-ctrl button .mapboxgl-ctrl-icon { filter: invert(0.82) sepia(0.3); }
.atlas__tick {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 1.1rem 0.9rem 0.6rem;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--ink);
  text-align: center;
  background: linear-gradient(180deg, transparent, rgba(9, 7, 13, 0.85) 55%);
  pointer-events: none;
}
.atlas__tick b { color: var(--brass-lift); font-weight: 600; font-family: var(--display); letter-spacing: 0.04em; }
.atlas__tick i { color: var(--ink-faint); font-style: normal; }

.lineage__tabs { display: flex; gap: 0.55rem; margin-bottom: 0.95rem; }
.lintab {
  flex: 1 1 0;
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 0.7rem 0.4rem 0.6rem;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.lintab i {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 0.82em;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  margin-top: 0.3em;
}
.lintab.is-on {
  color: var(--brass-lift);
  border-color: rgba(var(--act-hue), 0.7);
  background: rgba(var(--act-hue), 0.08);
}
.lintab.is-on i { color: var(--brass-dim); }
.lineage__sub { margin: 0 0 0.9rem; font-size: 0.93rem; color: var(--ink-dim); }
.lineage__sub b { color: var(--brass-lift); font-weight: 600; }
.lineage {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.55rem;
  border: 1px solid var(--brass-faint);
  background:
    radial-gradient(120% 100% at 50% 0%, var(--brass-ghost), transparent 60%),
    var(--bg-sunk);
  padding: 1.05rem 1.1rem 1.15rem;
}
.ln {
  font-family: var(--display);
  font-size: 0.79rem;
  letter-spacing: 0.05em;
  color: var(--ink);
  position: relative;
  padding-right: 0.66rem;
}
.ln::after {
  content: '·';
  position: absolute;
  right: 0;
  color: var(--brass-dim);
  opacity: 0.7;
}
.ln:last-child { padding-right: 0; }
.ln:last-child::after { content: none; }
/* no dangling connector where a segment ends (an era divider follows) */
.ln:has(+ .ln__era) { padding-right: 0; }
.ln:has(+ .ln__era)::after { content: none; }
.ln--fork { color: var(--brass-lift); font-weight: 700; }
.ln--branch { color: #b39ddb; font-weight: 600; }
.ln--dim { color: var(--ink-faint); font-style: italic; }
.ln--end {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.1em;
  background: linear-gradient(180deg, #f0dcb4 10%, var(--brass-lift) 55%, var(--brass) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 14px rgba(211, 174, 118, 0.35));
}
.ln__era {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--display);
  font-style: normal;
  font-size: 0.56rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass-dim);
  margin: 0.6rem 0 0.1rem;
}
.ln__era::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--brass-faint), transparent);
}
.ln__era:first-child { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.js .lineage.anim .ln,
  html.js .lineage.anim .ln__era {
    animation: lnin 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: var(--d, 0ms);
  }
  @keyframes lnin { from { opacity: 0; transform: translateY(7px); } }
}

/* ═══ the translation spectrum: word-for-word to thought-for-thought ═══ */
.tscale {
  border: 1px solid var(--brass-faint);
  background: var(--bg-panel);
  padding: 1.05rem 1.1rem 1.1rem;
}
.tscale__origs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.5rem;
  margin: 0 0 1.05rem;
}
.tscale__origs i {
  font-size: 0.78rem;
  color: var(--ink-faint);
  font-style: italic;
  margin-left: 0.2rem;
}
.tscale__poles {
  display: flex;
  justify-content: space-between;
  font-family: var(--display);
  font-size: 0.56rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.45rem;
}
.tscale__poles span:last-child { color: #a58fd0; }
.tscale__band { position: relative; height: 128px; margin-bottom: 1rem; }
.tscale__rail {
  position: absolute;
  top: 3px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brass), rgba(139, 104, 210, 0.85));
  opacity: 0.55;
}
.ts {
  position: absolute;
  left: var(--x);
  top: calc(14px + var(--lane) * 37px);
  transform: translateX(-50%);
  background: none;
  border: 0;
  font-family: var(--display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 0.25rem 0.3rem;
  white-space: nowrap;
  transition: color 0.25s ease;
}
.ts::before {
  content: '';
  display: block;
  width: 7px; height: 7px;
  margin: 0 auto 0.35rem;
  background: var(--brass-dim);
  transform: rotate(45deg);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.ts::after {
  content: '';
  position: absolute;
  left: 50%; top: -11px;
  width: 1px;
  height: calc(14px + var(--lane) * 37px);
  background: linear-gradient(180deg, var(--brass-faint), transparent);
  pointer-events: none;
}
.ts:hover { color: var(--ink); }
.ts.is-on { color: var(--brass-lift); }
.ts.is-on::before {
  background: var(--brass-lift);
  box-shadow: 0 0 10px rgba(211, 174, 118, 0.8);
}
.tscard {
  border: 1px solid var(--brass-faint);
  border-left: 3px solid var(--brass);
  background: linear-gradient(160deg, var(--brass-ghost), transparent 55%), var(--bg-sunk);
  padding: 0.95rem 1.05rem 0.9rem;
}
.tscard__head { margin: 0 0 0.25rem; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.tscard__head b { font-family: var(--display); font-size: 1rem; color: var(--ink-bright); letter-spacing: 0.03em; }
.tscard__head span { font-family: var(--display); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--brass-dim); }
.tscard__phil { margin: 0 0 0.7rem; font-size: 0.9rem; color: var(--ink-dim); font-style: italic; }
.tscard__v { margin: 0; border-left: 2px solid var(--brass-dim); padding: 0.1rem 0 0.1rem 0.85rem; }
.tscard__v p { margin: 0; font-family: var(--accent); font-size: 1.02rem; line-height: 1.55; color: var(--ink-bright); }
.tscard__v cite {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--display);
  font-style: normal;
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-dim);
}
.tscard__v[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .tscard.swap { animation: tsin 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
  @keyframes tsin { from { opacity: 0.2; transform: translateY(6px); } }
}

.trans {
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--rule);
  background: var(--bg-raise);
  padding: 0.45rem 0.75rem;
  border-radius: 2px;
}
.trans--orig { color: var(--brass); border-color: var(--brass-faint); background: var(--brass-ghost); }

/* the living timeline — thirty-four centuries on one track, and the room answers */
.tl {
  border: 1px solid var(--rule);
  background:
    radial-gradient(110% 100% at 50% 0%, var(--brass-ghost), transparent 60%),
    var(--bg-raise);
  padding: 1.7rem clamp(1.2rem, 3.5vw, 2rem) 1.2rem;
  margin-bottom: 1.6rem;
}
/* the instrument's own epigraph — the timeline IS Hebrews 12:1 */
.tl .act__epi {
  margin: 0 auto 1.5rem;
  text-align: center;
  font-size: 0.95rem;
}
.tl__read {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
  margin-bottom: 1.3rem;
  min-height: 5.6rem;   /* the tallest era line — the readout must not jiggle the slider */
}
.tl__year {
  font-family: var(--deco);
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  color: var(--brass-lift);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  text-shadow: 0 0 22px rgba(211, 174, 118, 0.35);
}
.tl__era {
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-bright);
}
.tl__n { color: var(--ink-dim); font-size: 0.95rem; font-style: italic; }
/* a fresh era flashes the readout awake */
.tl__read.tick .tl__year { animation: tlTick 0.5s ease; }
@keyframes tlTick {
  0% { opacity: 0.35; transform: translateY(3px); }
  100% { opacity: 1; transform: none; }
}
.tl__rail { position: relative; }
.tl__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: ew-resize;
  --fill: 0%;
}
/* the filled rail brightens through the centuries — the lamps come on as the
   church writes (a full-width ramp revealed by the dark cover layer after --fill) */
.tl__slider::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid var(--brass-faint);
  background:
    linear-gradient(90deg, transparent var(--fill), var(--bg-sunk) var(--fill)),
    linear-gradient(90deg, #67502f, #8a6a3e 30%, #b8945e 62%, #d3ae76 86%, #ecd09a);
}
/* the thumb is a faceted gem now — lit from its upper corner, set in a dark bezel */
.tl__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  margin-top: -7px;
  background: radial-gradient(130% 130% at 30% 25%, #fff3d6, rgba(211, 174, 118, 0.92) 42%, #7a5828 100%);
  border: 1px solid rgba(46, 33, 14, 0.95);
  transform: rotate(45deg);     /* the house diamond, as the thumb */
  box-shadow: 0 0 16px rgba(211, 174, 118, 0.7), inset 0 0 5px rgba(255, 248, 224, 0.5);
  cursor: ew-resize;
}
.tl__slider::-moz-range-track {
  height: 6px;
  border: 1px solid var(--brass-faint);
  background: var(--bg-sunk);
}
.tl__slider::-moz-range-progress { height: 6px; background: linear-gradient(90deg, #67502f, #b8945e 62%, #ecd09a); }
.tl__slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 0;
  background: radial-gradient(130% 130% at 30% 25%, #fff3d6, rgba(211, 174, 118, 0.92) 42%, #7a5828 100%);
  border: 1px solid rgba(46, 33, 14, 0.95);
  transform: rotate(45deg);
  box-shadow: 0 0 16px rgba(211, 174, 118, 0.7), inset 0 0 5px rgba(255, 248, 224, 0.5);
}
/* event stars ride above the track at their true years; passed stars stay lit.
   The layer itself is click-through — only the stars take the pointer. */
.tl__stars {
  position: absolute;
  left: 0; right: 0; top: -14px;
  height: 0;
  pointer-events: none;
}
.tl__star {
  position: absolute;
  transform: translateX(-50%);
  width: 22px; height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brass-dim);
  font-size: 11px;
  line-height: 22px;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.35s ease, text-shadow 0.35s ease, transform 0.35s ease;
}
.tl__star.lit { color: var(--brass-lift); text-shadow: 0 0 10px rgba(211, 174, 118, 0.8); }
.tl__star.flare { animation: tlFlare 0.6s ease; }
@keyframes tlFlare {
  0% { transform: translateX(-50%) scale(1); }
  40% { transform: translateX(-50%) scale(1.9); }
  100% { transform: translateX(-50%) scale(1); }
}
.tl__star:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }
/* the last star is us — larger, and it breathes once the reader arrives */
.tl__star.tcm { font-size: 15px; }
.tl__star.tcm.lit {
  color: #f0d9a6;
  text-shadow: 0 0 14px rgba(232, 201, 143, 0.95), 0 0 30px rgba(211, 174, 118, 0.5);
  animation: tlBreathe 3.6s ease-in-out infinite alternate;
}
@keyframes tlBreathe {
  from { text-shadow: 0 0 10px rgba(232, 201, 143, 0.7), 0 0 22px rgba(211, 174, 118, 0.35); }
  to { text-shadow: 0 0 17px rgba(232, 201, 143, 1), 0 0 36px rgba(211, 174, 118, 0.65); }
}
/* star tooltips — house type, hover/focus only (touch scrubs the rail instead) */
.tl__tip {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.3rem 0.6rem;
  font-family: var(--display);
  font-style: normal;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-bright);
  text-shadow: none;
  background: var(--bg-raise);
  border: 1px solid var(--brass-faint);
  box-shadow: 0 6px 16px var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 3;
}
.tl__star:hover .tl__tip, .tl__star:focus-visible .tl__tip { opacity: 1; }
.tl__star.edge-l .tl__tip { left: 0; transform: none; }
.tl__star.edge-r .tl__tip { left: auto; right: 0; transform: none; }
@media (hover: none) { .tl__star:hover .tl__tip { opacity: 0; } }

/* THE WRITING LANE — when the Scriptures were written: strata of ink under the
   rail. Unlaid ink is a ghost, ink under the pen glows, laid ink settles gold;
   the 400 silent years are literal darkness; the thread after AD 95 is the
   finished canon, carried under every century to the last star. */
.tl__lane {
  position: relative;
  height: 17px;
  margin-top: 4px;
}
.tl__band {
  position: absolute;
  top: calc(var(--row, 0) * 5px);
  height: 9px;                /* padded hit box; the visible band is the ::before */
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.tl__band::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 3px;
  height: 3px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(211, 174, 118, 0.9), rgba(184, 148, 94, 0.85));
  opacity: 0.2;
  transition: opacity 0.45s ease, box-shadow 0.45s ease;
}
.tl__band.written::before { opacity: 0.58; }
.tl__band.writing::before { opacity: 1; box-shadow: 0 0 8px rgba(211, 174, 118, 0.55); }
.tl__band:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }
.tl__silence {
  position: absolute;
  top: 8px;
  height: 0;
  border-top: 1px dashed rgba(184, 148, 94, 0.22);
}
.tl__thread {
  position: absolute;
  top: 8px;
  height: 1px;
  background: linear-gradient(90deg, rgba(211, 174, 118, 0.38), rgba(211, 174, 118, 0.18) 55%, rgba(211, 174, 118, 0.34));
  opacity: 0.55;
  transition: opacity 1.1s ease, box-shadow 1.1s ease;
}
/* the payoff: the thumb reaches the last star and the whole canon-thread lights */
.tl__lane.arrived .tl__thread { opacity: 1; box-shadow: 0 0 7px rgba(211, 174, 118, 0.55); }
/* a HOLLOW marker at rest — never a filled gem, so only the rail's thumb reads as
   the grabbable handle (the lane is click-only; a second gem here made readers try
   to drag it). It fills gold and blooms once the scrub reaches the incarnation. */
.tl__flesh {
  position: absolute;
  top: 3px;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  padding: 0;
  border: 1px solid rgba(211, 174, 118, 0.5);
  transform: rotate(45deg);   /* the house diamond — the Word himself on the lane */
  background: transparent;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.45s ease, box-shadow 0.45s ease, background 0.45s ease, border-color 0.45s ease;
}
.tl__flesh.lit {
  opacity: 1;
  border-color: transparent;
  background: radial-gradient(circle at 35% 30%, #fff6dd, var(--brass-lift) 55%, rgba(184, 148, 94, 0.9));
  box-shadow: 0 0 12px rgba(232, 201, 143, 0.9);
}
.tl__flesh:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }
/* the era names sit at their true places on the track, not evenly spread */
.tl__marks {
  position: relative;
  height: 1.2em;
  margin-top: 0.55rem;
  font-family: var(--display);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.tl__marks span { position: absolute; transform: translateX(-50%); }
.tl__marks span:first-child { left: 0 !important; transform: none; }
.tl__marks span:last-child { left: auto !important; right: 0; transform: none; }
@media (pointer: coarse) {
  .tl__slider { height: 34px; }
  .tl__slider::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; }
  .tl__slider::-moz-range-thumb { width: 22px; height: 22px; }
  .tl__stars { top: -10px; }
  /* invisible tap extenders — the visual stays; only the touch box grows.
     Bands sit 5px apart per row, so their reach is a compromise, not 40px */
  .tl__star::after, .tl__band::after, .tl__flesh::after {
    content: '';
    position: absolute;
    left: -9px; right: -9px; top: -9px; bottom: -9px;
  }
  .tl__flesh::after { left: -13px; right: -13px; top: -13px; bottom: -13px; }
}
/* .tl__hint now speaks the shared .tryline grammar (v154) */
/* the stage under the rail: event card, era voice, and the filling shelf.
   Every block reserves its height so scrubbing never pumps the room (#278/#280). */
.tl__stage { margin-top: 1.1rem; }
.tl__event {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-height: 2.6rem;
  padding: 0.45rem 0.75rem;
  border-left: 2px solid var(--brass);
  background: var(--brass-ghost);
  margin-bottom: 0.9rem;
}
.tl__event.swap { animation: tlTick 0.45s ease; }
.tl__event-y {
  font-family: var(--deco);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--brass-lift);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.tl__event-body { font-size: 0.92rem; color: var(--ink-dim); }
.tl__event-body b { color: var(--ink-bright); font-weight: 600; }
.tl__voice {
  margin: 0 0 1rem;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--brass-faint);
  min-height: 4.6rem;
}
.tl__voice.swap { animation: tlTick 0.5s ease; }
.tl__voice-q {
  margin: 0 0 0.3rem;
  font-family: var(--accent);
  font-size: 1.12rem;
  font-style: italic;
  color: var(--ink);
  text-wrap: pretty;
}
.tl__voice-c { font-style: normal; font-size: 0.82rem; color: var(--ink-faint); }
/* the voice's shelf door. [hidden] keeps the SPACE (visibility, not display) so the
   card's height never pumps the pinned room as epochs swap (#273/#278). */
.tl__voicedoor {
  display: block;
  margin-top: 0.7rem;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-dim);
  cursor: pointer;
  transition: color 0.2s ease;
}
.tl__voicedoor:hover { color: var(--brass-lift); }
.tl__voicedoor:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; }
.tl__voicedoor[hidden] { display: block; visibility: hidden; }
.tl__shelfwrap { min-height: 76px; position: relative; }
.tl__shelf {
  display: flex;
  gap: 5px;
  height: 66px;
  overflow: hidden;
  align-items: flex-end;
}
.tl__shelf img {
  width: 42px; height: 62px;
  object-fit: cover;
  border: 1px solid rgba(184, 148, 94, 0.35);
  box-shadow: 0 3px 8px var(--shadow);
  flex: none;
  animation: tlShelfIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes tlShelfIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.tl__shelfline {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ink-faint);
}
@media (prefers-reduced-motion: reduce) {
  .tl__shelf img, .tl__event.swap, .tl__voice.swap, .tl__read.tick .tl__year, .tl__star.flare,
  .tl__star.tcm.lit { animation: none; }   /* the last star stays lit, just still */
  .tl__band::before, .tl__thread, .tl__flesh { transition: none; }
}

/* ─── the living page: the one lamplit object on the whole site.
   A real page of the 1886 NPNF Confessions, paper under the lantern —
   everything around it stays dark; the page carries the light. ─── */
.lpage {
  position: relative;
  margin: 0 0 0.9rem;
  padding: 1.9rem clamp(1.3rem, 4vw, 2.6rem) 1.4rem;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 244, 214, 0.55), transparent 70%),
    linear-gradient(168deg, #efe4c8 0%, #e6d9b8 55%, #d9c9a2 100%);
  color: #2a2214;
  border-radius: 2px;
  box-shadow:
    inset 0 0 60px rgba(90, 66, 30, 0.18),
    inset 0 0 4px rgba(90, 66, 30, 0.25),
    0 18px 50px rgba(0, 0, 0, 0.75),
    0 4px 14px rgba(0, 0, 0, 0.6);
}
.lpage__ribbon {
  position: absolute;
  top: -6px; right: clamp(1rem, 5vw, 2.4rem);
  width: 26px; height: 74px;
  background: linear-gradient(180deg, var(--brass) 0%, var(--brass-dim) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}
.lpage__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7a6339;
  border-bottom: 1px solid rgba(90, 66, 30, 0.3);
  padding-bottom: 0.55rem;
  margin-bottom: 1.1rem;
}
.lpage__chap {
  margin: 0 0 0.85rem;
  font-family: var(--accent);
  font-style: italic;
  font-size: 0.98rem;
  color: #57431f;
  text-wrap: pretty;
}
.lpage__text {
  margin: 0;
  font-family: var(--accent);
  font-size: 1.13rem;
  line-height: 1.72;
  text-align: justify;
  hyphens: auto;
  text-wrap: pretty;
}
.lpage__pn { font-weight: 700; color: #7a6339; }
/* footnote numerals: the page's real 1886 apparatus markers, tappable */
.fnm {
  border: 0;
  padding: 0 1px;
  background: transparent;
  font: inherit;
  font-size: 0.62em;
  vertical-align: super;
  line-height: 1;
  color: #8c6a2c;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.fnm:hover, .fnm.is-on { color: #5e430f; text-shadow: 0 0 8px rgba(196, 150, 60, 0.8); }
.fnm:focus-visible { outline: 1px solid #8c6a2c; outline-offset: 1px; }
/* a modest touch extender only — a 40px halo here would swallow taps meant
   for the surrounding prose (the highlighter arms on the sentence around it) */
@media (pointer: coarse) {
  .fnm { position: relative; }
  .fnm::after {
    content: '';
    position: absolute;
    left: -6px; right: -6px; top: -8px; bottom: -8px;
  }
}
/* scripture the page itself quotes: dotted, live */
.scrip {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted rgba(140, 106, 44, 0.9);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: background 0.25s ease;
}
.scrip:hover, .scrip.is-on { background: rgba(196, 150, 60, 0.18); }
.scrip:focus-visible { outline: 1px solid #8c6a2c; outline-offset: 2px; }
/* the highlighter wash — the reader's gold, on paper */
.sent { transition: background 0.4s ease; border-radius: 1px; }
.sent--kept, .sent--hl {
  background: linear-gradient(100deg, rgba(211, 168, 74, 0.38), rgba(211, 168, 74, 0.26));
  box-shadow: 0 0 0 2px rgba(211, 168, 74, 0.14);
}
.lpage--pen .sent { cursor: pointer; }
.lpage--pen .sent:hover { background: rgba(211, 168, 74, 0.16); }
.lpage--pen .sent:focus-visible { outline: 1px dashed #8c6a2c; outline-offset: 2px; }
/* the verse the dotted phrase opens: the bot's dark voice, set INTO the paper */
.lpage__verse {
  margin: 1rem 0 0.2rem;
  padding: 0.8rem 1rem 0.7rem;
  background: var(--bg-raise);
  border: 1px solid rgba(90, 66, 30, 0.55);
  border-left: 2px solid var(--brass);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
}
.lpage__verse-text {
  margin: 0 0 0.3rem;
  font-family: var(--accent);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink-bright);
}
.lpage__verse-cite {
  margin: 0;
  font-family: var(--display);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
/* the apparatus: a hairline rule, then the note, exactly like the printed page */
.lpage__notes {
  margin-top: 1.15rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(90, 66, 30, 0.4);
}
.lpage__note {
  margin: 0;
  font-family: var(--accent);
  font-size: 0.9rem;
  line-height: 1.55;
  color: #4c3b1d;
  text-wrap: pretty;
}
.lpage__note b { color: #8c6a2c; font-size: 0.8em; vertical-align: super; }
.lpage__note.swap { animation: tlTick 0.45s ease; }
.lpage__tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1.4rem;
}
.lpage__pen {
  border: 1px solid var(--brass-faint);
  background: var(--bg-raise);
  color: var(--brass);
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.lpage__pen[aria-pressed="true"] {
  color: var(--brass-lift);
  border-color: var(--brass);
  box-shadow: 0 0 14px rgba(211, 174, 118, 0.3);
}
.lpage__pen:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }
.lpage__kept {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ink-faint);
}
/* the "kept" toast: a quiet word from the margin */
.lpage__toast {
  position: absolute;
  left: 50%;
  bottom: -0.4rem;
  transform: translateX(-50%);
  background: var(--bg-sunk);
  border: 1px solid var(--brass-faint);
  color: var(--brass-lift);
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.45rem 0.8rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.lpage__toast.on { opacity: 1; transform: translateX(-50%) translateY(8px); }

/* ─── engine VIII extensions: the search that keeps answering, and the desk ─── */
.searchcard__res { min-height: 12.5rem; }   /* results swap in place; the card never pumps the room */
.searchcard__bookline {
  margin: 0 0 1rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--brass-faint);
  background: var(--brass-ghost);
  font-size: 0.95rem;
  color: var(--ink-dim);
}
.searchcard__bookline span { font-style: italic; color: var(--ink-faint); font-size: 0.85rem; }
.searchcard__bookline b { color: var(--brass-lift); font-family: var(--accent); font-size: 1.05rem; }
.searchcard__hit { margin-bottom: 0.9rem; }
.searchcard__hit:last-child { margin-bottom: 0; }
.searchcard__open { color: var(--brass-dim); font-style: italic; margin-left: 0.5rem; white-space: nowrap; }
.searchcard__again {
  margin-top: 1rem;
  border: 1px solid var(--brass-faint);
  background: transparent;
  color: var(--brass);
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
}
.searchcard__again:hover { color: var(--brass-lift); border-color: var(--brass); }
.searchcard__again:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }
.sc-in { animation: scIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--d, 0ms); }
@keyframes scIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .sc-in { animation: none; } }

.refdesk { margin-top: 2.2rem; }
.refdesk__eyebrow {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
}
.refdesk__card {
  border: 1px solid var(--rule);
  background: var(--bg-raise);
  padding: 1.2rem 1.3rem 1.1rem;
}
.refdesk__bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid var(--brass-faint);
  background: var(--bg-sunk);
  padding: 0.6rem 0.9rem;
  font-family: var(--accent);
  font-size: 1.08rem;
  font-style: italic;
  color: var(--ink-bright);
  margin-bottom: 1rem;
}
.refdesk__bar span { color: var(--brass-dim); font-style: normal; font-size: 0.85rem; }
.refdesk__art { border-left: 2px solid var(--brass); padding-left: 1rem; }
.refdesk__head {
  margin: 0 0 0.35rem;
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.refdesk__head b {
  font-family: var(--accent);
  font-size: 1.2rem;
  color: var(--brass-lift);
  letter-spacing: 0.02em;
}
.refdesk__head span {
  font-family: var(--display);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.refdesk__body {
  margin: 0;
  font-family: var(--accent);
  font-size: 1.02rem;
  color: var(--ink);
  text-wrap: pretty;
}
.refdesk__also { margin: 0.9rem 0 0; font-size: 0.86rem; color: var(--ink-faint); font-style: italic; }
.refdesk__also b { color: var(--ink-dim); font-weight: 600; }

/* ═══ ACT V — the arena ═══ */

.arena {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.6rem;
  align-items: start;
  margin-bottom: 2.6rem;
}
@media (max-width: 780px) { .arena { grid-template-columns: 1fr; } }
.arena__main { max-width: 66ch; }

/* the engraving reads as a plate hung on the wall, feathered like the logo */
.arena__art {
  margin: 0;
  position: sticky;
  top: 2rem;
}
.arena__art img {
  width: 100%;
  height: auto;
  display: block;
  filter: sepia(0.25) contrast(1.02);
  opacity: 0.92;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.arena__art figcaption {
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.8rem;
  margin-top: 0.5rem;
}
@media (max-width: 780px) { .arena__art { position: static; max-width: 420px; margin: 0 auto; } }

/* the tier ladder */
.ladder {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  border: 1px solid var(--rule);
  background: var(--bg-raise);
}
/* each tier is a FOLD now (v154): the summary wears the old row's grid, and
   the body opens beneath it with who fights at that rank */
.ladder li {
  display: block;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.ladder li:first-child { border-top: 0; }
.tierfold summary {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto auto;
  align-items: center;
  gap: 0 1rem;
  padding: 0.8rem 1.1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.2s ease;
}
.tierfold summary::-webkit-details-marker { display: none; }
.tierfold summary::after {
  content: '▸';
  color: var(--acc);
  font-size: 0.7rem;
  opacity: 0.7;
  transition: transform 0.2s ease;
}
.tierfold[open] summary::after { transform: rotate(90deg); }
.tierfold summary:hover { background: var(--acc-ghost); }
.tierfold summary:focus-visible { outline: 1px solid var(--acc); outline-offset: -1px; }
.tierfold__body {
  padding: 0.1rem 1.1rem 1rem 3.7rem;
  border-left: 2px solid var(--acc-faint);
  margin-left: 1.1rem;
}
.tierfold__body p { margin: 0 0 0.55rem; color: var(--ink-dim); font-size: 0.94rem; }
.tierfold__body p:last-child { margin-bottom: 0; }
.tierfold__champs b { color: var(--acc-lift); }
.tierfold__body b { color: var(--ink); }
.tierfold__champs b:first-child { color: var(--acc); font-size: 0.8em; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--display); }
@media (max-width: 640px) {
  .tierfold__body { padding-left: 1.1rem; margin-left: 0.6rem; }
}
.ladder__no {
  font-family: var(--display);
  font-weight: 700;
  color: var(--brass-dim);
  font-size: 1.05rem;
  text-align: center;
}
.ladder__who { display: flex; flex-direction: column; min-width: 0; }
.ladder__who b { color: var(--ink); font-weight: 600; font-size: 1.02rem; }
.ladder__who i {
  font-style: normal;
  color: var(--ink-faint);
  font-size: 0.84rem;
}
.ladder__rate {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* the climb brightens as it steepens — I dim brass, II lifted, III near-white,
   then the boss row burns in the act's own ember */
.ladder li:nth-child(2) .ladder__no { color: var(--brass-lift); }
.ladder li:nth-child(3) .ladder__no { color: var(--ink-bright); }
.ladder__boss {
  background: linear-gradient(90deg, var(--acc-ghost), transparent 75%);
}
.ladder__boss .ladder__no { color: var(--acc); }
.ladder__boss .ladder__who b { color: var(--acc-lift); }
.ladder__boss .ladder__rate { color: var(--acc); }

.arena__warn {
  font-family: var(--display);
  font-size: 0.78rem !important;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--acc) !important;
  text-shadow: 0 0 18px var(--acc-soft);
}

/* the game card: sliding headers */
.game {
  border: 1px solid var(--rule);
  background: var(--bg-raise);
  margin-bottom: 2.6rem;
}
.game__tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-panel);
}
.game__tabs button {
  flex: 1 1 auto;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.9rem 1rem 0.8rem;
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.game__tabs button:hover { color: var(--acc); }
.game__tabs button[aria-selected='true'] {
  color: var(--acc-lift);
  border-bottom-color: var(--acc);
  background: linear-gradient(180deg, transparent 55%, var(--acc-ghost));
}
.game__panel { padding: 1.7rem clamp(1.2rem, 3.5vw, 2.2rem) 1.5rem; }
.game__panel[hidden] { display: none; }
html.js .game__panel { animation: slidein 0.35s ease; }
@keyframes slidein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.js .game__panel { animation: none; } }
.game__panel > p { margin: 0 0 1rem; color: var(--ink); font-size: 1.02rem; max-width: 68ch; text-wrap: pretty; }
.game__panel > p:last-child { margin-bottom: 0; }
.game__panel i { color: var(--ink); }
.game__panel .ladder { margin-top: 0.2rem; }

/* the meters */
.meter { margin: 1.3rem 0 1.4rem; max-width: 560px; }
.meter--dual {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1rem 2rem;
}
.meter__cap {
  display: flex;
  justify-content: space-between;
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acc);
  margin-bottom: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.meter__track {
  position: relative;
  height: 10px;
  border: 1px solid var(--rule);
  background: var(--bg-sunk);
}
/* the fill takes the act's accent — brass in the profile, ember in the arena */
.meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--acc); /* fallback for engines without color-mix */
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--acc) 52%, #000),
    var(--acc) 70%, var(--acc-lift));
}
.meter__tick {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 2px;
  background: var(--ink-bright);
}
.meter__tick--adv { background: var(--brass-lift); }
/* every meter wakes empty and pours to its mark when its card arrives */
@media (prefers-reduced-motion: no-preference) {
  html.js .meter__fill { transition: width 1.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s; }
  html.js [data-reveal]:not(.in) .meter__fill { width: 0 !important; }
  /* the conviction meter idles alive, like a machine mid-game */
  html.js .in .meter__fill--live { animation: meterlive 3.6s ease-in-out 2.4s infinite; }
  @keyframes meterlive {
    0%, 100% { transform: scaleX(1); }
    45% { transform: scaleX(0.985); }
    70% { transform: scaleX(1.012); }
  }
  .meter__fill--live { transform-origin: left center; }
  /* the demo pours to 76 — the Last Stand mark ticks as the fill crosses it */
  html.js .in .meter__tick:not(.meter__tick--adv) { animation: tickcross 0.6s ease 1.9s both; }
  @keyframes tickcross {
    0%, 100% { box-shadow: none; }
    40% { box-shadow: 0 0 12px 2px var(--acc); background: var(--acc-lift); }
  }
}
.meter__note {
  margin-top: 0.55rem;
  color: var(--ink-faint);
  font-size: 0.88rem;
  line-height: 1.5;
}
.meter__note b { color: var(--brass-lift); }

/* ═══ THE CABINET — a full 16-bit machine standing in a gothic library.
   The rule that holds the whole design: 'Press Start 2P' + phosphor amber live
   ONLY inside the CRT glass. The marquee and placard are the machine's printed
   surfaces — they speak the library's own gothic (a cabinet built FOR this hall).
   The glass is a fixed-height stage: every mode screen swaps inside it, so the
   page's height never moves under ScrollTrigger's pins. ═══ */
.cab {
  --ph: #ffb54d;                            /* phosphor amber */
  --ph-hi: #ffe9c4;                         /* bright */
  --ph-dim: rgba(255, 181, 77, 0.52);
  --ph-ghost: rgba(255, 181, 77, 0.14);
  --ph-red: #ff6b4d;                        /* damage / shame */
  --ph-glow: rgba(255, 176, 0, 0.55);
  --cabwood: #050505;
  position: relative;
  margin: 0 auto 2.6rem;
  max-width: 860px;
  border: 1px solid var(--brass-faint);
  /* piano-black cabinet: deep gloss, not wood-brown — a machine, kept polished */
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.006) 10% 90%, rgba(255, 255, 255, 0.05)),
    linear-gradient(180deg, #0b0b0d, var(--cabwood) 42%);
  /* twin gold coach lines in the gloss — pinstripes paint on the cab's own
     ground, behind every panel, like the 3px/4px pair always has */
  box-shadow: inset 0 0 0 3px var(--cabwood), inset 0 0 0 4px var(--brass-faint),
    inset 0 0 0 7px var(--cabwood), inset 0 0 0 8px rgba(184, 148, 94, 0.16),
    0 24px 60px var(--shadow),
    0 0 60px -18px rgba(255, 62, 38, 0.22);
}
/* the gloss streak: one long specular highlight down the lacquer */
.cab::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 5%, rgba(255, 255, 255, 0.05) 10%, transparent 16%,
    transparent 83%, rgba(255, 240, 230, 0.03) 90%, transparent 96%);
}

/* the marquee: a real backlit plexi panel — crossed pixel swords between the
   words, red light bleeding up from behind the plexi; this machine was built
   for one fight */
.cab__marquee {
  position: relative;
  padding: 0.95rem 1.2rem 0.8rem;
  text-align: center;
  border-bottom: 1px solid var(--brass-faint);
  background:
    linear-gradient(180deg, rgba(255, 245, 220, 0.045), transparent 34%),
    radial-gradient(140% 170% at 50% 115%, rgba(255, 66, 40, 0.3), rgba(255, 66, 40, 0.07) 55%, transparent 78%);
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 200, 0.08),
    inset 0 -14px 26px -18px rgba(255, 80, 48, 0.6);
}
.cab__marqrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.7rem, 3vw, 1.4rem);
}
.cab__marqside { position: relative; flex: 0 0 auto; line-height: 0; }
.cab__marqside canvas {
  display: block;
  height: 46px;
  width: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 10px rgba(255, 90, 50, 0.4));
}

/* machine screws: brushed heads, each slot at its own angle */
.cab__screw {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #5c5245, #2e2820 58%, #17130e);
  box-shadow: inset 0 1px 1px rgba(255, 235, 200, 0.18), 0 1px 2px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.cab__screw::after {
  content: '';
  position: absolute;
  left: 1px; right: 1px;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.75);
  transform: rotate(var(--slot, 0deg));
}
.cab__screw--ml { left: 9px; top: 50%; margin-top: -5px; --slot: 24deg; }
.cab__screw--mr { right: 9px; top: 50%; margin-top: -5px; --slot: -52deg; }
.cab__screw--tl { left: 7px; top: 7px; --slot: 12deg; }
.cab__screw--tr { right: 7px; top: 7px; --slot: -66deg; }
.cab__screw--bl { left: 7px; bottom: 5px; --slot: 78deg; }
.cab__screw--br { right: 7px; bottom: 5px; --slot: -30deg; }
.cab__marqtitle {
  display: block;
  font-family: var(--deco);
  font-size: clamp(1.02rem, 3.4vw, 1.5rem);
  letter-spacing: 0.14em;
  color: var(--ph-hi);
  text-shadow: 0 0 22px rgba(255, 110, 60, 0.55), 0 0 60px rgba(255, 60, 32, 0.32);
}
.cab__marqsub {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.5em;
  color: var(--brass-lift);
  opacity: 0.85;
}
@media (prefers-reduced-motion: no-preference) {
  .cab__marqtitle { animation: marqhum 7s ease-in-out infinite; }
  @keyframes marqhum {
    0%, 100% { text-shadow: 0 0 22px rgba(255, 110, 60, 0.55), 0 0 60px rgba(255, 60, 32, 0.32); }
    50% { text-shadow: 0 0 30px rgba(255, 120, 65, 0.7), 0 0 80px rgba(255, 60, 32, 0.44); }
  }
}

/* the bezel + curved glass */
.cab__bezel {
  position: relative;
  padding: 1.1rem 1.1rem 0.9rem;
  /* corner wear + the marquee's red light falling onto the bezel top */
  background:
    linear-gradient(180deg, rgba(255, 62, 38, 0.07), transparent 14%),
    radial-gradient(60px 26px at 0% 100%, rgba(255, 235, 200, 0.035), transparent 70%),
    radial-gradient(60px 26px at 100% 100%, rgba(255, 235, 200, 0.03), transparent 70%);
}
.cab__crt {
  position: relative;
  height: 500px;
  border-radius: 16px / 22px;
  border: 2px solid #241d12;
  background: radial-gradient(115% 125% at 50% 8%, #1a1206, #0a0703 72%);
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.85),
    inset 0 0 6px rgba(0, 0, 0, 0.9),
    0 0 0 5px var(--cabwood),
    0 0 0 6px rgba(184, 148, 94, 0.28),
    0 0 44px -14px var(--ph-glow);
  overflow: hidden;
}
.arc__stage { position: absolute; inset: 0; }
.arc__screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center;  /* tall content scrolls; its top stays reachable */
  gap: 0.55rem;
  padding: 1.2rem 1.1rem;
  font-family: 'Press Start 2P', 'Consolas', ui-monospace, monospace;
  font-size: 0.68rem;
  line-height: 1.85;
  color: var(--ph);
  text-align: center;
  text-shadow: 0 0 8px var(--ph-glow);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.arc__screen::-webkit-scrollbar { display: none; }
.arc__screen[hidden] { display: none; }

/* glass physics: scanlines + a slot mask, phosphor bloom, vignette, curvature */
.arc__fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.10) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 0%, rgba(255, 176, 0, 0.07), transparent 60%),
    radial-gradient(100% 74% at 50% 30%, rgba(255, 214, 140, 0.045), transparent 58%),
    radial-gradient(145% 130% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.55) 96%);
}
.arc__fx::after {
  /* a faint standing glare, top-left — the hall's own lantern on the glass */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 245, 220, 0.05) 4%, transparent 26%);
}
.arc__fx::before {
  /* the tube is curved: every few breaths a soft glare crosses the glass */
  content: '';
  position: absolute;
  inset: -20% -35%;
  background: linear-gradient(112deg,
    transparent 44%, rgba(255, 245, 220, 0.045) 50%, rgba(255, 245, 220, 0.01) 54%, transparent 58%);
  transform: translateX(-60%);
}
@media (prefers-reduced-motion: no-preference) {
  .arc__fx::before { animation: glasssweep 13s ease-in-out infinite; }
  @keyframes glasssweep {
    0%, 78% { transform: translateX(-60%); }
    92%, 100% { transform: translateX(60%); }
  }
}

/* the zap: one bright frame when the machine takes your coin or your start */
.arc__zap {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 100% at 50% 45%, rgba(255, 233, 196, 0.9), rgba(255, 181, 77, 0.5) 60%, transparent 90%);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .arc__zap.go { animation: zapflash 0.38s steps(3) forwards; }
  @keyframes zapflash { 0% { opacity: 0.85; } 100% { opacity: 0; } }
  /* must outrank the crtboot rule below — both set `animation` on the stage */
  html.js .cab__crt.arc-on .arc__stage.arc-settle { animation: crtsettle 0.5s cubic-bezier(0.2, 0.9, 0.3, 1); }
  @keyframes crtsettle {
    0% { transform: scale(1.012, 0.96); opacity: 0.6; }
    55% { transform: scale(0.997, 1.015); opacity: 1; }
    100% { transform: none; }
  }
}
@media (prefers-reduced-motion: no-preference) {
  .cab__crt { animation: crt 5s steps(60) infinite; }
  @keyframes crt {
    0%, 100% { filter: brightness(1); }
    47% { filter: brightness(1.04); }
    48% { filter: brightness(0.97); }
    52% { filter: brightness(1.02); }
  }
  /* the machine boots when the reader approaches — JS adds .arc-on once */
  html.js .cab__crt .arc__stage { opacity: 0; }
  html.js .cab__crt.arc-on .arc__stage { opacity: 1; animation: crtboot 0.9s cubic-bezier(0.2, 0.9, 0.3, 1); }
  @keyframes crtboot {
    0% { opacity: 0; transform: scale(1, 0.004); filter: brightness(6); }
    38% { opacity: 1; transform: scale(0.86, 0.02); filter: brightness(5); }
    58% { transform: scale(1, 1.04); filter: brightness(1.8); }
    100% { transform: none; filter: none; }
  }
  .arc-shake { animation: crtshake 0.42s steps(12) !important; }
  @keyframes crtshake {
    0%, 100% { transform: none; }
    20% { transform: translate(-5px, 3px); }
    40% { transform: translate(4px, -4px); }
    60% { transform: translate(-3px, -2px); }
    80% { transform: translate(3px, 2px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  html.js .cab__crt .arc__stage { opacity: 1; }
}
.arc__status {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* — the title screen — */
.arc__t1 {
  margin: 0;
  font-size: clamp(0.95rem, 3vw, 1.35rem);
  line-height: 1.55;
  color: var(--ph-hi);
  text-shadow: 0 0 14px var(--ph-glow), 0 0 44px rgba(255, 176, 0, 0.35);
  letter-spacing: 0.08em;
}
.arc__t2 { margin: 0; font-size: 0.57rem; opacity: 0.85; letter-spacing: 0.1em; }
.arc__scores {
  list-style: none;
  margin: 0.4rem auto;
  padding: 0;
  width: min(34ch, 100%);
  font-size: 0.56rem;
}
.arc__scores li {
  display: grid;
  grid-template-columns: 3.6em 1fr auto;
  gap: 0.9em;
  padding: 0.3rem 0;
  text-align: left;
}
.arc__scores li span:last-child { font-variant-numeric: tabular-nums; }
/* the podium reads like a podium — first burns brightest; row four is sacred, untouched */
.arc__scores li:nth-child(1) { color: var(--ph-hi); text-shadow: 0 0 10px var(--ph-glow); }
.arc__scores li:nth-child(3) { opacity: 0.78; }
.arc__shame { color: var(--ph-red); text-shadow: 0 0 8px rgba(255, 77, 40, 0.55); }
.arc__insert { margin: 0.2rem 0 0; font-size: 0.52rem; opacity: 0.75; }
.arc__insert--nag { color: var(--ph-red); opacity: 1; text-shadow: 0 0 10px rgba(255, 77, 40, 0.6); }
@media (prefers-reduced-motion: no-preference) {
  .arc__insert--nag { animation: nagblink 0.9s steps(2, jump-none) 3; }
  @keyframes nagblink { 50% { opacity: 0.2; } }
}
.arc__start { margin: 0; font-size: 0.66rem; color: var(--ph-hi); }
@media (prefers-reduced-motion: no-preference) {
  .arc__start { animation: pressstart 1.4s steps(2, jump-none) infinite; }
  @keyframes pressstart { 50% { opacity: 0.15; } }
  .arc__scores li { animation: scoreglow 6.4s ease-in-out infinite; }
  .arc__scores li:nth-child(2) { animation-delay: 1.6s; }
  .arc__scores li:nth-child(3) { animation-delay: 3.2s; }
  .arc__scores li:nth-child(4) { animation-delay: 4.8s; }
  @keyframes scoreglow {
    0%, 20%, 100% { filter: brightness(1); }
    8% { filter: brightness(1.55); }
  }
}

/* — attract-mode roster + generic attract screens — */
.arc__eyebrow { margin: 0; font-size: 0.52rem; letter-spacing: 0.22em; opacity: 0.7; }
.arc__big { margin: 0; font-size: 0.86rem; color: var(--ph-hi); letter-spacing: 0.06em; }
.arc__line { margin: 0; font-size: 0.58rem; opacity: 0.9; max-width: 46ch; }
.arc__dim { opacity: 0.6; }

/* — the ghost bout: the machine demos itself behind PRESS START — */
/* double class: must outrank .arc__bout's flex-start, which sits later in the file */
.arc__bout.arc__ghost { justify-content: center; padding-bottom: 2.8rem; }
.arc__demo {
  align-self: flex-start;
  border: 1px solid rgba(255, 181, 77, 0.4);
  padding: 0.18rem 0.5rem 0.14rem;
  font-size: 0.44rem;
  letter-spacing: 0.3em;
  opacity: 0.75;
}
.arc__say--you { border-color: rgba(255, 233, 196, 0.42); background: rgba(255, 181, 77, 0.05); }
.arc__say--you b:first-child { display: block; font-size: 0.46rem; letter-spacing: 0.24em; opacity: 0.7; }
.arc__ghost .arc__say { flex: 0 0 auto; }
.arc__stamp {
  display: inline-block;
  color: var(--ph-hi);
  text-shadow: 0 0 10px var(--ph-glow);
}
@media (prefers-reduced-motion: no-preference) {
  .arc__stamp { animation: stampin 0.34s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
  @keyframes stampin {
    0% { transform: scale(2.3) rotate(-6deg); opacity: 0; }
    60% { transform: scale(0.95) rotate(1deg); opacity: 1; }
    100% { transform: none; opacity: 1; }
  }
}
.arc__ghost .arc__start { position: absolute; left: 0; right: 0; bottom: 0.65rem; text-align: center; }

/* the gallery: the hall's dark rank of heads along the glass bottom */
.arc__crowd {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 18px;
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: auto 100%;
  image-rendering: pixelated;
  opacity: 0.85;
  pointer-events: none;
}

/* — the old code: the secret roster's votive candles (v154, the fire strip
   retired) — one flame per member, lit as each steps out of the dark — */
.arc__candles {
  display: flex;
  justify-content: center;
  gap: clamp(0.7rem, 4vw, 1.5rem);
  pointer-events: none;
  flex-shrink: 0;
}
.arc__candles i {
  position: relative;
  width: 20px;
  height: 36px;
  opacity: 0.16;
  transition: opacity 0.9s ease;
}
.arc__candles i.lit { opacity: 1; }
.arc__candles b {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  image-rendering: pixelated;
}
.arc__candles b + b { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .arc__candles i.lit b + b { animation: arccandleflick 0.46s steps(1) infinite; }
  @keyframes arccandleflick { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
  /* the lit flame carries a soft halo */
  .arc__candles i.lit { filter: drop-shadow(0 0 6px rgba(255, 154, 61, 0.5)); }
}
.arc__ember {
  color: var(--ph-red);
  text-shadow: 0 0 9px rgba(255, 77, 40, 0.55);
}
/* six kin now (v154, Chris joined): one full row on desktop, never a 5+1 orphan */
.arc__grid.arc__grid--kin { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 620px) {
  /* six across is a desktop luxury — thumbs get three columns, two rows */
  .arc__grid.arc__grid--kin { grid-template-columns: repeat(3, 1fr); width: min(340px, 100%); }
}
.cab__etch {
  position: absolute;
  right: 0.85rem; bottom: 0.3rem;
  margin: 0;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 0.42rem;
  letter-spacing: 0.12em;
  /* lifted 0.17 -> 0.3 (v154, Trevor: "slightly more visible") — still an
     etching, but one a curious eye actually catches */
  color: rgba(230, 181, 134, 0.3);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  transform: rotate(-1.6deg);
  user-select: none;
  pointer-events: none;
}
/* and once, as the cabinet arrives, the etching catches the light */
@media (prefers-reduced-motion: no-preference) {
  html.js .cab.in .cab__etch { animation: etchglint 3.2s ease 1.4s 1; }
  @keyframes etchglint {
    0%, 100% { color: rgba(230, 181, 134, 0.3); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
    38% { color: rgba(255, 219, 166, 0.8); text-shadow: 0 0 12px rgba(255, 181, 77, 0.4); }
  }
}

/* — the coming-soon reel: what this machine grows at launch — */
.arc__soon {
  margin: 0.2rem 0 0;
  width: min(44ch, 100%);
  text-align: left;
  font-size: 0.52rem;
  line-height: 2;
  display: grid;
  gap: 0.3rem;
}
.arc__soon b { color: var(--ph-hi); font-weight: 400; }

/* — challenger select — */
.arc__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.45rem;
  width: min(560px, 100%);
  margin: 0.2rem 0;
}
.arc__tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 6;
  padding: 0;
  background: rgba(255, 181, 77, 0.04);
  border: 2px solid rgba(255, 181, 77, 0.28);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.arc__tile:hover, .arc__tile:focus-visible, .arc__tile[data-hot='1'] {
  border-color: var(--ph-hi);
  background: var(--ph-ghost);
  outline: none;
  box-shadow: 0 0 18px -4px var(--ph-glow);
}
.arc__tile canvas { display: block; width: 78%; height: auto; image-rendering: pixelated; }
.arc__nameplate {
  width: min(560px, 100%);
  border: 2px solid rgba(255, 181, 77, 0.28);
  background: rgba(0, 0, 0, 0.45);
  padding: 0.55rem 0.7rem 0.5rem;
  font-size: 0.57rem;
  line-height: 1.8;
  min-height: 5.6em;
  /* NEVER a shrinking flex child (v154): when a screen ran taller than the
     tube, flex compressed this box and its text rendered OUTSIDE the border
     (Trevor caught it on the secret roster) — boxes hold, screens scroll */
  flex-shrink: 0;
}
.arc__grid, .arc__choices { flex-shrink: 0; }
.arc__nameplate b { display: block; color: var(--ph-hi); font-weight: 400; font-size: 0.66rem; }
.arc__nameplate i { font-style: normal; opacity: 0.8; }
.arc__danger { color: var(--ph-red); text-shadow: 0 0 7px rgba(255, 77, 40, 0.5); letter-spacing: 0.18em; }

/* — the bout — */
.arc__bout {
  justify-content: flex-start;
  text-align: left;
  gap: 0.5rem;
}
.arc__hud {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.8rem;
  align-items: center;
  width: 100%;
}
.arc__hud canvas { grid-row: 1 / 3; width: 58px; height: auto; image-rendering: pixelated; }
.arc__foe { margin: 0; font-size: 0.62rem; color: var(--ph-hi); }
.arc__convrow { display: flex; align-items: center; gap: 0.6em; font-size: 0.5rem; }
.arc__convbar {
  position: relative;
  flex: 1;
  height: 10px;
  border: 2px solid rgba(255, 181, 77, 0.4);
  background: rgba(0, 0, 0, 0.5);
}
.arc__convbar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ph);
  box-shadow: 0 0 10px var(--ph-glow);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.arc__convbar::after {
  /* LED segmentation over the fill — an arcade meter, not a progress bar */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(0, 0, 0, 0.4) 5px 6px);
  pointer-events: none;
}
.arc__convbar u {
  /* the Last Stand zone: 75-85 burns ember — the bar teaches the threshold */
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(255, 77, 40, 0.16);
  border-left: 1px solid rgba(255, 77, 40, 0.55);
}
.arc__convbar em {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 2px;
  background: var(--ph-hi);
  box-shadow: 0 0 6px var(--ph-glow);
}
.arc__say {
  width: 100%;
  flex: 1;
  border: 2px solid rgba(255, 181, 77, 0.28);
  background: rgba(0, 0, 0, 0.4);
  padding: 0.7rem 0.8rem;
  font-size: 0.58rem;
  line-height: 2;
  overflow: hidden;
}
.arc__say b { color: var(--ph-hi); font-weight: 400; }
.arc__say .arc__judge { color: var(--ph-dim); }
.arc__say .arc__crit { color: var(--ph-red); }
.arc__choices { display: flex; flex-direction: column; gap: 0.35rem; width: 100%; }
.arc__choice {
  font: inherit;
  font-size: 0.55rem;
  line-height: 1.7;
  text-align: left;
  color: var(--ph);
  text-shadow: 0 0 8px var(--ph-glow);
  background: rgba(255, 181, 77, 0.05);
  border: 2px solid rgba(255, 181, 77, 0.3);
  padding: 0.45rem 0.6rem 0.4rem;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.arc__choice:hover, .arc__choice:focus-visible {
  border-color: var(--ph-hi);
  background: var(--ph-ghost);
  outline: none;
}
.arc__choice b { color: var(--ph-hi); font-weight: 400; }
.arc__choice--go {
  text-align: center;
  color: var(--ph-hi);
  border-color: var(--ph-hi);
  background: var(--ph-ghost);
}
.arc__choices--row { flex-direction: row; flex-wrap: wrap; justify-content: center; width: auto; margin-top: 0.3rem; }
.arc__danger { margin: 0; font-size: 0.55rem; color: var(--ph-red); text-shadow: 0 0 7px rgba(255, 77, 40, 0.5); letter-spacing: 0.18em; }
.arc__flash {
  position: absolute;
  inset: 0;
  background: rgba(255, 233, 196, 0.85);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .arc__flash.go { animation: critflash 0.5s steps(3) forwards; }
  @keyframes critflash { 0% { opacity: 0.9; } 100% { opacity: 0; } }
}

/* — the control panel — */
.cab__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 4vw, 2.6rem);
  padding: 1.05rem 1.2rem 1.15rem;
  border-top: 1px solid var(--brass-faint);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 55%), #0d0c0a;
  position: relative;
}
.cab__stick {
  position: relative;
  width: 62px; height: 62px;
  flex: 0 0 auto;
  cursor: grab;
  touch-action: none;   /* dragging the ball must never scroll the page */
}
.cab__stick.gripped { cursor: grabbing; }
.cab__stick::before {
  /* the face-on base: a dished steel throat, seen from above */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #262019 26%, #14110d 60%, #060505 100%);
  border: 1px solid var(--brass-faint);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.85), inset 0 -1px 0 rgba(255, 235, 200, 0.06);
}
.cab__stick i {
  /* the red ball — the JS drags this and snaps it home */
  position: absolute;
  left: 50%; top: 50%;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ff8a70, #c22e1e 48%, #7c1610 85%);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.65), inset 0 1px 2px rgba(255, 255, 255, 0.35);
  transition: transform 0.16s cubic-bezier(0.3, 1.7, 0.5, 1);
}
.cab__stick.gripped i { transition: none; }
@media (prefers-reduced-motion: no-preference) {
  .cab__stick.wag i { animation: stickwag 0.5s ease; }
  @keyframes stickwag {
    0%, 100% { translate: 0 0; }
    30% { translate: -7px 0; }
    70% { translate: 5px 0; }
  }
}
/* B and A: red arcade plastic, wired to nothing but the old code */
.cab__ab { display: flex; gap: 0.55rem; align-items: center; flex: 0 0 auto; }
.cab__btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 0;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 0.5rem;
  color: rgba(255, 232, 218, 0.92);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  background: radial-gradient(circle at 32% 28%, #ff8a70, #c22e1e 45%, #7c1610 82%);
  box-shadow: 0 3px 0 #4a0c06, 0 6px 12px rgba(0, 0, 0, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.35), 0 0 0 4px #14110d, 0 0 0 5px var(--brass-faint);
  cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.cab__btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #4a0c06, 0 3px 8px rgba(0, 0, 0, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 0 0 4px #14110d, 0 0 0 5px var(--brass-faint),
    0 0 14px 2px rgba(255, 70, 40, 0.4);
}
.cab__key {
  font-family: var(--display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #2a1006;
  background: radial-gradient(circle at 35% 30%, #ffd9a0, var(--ph) 55%, #b06a1e);
  border: 0;
  border-radius: 50%;
  width: 64px; height: 64px;
  cursor: pointer;
  box-shadow: 0 4px 0 #6d3f10, 0 8px 18px rgba(0, 0, 0, 0.55), 0 0 0 5px #14110d, 0 0 0 6px var(--brass-faint);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.3s ease;
}
.cab__key:active { transform: translateY(3px); box-shadow: 0 1px 0 #6d3f10, 0 4px 10px rgba(0, 0, 0, 0.55), 0 0 0 5px #14110d, 0 0 0 6px var(--brass-faint); }
.cab__key:focus-visible { outline: 2px solid var(--ph-hi); outline-offset: 4px; }
.cab__key[data-lit='0'] { filter: saturate(0.35) brightness(0.6); }
@media (prefers-reduced-motion: no-preference) {
  .cab__key[data-lit='1'] { animation: keypulse 1.6s ease-in-out infinite; }
  @keyframes keypulse {
    0%, 100% { box-shadow: 0 4px 0 #6d3f10, 0 8px 18px rgba(0, 0, 0, 0.55), 0 0 0 5px #14110d, 0 0 0 6px var(--brass-faint), 0 0 18px 2px var(--ph-glow); }
    50% { box-shadow: 0 4px 0 #6d3f10, 0 8px 18px rgba(0, 0, 0, 0.55), 0 0 0 5px #14110d, 0 0 0 6px var(--brass-faint), 0 0 34px 6px var(--ph-glow); }
  }
}
/* the coin door: a hinged service plate, not a bare button */
.cab__coindoor {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.65rem 0.45rem;
  border: 1px solid var(--brass-faint);
  border-radius: 3px;
  background: linear-gradient(180deg, #17130f, #0d0b08);
  box-shadow: inset 0 1px 0 rgba(255, 235, 200, 0.05);
}
.cab__coindoor::before {
  /* hinge knuckles down the left edge */
  content: '';
  position: absolute;
  left: -2px; top: 14%;
  width: 3px; height: 72%;
  background: linear-gradient(180deg,
    transparent 0 6%, rgba(184, 148, 94, 0.55) 6% 22%, transparent 22% 42%,
    rgba(184, 148, 94, 0.55) 42% 58%, transparent 58% 78%,
    rgba(184, 148, 94, 0.55) 78% 94%, transparent 94%);
  border-radius: 2px;
}
.cab__coindoor::after {
  /* the lock barrel */
  content: '';
  position: absolute;
  right: 5px; bottom: 5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4133, #17130e 72%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.cab__coin {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: #14110d;
  border: 1px solid var(--brass-faint);
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cab__coin:hover, .cab__coin:focus-visible { border-color: var(--brass-lift); box-shadow: 0 0 16px -6px var(--ph-glow); outline: none; }
.cab__coinslot {
  position: relative;
  width: 30px; height: 42px;
  background: linear-gradient(180deg, #241f18, #16130e);
  border: 1px solid var(--brass-faint);
  border-radius: 3px;
  overflow: hidden;
}
.cab__coinslot::after {
  /* the slit */
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 22px;
  transform: translate(-50%, -50%);
  background: #000;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(184, 148, 94, 0.35);
}
.cab__token {
  position: absolute;
  left: 50%; top: -26px;
  width: 18px; height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffe9c4, var(--ph) 52%, #a05f18);
  box-shadow: 0 0 8px var(--ph-glow);
  opacity: 0;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .cab__coin.drop .cab__token { animation: coindrop 0.55s cubic-bezier(0.5, 0, 0.9, 0.4) forwards; }
  @keyframes coindrop {
    0% { opacity: 1; top: -26px; transform: rotate(0); }
    100% { opacity: 1; top: 46px; transform: rotate(220deg); }
  }
}
.cab__coinlabel {
  font-family: var(--display);
  font-size: 0.5rem;
  letter-spacing: 0.26em;
  line-height: 1.75;
  color: var(--ink-dim);
  text-align: left;
}
.cab__credit {
  margin: 0;
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 0.5rem;
  color: var(--ph);
  text-shadow: 0 0 8px var(--ph-glow);
  opacity: 0.9;
}
.cab__soundtoggle {
  position: absolute;
  right: 0.9rem;
  bottom: 0.7rem;
  font-family: var(--display);
  font-size: 0.46rem;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  background: none;
  border: 1px solid var(--rule);
  padding: 0.34rem 0.55rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cab__soundtoggle:hover, .cab__soundtoggle:focus-visible { color: var(--brass-lift); border-color: var(--brass-lift); outline: none; }
.cab__soundtoggle[aria-pressed='true'] { color: var(--ph); border-color: var(--brass-lift); text-shadow: 0 0 8px var(--ph-glow); }

/* — the printed placard: the field guide, short card — */
.cab__placard {
  margin: 0 1.2rem 1.1rem;
  border: 1px solid var(--brass-faint);
  /* the arena's heat in the paper (v154) — the rubric dts already burn ember via --acc */
  background:
    radial-gradient(120% 100% at 50% 0%, var(--acc-ghost), transparent 60%),
    var(--bg-raise);
  padding: 1.15rem 1.3rem 1.05rem;
}
.cab__placardhead {
  margin: 0 0 0.75rem;
  text-align: center;
  font-family: var(--display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  color: var(--brass-lift);
}
.cab__rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 0.65rem 1.7rem;
  margin: 0;
}
.cab__rules div { display: grid; grid-template-columns: 7.2em 1fr; gap: 0.8em; align-items: baseline; }
.cab__rules dt {
  font-family: var(--display);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acc);
}
.cab__rules dd { margin: 0; font-size: 0.8rem; line-height: 1.55; color: var(--ink-dim); }
.cab__rules dd b { color: var(--ink); }
.cab__deck { padding: 0 1.6rem 1.4rem; }
.cab__copy { margin: 0; color: var(--ink); }

/* — the glass on a phone: long bouts scroll inside the tube, never clip — */
@media (max-width: 620px) {
  .arc__screen { padding: 1.05rem 0.85rem; }
  .arc__bout {
    overflow-y: auto;
    scrollbar-width: none;
    overscroll-behavior: contain;
  }
  .arc__bout::-webkit-scrollbar { display: none; }
  .arc__choice { padding: 0.55rem 0.65rem 0.5rem; }
  .arc__grid { gap: 0.35rem; }
  .cab__panel { flex-wrap: wrap; }
}

/* — the move list (gothic side, inside the game card) — */
.moves { margin: 1.2rem 0 0.9rem; }
.moves__group {
  font-family: var(--display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--acc);
  margin: 1.1rem 0 0.5rem;
}
.moves__group:first-child { margin-top: 0; }
.moves ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
  gap: 0.28rem 1.6rem;
}
.moves li {
  display: grid;
  grid-template-columns: 10.5em 1fr;
  gap: 0.7em;
  align-items: baseline;
  padding: 0.22rem 0;
  border-bottom: 1px dotted rgba(184, 148, 94, 0.14);
}
.moves li b { color: var(--ink); font-weight: 600; font-size: 0.88rem; }
.moves li span { color: var(--ink-faint); font-size: 0.82rem; }
.moves__coda { color: var(--ink-dim); font-size: 0.92rem; font-style: italic; }

/* the machine on a phone: same cabinet, tighter woodwork */
@media (max-width: 700px) {
  .cab__bezel { padding: 0.8rem 0.7rem 0.6rem; }
  .cab__crt { height: 560px; }
  /* the glass can NEVER spill on a phone (v154): every screen scrolls inside
     the tube, and 'safe center' keeps tall content reachable instead of
     clipping its top (the select grid was rendering OUTSIDE the cabinet) */
  .arc__screen {
    font-size: 0.62rem;
    padding: 1rem 0.8rem;
    gap: 0.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    justify-content: center;
    justify-content: safe center;
  }
  .arc__screen::-webkit-scrollbar { display: none; }
  .arc__grid { gap: 0.32rem; }
  .arc__nameplate { font-size: 0.55rem; min-height: 6.2em; }
  .arc__hud canvas { width: 48px; }
  .arc__say { font-size: 0.55rem; padding: 0.6rem 0.65rem; }
  .arc__choice { font-size: 0.53rem; }
  .cab__panel { flex-wrap: wrap; gap: 1rem 1.6rem; padding-bottom: 0.9rem; }
  .cab__soundtoggle { position: static; order: 9; }
  .cab__placard { margin: 0 0.7rem 0.9rem; padding: 1rem 1rem 0.9rem; }
  .cab__rules div { grid-template-columns: 6.4em 1fr; }
  .moves li { grid-template-columns: 9em 1fr; }
}
/* the integrity band */
.arena__law {
  border: 1px solid var(--brass-faint);
  background:
    radial-gradient(110% 100% at 50% 0%, var(--acc-ghost), transparent 55%),
    var(--bg-raise);
  box-shadow: inset 0 0 0 3px var(--bg-raise), inset 0 0 0 4px var(--brass-faint),
    0 0 58px -20px var(--acc-soft);
  padding: 1.9rem 1.9rem 1.6rem;
  max-width: 74ch;
  margin: 0 auto;
}
.arena__law h3 {
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--brass-lift);
  margin: 0 0 0.7rem;
  text-transform: uppercase;
}
.arena__law > p { margin: 0 0 0.4rem; color: var(--ink); font-size: 1.02rem; text-wrap: pretty; }
.arena__law i { color: var(--ink); }

/* ═══ the "how it works" expanders ═══ */

.how {
  margin-top: 1.1rem;
  /* the fold's spine takes the room's hue (v154) — blue in the mind, violet
     among the engines, ember on the arena floor */
  border-left: 2px solid var(--acc-faint);
  padding-left: 1rem;
}
/* the fold's handle is a REAL button now (v154, Trevor: "hard to see") — a
   ghost plate in the room's accent, not a whisper in the margin */
.how summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  user-select: none;
  border: 1px solid var(--acc-faint);
  background: var(--acc-ghost);
  border-radius: 2px;
  padding: 0.5rem 0.85rem 0.46rem;
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.how summary:focus-visible { outline: none; border-color: var(--acc); }
.how[open] summary {
  color: var(--ink-bright);
  border-color: var(--acc-faint);
  box-shadow: 0 0 14px -6px var(--acc-soft);
}
.how summary::before {
  content: 'i';
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  margin-right: 0.6em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--accent);
  font-style: italic;
  font-size: 0.92em;
  letter-spacing: 0;
  vertical-align: -0.4em;
}
.how summary::-webkit-details-marker { display: none; }
.how summary::after { content: ' ▸'; }
.how[open] summary::after { content: ' ▾'; }
.how summary:hover { color: var(--brass); }
.how div {
  margin-top: 0.6rem;
  color: var(--ink-dim);
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 62ch;
  text-wrap: pretty;
}

/* ═══ pre-register ═══ */

.prereg {
  margin: 1.6rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  width: min(460px, 100%);
  position: relative;
}
/* the Discord sigil above the hero form (v157) — an engraving, not a logo lockup */
.prereg__disc {
  flex: 1 0 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 0.35rem;
  line-height: 0;
}
.prereg__disc svg { width: 44px; height: auto; overflow: visible; }
.pdisc__body {
  fill: none;
  stroke: var(--brass);
  stroke-width: 4.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 9px rgba(211, 174, 118, 0.35));
}
.pdisc__eye { fill: var(--brass); opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .prereg__disc svg { animation: pdiscBreathe 5.5s ease-in-out infinite; }
  @keyframes pdiscBreathe { 0%, 100% { opacity: 0.82; } 50% { opacity: 1; } }
}
/* the doors, ajar — Act VII's own sigil: the seam already glows */
.prereg__doors {
  display: block;
  margin: 0.9rem auto 0.1rem;
  line-height: 0;
}
.prereg__doors svg { width: 48px; height: auto; overflow: visible; margin: 0 auto; display: block; }
.pdoor__frame, .pdoor__leaf {
  fill: none;
  stroke: var(--brass-dim);
  stroke-width: 2;
  stroke-linecap: round;
}
.pdoor__frame { stroke: var(--brass); }
.pdoor__seam {
  stroke: #f6e3b4;
  stroke-width: 1.6;
  filter: drop-shadow(0 0 5px rgba(246, 227, 180, 0.9));
}
.pdoor__knob { fill: var(--brass); }
.pdoor__spill { fill: rgba(246, 227, 180, 0.14); }
@media (prefers-reduced-motion: no-preference) {
  .pdoor__seam { animation: pdoorSeam 4.2s ease-in-out infinite; }
  @keyframes pdoorSeam { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
}

.prereg input {
  flex: 1 1 220px;
  min-width: 0;
  background: var(--bg-raise);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.72rem 0.95rem;
  border-radius: 2px;
  outline: none;
}
.prereg input:focus { border-color: var(--brass); }
.prereg input::placeholder { color: var(--ink-faint); }
.prereg button {
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bg-sunk);
  background: linear-gradient(180deg, var(--brass-lift), var(--brass));
  border: 1px solid var(--brass-lift);
  padding: 0.72rem 1.3rem;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.prereg button:hover { filter: brightness(1.08); }
.prereg button:disabled { opacity: 0.55; cursor: default; filter: none; }
.prereg__note {
  flex: 1 0 100%;
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  color: var(--brass-lift);
  font-style: italic;
  min-height: 1.3em;
}
.prereg__note[data-kind='err'] { color: var(--ink-dim); }

/* ═══ the roll: ghost names drifting up beneath the pre-register form ═══ */
.roll { width: min(430px, 100%); margin: 1.1rem auto 0; }
.roll[hidden] { display: none; }
.roll__view {
  height: 128px;
  overflow: hidden;
  position: relative;
}
/* the names materialize out of the dark and dissolve back into it — done with
   overlay gradients, NOT mask-image: a color-emoji glyph forces its row onto its
   own compositing layer and Chrome paints the masked area as a dark plate */
.roll__view::before,
.roll__view::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 42px;
  pointer-events: none;
  z-index: 1;
}
.roll__view::before { top: 0; background: linear-gradient(180deg, var(--bg), transparent); }
.roll__view::after { bottom: 0; background: linear-gradient(0deg, var(--bg), transparent); }
.roll__drift { animation: rolldrift var(--dur, 14s) linear infinite; }
@keyframes rolldrift { to { transform: translateY(-50%); } }
/* under 4 names there is no parade: the ghosts hold still, centered */
.roll__drift--still {
  animation: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.roll__half {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;   /* the seam gap — must match the row gap for a clean loop */
}
.roll__name {
  font-size: 0.95rem;
  color: var(--ink-faint);
  text-shadow: 0 0 14px rgba(217, 205, 184, 0.18);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.roll__name i {
  font-style: normal;
  font-family: var(--display);
  font-size: 0.66em;
  color: var(--brass-dim);
  margin-right: 0.55em;
}
/* a color-emoji glyph's text-shadow paints as a solid plate in Chrome — never shadow it */
.roll__name b { font-weight: 400; text-shadow: none; }
.roll__name--new { color: var(--brass-lift); text-shadow: 0 0 18px rgba(211, 174, 118, 0.4); }
@media (prefers-reduced-motion: reduce) {
  .roll__drift { animation: none; }
  .roll__view { overflow-y: auto; }
  .roll__half--dup { display: none; }   /* no loop, so no duplicate to scroll into */
}
.prereg__count {
  margin: 0.9rem 0 0;
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-lift);
}
.prereg__count[hidden] { display: none; }
.prereg__or {
  margin: 2.4rem 0 1.4rem;
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ═══ Act VII — the founding register: sign, and a wax seal presses the corner ═══ */
.regist {
  width: min(460px, 100%);
  margin: 1.6rem auto 0;
  /* lock the taller (form) height so the form→sealed swap never reflows the last
     act — the same reserve-don't-refresh discipline the curtain fix relies on */
  min-height: 258px;
}
.regist__page {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(184, 148, 94, 0.06), transparent 70%),
    var(--bg-panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(184, 148, 94, 0.08), 0 12px 34px -22px #000;
  padding: 1.15rem 1.4rem 1.25rem;
  overflow: visible;
}
.regist__title {
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  text-align: left;
}
.regist__slot {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-height: 2.4em;
  padding: 0.1rem 5.2rem 0.35rem 0.1rem;   /* right pad clears the corner seal */
  border-bottom: 1px solid var(--brass-faint);
}
.regist__num {
  flex: 0 0 auto;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--brass-dim);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}
.regist__hand {
  font-family: var(--accent);
  font-style: italic;
  font-weight: 500;
  font-size: 1.55rem;
  line-height: 1.1;
  color: var(--brass-lift);
  text-shadow: 0 0 20px rgba(211, 174, 118, 0.28);
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  clip-path: inset(0 100% 0 0);        /* the ink writes left→right */
}
.regist__hint {
  position: absolute;
  left: 0.1rem;
  bottom: 0.5rem;
  font-family: var(--accent);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-faint);
  opacity: 0.72;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.regist__nib {
  align-self: center;
  width: 2px;
  height: 1.35em;
  margin-left: -0.2rem;
  background: var(--brass-lift);
  opacity: 0;
}
.regist--inking .regist__hint { opacity: 0; }
.regist--inking .regist__hand { transition: clip-path 0.9s cubic-bezier(0.62, 0, 0.2, 1); clip-path: inset(0 0 0 0); }
.regist--inking .regist__nib { animation: nibBlink 0.5s steps(1) 3 forwards; }
.regist--sealed .regist__num { opacity: 1; transform: none; }
@keyframes nibBlink { 0%, 49% { opacity: 0.9; } 50%, 100% { opacity: 0; } }

/* the wax seal, pressed into the corner */
.regist__seal {
  position: absolute;
  right: 0.7rem;
  bottom: 0.85rem;
  width: 86px;
  height: 86px;
  opacity: 0;
  transform: scale(2.35) rotate(-15deg);
  transform-origin: center;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.62));
  pointer-events: none;
}
.regist__seal svg { display: block; width: 100%; height: 100%; }
.seal__ring { fill: none; stroke: rgba(240, 200, 150, 0.34); stroke-width: 1.4; }
/* the TCM matrix, engraved: pressed-in shadow fill with a raised-highlight edge —
   the same relief palette the old flame emblem wore */
.seal__cross { fill: none; stroke: rgba(243, 205, 152, 0.55); stroke-width: 2.2; stroke-linecap: round; }
.seal__mono {
  fill: #571f12;
  stroke: rgba(243, 205, 152, 0.55);
  stroke-width: 0.7;
  paint-order: stroke fill;
  font-family: var(--display), Georgia, serif;
  font-weight: 700;
  font-size: 17.5px;
  letter-spacing: 1.6px;
}
.seal__rule { fill: none; stroke: rgba(243, 205, 152, 0.32); stroke-width: 1; stroke-linecap: round; }
.regist--sealed .regist__seal { animation: sealStamp 0.52s cubic-bezier(0.32, 1.5, 0.5, 1) forwards; }
@keyframes sealStamp {
  0%   { opacity: 0;   transform: scale(2.35) rotate(-15deg); }
  38%  { opacity: 1; }
  62%  { transform: scale(0.9) rotate(3.5deg); }   /* the press */
  100% { opacity: 1;   transform: scale(1) rotate(0); }
}

/* the wax-red sparks flung on impact — the one non-brass ember on the page (§5) */
.regist__sparks {
  position: absolute;
  right: calc(0.7rem + 43px);
  bottom: calc(0.85rem + 43px);
  width: 0; height: 0;
  pointer-events: none;
}
.regist__sparks span {
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #f4b06a, #b4471f 60%, transparent);
  animation: sealSpark 0.95s ease-out var(--delay, 0s) forwards;
}
@keyframes sealSpark {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}

.regist__done {
  margin: 1.05rem 0 0;
  font-family: var(--accent);
  font-style: italic;
  font-size: 1.12rem;
  color: var(--brass-lift);
}
.regist__done[hidden] { display: none; }
/* once sealed, the form has done its work — it steps aside for the confirmation */
.regist--sealed .prereg { display: none; }

@media (prefers-reduced-motion: reduce) {
  .regist__hand { transition: none; }
  .regist--sealed .regist__seal { animation: none; opacity: 1; transform: scale(1) rotate(0); }
  .regist--inking .regist__hand { transition: none; }
}

/* ═══ THE LIBRARY — the doors (the page's second summit) ═══
   Two great doors fill the frame; the page locks and a HELD press swings
   them open onto the hall (v122 — the scrub is gone). The static truth
   first: without JS/GSAP/motion the doors never render (display:none)
   and the hall stands lit — only html.summit-live (added when the gate is
   actually armed) closes them. The doors ride outside the frame when open,
   so the summit clips itself (#273). */
.summit { position: relative; margin-top: clamp(2.5rem, 9vh, 5.5rem); }
/* a short runway: after the doors open, the hall holds sticky for a beat
   of scroll before the page moves on */
html.summit-live .summit { height: 150svh; }
.summit__stage {
  position: sticky;
  top: 0;
  overflow: clip;
  min-height: 96svh;
  display: grid;
  place-items: center;
  padding: 4rem 1.5rem;
}
html.summit-live .summit__stage { height: 100svh; min-height: 0; }
.summit__hall {
  position: relative;
  text-align: center;
  max-width: 900px;
}
.summit__glow {
  position: absolute;
  inset: -35% -45%;
  /* two lights (v154): the hall's candleglow + a pale shaft falling from above
     onto the numbers — depth behind the words, not decoration in front of them */
  background:
    radial-gradient(52% 46% at 50% 40%, rgba(211, 174, 118, 0.24), transparent 70%),
    radial-gradient(26% 62% at 50% 4%, rgba(248, 241, 226, 0.07), transparent 68%);
  pointer-events: none;
}
/* the hall breathes while you stand at the doors — summit-open is scroll-gated,
   so the loop never runs offscreen (same gate the ray-wheel rides) */
@media (prefers-reduced-motion: no-preference) {
  html.summit-open .summit__glow { animation: hallbreathe 8.5s ease-in-out infinite; }
  @keyframes hallbreathe {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(0.985); }
  }
}
.summit__hall > * { position: relative; }
.summit__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.4rem, 16vw, 7.5rem);
  line-height: 1.04;
  letter-spacing: 0.04em;
  margin: 1.1rem 0 1.2rem;
  background: linear-gradient(180deg, #f7ead0 12%, #d3ae76 55%, #9a7a49 92%);
  background-size: 100% 300%;
  background-position: 0% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--brass-lift);
}
.summit__title br { display: none; }
/* the longer TCM title needs two lines earlier than the old one did */
@media (max-width: 900px) { .summit__title br { display: block; } }
.summit__nums {
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 0.5rem;
}
.summit__nums b { color: var(--brass-lift); font-weight: 700; font-variant-numeric: tabular-nums; }
.summit__sub {
  margin: 0 auto;
  max-width: 44ch;
  color: var(--ink-dim);
  font-size: 1.05rem;
  text-wrap: balance;
}
/* the doors themselves — carved panels, brass-edged at the meeting seam,
   hinged at the frame: they SWING open in true perspective, into the hall */
.summit__doors { display: none; }
html.summit-live .summit__doors {
  display: flex;
  position: absolute;
  inset: 0;
  pointer-events: none;
  perspective: 1500px;
  perspective-origin: 50% 45%;
}
.summit__door {
  flex: 1 1 50%;
  position: relative;
  background:
    linear-gradient(180deg, rgba(184, 148, 94, 0.10), transparent 18%, transparent 74%, rgba(0, 0, 0, 0.6)),
    repeating-linear-gradient(90deg, transparent 0 44px, rgba(184, 148, 94, 0.055) 44px 45px),
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(0, 0, 0, 0.05) 3px 4px),
    linear-gradient(180deg, #141109, #0c0a07 55%, #080706);
  will-change: transform;
  backface-visibility: hidden;   /* past 90° a door is simply gone, never mirrored */
}
.summit__door--l { transform-origin: left center; }
.summit__door--r { transform-origin: right center; }
.summit__door--l { border-right: 1px solid var(--brass-dim); box-shadow: inset -22px 0 40px -18px rgba(0, 0, 0, 0.85); }
.summit__door--r { border-left: 1px solid var(--brass-dim); box-shadow: inset 22px 0 40px -18px rgba(0, 0, 0, 0.85); }
/* the outer carved frame line the coffers sit inside */
.summit__door::before {
  content: '';
  position: absolute;
  inset: clamp(1rem, 4vw, 2.4rem);
  border: 1px solid rgba(184, 148, 94, 0.26);
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.55), inset 0 0 0 6px rgba(184, 148, 94, 0.12);
}
/* the coffers: recessed panels — dark inside, catch-light on the TOP bevel only */
.summit__cof {
  position: absolute;
  left: clamp(1.7rem, 6vw, 3.6rem);
  right: clamp(1.7rem, 6vw, 3.6rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.22) 30%, rgba(184, 148, 94, 0.03));
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-top-color: rgba(10, 8, 5, 0.9);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.8),          /* the recess */
    0 1px 0 rgba(216, 183, 122, 0.13),           /* light catching the lower lip */
    inset 0 -1px 0 rgba(216, 183, 122, 0.07);
}
.summit__cof--top { top: clamp(2.6rem, 9vh, 5.2rem); height: 44%; }
.summit__cof--low { top: calc(clamp(2.6rem, 9vh, 5.2rem) + 44% + clamp(1rem, 3vh, 1.8rem)); bottom: clamp(2.6rem, 8vh, 4.6rem); }
/* the raised field inside each recess — real paneled-door joinery, no pictures */
.summit__cof::before {
  content: '';
  position: absolute;
  inset: clamp(0.7rem, 2vw, 1.3rem);
  border: 1px solid rgba(184, 148, 94, 0.14);
  background: linear-gradient(180deg, rgba(184, 148, 94, 0.045), transparent 30%, transparent 72%, rgba(0, 0, 0, 0.3));
  box-shadow: 0 -1px 0 rgba(216, 183, 122, 0.1), 0 2px 5px rgba(0, 0, 0, 0.55);
}
/* one small boss at the panel's heart — the same diamond the lintel keystone wears */
.summit__cof::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(135deg, #6b5330, #241c10);
  border: 1px solid rgba(184, 148, 94, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 -1px 0 rgba(216, 183, 122, 0.12);
}
/* the escutcheon: a mounting plate that gives the pull its weight */
.summit__esc {
  position: absolute;
  top: 50%;
  width: clamp(16px, 3.4vw, 22px);
  height: clamp(52px, 11vw, 74px);
  transform: translateY(-52%);
  border-radius: 999px;
  background: linear-gradient(180deg, #241c10, #171208 45%, #0d0a06);
  border: 1px solid rgba(184, 148, 94, 0.4);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(226, 193, 132, 0.25);
}
.summit__door--l .summit__esc { right: calc(clamp(1rem, 4.5vw, 2.4rem) + clamp(30px, 7vw, 44px) / 2 - clamp(16px, 3.4vw, 22px) / 2); }
.summit__door--r .summit__esc { left: calc(clamp(1rem, 4.5vw, 2.4rem) + clamp(30px, 7vw, 44px) / 2 - clamp(16px, 3.4vw, 22px) / 2); }
/* the ring pull: patina brass with real weight; it LIFTS while the hand holds */
.summit__door i {
  position: absolute;
  top: 50%;
  width: clamp(30px, 7vw, 44px);
  height: clamp(30px, 7vw, 44px);
  border: 3.5px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(#00000000, #00000000) padding-box,
    linear-gradient(165deg, #dcb87c, #8a6d3f 40%, #55432a 70%, #9a7c4a) border-box;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.75), inset 0 2px 5px rgba(0, 0, 0, 0.6),
    0 0 16px -2px rgba(211, 174, 118, 0.35);
  transition: translate 0.35s ease, box-shadow 0.35s ease;
}
.summit__door--l i { right: clamp(1rem, 4.5vw, 2.4rem); transform: translateY(-14%); }
.summit__door--r i { left: clamp(1rem, 4.5vw, 2.4rem); transform: translateY(-14%); }
.summit__door i::before {
  content: '';
  position: absolute;
  top: -9px; left: 50%;
  width: 9px; height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, #d8b77a, #8a6d3f);
}
/* grasped: the rings lift on their pins while the hold strains (JS adds summit--strain) */
.summit--strain .summit__door i {
  translate: 0 -2px;
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.8), inset 0 2px 5px rgba(0, 0, 0, 0.6),
    0 0 20px -2px rgba(211, 174, 118, 0.5);
}
/* gothic strap hinges on the outer edges, riveted */
.summit__hinge {
  position: absolute;
  top: var(--hy);
  width: clamp(44px, 9vw, 86px);
  height: clamp(9px, 1.8vw, 13px);
  transform: translateY(-50%);
  background: linear-gradient(180deg, #2a2115, #171108 55%, #0c0906);
  border: 1px solid rgba(0, 0, 0, 0.8);
  box-shadow: 0 1px 0 rgba(216, 183, 122, 0.14), inset 0 1px 0 rgba(216, 183, 122, 0.1);
}
.summit__door--l .summit__hinge { left: 0; clip-path: polygon(0 0, 78% 12%, 100% 50%, 78% 88%, 0 100%); }
.summit__door--r .summit__hinge { right: 0; clip-path: polygon(100% 0, 22% 12%, 0 50%, 22% 88%, 100% 100%); }
.summit__hinge::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 30%, #d8b77a, #6b5330 70%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.summit__door--l .summit__hinge::before { left: clamp(8px, 2vw, 16px); }
.summit__door--r .summit__hinge::before { right: clamp(8px, 2vw, 16px); }
/* the hold-to-open handle (v122): sits beneath the ring handles at the seam.
   Built in JS only when the gate arms; reuses the boot ring's filling dial.
   A direct child of the stage (the doors container is pointer-events:none). */
.summit__hold {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 68%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1.3rem;
  background: rgba(8, 7, 5, 0.78);
  border: 1px solid var(--brass-dim);
  border-radius: 999px;
  color: var(--ink-dim);
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  touch-action: none;   /* a hold must not turn into a page scroll */
  -webkit-user-select: none;
  user-select: none;
}
.summit__hold:hover { color: var(--brass); border-color: var(--brass); }
.summit__hold--holding { color: var(--brass-lift); border-color: var(--brass-lift); }

/* the seam of light between the closed doors */
.summit__seam {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(247, 234, 208, 0.9) 30%, rgba(247, 234, 208, 0.9) 70%, transparent);
  box-shadow: 0 0 22px 4px rgba(211, 174, 118, 0.55);
  opacity: 0;
}
/* the shaft: the seam's light falling into the room — dust hangs in it while
   the doors stand closed (spans built by armSummit; same craft as the motes) */
.summit__shaft {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: clamp(56px, 9vw, 96px);
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent 4%, rgba(233, 212, 164, 0.05) 30%, rgba(233, 212, 164, 0.04) 70%, transparent 96%);
  overflow: hidden;
  opacity: 0.6;
}
.summit__shaft span {
  position: absolute;
  left: var(--x);
  bottom: -6px;
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: #f0d8a0;
  filter: blur(0.4px);
  opacity: 0;
  animation: mote var(--d) linear var(--delay) infinite;   /* same rise the hall motes use */
}
@media (prefers-reduced-motion: reduce) { .summit__shaft span { animation: none; opacity: 0; } }
/* the spill: the same light pooling across the threshold floor */
.summit__spill {
  position: absolute;
  bottom: 0; left: 50%;
  width: clamp(220px, 42vw, 560px);
  height: clamp(26px, 5vh, 52px);
  transform: translateX(-50%);
  background: radial-gradient(60% 100% at 50% 100%, rgba(244, 224, 176, 0.34), rgba(244, 224, 176, 0.08) 55%, transparent 75%);
  opacity: 0;
}
/* the flare: one breath of light as the seam first cracks */
.summit__flare {
  position: absolute;
  top: 50%; left: 50%;
  width: 52vmax; height: 52vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 244, 214, 0.5), rgba(233, 200, 141, 0.16) 40%, transparent 72%);
  opacity: 0;
  pointer-events: none;
}
/* the frame the doors hang in: a carved lintel above, a sill beneath.
   Painted after the doors in DOM order, so the swing passes behind them. */
.summit__lintel {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(84px, 14vh, 118px);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* the inscription sits in the beam's LOWER half, clear of the fixed topnav band */
  justify-content: flex-end;
  gap: 0.18rem;
  padding-bottom: clamp(0.55rem, 1.6vh, 0.95rem);
  background: linear-gradient(180deg, #1a140c, #0e0b07 70%, #0b0806);
  border-bottom: 1px solid var(--brass-dim);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.65);
}
/* the inscription, cut into the stone: dark glyphs, light catching the lower
   bevel of each cut — engraved, never glowing (WOW-PASS-II §3.1) */
.summit__verse {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(0.6rem, 1.7vw, 0.88rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #3a2f1e;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(216, 183, 122, 0.3);
}
.summit__verse em { font-style: normal; }
.summit__vcite {
  font-family: var(--display);
  font-size: clamp(0.44rem, 1.1vw, 0.56rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #33291a;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(216, 183, 122, 0.22);
}
/* the arch narrows on a phone: the clause folds away, the great words remain */
@media (max-width: 560px) {
  /* the clause folds away, so the great words can stand larger */
  .summit__verse em { display: none; }
  .summit__verse { letter-spacing: 0.24em; font-size: clamp(0.86rem, 4vw, 1.05rem); }
  .summit__vcite { font-size: 0.6rem; }
}
/* the lintel's keystone gem, same language as the room crests */
.summit__lintel::after {
  content: '';
  position: absolute;
  bottom: -5px; left: 50%;
  width: 9px; height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: #0b0806;
  border: 1px solid var(--brass-dim);
  box-shadow: 0 0 12px rgba(184, 148, 94, 0.35);
}
.summit__sill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: clamp(14px, 2.8vh, 24px);
  background: linear-gradient(0deg, #17120c, #0b0806);
  border-top: 1px solid var(--brass-dim);
  box-shadow: 0 -12px 26px rgba(0, 0, 0, 0.6);
}
/* the god-rays: a slow wheel of lantern light behind the title, alive only
   once the doors stand open (html.summit-open, toggled by the scrub) */
.summit__rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 150vmax; height: 150vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 8deg at 50% 50%,
    rgba(233, 200, 141, 0.06) 0deg 5deg, transparent 5deg 16deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, 0.45) 30%, transparent 60%);
  mask-image: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, 0.45) 30%, transparent 60%);
  opacity: 0;
  pointer-events: none;
}
/* the wheel turns via CSS animation (transform only), GSAP scrubs only its
   opacity — never the same property from two systems (#277) */
@media (prefers-reduced-motion: no-preference) {
  html.summit-open .summit__rays { animation: raywheel 110s linear infinite; }
  @keyframes raywheel { to { transform: translate(-50%, -50%) rotate(360deg); } }
}
/* the motes: gold dust hanging in the lantern light of the open hall */
.summit__motes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}
.summit__motes span {
  position: absolute;
  left: var(--x);
  bottom: -6px;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--brass-lift);
  box-shadow: 0 0 6px 1px rgba(211, 174, 118, 0.45);
  filter: blur(0.5px);
  opacity: 0;
  animation: mote var(--d) linear var(--delay) infinite;
}
@keyframes mote {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: var(--o); }
  78% { opacity: var(--o); }
  100% { transform: translateY(-92vh) translateX(18px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .summit__motes span { animation: none; } }
/* the shelves light as you reach them: each cover row waits under a veil that
   lifts once the doors have opened (html.shelf-lit, set by the reelband
   observer). JS-gated — a no-JS reader never sees a dimmed shelf. */
.marquee { position: relative; }
html.js.summit-live .marquee::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0.88;
  pointer-events: none;
  transition: opacity 1.6s ease;
}
html.js.summit-live .marquee--rev::after { transition-delay: 0.45s; }
html.js.summit-live.shelf-lit .marquee::after { opacity: 0; }

/* ═══ from our own halls: the books written at this table ═══ */
.ours { margin-top: 4.2rem; text-align: center; }
.ours__eyebrow { margin-bottom: 0.8rem; }
.ours__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.8vw, 1.7rem);
  color: var(--ink-bright);
  margin: 0 0 2.2rem;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
.ours__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  text-align: left;
}

/* ── the flagship: Life in the Light dawns out of the dark ──
   The cover waits nearly black; when the card enters, light rises through it
   and one beam of lantern light crosses the whole card. Pure CSS on the .in
   class — no GSAP shares these properties (#277). */
.flagship {
  position: relative;
  overflow: clip;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 2.1rem;
  align-items: center;
  border: 1px solid var(--brass-faint);
  background:
    radial-gradient(130% 120% at 14% 30%, rgba(211, 174, 118, 0.09), transparent 55%),
    var(--bg-raise);
  box-shadow: inset 0 0 0 3px var(--bg-raise), inset 0 0 0 4px var(--brass-faint),
    0 18px 48px var(--shadow), 0 0 90px -24px rgba(211, 174, 118, 0.45);
  padding: 2.3rem 2.1rem;
}
@media (max-width: 560px) {
  .flagship { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 2.1rem 1.3rem; }
}
.flagship__side { position: relative; }
/* the debut's dawn rays: the same wheel that lights the summit hall, scaled
   to the cover — it wakes with the dawn and turns slowly behind the book */
.flagship__rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 680px; height: 680px;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 4deg at 50% 50%,
    rgba(233, 200, 141, 0.075) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, 0.5) 34%, transparent 66%);
  mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, 0.5) 34%, transparent 66%);
  opacity: 0;
  transition: opacity 2.6s ease 1.1s;
  pointer-events: none;
}
html.js .flagship.in .flagship__rays,
html:not(.js) .flagship__rays { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.js .flagship.in .flagship__rays { animation: flagrays 95s linear 1.1s infinite; }
  @keyframes flagrays { to { transform: translate(-50%, -50%) rotate(360deg); } }
}
.flagship__halo {
  position: absolute;
  inset: -46%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(233, 200, 141, 0.24), transparent 70%);
  opacity: 0;
  transition: opacity 2.4s ease 0.9s;
  pointer-events: none;
}
html.js .flagship.in .flagship__halo,
html:not(.js) .flagship__halo { opacity: 1; }
.flagship__art {
  position: relative;
  width: 200px;
  aspect-ratio: 2 / 3;
  border: 1px solid var(--rule);
  overflow: hidden;
  box-shadow: 0 16px 38px var(--shadow);
  background: var(--bg-panel);
}
.flagship__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: no-preference) {
  html.js .flagship .flagship__art img {
    filter: brightness(0.16) saturate(0.6);
    transition: filter 2.6s ease 0.55s;
  }
  html.js .flagship.in .flagship__art img { filter: none; }
}
/* one pass of lantern light, corner to corner */
.flagship__beam {
  position: absolute;
  inset: -30% -25%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 241, 208, 0.13) 50%, transparent 60%);
  transform: translateX(-130%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .flagship.in .flagship__beam { animation: flagbeam 2.8s cubic-bezier(0.33, 0, 0.2, 1) 0.7s forwards; }
}
@keyframes flagbeam { to { transform: translateX(130%); } }
.flagship__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4.4vw, 2rem);
  letter-spacing: 0.03em;
  margin: 0 0 0.2rem;
  background: linear-gradient(180deg, #f7ead0 10%, #d3ae76 58%, #a5834f 94%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--brass-lift);
  text-wrap: balance;
}
.flagship__q {
  margin: 1.2rem 0 0;
  border-left: 2px solid var(--brass-dim);
  padding: 0.15rem 0 0.15rem 1rem;
  font-family: var(--accent);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--ink-bright);
  text-wrap: pretty;
}
.flagship__q p { margin: 0; }
.flagship__q cite {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--display);
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}
@media (max-width: 560px) {
  .flagship__q { border-left: 0; padding-left: 0; }
}
/* v156: the same soft-light treatment the lamp card got (Trevor: no hard square edges of
   light) — rounded plate, a warm pool falling from the upper-left where the book stands */
.ourbook {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  border: 1px solid var(--brass-faint);
  border-radius: 14px;
  background:
    radial-gradient(120% 110% at 12% -10%, rgba(255, 196, 110, 0.11), transparent 55%),
    linear-gradient(180deg, #171209, #0e0a06);
  box-shadow:
    0 20px 46px -20px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 214, 140, 0.12),
    0 0 52px -20px rgba(211, 174, 118, 0.3);
  padding: 1.6rem 1.6rem 1.5rem;
}
@media (max-width: 480px) { .ourbook { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.ourbook__art {
  width: 132px;
  aspect-ratio: 2 / 3;
  border: 1px solid rgba(211, 174, 118, 0.35);
  overflow: hidden;
  /* the flagship stands BACKLIT (Trevor: "it's dark there") — a warm halo behind the cover */
  box-shadow: 0 10px 26px var(--shadow), 0 0 46px -4px rgba(240, 196, 110, 0.4);
  position: relative;
  background: var(--bg-panel);
}
.ourbook__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the Shankool fan: three spines leaning like a stack someone means to get to */
.ourbook__fan {
  position: relative;
  width: 132px;
  aspect-ratio: 2 / 3;
}
.ourbook__fan img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 1px solid var(--rule);
  box-shadow: 0 10px 26px var(--shadow);
}
/* the front of George's stack catches the same backlight as Mike's flagship */
.ourbook__fan img:last-child {
  border-color: rgba(211, 174, 118, 0.35);
  box-shadow: 0 10px 26px var(--shadow), 0 0 40px -4px rgba(240, 196, 110, 0.34);
}
.ourbook__fan img:nth-child(1) { transform: rotate(-13deg) translate(-27px, 7px); opacity: 0.72; }
.ourbook__fan img:nth-child(2) { transform: rotate(-8.5deg) translate(-18px, 4px); opacity: 0.82; }
.ourbook__fan img:nth-child(3) { transform: rotate(-4deg) translate(-9px, 2px); opacity: 0.92; }
/* the fan deals itself: the stack arrives squared, then the spines lean out
   one by one once the card reveals (base state = the spread, above) */
@media (prefers-reduced-motion: no-preference) {
  html.js .ourbook[data-reveal] .ourbook__fan img {
    transition: transform 1.1s cubic-bezier(0.3, 1.25, 0.4, 1), opacity 0.9s ease;
  }
  html.js .ourbook[data-reveal] .ourbook__fan img:nth-child(1) { transition-delay: 0.55s; }
  html.js .ourbook[data-reveal] .ourbook__fan img:nth-child(2) { transition-delay: 0.4s; }
  html.js .ourbook[data-reveal] .ourbook__fan img:nth-child(3) { transition-delay: 0.25s; }
  html.js .ourbook[data-reveal]:not(.in) .ourbook__fan img:nth-child(-n+3) {
    transform: none;
    opacity: 0;
  }
}
.ourbook__tag {
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.5rem;
}
.ourbook h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ink-bright);
  margin: 0 0 0.2rem;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
.ourbook__a { color: var(--brass-lift); font-style: italic; margin: 0 0 0.7rem; font-size: 1rem; }
.ourbook__d { color: var(--ink); font-size: 1rem; margin: 0; text-wrap: pretty; }
.ourbook__d i { color: var(--ink-bright); }
/* ── the turn: the question the page exists to answer, asked in the dark ──
   Static truth first: both lines simply sit there for no-JS/reduced-motion
   readers; html.turn-live grows the runway and the scrub stages them. */
.turn { position: relative; margin-top: 3rem; }
html.turn-live .turn { height: 175svh; }
.turn__stage {
  position: sticky;
  top: 0;
  min-height: 46svh;
  display: grid;
  place-content: center;
  gap: 1.4rem;
  text-align: center;
  padding: 3rem 1.5rem;
}
html.turn-live .turn__stage { height: 100svh; min-height: 0; }
.turn__q1 {
  margin: 0;
  font-family: var(--accent);
  font-size: clamp(1.25rem, 4vw, 1.55rem);
  font-style: italic;
  color: var(--ink-dim);
}
/* the question keeps the same small, mysterious voice — only the light
   changes: the possibility murmurs in ash, the question glows in gold */
.turn__q2 {
  margin: 0;
  font-family: var(--accent);
  font-size: clamp(1.35rem, 4.6vw, 1.75rem);
  font-style: italic;
  line-height: 1.5;
  text-wrap: balance;
  color: var(--brass-lift);
  text-shadow: 0 0 26px rgba(211, 174, 118, 0.35);
}
/* the one word that carries the whole promise */
.turn__q2 b {
  font-family: var(--display);
  font-style: normal;
  font-weight: 700;
  font-size: 0.8em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f7ead0;
}
.turn__q2 br { display: none; }
@media (min-width: 700px) { .turn__q2 br { display: block; } }

/* the closing one-liner after the engines */
.halls {
  border-top: 1px solid var(--rule);
  margin: 3rem auto 0;
  max-width: 74ch;
  padding: 2.2rem 0 0;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.95rem;
  line-height: 2;
  text-wrap: pretty;
}

/* ═══ ACT VI — your codex ═══ */

.yours {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.6rem;
  align-items: start;
}
@media (max-width: 780px) { .yours { grid-template-columns: 1fr; } }

/* the member profile card — the same gold-framed card language as the verse portal,
   warmed with the room's own candlelight (v154) */
.profile {
  position: sticky;
  top: 2rem;
  border: 1px solid var(--brass-faint);
  background:
    radial-gradient(120% 100% at 50% 0%, var(--acc-ghost), transparent 60%),
    var(--bg-raise);
  box-shadow: inset 0 0 0 3px var(--bg-raise), inset 0 0 0 4px var(--brass-faint),
    0 0 58px -20px rgba(233, 214, 178, 0.35);
  padding: 1.8rem 1.7rem 1.5rem;
}
/* the room's ribbon across the card's brow (the mindcard grammar) */
.profile::before {
  content: '';
  position: absolute;
  top: -1px; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc-soft) 30%, var(--acc-soft) 70%, transparent);
  pointer-events: none;
}
@media (max-width: 780px) { .profile { position: static; max-width: 460px; margin: 0 auto; } }
.profile__eyebrow {
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brass);
  text-align: center;
  margin: 0 0 0.7rem;
}
.profile__name {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink-bright);
  text-align: center;
  margin: 0 0 0.3rem;
  letter-spacing: 0.04em;
}
.profile__rank {
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  text-align: center;
  margin: 0 0 1.2rem;
}
.profile__medals {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 1rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
}
.medal {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-lift);
}
/* the medals stamp down onto the card, one after another */
@media (prefers-reduced-motion: no-preference) {
  html.js .yours .medal {
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
  }
  html.js .yours .medal:nth-child(1) { transition-delay: 1.1s; }
  html.js .yours .medal:nth-child(2) { transition-delay: 1.35s; }
  html.js .yours .medal:nth-child(3) { transition-delay: 1.6s; }
  html.js .yours[data-reveal]:not(.in) .medal {
    opacity: 0;
    transform: scale(1.5);
  }
}
.profile__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 1.2rem;
}
/* the record widened: reading AND presence — everything the family does, counted */
.profile__stats--six { grid-template-columns: repeat(3, 1fr); }
.profile__stats > div {
  background: var(--bg-raise);
  padding: 0.7rem 0.3rem 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
}
.profile__stats b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brass-lift);
  font-variant-numeric: tabular-nums;
}
.profile__stats span {
  font-family: var(--display);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}
.profile__row { margin-bottom: 1rem; }
.profile__line {
  margin: 0 0 0.45rem;
  color: var(--ink-dim);
  font-size: 0.92rem;
}
.profile__line i { color: var(--ink); }
/* the feature ledger beside it — v155: every row opens into a staged look at itself.
   v156 (Trevor: "back to all gold — add variation; make the list items especially solid"):
   each feature carries its OWN muted hue (--ph, stamped inline on the fold) — icon, side
   pip, see-chip, peek frame, and the data inside — and the rows stand as solid cards. */
.ylist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.ylist li {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.016), transparent 55%),
    rgba(0, 0, 0, 0.24);
  overflow: hidden;
  transition: border-color 0.25s ease;
}
.ylist li:has(.ylist__fold[open]),
.ylist li:hover { border-left-color: var(--ph, var(--acc-soft)); }
.ylist__row {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.05rem;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 0.95rem;
  row-gap: 0.2rem;
  transition: background 0.2s ease;
}
.ylist__row::-webkit-details-marker { display: none; }
.ylist__row:hover, .ylist__row:focus-visible { background: rgba(233, 214, 178, 0.03); outline: none; }
.ylist__fold:has(.ylist__row:focus-visible) { outline: 1px solid var(--ph-soft, var(--brass-faint)); outline-offset: -2px; border-radius: 12px; }
/* the small glyph each feature carries — in the feature's own hue */
.ylist__ic {
  grid-row: 1 / span 2;
  width: 26px;
  height: 26px;
  margin-top: 0.25rem;
  stroke: var(--ph, var(--brass));
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
}
.ylist__row > b { grid-column: 2; }
.ylist__row > span:not(.ylist__see) { grid-column: 2 / 4; }
.ylist b {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-lift);
}
.ylist span { color: var(--ink); font-size: 1.02rem; text-wrap: pretty; }
.ylist span i { color: var(--ink); }
/* the see-it chip: the row announces it opens */
.ylist__see {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  font-family: var(--display);
  font-size: 0.6rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ph, var(--acc, var(--brass)));
  white-space: nowrap;
  padding-top: 0.2rem;
}
.ylist__see i { font-style: normal; color: inherit; }
.ylist__see-close { display: none; }
.ylist__fold[open] .ylist__see-open { display: none; }
.ylist__fold[open] .ylist__see-close { display: inline; }
.ylist__hint {
  margin: 0.8rem 0 0;
  text-align: center;
  color: var(--ink-faint);
  font-style: italic;
  font-size: 0.82rem;
}
/* v155/v156: the room's copper stays on the TITLES; each feature's own hue (--ph) carries
   the icons, pips, and data — variation inside one hall, gold still the page's frame */
.act--yours .ylist b { color: var(--acc-lift); }
.act--yours .profile__eyebrow { color: var(--acc); }

/* ═══ the peek: a staged look at one feature, in the bot's own Discord-frame language
   (the .vc slab palette). Pure block content — opening a fold grows the room's height,
   which the native-sticky curtain absorbs for free. ═══ */
.peek {
  margin: 0.15rem 1.05rem 1.05rem calc(32px + 0.95rem + 1.05rem);
  padding: 0.85rem 1rem 0.7rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ph, var(--brass));   /* the Discord embed pip, in the feature's hue */
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(30, 24, 14, 0.9), rgba(16, 12, 7, 0.94));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}
@media (prefers-reduced-motion: no-preference) {
  .ylist__fold[open] .peek { animation: peekIn 0.45s cubic-bezier(0.3, 1.1, 0.4, 1) both; }
  @keyframes peekIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
  }
}
.peek__chan {
  margin: 0 0 0.65rem;
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ph, var(--ink-faint));
  opacity: 0.85;
}
.peek__chip {
  display: inline-block;
  padding: 0.08em 0.55em;
  border: 1px solid var(--ph-soft, var(--brass-faint));
  border-radius: 999px;
  color: var(--ph, var(--brass-lift));
  letter-spacing: 0.08em;
}
/* the chorus shelf: names and dates only — nobody's words are invented */
.peek__shelf { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.7rem; }
.peek__voice {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
}
.peek__voice b { font-family: var(--display); font-size: 0.78rem; color: var(--ink); }
.peek__voice i { font-style: normal; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.peek__voice--you { border-color: var(--brass); background: rgba(232, 158, 66, 0.07); }
.peek__voice--you b { color: var(--brass-lift); }
.peek__refl {
  margin: 0 0 0.55rem;
  padding: 0.5rem 0.8rem;
  border-left: 2px solid var(--brass);
  background: rgba(232, 158, 66, 0.06);
  border-radius: 0 6px 6px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink);
}
.peek__ok { margin: 0 0 0.3rem; font-size: 0.8rem; color: var(--ink-dim); }
.peek__ok--done::before { content: '\2713  '; color: #8fb56d; font-weight: 700; }
.peek__mark {
  margin: 0.45rem 0 0;
  padding-top: 0.45rem;
  border-top: 1px solid var(--rule);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  font-style: italic;
}
/* the book card */
.peek__book { display: flex; gap: 0.85rem; align-items: stretch; margin-bottom: 0.35rem; }
.peek__cover {
  flex: 0 0 auto;
  width: 44px;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brass);
  border: 1px solid var(--brass-faint);
  box-shadow: inset 0 0 0 2px var(--bg-sunk);
  background: linear-gradient(160deg, #221a0e, #100b06);
  font-size: 0.8rem;
}
.peek__bmeta { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1; }
.peek__bmeta b { font-family: var(--display); color: var(--ink-bright); font-size: 0.98rem; }
.peek__bmeta i { color: var(--ink-faint); font-size: 0.8rem; font-style: italic; }
.peek__bmeta em { color: var(--ink-dim); font-size: 0.78rem; font-style: normal; }
/* the shared meter (the profile card's language, smaller) */
.peek__meter {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.peek__meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ph-soft, var(--brass-dim)), var(--ph, var(--brass-lift)));
}
.peek__meter--wide { margin: 0.5rem 0 0.6rem; }
/* the highlighted passage */
.peek__passage { margin: 0 0 0.55rem; font-family: var(--serif); font-size: 0.95rem; line-height: 1.6; color: var(--ink-dim); }
.peek__hl {
  background: linear-gradient(90deg, rgba(232, 158, 66, 0.3), rgba(232, 158, 66, 0.13));
  color: var(--ink-bright);
  padding: 0.06em 0.15em;
  border-radius: 3px;
}
/* the buddy race */
.peek__race { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.6rem; }
.peek__racer { display: grid; grid-template-columns: 5.2em 1fr 3em; align-items: center; gap: 0.7rem; }
.peek__racer b { font-family: var(--display); font-size: 0.8rem; color: var(--ink); }
.peek__racer i { font-style: normal; font-size: 0.76rem; color: var(--ink-faint); text-align: right; font-variant-numeric: tabular-nums; }
/* small ruled lists (meditation track · the points ledger) */
.peek__list { list-style: none; margin: 0 0 0.35rem; padding: 0; }
.peek__list li {
  padding: 0.4rem 0.1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.88rem;
  color: var(--ink-dim);
}
.peek__list li:first-child { border-top: 0; }
.peek__list--ledger li b {
  display: inline-block;
  min-width: 2.6em;
  color: #8fb56d;
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
}
.peek__cap { margin: 0 0 0.15rem; color: var(--ink-dim); font-size: 0.9rem; }
.peek__cap b { font-family: var(--display); color: var(--ink-bright); }
/* the achievement toast */
.peek__toast {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.55rem;
  border: 1px solid var(--brass);
  border-radius: 8px;
  background:
    linear-gradient(110deg, transparent 30%, rgba(240, 205, 130, 0.08) 50%, transparent 70%),
    rgba(232, 158, 66, 0.05);
}
.peek__badge {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--brass);
  border-radius: 50%;
  color: var(--brass-lift);
  box-shadow: 0 0 14px -4px rgba(240, 205, 130, 0.6);
}
.peek__tmeta { display: flex; flex-direction: column; gap: 0.15rem; }
.peek__tmeta b { font-family: var(--display); font-size: 0.86rem; letter-spacing: 0.06em; color: var(--brass-lift); }
.peek__tmeta i { font-size: 0.78rem; color: var(--ink-dim); }
/* the morning DM */
.peek__dm { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.35rem; }
.peek__av {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--brass-lift);
  background: linear-gradient(135deg, #3a2f1c, #191108);
  border: 2px solid var(--brass);
  font-size: 0.8rem;
}
.peek__dmeta { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.peek__dmeta b { font-family: var(--display); font-size: 0.88rem; color: var(--ink-bright); }
.peek__app {
  font-style: normal;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  vertical-align: 0.15em;
  padding: 0.1em 0.45em;
  margin-left: 0.3em;
  border-radius: 3px;
  background: var(--brass-dim);
  color: #14100a;
}
.peek__dmeta > span { font-size: 0.9rem; color: var(--ink-dim); line-height: 1.5; }
@media (max-width: 560px) {
  .peek { margin: 0.15rem 0.75rem 0.9rem; padding: 0.75rem 0.8rem 0.6rem; }
  .peek__racer { grid-template-columns: 4.4em 1fr 2.6em; gap: 0.5rem; }
  .ylist__row { padding: 0.9rem 0.8rem; }
}

/* the Red Sea plate: the whole congregation crosses together */
.yours__art {
  margin: 3.2rem auto 0;
  width: min(560px, 100%);
}
.yours__art img {
  width: 100%;
  height: auto;
  display: block;
  filter: sepia(0.25) contrast(1.02);
  opacity: 0.92;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.yours__art figcaption {
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.8rem;
  margin-top: 0.4rem;
}

.yours__kick {
  text-align: center;
  margin: 2.4rem auto 0;
  color: var(--ink-dim);
  font-size: 1.05rem;
  font-style: italic;
  max-width: 56ch;
  text-wrap: pretty;
}
.act__lede b { color: var(--brass-lift); }

/* ═══ the gathering: the real family, online right now (Act VI centerpiece) ═══ */
.gather { text-align: center; margin: 2.4rem auto 3.4rem; max-width: 760px; }
.gather[hidden] { display: none; }
.gather__count { margin: 0; line-height: 0.95; }
.gather__count b {
  font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(3.4rem, 12vw, 6.2rem); color: var(--brass-lift);
  text-shadow: 0 0 34px rgba(232,158,66,0.35);
}
.gather__lede { font-family: var(--display); font-size: clamp(1rem, 2.3vw, 1.35rem); color: var(--ink); margin: 0.45rem 0 0; }
.gather__sub { color: var(--ink-dim); font-size: 0.95rem; margin: 0.7rem 0 0; }
.gather__sub i { color: var(--brass-lift); font-style: italic; }
/* the constellation stage — a circle of the family around a warm hearth. Height is LOCKED by
   aspect-ratio so any headcount (3 or 48) fills the same room and never shifts the curtain (#278). */
.gather__field {
  position: relative; width: min(600px, 87vw); aspect-ratio: 1 / 0.78;
  margin: 1.4rem auto 0;
  background: radial-gradient(ellipse 52% 54% at 50% 50%,
    rgba(232,158,66,0.15), rgba(232,158,66,0.04) 44%, transparent 70%);
}
.gather__web { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.gather__soul {
  position: absolute; transform: translate(-50%, -50%);
  width: clamp(28px, 5.7vw, 40px); aspect-ratio: 1; z-index: 1;
  border-radius: 50%; overflow: hidden; border: 1px solid var(--brass-faint);
  background: linear-gradient(135deg, #3a2f1c, #191108); box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.gather__soul img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gather__soul--fallback { display: flex; align-items: center; justify-content: center; font-family: var(--display); color: var(--brass-lift); font-size: 0.95rem; }
.gather__soul--voice {
  width: clamp(32px, 6.4vw, 46px); z-index: 2;
  border-color: var(--brass); box-shadow: 0 0 13px rgba(240,180,90,0.8), 0 2px 8px rgba(0,0,0,0.5);
}
.gather__more { color: var(--ink-dim); font-size: 0.9rem; margin: 1.6rem 0 0; }
.gather__more b { color: var(--brass-lift); }
/* a slow twinkle (keeps the centring translate inside the keyframe so they never fight) */
.gather--awake .gather__soul { animation: gatherTwinkle var(--tw, 3s) ease-in-out var(--td, 0s) infinite; }
@keyframes gatherTwinkle {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.9; }
  50%      { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .gather--awake .gather__soul { animation: none; opacity: 1; } }

/* ═══ atmosphere: the §5 ghost canvas — absolute, pointerless, layout-inert (never touches the
   curtain). One class; each act's host is position:relative so inset:0 scopes the air to it. ═══ */
.atmo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.atmo-host { position: relative; isolation: isolate; }   /* scope + contain the z:-1 canvas behind this host's own content */
.atmo-host--pos { isolation: isolate; }   /* for hosts that are ALREADY positioned (sticky stages) — relative would break them */
@media (prefers-reduced-motion: reduce) { .atmo { display: none; } }

/* engine-room phosphor: a slow gold scanline sweeps the live terminal — it's alive, not a placard.
   CSS-only, paused offscreen via .is-awake; fresh names, never the intro's CRT family (#284). */
.nerd__term { position: relative; }
.nerd__term::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 34%;
  background: linear-gradient(180deg, transparent, rgba(232,182,96,0.05) 52%, transparent);
  pointer-events: none; opacity: 0; z-index: 3; border-radius: inherit;
}
@media (prefers-reduced-motion: no-preference) {
  .nerd__term.is-awake::after { animation: nerdScan 7.5s linear infinite; }
}
@keyframes nerdScan {
  0% { transform: translateY(-36%); opacity: 0; }
  10% { opacity: 1; } 90% { opacity: 1; }
  100% { transform: translateY(300%); opacity: 0; }
}

/* ═══ the voice-channel finale (Act VI · the reader, open in a call — a staged preview) ═══ */
.together { margin: 3.6rem auto 0; max-width: 720px; text-align: center; }
.together__head { margin-bottom: 1.5rem; }
.together__head h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.05rem); color: var(--ink); margin: 0.35rem 0 0.6rem; }
.together__kick { color: var(--ink-dim); font-size: 0.98rem; margin: 0; }
.together__stamp { color: var(--ink-dim); font-size: 0.92rem; margin: 1.5rem auto 0; max-width: 560px; }
.together__stamp b { color: var(--brass-lift); }

.vc {
  position: relative; margin: 0 auto; max-width: 640px; text-align: left;
  border: 1px solid var(--brass-faint); border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(30,24,14,0.9), rgba(16,12,7,0.94));
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.vc__bar { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1rem; border-bottom: 1px solid var(--rule); background: rgba(0,0,0,0.25); }
.vc__chan { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--display); color: var(--ink); font-size: 0.95rem; }
.vc__spk { width: 18px; height: 18px; stroke: var(--brass-lift); stroke-width: 1.6; fill: var(--brass-lift); }
.vc__spk path[fill="none"] { fill: none; }
.vc__live { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--ink-dim); letter-spacing: 0.04em; }
.vc__dot { width: 7px; height: 7px; border-radius: 50%; background: #5ac17e; box-shadow: 0 0 8px rgba(90,193,126,0.8); }

.vc__stage { display: grid; grid-template-columns: 96px 1fr; }
.vc__rail { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.1rem 0.5rem; border-right: 1px solid var(--rule); background: rgba(0,0,0,0.18); }
.vc__caller { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.vc__av {
  width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); color: var(--brass-lift); font-size: 1.05rem;
  background: linear-gradient(135deg, #3a2f1c, #191108); border: 2px solid var(--brass);
  box-shadow: 0 0 0 3px rgba(90,193,126,0.28);   /* the Discord voice ring */
}
.vc__caller--you .vc__av { border-color: var(--brass-lift); box-shadow: 0 0 0 3px rgba(232,158,66,0.4); }
.vc__caller b { font-family: var(--display); font-size: 0.6rem; letter-spacing: 0.05em; color: var(--ink-dim); }

.vc__reader { padding: 1.1rem 1.2rem 1rem; }
.vc__ttl { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-lift); margin: 0 0 0.7rem; }
.vc__ttl span { opacity: 0.5; }
.vc__page { margin: 0; }
.vc__ln { display: block; font-family: var(--body); font-size: 0.92rem; line-height: 1.5; color: var(--ink-dim); margin-bottom: 0.4rem; }
.vc__ln--glow { position: relative; color: var(--ink); isolation: isolate; }
.vc__ln--glow::before {
  content: ''; position: absolute; inset: -3px -7px; border-radius: 5px; z-index: -1;
  background: linear-gradient(90deg, rgba(232,158,66,0.30), rgba(232,158,66,0.13));
  transform: scaleX(1); transform-origin: left;
}
.vc__note {
  margin-top: 0.85rem; padding: 0.55rem 0.8rem; border-left: 2px solid var(--brass);
  background: rgba(232,158,66,0.06); border-radius: 0 6px 6px 0;
  font-family: var(--body); font-size: 0.84rem; color: var(--ink-dim);
}
.vc__note b { color: var(--brass-lift); font-family: var(--display); }
.vc__note span { color: var(--ink-faint); font-style: italic; }

.vc__foot { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; border-top: 1px solid var(--rule); background: rgba(0,0,0,0.25); }
.vc__pos { font-size: 0.76rem; color: var(--ink-dim); }
.vc__pos i { color: var(--brass-faint); font-style: normal; }
.vc__typing { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.74rem; color: var(--ink-faint); }
.vc__typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-faint); display: inline-block; }

/* the ~3s playlet: keyed off .in (the medals pattern) — reduced motion shows the rest state at once */
@media (prefers-reduced-motion: no-preference) {
  html.js .together .vc__caller { transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 1.5, 0.4, 1); }
  html.js .together .vc__caller:nth-child(1) { transition-delay: 0.4s; }
  html.js .together .vc__caller:nth-child(2) { transition-delay: 0.6s; }
  html.js .together .vc__caller:nth-child(3) { transition-delay: 0.8s; }
  html.js .together .vc__caller:nth-child(4) { transition-delay: 1s; }
  html.js .together[data-reveal]:not(.in) .vc__caller { opacity: 0; transform: translateY(10px) scale(0.88); }

  html.js .together .vc__ln--glow::before { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.5s; }
  html.js .together[data-reveal]:not(.in) .vc__ln--glow::before { transform: scaleX(0); }

  html.js .together .vc__note { transition: opacity 0.6s ease 2.5s, transform 0.6s ease 2.5s; }
  html.js .together[data-reveal]:not(.in) .vc__note { opacity: 0; transform: translateY(8px); }

  /* ambient loops pause offscreen (#284) — gated on --awake, not the one-way .in */
  html.js .together--awake .vc__caller:not(.vc__caller--you) .vc__av { animation: vcRing 2.6s ease-in-out infinite; }
  html.js .together--awake .vc__typing i { animation: vcType 1.3s ease-in-out infinite; }
  html.js .together--awake .vc__typing i:nth-child(2) { animation-delay: 0.18s; }
  html.js .together--awake .vc__typing i:nth-child(3) { animation-delay: 0.36s; }
}
@keyframes vcRing { 0%, 100% { box-shadow: 0 0 0 3px rgba(90,193,126,0.28); } 50% { box-shadow: 0 0 0 4px rgba(90,193,126,0.5); } }
@keyframes vcType { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@media (max-width: 560px) {
  .vc__stage { grid-template-columns: 1fr; }
  .vc__rail { flex-direction: row; justify-content: center; border-right: none; border-bottom: 1px solid var(--rule); }
}

/* ═══ the prayer wall (Act VI · the family carries each other) ═══ */
/* ═══ THE PARISH POLLS: seven motions before the floor ═══
   Portrait plates, not circles (Trevor: the circles hid the jokes). Tallies keep
   their SPACE from birth (visibility, never display) so a vote can't pump the
   pinned room's height (#273/#278). */
.polls { width: min(880px, calc(100% - 2rem)); margin: 4.5rem auto 0; }
.polls__head { text-align: center; margin-bottom: 2rem; }
.polls__head h3 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  color: var(--ink-bright);
  margin: 0.6rem 0 0.7rem;
}
.polls__kick { color: var(--ink-dim); font-style: italic; margin: 0 auto; max-width: 46ch; }
.polls__grid { display: grid; gap: 1.6rem; }

.poll {
  border: 1px solid var(--brass-faint);
  border-radius: 2px;
  background: linear-gradient(165deg, rgba(var(--act-hue), 0.05), transparent 60%), var(--bg-raise);
  padding: 1.5rem clamp(1rem, 4vw, 2.2rem) 1.4rem;
  text-align: center;
  position: relative;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
/* each motion wears the room's ribbon (the house card grammar, v154) */
.poll::before {
  content: '';
  position: absolute;
  top: -1px; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc-soft) 30%, var(--acc-soft) 70%, transparent);
  pointer-events: none;
}
.poll:hover {
  border-color: var(--brass);
  box-shadow: 0 0 34px -14px var(--acc-soft);
}
.poll__kicker {
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass-dim);
  margin: 0 0 0.55rem;
}
.poll__q {
  font-family: var(--accent);
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  font-weight: 600;
  font-style: italic;
  color: var(--ink-bright);
  margin: 0 0 0.3rem;
}
.poll__sub { font-size: 0.85rem; color: var(--ink-faint); margin: 0 0 1.3rem; }

.poll__opts {
  display: flex;
  gap: clamp(0.7rem, 2.5vw, 1.4rem);
  justify-content: center;
  align-items: stretch;   /* equal-height columns so every tally bar lines up */
}
.poll__opt {
  flex: 1 1 0;
  max-width: 210px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.poll__face {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid var(--brass-faint);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.poll__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poll:not([data-voted]) .poll__opt:hover .poll__face,
.poll:not([data-voted]) .poll__opt:focus-visible .poll__face {
  transform: translateY(-3px);
  border-color: var(--brass);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6), 0 0 22px rgba(201, 168, 76, 0.18);
}
.poll__opt:focus-visible { outline: 1px solid var(--brass); outline-offset: 4px; }
.poll[data-voted] .poll__opt { cursor: default; }
.poll__opt.is-mine .poll__face,
.poll__opt.is-mine .poll__tname {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px var(--brass-faint), 0 0 26px rgba(201, 168, 76, 0.28), 0 8px 22px rgba(0, 0, 0, 0.6);
}
/* once the house has spoken, the unchosen step back into the shadow (the duel's language) */
.poll[data-voted] .poll__opt:not(.is-mine) .poll__face img { filter: saturate(0.6) brightness(0.85); }
.poll__name {
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.poll__opt.is-mine .poll__name { color: var(--brass-lift); }

/* the tally — space reserved from birth */
/* v159 (Trevor: the voting boxes read off-center on a phone): pre-vote, the reserved
   tally region COLLAPSES instead of holding ~100px of dead card — the native-sticky
   curtain absorbs the card growing when the house votes */
.poll:not([data-voted]) .poll__bar,
.poll:not([data-voted]) .poll__pct,
.poll:not([data-voted]) .poll__cast { display: none; }
.poll__bar {
  width: 100%;
  height: 6px;
  margin-top: auto;   /* pin the tally to the bottom so bars align across options */
  background: var(--bg-sunk);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  visibility: hidden;
}
.poll__bar i {
  display: block;
  height: 100%;
  width: calc(var(--w, 0) * 1%);
  background: linear-gradient(90deg, var(--brass), var(--brass-lift));
}
@media (prefers-reduced-motion: no-preference) {
  .poll__bar i { transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
}
.poll__pct {
  font-size: 0.78rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  min-height: 1.15em;
  visibility: hidden;
}
.poll[data-voted] .poll__bar,
.poll[data-voted] .poll__pct { visibility: visible; }
.poll__cast {
  font-size: 0.8rem;
  color: var(--brass-dim);
  margin: 1.15rem 0 0;
  min-height: 1.2em;
  visibility: hidden;
}
.poll[data-voted] .poll__cast { visibility: visible; }

/* text-only options (motions IV + VI) */
.poll__opt--text { max-width: 250px; }
.poll__tname {
  width: 100%;
  display: grid;
  place-items: center;
  padding: 1.35rem 0.8rem;
  border: 1px solid var(--brass-faint);
  border-radius: 3px;
  background: var(--bg-panel);
  font-family: var(--display);
  font-size: clamp(0.76rem, 2vw, 0.95rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.poll:not([data-voted]) .poll__opt:hover .poll__tname {
  transform: translateY(-3px);
  border-color: var(--brass);
  color: var(--brass-lift);
}
.poll[data-voted] .poll__opt:not(.is-mine) .poll__tname { color: var(--ink-faint); }
.poll__opt.is-mine .poll__tname { color: var(--brass-lift); }

/* motion VI: just a picture of Jack (aspect pinned — zero layout shift) */
.poll__pic {
  margin: 0 auto 1.25rem;
  max-width: 340px;
  border: 1px solid var(--brass-faint);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
.poll__pic img { width: 100%; display: block; aspect-ratio: 880 / 1173; object-fit: cover; }
.poll__pic--pickle { max-width: 220px; }
.poll__pic--pickle img { aspect-ratio: 1; }

/* motion VII: the testimony */
.poll__sayrow { display: flex; gap: 0.6rem; max-width: 480px; margin: 0 auto; }
.poll__sayin {
  flex: 1;
  min-width: 0;
  background: var(--bg-raise);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 0.95rem;
  padding: 0.6rem 0.85rem;
  outline: none;
}
.poll__sayin:focus { border-color: var(--brass); }
.poll__sayin::placeholder { color: var(--ink-faint); }
.poll__saybtn {
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  background: var(--brass-ghost);
  border: 1px solid var(--brass-faint);
  border-radius: 2px;
  padding: 0.6rem 1rem;
  cursor: pointer;
  white-space: nowrap;
}
.poll__saybtn:hover { color: var(--brass-lift); border-color: var(--brass); }
.poll__roll {
  min-height: 2.8em;
  max-width: 520px;
  margin: 1.15rem auto 0;
  display: grid;
  place-items: center;
}
.poll__roll p {
  margin: 0;
  font-family: var(--accent);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink-dim);
  transition: opacity 0.45s ease;
}
.poll__roll p.fade { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .poll__roll p { transition: none; } }

.polls__coda {
  text-align: center;
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 2.1rem 0 0;
}
.polls__coda i { font-style: normal; color: var(--brass-dim); }

/* mobile: let the option row breathe and stay square — 3 faces (Motion I) must
   not cramp, and the text/say boxes must fill the row instead of floating narrow */
@media (max-width: 600px) {
  .polls { width: calc(100% - 1.4rem); }
  .poll { padding: 1.3rem 0.9rem 1.2rem; }
  .poll__opts { gap: 0.6rem; }
  .poll__opt, .poll__opt--text { max-width: none; }
  .poll__name { font-size: 0.58rem; letter-spacing: 0.1em; }
  .poll__tname { padding: 1.05rem 0.45rem; font-size: 0.72rem; letter-spacing: 0.08em; }
  .poll__sayrow { gap: 0.5rem; }
  .poll__saybtn { padding: 0.6rem 0.75rem; }
}

.vigil { position: relative; margin: 3.2rem auto 0; max-width: 720px; text-align: center; }
.vigil__head { margin-bottom: 1.6rem; }
.vigil__head h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  color: var(--ink); margin: 0.35rem 0 0.7rem;
}
.vigil__kick {
  color: var(--ink-dim); font-style: italic; font-size: 1.02rem;
  max-width: 44ch; margin: 0 auto; text-wrap: pretty;
}
/* the live heartbeat — the one true number, straight from the server widget */
.vigil__live { margin: 0.9rem 0 0; font-size: 0.88rem; color: var(--brass-lift); letter-spacing: 0.02em; }
.vigil__live[hidden] { display: none; }
.vigil__live b { color: var(--brass-lift); font-weight: 700; }
.vigil__dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #f0b45a; box-shadow: 0 0 7px rgba(240,180,90,0.95);
  vertical-align: baseline; margin-right: 0.35rem;
  animation: vigilPulse 2.4s ease-in-out infinite;
}
@keyframes vigilPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.72); } }

/* answered — a reverent ledger of prayers kept, on a gold-ruled shelf (never a UI pill) */
.vigil__answered { margin: 0 auto 1.9rem; max-width: 600px; }
.vigil__ans-label {
  font-family: var(--display); font-size: 0.62rem; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--brass); margin: 0 0 0.9rem;
}
.vigil__ledger {
  list-style: none; margin: 0; padding: 1rem 0 0; border-top: 1px solid var(--brass-faint);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem 1.5rem;
}
.vigil__ledger li { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-dim); font-size: 0.9rem; }
.vigil__ledger li i { color: var(--brass-lift); font-style: italic; }
.vigil__ledger .vigil__fl { width: 13px; height: 21px; filter: drop-shadow(0 0 4px rgba(244,210,120,0.65)); }
html.js .vigil__ans--target { transition: opacity 0.7s ease; }

/* the rack — a real votive stand: two tiers of glass cups on a brass ledge */
.vigil__rack {
  position: relative; max-width: 560px; margin: 0 auto;
  padding: 1.5rem 1rem 0;
}
.vigil__rack::before {
  content: ''; position: absolute; inset: -6% 0 8%; pointer-events: none;
  background: radial-gradient(ellipse 70% 65% at 50% 45%, rgba(232,158,66,0.13), transparent 72%);
}
.vigil__tier { display: flex; justify-content: center; align-items: flex-end; position: relative; --cup: clamp(24px, 5.4vw, 38px); }
.vigil__tier--front { gap: clamp(2px, 1vw, 10px); z-index: 3; }
.vigil__tier--back {
  --cup: clamp(15px, 3.5vw, 25px); /* the deep rank: genuinely smaller cups, so layout recedes too */
  gap: clamp(4px, 1.4vw, 14px); opacity: 0.5; margin-bottom: -13px; z-index: 1;
  transform: translateX(17px); /* offset so back flames peek up BETWEEN the front ones */
}

.vigil__votive {
  position: relative; background: none; border: 0; padding: 0; cursor: pointer;
  width: var(--cup);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.vigil__glow {
  position: absolute; top: -6%; left: 50%; transform: translateX(-50%);
  width: 150%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,178,86,0.30), transparent 62%);
  transition: opacity 0.3s ease; opacity: 0.85;
}
.vigil__fl {
  width: 56%; height: auto; display: block; overflow: visible; position: relative; z-index: 2;
  filter: drop-shadow(0 0 4px rgba(255,185,90,0.55)); transform-origin: 50% 96%;
}
.vigil__cup {
  width: 84%; height: calc(var(--cup) * 0.36); margin-top: -1px; position: relative; z-index: 1;
  border-radius: 2px 2px 5px 5px / 2px 2px 8px 8px;
  background: linear-gradient(180deg, rgba(244,168,84,0.42), rgba(150,72,26,0.62));
  box-shadow: inset 0 2px 4px rgba(255,214,144,0.6), inset 0 -3px 5px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
}
html.js .vigil__votive .vigil__fl { transition: transform 0.22s ease, filter 0.3s ease; }
html.js .vigil__votive .vigil__glow { transition: opacity 0.3s ease, transform 0.3s ease; }
.vigil__votive:hover .vigil__fl, .vigil__votive:focus-visible .vigil__fl {
  filter: drop-shadow(0 0 10px rgba(255,204,116,0.95)); transform: scale(1.16);
}
.vigil__votive:hover .vigil__glow, .vigil__votive:focus-visible .vigil__glow { opacity: 1; transform: translateX(-50%) scale(1.15); }
.vigil__votive:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; border-radius: 5px; }
.vigil__votive.is-prayed .vigil__fl { filter: drop-shadow(0 0 13px rgba(255,214,126,1)); transform: scale(1.18); }
.vigil__votive.is-prayed .vigil__glow { opacity: 1; }

/* the brass ledge the front cups stand on */
.vigil__ledge {
  height: 7px; margin: 0 -0.4rem; border-radius: 2px; position: relative; z-index: 2;
  background: linear-gradient(180deg, var(--brass-lift), var(--brass) 40%, #6f5320 100%);
  box-shadow: 0 1px 0 rgba(255,230,170,0.35) inset, 0 6px 14px rgba(232,158,66,0.14);
}
.vigil__ledge::after {
  content: ''; position: absolute; left: 6%; right: 6%; top: 100%; height: 22px;
  background: linear-gradient(180deg, rgba(232,158,66,0.18), transparent 80%);
  filter: blur(2px);
}

/* organic flicker — only while the rack is awake (in view); paused otherwise */
@keyframes vigilFlick {
  0%, 100% { transform: scale(1) translateY(0); }
  25% { transform: scale(1.05, 0.97) translateY(0.3px); }
  50% { transform: scale(0.96, 1.05) translateY(-0.6px); }
  75% { transform: scale(1.03, 0.99) translateY(0.2px); }
}
.vigil--awake .vigil__votive .vigil__fl { animation: vigilFlick 2.7s ease-in-out infinite; }
.vigil--awake .vigil__votive:nth-child(2n) .vigil__fl { animation-duration: 3.2s; animation-delay: -0.8s; }
.vigil--awake .vigil__votive:nth-child(3n) .vigil__fl { animation-duration: 2.3s; animation-delay: -1.3s; }
.vigil--awake .vigil__votive:nth-child(5n) .vigil__fl { animation-duration: 3.6s; animation-delay: -0.5s; }
/* hover/pray win over the flicker (#277) */
.vigil__votive:hover .vigil__fl, .vigil__votive:focus-visible .vigil__fl,
.vigil__votive.is-prayed .vigil__fl { animation: none !important; }

/* the tap-reveal line + the honest stamp */
.vigil__said {
  min-height: 2.6em; margin: 2rem auto 0.4rem; max-width: 46ch;
  color: var(--ink); font-size: 1.05rem; text-wrap: pretty;
}
.vigil__said-hint { color: var(--ink-faint); font-style: italic; font-size: 0.96rem; }
.vigil__said b { color: var(--brass-lift); }
.vigil__stamp { margin: 0.7rem auto 0; max-width: 50ch; color: var(--ink-dim); font-size: 0.9rem; }
.vigil__stamp b { color: var(--brass); font-style: italic; }

/* ── the candles you carry (v156): the tray your taps gather into — the staged preview
   of prayers riding member profiles instead of getting lost in a channel ── */
.vigil__carry {
  margin: 1.2rem auto 0;
  max-width: 560px;
  padding: 0.95rem 1.1rem 0.9rem;
  border: 1px solid var(--brass-faint);
  border-radius: 12px;
  background:
    radial-gradient(120% 100% at 50% -12%, rgba(240, 200, 120, 0.07), transparent 58%),
    rgba(0, 0, 0, 0.26);
}
.vigil__carry[hidden] { display: none; }
.vigil__carry-cap {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
}
.vigil__carry-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
  min-height: 2.4rem;
}
.vigil__held {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.vigil__held svg { width: 11px; height: 18px; filter: drop-shadow(0 0 6px rgba(244, 205, 120, 0.7)); }
.vigil__held i { font-style: normal; font-size: 0.72rem; color: var(--ink-dim); max-width: 9em; }
.vigil__held--more i { color: var(--brass); font-style: italic; padding-top: 1.1rem; }
@media (prefers-reduced-motion: no-preference) {
  .vigil__held { animation: heldIn 0.5s cubic-bezier(0.3, 1.3, 0.4, 1) both; }
  @keyframes heldIn {
    from { opacity: 0; transform: translateY(6px) scale(0.85); }
    to { opacity: 1; transform: none; }
  }
}
.vigil__carry-note {
  margin: 0.75rem auto 0;
  max-width: 42ch;
  color: var(--ink-dim);
  font-size: 0.85rem;
}
.vigil__carry-note b { color: var(--brass-lift); }

/* how the real system works — three moves, one ruled ledger */
.vigil__how {
  list-style: none;
  margin: 1.6rem auto 0;
  padding: 0;
  max-width: 560px;
  text-align: left;
}
.vigil__how li {
  padding: 0.7rem 0.15rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-dim);
  font-size: 0.92rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.vigil__how li:last-child { border-bottom: 1px solid var(--rule); }
.vigil__how b {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-lift);
  margin-right: 0.35em;
}

/* the answered flame that rises from the rack (a floating clone inside .vigil, JS-driven) */
.vigil__rising { position: absolute; top: 0; left: 0; z-index: 60; pointer-events: none; width: 24px; height: 40px; margin: -20px 0 0 -12px; }

@media (prefers-reduced-motion: reduce) {
  .vigil--awake .vigil__votive .vigil__fl { animation: none; }
  .vigil__dot { animation: none; }
  html.js .vigil__votive .vigil__fl, html.js .vigil__votive .vigil__glow, html.js .vigil__ans--target { transition: none; }
}

/* ═══ ACT VI — the shelf teaser ═══ */

/* the rolling wall rides inside a gold-framed band (double rule above and below) */
.reelband {
  margin: 2.8rem -1.5rem 0;
  padding: 1.4rem 0;
  position: relative;
  border-top: 1px solid var(--brass-dim);
  border-bottom: 1px solid var(--brass-dim);
  background: linear-gradient(180deg, var(--brass-ghost), transparent 30%, transparent 70%, var(--brass-ghost));
}
.reelband::before, .reelband::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--brass-faint);
}
.reelband::before { top: 5px; }
.reelband::after { bottom: 5px; }
/* v156 border work: a gem seated at the center of each rail pair — the page's own
   divider language, carried onto the shelf band */
.reelband__gem {
  position: absolute;
  left: 50%;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  transform: rotate(45deg);
  background: var(--bg);
  border: 1px solid var(--brass);
  box-shadow: 0 0 10px rgba(211, 174, 118, 0.45);
  z-index: 1;
}
.reelband__gem--top { top: -4.5px; }
.reelband__gem--bot { bottom: -4.5px; }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
/* every passing cover wears a thin gilt frame (v156 — the band reads as a real shelf) */
.marquee img {
  border: 1px solid rgba(211, 174, 118, 0.28);
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.marquee + .marquee { margin-top: 1rem; }
.marquee__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: mq 90s linear infinite;
}
.marquee--rev .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
.marquee img {
  width: 118px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  border: 1px solid var(--rule);
  box-shadow: 0 4px 14px var(--shadow);
}

.teaser__cta { text-align: center; padding: 3rem 1.5rem 1rem; }
.browse-btn {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bg-sunk);
  background: linear-gradient(180deg, var(--brass-lift), var(--brass));
  border: 1px solid var(--brass-lift);
  padding: 1.05rem 2.6rem 1rem 2.9rem;
  border-radius: 2px;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(184, 148, 94, 0.25);
}
.browse-btn { position: relative; overflow: hidden; }
.browse-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 252, 240, 0.45) 50%, transparent 65%);
  transform: translateX(-120%);
}
.browse-btn:hover::after { transition: transform 0.7s ease; transform: translateX(120%); }
.browse-btn:hover { filter: brightness(1.08); }
.teaser__sub {
  margin: 1.1rem 0 0;
  color: var(--ink-faint);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* ═══ the library browser (its own screen) ═══ */

.shelf { padding: 2.5rem 0 4rem; min-height: 100svh; }
.shelf__head {
  width: min(1400px, calc(100% - 2rem));
  margin: 0 auto 2rem;
  text-align: center;
}
.backlink {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
  border: 1px solid var(--rule);
  padding: 0.5rem 0.95rem;
  border-radius: 2px;
  margin-bottom: 2rem;
}
.backlink:hover { color: var(--brass); border-color: var(--brass-faint); }
.shelf__head h2 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  font-weight: 700;
  margin: 0.7rem 0 0.5rem;
  color: var(--ink-bright);
}
.shelf__head p { color: var(--ink-dim); margin: 0; }

.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg); /* fallback for engines without color-mix */
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.85rem 0;
  margin-bottom: 1.8rem;
}
.bar__inner {
  width: min(1400px, calc(100% - 2rem));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.search {
  flex: 1 1 260px;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--rule);
  background: var(--bg-raise);
  padding: 0.5rem 0.85rem;
  border-radius: 2px;
}
.search:focus-within { border-color: var(--brass); }
.search input {
  flex: 1;
  background: none;
  border: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  outline: none;
  min-width: 0;
}
.search input::placeholder { color: var(--ink-faint); }
.search__mark { color: var(--brass-dim); font-size: 0.9rem; }

select.filter {
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: var(--bg-raise);
  border: 1px solid var(--rule);
  padding: 0.62rem 0.7rem;
  border-radius: 2px;
  cursor: pointer;
  max-width: 12rem;
}
select.filter:hover { color: var(--brass); border-color: var(--brass-faint); }
select.filter option { font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 0.95rem; }

.toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--rule);
  background: var(--bg-raise);
  padding: 0.62rem 0.8rem;
  border-radius: 2px;
  cursor: pointer;
}
.toggle[aria-pressed='true'] { color: var(--brass); border-color: var(--brass-faint); background: var(--brass-ghost); }

.lucky {
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid var(--brass-faint);
  background: var(--brass-ghost);
  padding: 0.62rem 0.9rem;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.lucky:hover { color: var(--brass-lift); border-color: var(--brass); }
.toggle__box {
  width: 0.72rem; height: 0.72rem;
  border: 1px solid currentColor;
  display: grid; place-items: center;
  font-size: 0.6rem; line-height: 1;
}

.tally {
  width: min(1400px, calc(100% - 2rem));
  margin: 0 auto 1.1rem;
  color: var(--ink-faint);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.tally b { color: var(--brass); font-weight: 600; }

/* ═══ the rails: the shelves + the centuries ═══
   Chips wear the home tab voice (display small caps, brass when worn). One line,
   side-scrolled on phones; wrapping on wide screens. Counts are truthful under
   the other active filters — repainted on every change, never a stale number. */
.rails {
  width: min(1400px, calc(100% - 2rem));
  margin: 0 auto 1.5rem;
  display: grid;
  gap: 0.8rem;
}
.rail { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.rail__lab {
  flex: none;
  width: 7.2em;
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-dim);
}
.rail__chips {
  display: flex;
  gap: 0.4rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 26px 2px 2px;   /* breathing room so focus rings aren't clipped */
  mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
}
.rail__chips::-webkit-scrollbar { display: none; }
.rail__chips.rail--end { mask-image: none; }   /* scrolled to the end — the last chip stands clear */
@media (min-width: 900px) {
  .rail__chips { flex-wrap: wrap; overflow: visible; mask-image: none; padding-right: 2px; }
}
@media (max-width: 560px) {
  .rail { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .rail__lab { width: auto; }
  .rail__chips { width: 100%; }
}
.chip {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: var(--bg-raise);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.42rem 0.7rem;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}
.chip:hover { color: var(--brass); border-color: var(--brass-faint); }
.chip[aria-pressed='true'] {
  color: var(--brass-lift);
  border-color: var(--brass);
  background: var(--brass-ghost);
}
.chip__n {
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.chip[aria-pressed='true'] .chip__n { color: var(--brass); }
.chip--none { opacity: 0.35; }

/* ═══ the author lane — "the author answers" ═══ */
.lane {
  width: min(1400px, calc(100% - 2rem));
  margin: 0 auto 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
}
.lane__lab { font-style: italic; color: var(--ink-faint); font-size: 0.9rem; }
.lane__a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg-raise);
  border: 1px solid var(--brass-faint);
  border-radius: 2px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.lane__a b { font-family: var(--accent); font-weight: 600; color: var(--brass-lift); font-size: 1.02rem; }
.lane__a span { font-size: 0.78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.lane__a:hover { border-color: var(--brass); background: var(--brass-ghost); }
.lane__a.is-on { border-color: var(--brass); background: var(--brass-ghost); }

/* ═══ the loading skeleton: shimmer where the covers will stand ═══ */
.skelcell { display: flex; flex-direction: column; gap: 0.5rem; }
.skel { position: relative; overflow: hidden; background: var(--bg-panel); border: 1px solid var(--rule); }
.skel--art { aspect-ratio: 2 / 3; }
.skel--t { height: 0.85rem; width: 82%; border: 0; }
.skel--a { height: 0.7rem; width: 55%; border: 0; }
@media (prefers-reduced-motion: no-preference) {
  .skel::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(211, 174, 118, 0.07), transparent);
    animation: skelsweep 1.3s ease-in-out infinite;
  }
  @keyframes skelsweep { to { transform: translateX(100%); } }
}

/* ═══ the threshold: head → rails → bar walk in when the browser opens ═══ */
@media (prefers-reduced-motion: no-preference) {
  html.js .shelf.shelf--in .shelf__head { animation: rise 0.5s ease both; }
  html.js .shelf.shelf--in .rails { animation: rise 0.5s ease 0.1s both; }
  html.js .shelf.shelf--in .bar { animation: rise 0.5s ease 0.18s both; }
}

/* the mosaic */
.grid {
  width: min(1400px, calc(100% - 2rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr));
  gap: 1.4rem 1rem;
}
@media (max-width: 560px) { :root { --tile: 104px; } .grid { gap: 1.1rem 0.7rem; } }

.tile {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: inherit;
  font: inherit;
  opacity: 0;
}
/* tiles rise as they LAND in view (IO-batched; --d is the batch stagger) */
.tile.is-in { animation: rise 0.5s ease var(--d, 0ms) forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tile { opacity: 1; }
  .tile.is-in { animation: none; }
}

.tile__art {
  position: relative;
  aspect-ratio: 2 / 3;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  overflow: hidden;
  box-shadow: 0 2px 10px var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.tile:hover .tile__art,
.tile:focus-visible .tile__art {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px var(--shadow);
  border-color: var(--brass);
}
.tile__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .tile:hover .tile__art img,
  .tile:focus-visible .tile__art img { transform: scale(1.035); }
}

/* the designed no-cover state: a gold-framed plate, not a hole */
.plateart {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 0.7rem;
  text-align: center;
  background:
    radial-gradient(90% 70% at 50% 0%, var(--brass-ghost), transparent 70%),
    var(--bg-panel);
  border: 1px solid var(--brass-faint);
  box-shadow: inset 0 0 0 3px var(--bg-panel), inset 0 0 0 4px var(--brass-faint);
}
.plateart__orn { color: var(--brass-dim); font-size: 0.6rem; letter-spacing: 0.4em; padding-left: 0.4em; }
.plateart__t {
  font-family: var(--display);
  font-size: 0.62rem;
  line-height: 1.35;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.badge {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--bg-sunk);
  color: var(--brass);
  border-top: 1px solid var(--brass-faint);
  border-right: 1px solid var(--brass-faint);
  font-family: var(--display);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.24rem 0.44rem;
  font-variant-numeric: tabular-nums;
}

/* three lines, because volume numbers live at the end of a long title
   ("The Sermons of Charles Spurgeon - Vol. 4, 601-810") */
.tile__t {
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile__a {
  font-size: 0.8rem;
  color: var(--ink-dim);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.more { display: grid; place-items: center; padding: 3rem 0 0; }
.more[hidden] { display: none; }  /* an author `display:grid` beats the UA's [hidden] rule */
.more button {
  font-family: var(--display);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  background: var(--brass-ghost);
  border: 1px solid var(--brass-faint);
  padding: 0.85rem 2rem 0.85rem 2.24rem;
  cursor: pointer;
  border-radius: 2px;
}
.more button:hover { background: var(--bg-panel); border-color: var(--brass); }

.empty {
  width: min(1400px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 5rem 1rem;
  text-align: center;
  color: var(--ink-faint);
}
.empty__orn { color: var(--brass-dim); letter-spacing: 0.5em; font-size: 0.8rem; }

/* ═══ the detail drawer ═══ */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(2px);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.scrim[data-open='true'] { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100%);
  background: var(--bg-raise);
  border-left: 1px solid var(--rule);
  z-index: 50;
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer[data-open='true'] { transform: none; }
@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }

.drawer__close {
  position: sticky;
  top: 0;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 0.9rem 1rem;
  background: linear-gradient(var(--bg-raise) 62%, transparent);
  border: 0;
}
.drawer__close button {
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  border-radius: 2px;
}
.drawer__close button:hover { color: var(--brass); border-color: var(--brass-faint); }

.drawer__body { padding: 0 clamp(1.2rem, 4vw, 2.4rem) 3rem; }

.drawer__art {
  width: 168px;
  aspect-ratio: 2 / 3;
  position: relative;
  border: 1px solid var(--rule);
  overflow: hidden;
  box-shadow: 0 8px 26px var(--shadow);
  margin-bottom: 1.6rem;
}
.drawer__art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the card speaks in the home page's threshold voice: an era eyebrow over the
   title, a gold hairline under the byline */
.drawer__eyebrow {
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass-dim);
  margin: 0 0 0.7rem;
}
.drawer__t {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.4rem;
  text-wrap: balance;
}
.drawer__a { color: var(--brass); font-size: 1.04rem; margin: 0 0 1.1rem; font-style: italic; }
.drawer__rule {
  width: 72px;
  height: 1px;
  margin: 0 0 1.3rem;
  background: linear-gradient(90deg, var(--brass), transparent);
}
/* the surprise pull: the card catalog spins a few plates over the cover, then lifts */
.drawer__shuffle { position: absolute; inset: 0; z-index: 2; background: var(--bg-panel); }
.drawer__shuffle--lift { opacity: 0; transition: opacity 0.28s ease; }

.drawer__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.4rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.1rem 0;
  margin-bottom: 1.4rem;
}
.drawer__meta dt {
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 0.25rem;
}
.drawer__meta dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }

.drawer__d { color: var(--ink); max-width: 62ch; text-wrap: pretty; font-size: 1.02rem; line-height: 1.65; }

.drawer__all {
  display: inline-block;
  margin-top: 1.4rem;
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid var(--brass-faint);
  background: var(--brass-ghost);
  padding: 0.7rem 1.1rem;
  border-radius: 2px;
  cursor: pointer;
}
.drawer__all:hover { color: var(--brass-lift); border-color: var(--brass); }

.pieces { margin-top: 2.2rem; }
.pieces h4 {
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.9rem;
}
.pieces ol { list-style: none; margin: 0; padding: 0; }
.pieces li { border-top: 1px solid var(--rule); }
.pieces li:last-child { border-bottom: 1px solid var(--rule); }
/* not links: the pieces are listed, never opened */
.pieces .piece {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.62rem 0.2rem;
  color: var(--ink-dim);
  font-size: 0.94rem;
}
.pieces .piece span:last-child {
  color: var(--ink-faint);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* ═══ the footer + theme ═══ */

.foot {
  border-top: 1px solid var(--rule);
  padding: 4rem 1.5rem 4.5rem;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.86rem;
  background:
    radial-gradient(90% 80% at 50% 100%, var(--brass-ghost), transparent 65%),
    var(--bg-sunk);
}
.foot--lib { border-top: 0; padding-top: 4rem; background: none; }
.foot__mark {
  display: block;
  margin: 0 auto 1.4rem;
  width: clamp(84px, 12vw, 120px);
  height: auto;
  border-radius: 50%;
  border: 1px solid var(--brass-faint);
  box-shadow: 0 0 0 4px var(--bg-sunk), 0 0 0 5px var(--brass-faint), 0 10px 30px var(--shadow);
}
.foot__thanks {
  color: var(--ink-dim);
  font-size: 1.02rem;
  margin: 0 0 1.1rem;
}
.foot__bless {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  letter-spacing: 0.06em;
  color: var(--brass-lift);
  margin: 0 0 2.2rem;
  text-wrap: balance;
}
/* the slogan split around the flame: "God bless" · [the light kindles] · "and go in peace" */
.foot__bless--open { margin: 0 0 0.7rem; }
.foot__bless--close { margin: 0.5rem 0 2.4rem; }
.foot__site-line { margin: 0.1rem 0 0; }
.foot__site {
  color: var(--brass-dim);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.foot__site:hover { color: var(--brass-lift); border-bottom-color: var(--brass-faint); }
.foot__orn { color: var(--brass-dim); letter-spacing: 0.5em; padding-left: 0.5em; margin-bottom: 0.9rem; }

/* the benediction: the page opened with embers rising; it closes with one flame kept.
   It kindles from a spark as the footer arrives — a long, slow settle — then holds. */
/* the benediction cross (v148, Trevor's ending): "God bless" — the cross draws
   itself in gold light — "and go in peace." Inscribed, not stamped. */
/* the light: rays + cross share one centered anchor */
.foot__light { position: relative; display: inline-block; margin: 0.3rem 0 0.55rem; }
.foot__cross { position: relative; line-height: 0; }
.foot__cross svg { width: 54px; height: 74px; overflow: visible; }
.foot__cr {
  fill: none;
  stroke: var(--brass-lift);
  stroke-width: 2.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(240, 205, 130, 0.55));
}
/* quiet rays fanning from behind the cross once it stands */
.foot__rays {
  position: absolute;
  left: 50%; top: 46%;
  width: 300px; height: 300px;
  transform: translate(-50%, -50%);
  background:
    repeating-conic-gradient(from -90deg at 50% 50%,
      transparent 0deg 12deg,
      rgba(240, 205, 130, 0.05) 12deg 15deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, 0.5) 42%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, 0.5) 42%, transparent 72%);
  pointer-events: none;
}
/* ── the benediction take: every child sequences off the wrapper's single .in ── */
html.js .foot__bene[data-reveal] { transform: none; }   /* the take stages itself; no slide */
html.js .foot__bene .foot__bless--open {
  opacity: 0;
  letter-spacing: 0.3em;
  transition: opacity 1.4s ease 0.15s, letter-spacing 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
html.js .foot__bene.in .foot__bless--open { opacity: 1; letter-spacing: 0.06em; }
html.js .foot__bene .foot__cr {
  stroke-dasharray: 76;
  stroke-dashoffset: 76;
  transition: stroke-dashoffset 2.1s cubic-bezier(0.22, 1, 0.36, 1) 1.1s;
}
html.js .foot__bene.in .foot__cr { stroke-dashoffset: 0; }
html.js .foot__bene .foot__crglow { opacity: 0; transition: opacity 2s ease 2.3s; }
html.js .foot__bene.in .foot__crglow { opacity: 1; }
html.js .foot__bene .foot__rays {
  opacity: 0;
  transition: opacity 2.4s ease 2.6s;
}
html.js .foot__bene.in .foot__rays { opacity: 1; }
/* "and go in peace." — its own voice (v158): warm IVORY against "God bless"'s gold,
   and a band of light WIPES through the letters as it arrives (the hero verse's own
   gold-pour craft, spoken once more at the door) */
.foot__bless--close {
  background: linear-gradient(100deg, #f2e3bd 0%, #f2e3bd 38%, #fffdf2 50%, #e9c87e 62%, #a9834a 100%);
  background-size: 300% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #f2e3bd;   /* the painted color if text-clip is unsupported */
  filter: drop-shadow(0 0 16px rgba(240, 214, 150, 0.22));
}
html.js .foot__bene .foot__bless--close {
  opacity: 0;
  letter-spacing: 0.24em;
  background-position: 100% 0;   /* rests in the deep bronze end… */
  transition: opacity 1.4s ease 3.1s, letter-spacing 2s cubic-bezier(0.22, 1, 0.36, 1) 3.1s,
    background-position 2.8s cubic-bezier(0.3, 0.7, 0.3, 1) 3.4s;
}
html.js .foot__bene.in .foot__bless--close {
  opacity: 1;
  letter-spacing: 0.06em;
  background-position: 0% 0;     /* …and the light pours through to warm ivory */
}
@media (prefers-reduced-motion: no-preference) {
  /* once arrived, the rays breathe — slow, like candlelight in still air */
  .foot__bene.in .foot__rays { animation: footRays 7s ease-in-out 5s infinite; }
  @keyframes footRays {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    50% { transform: translate(-50%, -50%) rotate(2.5deg) scale(1.04); }
  }
}
@media (prefers-reduced-motion: reduce) {
  html.js .foot__bene .foot__bless--open,
  html.js .foot__bene .foot__bless--close { opacity: 1; letter-spacing: 0.06em; transition: none; }
  html.js .foot__bene .foot__bless--close { background-position: 0% 0; }
  html.js .foot__bene .foot__cr { stroke-dashoffset: 0; transition: none; }
  html.js .foot__bene .foot__crglow { opacity: 1; transition: none; }
  html.js .foot__bene .foot__rays { opacity: 1; transition: none; }
}
.foot__credit { margin-top: 0.6rem; font-size: 0.76rem; color: var(--ink-faint); opacity: 0.8; }

/* ═══ the top bar: contents · browse — two uniform doors ═══ */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  pointer-events: none;
}
.topnav > * { pointer-events: auto; }
.topnav__btn {
  display: inline-block;
  background: var(--bg-raise); /* fallback for engines without color-mix */
  background: color-mix(in srgb, var(--bg-raise) 88%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.55rem 0.85rem;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.topnav__btn:hover { color: var(--brass); border-color: var(--brass-faint); }
.topnav__btn--mid { color: var(--brass); border-color: var(--brass-faint); }
.topnav__btn--mid:hover { color: var(--brass-lift); border-color: var(--brass); }
/* the sound master (v156): quiet chip between the two doors; tightens on a phone */
.topnav__snd { text-transform: lowercase; letter-spacing: 0.1em; }
@media (max-width: 520px) {
  .topnav__snd { padding: 0.55rem 0.55rem; font-size: 0.56rem; }
}
/* the beat after the doors open: the nav's own door glows once, then rests */
@media (prefers-reduced-motion: no-preference) {
  .topnav__btn--mid.nav-beckon { animation: navbeckon 2.2s ease 0.9s 1; }
  @keyframes navbeckon {
    0%, 100% { box-shadow: none; color: var(--brass); border-color: var(--brass-faint); }
    35% { box-shadow: 0 0 18px 2px rgba(211, 174, 118, 0.45); color: var(--brass-lift); border-color: var(--brass-lift); }
  }
}
.topnav__slot { position: relative; }
.topnav__slot[hidden], .topnav__btn[hidden] { display: none; }
.tn-short { display: none; }
@media (max-width: 460px) {
  .topnav { padding: 0.7rem 0.55rem; }
  .topnav__btn { font-size: 0.55rem; letter-spacing: 0.08em; padding: 0.52rem 0.55rem; }
  .tn-long { display: none; }
  .tn-short { display: inline; }
}

/* the contents panel: the whole page, one tap deep */
.toc {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  min-width: 250px;
  background: var(--bg-raise); /* fallback for engines without color-mix */
  background: color-mix(in srgb, var(--bg-raise) 94%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--brass-faint);
  box-shadow: inset 0 0 0 3px var(--bg-raise), inset 0 0 0 4px var(--brass-faint),
    0 18px 44px var(--shadow);
  padding: 0.55rem 0;
}
.toc[hidden] { display: none; }
.toc a {
  display: grid;
  grid-template-columns: 2.6em 1fr;
  align-items: baseline;
  padding: 0.52rem 1.1rem;
  text-decoration: none;
  font-family: var(--display);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.toc a:hover { color: var(--brass-lift); background: var(--brass-ghost); }
.toc i {
  font-style: normal;
  font-family: var(--display);
  font-size: 0.72rem;
  color: var(--brass-dim);
}
.toc__lib {
  border-top: 1px solid var(--rule);
  margin-top: 0.35rem;
  padding-top: 0.75rem !important;
  color: var(--brass) !important;
}

/* the standalone flex line in the mind act */
.mind__flex {
  margin: 0.9rem auto 0;
  font-family: var(--accent);
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  font-style: italic;
  color: var(--ink);
}
.mind__flex b { color: var(--brass-lift); font-weight: 700; }

/* the duel: Trev approved, the other fellow respectfully declined */
.mind__duel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin: 2rem auto 0;
}
.mind__duelist {
  position: relative;
  width: clamp(76px, 11vw, 104px);
  height: clamp(76px, 11vw, 104px);
  flex: 0 0 auto;
}
.mind__duelist img {
  width: 100%; height: 100%;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}
.mind__duelist--us img {
  box-shadow: 0 0 0 2px var(--brass-faint), 0 0 0 5px rgba(201, 168, 76, 0.16),
    0 6px 22px rgba(0, 0, 0, 0.55), 0 0 26px rgba(201, 168, 76, 0.22);
}
.mind__duelist--them img {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 6px 22px rgba(0, 0, 0, 0.55);
  filter: saturate(0.55) brightness(0.82);
}
.mind__mark {
  position: absolute;
  right: -4px; bottom: -4px;
  width: 30px; height: 30px;
  z-index: 1;
  display: grid;
  place-content: center;
  border-radius: 50%;
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 700;
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.55);
}
.mind__mark--yes {
  color: #10240f;
  background: radial-gradient(circle at 34% 28%, #b8e6a2, #5da24a 60%, #33702b);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  /* the outer corner — Trevor's photo gives a thumbs-up in the lower right,
     and the badge was sitting exactly on the thumb (his catch, v154) */
  left: -4px; right: auto;
}
.mind__mark--no {
  color: #2a0b06;
  background: radial-gradient(circle at 34% 28%, #ff9a83, #c2372a 60%, #7c1a12);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
.mind__vs {
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-left: 0.3em;
}

/* ═══ the engine room, for the nerds — the one deliberately un-ornate panel ═══ */
.act--nerd {
  /* the engine room's soul color: phosphor green (the live signal), over the gold skeleton.
     Scoped here so every descendant — the trace, the terminal — inherits it via var(--sig).
     v158 (Trevor: "gets black toward the bottom — more green notes"): the phosphor now
     pools down the WHOLE room — two mid-page banks + a floor glow, not just the crown. */
  --sig: #6fc389;
  --sig-lift: #a2e6ba;
  --sig-glow: rgba(111, 195, 137, 0.55);
  background:
    radial-gradient(66% 48% at 50% 0%, rgba(111, 195, 137, 0.11), transparent 62%),
    radial-gradient(52% 30% at 6% 34%, rgba(111, 195, 137, 0.065), transparent 60%),
    radial-gradient(56% 32% at 96% 58%, rgba(111, 195, 137, 0.06), transparent 60%),
    radial-gradient(48% 26% at 12% 82%, rgba(111, 195, 137, 0.055), transparent 62%),
    radial-gradient(100% 60% at 50% 100%, rgba(111, 195, 137, 0.09), transparent 60%),
    var(--bg);
  padding: 4.6rem 1.5rem 4rem;
}
.nerd {
  max-width: 76ch;
  margin: 0 auto;
  font-family: 'Consolas', 'SF Mono', ui-monospace, monospace;
}
.nerd__head { margin-bottom: 1.1rem; }
.nerd__title { margin: 0; color: var(--brass-lift); font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; }
@media (prefers-reduced-motion: no-preference) {
  .nerd__title::after { content: '▮'; margin-left: 0.35em; color: var(--brass-dim); animation: caret 1.1s steps(2, jump-none) infinite; }
  @keyframes caret { 50% { opacity: 0; } }
}
.nerd__sub { margin: 0.3rem 0 0; color: var(--ink-faint); font-size: 0.82rem; font-style: italic; font-family: var(--serif); }

/* the terminal window */
.nerd__term {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: linear-gradient(180deg, #0b0a08, #070605);
  box-shadow: 0 24px 60px -34px #000, inset 0 1px 0 rgba(184, 148, 94, 0.07);
  overflow: hidden;
}
.nerd__bar {
  position: relative;   /* anchors the boot progress fill */
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.85rem;
  background: rgba(184, 148, 94, 0.05);
  border-bottom: 1px solid var(--brass-ghost);
}
/* the boot progress: a thin phosphor fill riding the title bar's bottom rule (v155) */
.nerd__prog {
  position: absolute; left: 0; bottom: -1px;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--sig), var(--sig-lift));
  box-shadow: 0 0 9px var(--sig-glow);
  transition: width 0.55s ease;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .nerd__prog { transition: none; width: 100%; opacity: 0.5; } }
.nerd__dots { display: inline-flex; gap: 0.4rem; }
.nerd__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--brass-dim); opacity: 0.5; }
.nerd__path { color: var(--ink-faint); font-size: 0.72rem; letter-spacing: 0.02em; }
/* the RUN key: press it and the engine boots under your finger (a 5.5s backstop
   still auto-boots an untouched terminal — nobody waits at a dark screen, #290) */
.nerd__run {
  margin-left: auto;
  padding: 0.28rem 0.75rem;
  font-family: ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--sig-lift);
  background: rgba(111, 195, 137, 0.08);
  border: 1px solid rgba(111, 195, 137, 0.4);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.4s ease;
}
.nerd__run:hover, .nerd__run:focus-visible { background: rgba(111, 195, 137, 0.16); box-shadow: 0 0 14px rgba(111, 195, 137, 0.25); }
.nerd__run[data-run='1'] { opacity: 0.35; pointer-events: none; }
.nerd__run[data-run='1']::after { content: 'NING'; }   /* ▸ RUN → ▸ RUNNING */
@media (prefers-reduced-motion: no-preference) {
  .nerd__run:not([data-run='1']) { animation: nerdrunpulse 2.4s ease-in-out infinite; }
  @keyframes nerdrunpulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(111, 195, 137, 0); }
    50% { box-shadow: 0 0 16px 1px rgba(111, 195, 137, 0.3); }
  }
}

.nerd__body {
  padding: 1.05rem clamp(0.85rem, 3vw, 1.5rem) 1.15rem;
  font-size: clamp(0.72rem, 2.5vw, 0.82rem);
  line-height: 1.95;
  color: var(--ink);
  text-shadow: 0 0 12px rgba(217, 205, 184, 0.05);   /* a whisper of phosphor */
}
.nerd__line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nerd__line--cmd { color: var(--ink-bright); margin-bottom: 0.15rem; }
.nerd__pr { color: var(--brass); }
.nerd__t { color: var(--ink-faint); opacity: 0.6; margin-right: 0.35em; }
.nerd__dot { color: var(--brass); }
.nerd__dot--on { color: #8fb56d; }
.nerd__in { padding-left: 2.4em; color: var(--ink-dim); }
.nerd__db { display: inline-block; min-width: 13.5em; color: var(--brass); }
.nerd__mut { color: var(--ink-faint); font-style: italic; }
.nerd__n { color: var(--ink-bright); font-weight: 600; font-variant-numeric: tabular-nums; }
.nerd__gd .nerd__ok { color: #8fb56d; margin-right: 0.6em; font-weight: 700; }
.nerd__pass { color: var(--ink-faint); margin-left: 0.5em; }
.nerd__gd--all { color: var(--ink-bright); }
.nerd__gd--all .nerd__ok { text-shadow: 0 0 10px rgba(143, 181, 109, 0.5); }
.nerd__mono { color: var(--brass); }

/* the resting cursor after "listening" */
.nerd__cursor {
  display: inline-block; width: 0.55em; height: 1.05em;
  margin-left: 0.35em; vertical-align: text-bottom;
  background: var(--brass-lift);
}
@media (prefers-reduced-motion: no-preference) {
  .nerd__cursor { animation: caret 1.1s steps(2, jump-none) infinite; }
  .nerd__dot--on { animation: livePulse 2.4s ease-in-out infinite; }
  @keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
}
/* the resting cursor and the live dot glow phosphor-green — the machine, awake */
.nerd__cursor { background: var(--sig, var(--brass-lift)); box-shadow: 0 0 11px 1px var(--sig-glow, rgba(224, 196, 132, 0.5)); }
.nerd__dot--on { text-shadow: 0 0 10px var(--sig-glow, rgba(143, 181, 109, 0.7)); }

/* ── phosphor: a whisper of CRT grain, an occasional sweep, a breathing glow ── */
.nerd__term::before,
.nerd__term::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
/* the grain: faint horizontal scanlines, barely there so text stays crisp */
.nerd__term::before {
  z-index: 3;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.055) 2px 3px);
  mix-blend-mode: multiply;
}
/* the sweep: a soft band of light that travels the glass now and then */
.nerd__term::after {
  z-index: 4; inset: -35% 0 auto 0; height: 34%;
  background: linear-gradient(180deg, transparent, rgba(111, 195, 137, 0.08) 50%, transparent);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .nerd__term::after { animation: nerdSweep 9s ease-in-out infinite; }
  @keyframes nerdSweep {
    0% { top: -35%; opacity: 0; }
    5% { opacity: 0.55; }
    30% { top: 100%; opacity: 0.55; }
    34%, 100% { top: 100%; opacity: 0; }
  }
  /* the whole terminal breathes a faint listening glow, once it has settled */
  .nerd__term { animation: nerdBreathe 6.5s ease-in-out infinite; }
  @keyframes nerdBreathe {
    0%, 100% { box-shadow: 0 24px 60px -34px #000, inset 0 1px 0 rgba(184, 148, 94, 0.07), 0 0 0 rgba(184, 148, 94, 0); }
    50% { box-shadow: 0 24px 60px -34px #000, inset 0 1px 0 rgba(184, 148, 94, 0.07), 0 0 28px -6px rgba(111, 195, 137, 0.17); }
  }
}

/* a tappable line: it decodes into plain English below */
.nerd__tap { cursor: pointer; border-radius: 3px; transition: background 0.2s ease; position: relative; }
.nerd__tap::after {
  content: '?'; position: absolute; right: 0.4em; top: 50%; transform: translateY(-50%);
  font-size: 0.72em; color: var(--brass-dim); opacity: 0; transition: opacity 0.2s ease;
}
.nerd__tap:hover, .nerd__tap:focus-visible { background: rgba(184, 148, 94, 0.09); outline: none; }
.nerd__tap:hover::after, .nerd__tap:focus-visible::after { opacity: 0.8; }
.nerd__tap.is-reading { background: rgba(184, 148, 94, 0.13); box-shadow: inset 2px 0 0 var(--brass); }

/* the decoder line beneath — height reserved so a tap never reflows the act (lockAtlasNote) */
.nerd__decode {
  min-height: 3.6em;
  margin: 0.95rem 0 0;
  padding: 0.7rem 0.95rem;
  border-left: 2px solid var(--brass-faint);
  font-family: var(--serif);
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--ink);
}
.nerd__decode-hint {
  /* v148: was a faint italic whisper nobody saw — now it reads like a label */
  display: inline-block;
  color: var(--sig);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nerd__decode-hint::before { content: '▸ '; }
.nerd__decode b { color: var(--brass-lift); }
.nerd__coda {
  margin: 1.2rem 0 0;
  color: var(--ink-dim);
  font-size: 0.84rem;
}
.nerd__coda i { color: var(--brass); font-style: italic; }

/* the boot reveal: lines wait dark, then light one by one (JS adds .is-lit) */
html.js .nerd__body .nerd__line { opacity: 0; transform: translateX(-6px); }
html.js .nerd__body .nerd__line.is-lit { opacity: 1; transform: none; transition: opacity 0.28s ease, transform 0.28s ease; }
/* the machine's finger: a phosphor edge rests on the line being worked (JS moves .is-cur) */
.nerd__body .nerd__line.is-cur { box-shadow: inset 2px 0 0 var(--sig); background: rgba(111, 195, 137, 0.05); }
@media (prefers-reduced-motion: reduce) {
  html.js .nerd__body .nerd__line { opacity: 1; transform: none; }
  .nerd__body .nerd__line.is-cur { box-shadow: none; background: none; }
}

@media (max-width: 560px) {
  .nerd__body { line-height: 1.85; }
  .nerd__db { min-width: 0; margin-right: 0.6em; }
  .nerd__in { padding-left: 1.2em; }
  /* let long log lines wrap rather than scroll on a phone */
  .nerd__line { white-space: normal; }
  .nerd__tap::after { display: none; }
}

/* ═══ the live trace: one question, all the way through the machine ═══ */
.trace {
  max-width: 76ch;
  margin: 2.6rem auto 0;
  font-family: 'Consolas', 'SF Mono', ui-monospace, monospace;
}
.trace__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 0.8rem; }
.trace__title { margin: 0; color: var(--brass-lift); font-size: 0.94rem; font-weight: 700; letter-spacing: 0.05em; }
.trace__sub { margin: 0; color: var(--ink-faint); font-size: 0.8rem; font-style: italic; font-family: var(--serif); }
.trace__replay {
  margin-left: auto; padding: 0.2rem 0.7rem;
  background: transparent; border: 1px solid var(--brass-ghost); border-radius: 4px;
  color: var(--brass); font: inherit; font-size: 0.74rem; cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.trace__replay:hover, .trace__replay:focus-visible { border-color: var(--brass); color: var(--brass-lift); outline: none; }

/* the typed question */
.trace__ask {
  margin: 1rem 0 1.5rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--rule); border-radius: 6px;
  background: linear-gradient(180deg, rgba(184,148,94,0.05), transparent);
}
.trace__who { display: block; color: var(--ink-faint); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.35rem; }
.trace__q { color: var(--ink-bright); font-size: 0.98rem; }
.trace__pr { color: var(--brass); }
.trace__caret {
  display: inline-block; width: 0.55em; height: 1.05em; margin-left: 0.1em;
  background: var(--brass); vertical-align: text-bottom; opacity: 0;
}
.trace.is-typing .trace__caret { opacity: 0.85; animation: caret 1.05s steps(2, jump-none) infinite; }

/* the signal flow */
.trace__flow { list-style: none; margin: 0; padding: 0; }
.trace__stage {
  position: relative;
  display: grid; grid-template-columns: 2rem 1fr; gap: 0.15rem 0.95rem;
  padding-bottom: 1.5rem;
  opacity: 0.32; transition: opacity 0.45s ease;
}
.trace__stage.is-on { opacity: 1; }
.trace__stage--end { padding-bottom: 0; }

/* the number badge */
.trace__num {
  grid-row: 1; grid-column: 1; z-index: 2;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--brass-ghost); background: var(--bg);
  color: var(--ink-faint); font-size: 0.82rem; font-weight: 700;
  transition: border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.trace__stage.is-on .trace__num {
  border-color: var(--brass); color: var(--brass-lift);
  box-shadow: 0 0 0 3px rgba(111,195,137,0.12), 0 0 16px -3px var(--sig, rgba(184,148,94,0.45));
}

/* the wire connecting each stage to the next, and the signal that fills it */
.trace__wire {
  position: absolute; left: 1rem; top: 2rem; bottom: 0;
  width: 2px; transform: translateX(-50%);
  background: rgba(111, 195, 137, 0.13); overflow: hidden;  /* the unlit conduit, faintly green */
}
.trace__stage--end .trace__wire { display: none; }
/* the current: a gradient that runs cool-green at the top and burns near-white at the leading tip */
.trace__wire::after {
  content: ''; position: absolute; left: 0; top: 0; right: 0;
  height: 0;
  background: linear-gradient(180deg, var(--sig, var(--brass)) 0%, var(--sig-lift, var(--brass-lift)) 72%, #dcffe9 100%);
  box-shadow: 0 0 10px var(--sig-glow, rgba(184,148,94,0.6)), 0 0 3px rgba(220, 255, 233, 0.55);
  transition: height 0.55s ease;
}
.trace__stage.is-on .trace__wire::after { height: 100%; }
/* the leading pulse: a hot bead of live signal drops the wire once, as the stage fires */
.trace__wire::before {
  content: ''; position: absolute; left: 50%; top: 0;
  width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: radial-gradient(circle, #eaffef 0%, var(--sig-lift, var(--brass-lift)) 55%, var(--sig, var(--brass)) 100%);
  box-shadow: 0 0 13px 3px var(--sig-glow, rgba(224,196,132,0.75)), 0 0 5px 1px rgba(220, 255, 233, 0.7);
  opacity: 0;
}
.trace__stage.is-on .trace__wire::before { animation: traceBead 0.6s ease-in forwards; }
@keyframes traceBead {
  0% { top: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.trace__cell { grid-row: 1; grid-column: 2; padding-top: 0.16rem; }
.trace__lead { margin: 0; color: var(--ink-dim); font-size: 0.9rem; }
.trace__stage.is-on .trace__lead { color: var(--ink-bright); }
.trace__lead b { color: var(--brass-lift); font-weight: 700; }
.trace__meta { margin: 0.3rem 0 0; color: var(--ink-dim); font-size: 0.8rem; line-height: 1.55; }
.trace__meta b { color: var(--brass); font-variant-numeric: tabular-nums; }
.trace__n { color: var(--brass); font-weight: 700; font-variant-numeric: tabular-nums; }

/* the database fan — the shelves that answer light up */
.trace__dbs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 0.4rem; }
.trace__db {
  padding: 0.16rem 0.5rem; border-radius: 3px;
  border: 1px solid var(--brass-ghost); background: rgba(184,148,94,0.03);
  color: var(--ink-faint); font-size: 0.68rem; letter-spacing: 0.01em;
  opacity: 0.5; transition: all 0.4s ease;
}
.trace__db--blank {
  width: 0.85rem; min-width: 0.85rem; padding: 0; align-self: stretch;
  position: relative; opacity: 0.4;
}
.trace__db--blank::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 3px; height: 3px; border-radius: 50%; background: var(--brass-dim);
}
.trace__db.is-hit {
  opacity: 1; color: #0b0a08; font-weight: 700;
  background: linear-gradient(180deg, var(--brass-lift), var(--brass));
  border-color: var(--brass-lift);
  box-shadow: 0 0 14px -3px rgba(224,196,132,0.6);
}

/* the honesty gate — the checks reveal one by one */
.trace__stage--gate .trace__lead b { color: var(--brass-lift); }
.trace__checks { list-style: none; margin: 0.55rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.trace__chk {
  display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.1rem 0.5rem; align-items: baseline;
  font-size: 0.8rem; opacity: 0; transform: translateX(-4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.trace__chk.is-shown { opacity: 1; transform: none; }
.trace__vd { grid-row: 1; grid-column: 1; font-weight: 700; text-align: center; }
.trace__chk[data-verdict="ok"] .trace__vd { color: #8fb56d; }
.trace__chk[data-verdict="cut"] .trace__vd { color: #c06a5c; }
.trace__qt { grid-row: 1; grid-column: 2; color: var(--ink-dim); font-family: var(--serif); font-style: italic; }
.trace__chk[data-verdict="cut"] .trace__qt { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: rgba(192,106,92,0.7); }
.trace__cite { grid-row: 2; grid-column: 2; color: var(--brass); font-size: 0.72rem; }
.trace__cite--cut { color: #c06a5c; font-style: italic; }

/* the answer card, Discord-side */
.trace__answer {
  margin-top: 0.55rem; padding: 0.9rem 1.05rem;
  border: 1px solid var(--brass-ghost); border-left: 2px solid var(--brass);
  border-radius: 5px; background: linear-gradient(180deg, rgba(184,148,94,0.06), rgba(184,148,94,0.02));
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.trace__stage.is-on .trace__answer { opacity: 1; transform: none; }
.trace__ans-lead { margin: 0; color: var(--ink-bright); font-size: 0.88rem; line-height: 1.55; font-family: var(--serif); }
.trace__ans-lead b { color: var(--brass-lift); }
.trace__heb { font-size: 1.05em; color: var(--brass-lift); }
.trace__ans-verse {
  margin: 0.6rem 0; padding: 0 0 0 0.85rem; border-left: 2px solid var(--brass-ghost);
  color: var(--ink-dim); font-family: var(--serif); font-style: italic; font-size: 0.92rem;
}
.trace__ans-verse cite { display: block; margin-top: 0.2rem; color: var(--brass); font-style: normal; font-size: 0.74rem; font-family: 'Consolas', ui-monospace, monospace; }
.trace__ans-foot { margin: 0.5rem 0 0; color: var(--ink-faint); font-size: 0.74rem; }
.trace__ans-ok { color: #8fb56d; font-weight: 700; margin-right: 0.25em; }

@media (prefers-reduced-motion: reduce) {
  .trace__stage, .trace__chk, .trace__answer { opacity: 1; transform: none; transition: none; }
  .trace__wire::after { height: 100%; transition: none; }
  .trace__wire::before { display: none; }
  .trace.is-typing .trace__caret { animation: none; opacity: 0; }
}
@media (max-width: 560px) {
  .trace__stage { grid-template-columns: 1.7rem 1fr; gap: 0.15rem 0.7rem; }
  .trace__num { width: 1.7rem; height: 1.7rem; font-size: 0.74rem; }
  .trace__wire { left: 0.85rem; }
  .trace__db { font-size: 0.64rem; }
}

/* ═══ the build log: the knight walks the story (v155). Cape red is the fold's own
   accent — the one place on the page that wears Trevor's mark. ═══ */
.saga {
  max-width: 76ch;
  margin: 2.6rem auto 0;
  font-family: 'Consolas', 'SF Mono', ui-monospace, monospace;
  --cape: #b3362b;
  --cape-lift: #d95a45;
  --cape-ghost: rgba(179, 54, 43, 0.12);
}
.saga__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.saga__summon {
  list-style: none;
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(179, 54, 43, 0.05), transparent 70%), rgba(11, 10, 8, 0.6);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.saga__summon::-webkit-details-marker { display: none; }
.saga__summon:hover, .saga__summon:focus-visible { border-color: var(--cape); outline: none; }
.saga__mini { width: 26px; height: 24px; flex: 0 0 auto; image-rendering: pixelated; }
.saga__sumtext { flex: 1; min-width: 0; }
.saga__sumtext b { display: block; color: var(--ink-bright); font-size: 0.88rem; letter-spacing: 0.04em; }
.saga__sumtext i { display: block; margin-top: 0.2rem; color: var(--ink-faint); font-style: italic; font-family: var(--serif); font-size: 0.82rem; }
.saga__sumgo { flex: 0 0 auto; color: var(--cape-lift); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }
.saga__go-close { display: none; }
.saga[open] .saga__go-open { display: none; }
.saga[open] .saga__go-close { display: inline; }
.saga__stage {
  border: 1px solid var(--rule);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  padding: 2.2rem 1.2rem 1rem;
  background: rgba(11, 10, 8, 0.6);
}
/* the rail: a track, nine marks, and the knight standing over the active one */
.saga__rail { position: relative; height: 56px; margin: 0 clamp(0.4rem, 4vw, 1.6rem) 1.1rem; }
.saga__track {
  position: absolute; left: 0; right: 0; bottom: 12px;
  height: 2px; background: var(--rule);
}
.saga__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, var(--cape), var(--cape-lift));
  box-shadow: 0 0 8px var(--cape-ghost);
  transition: width 1.15s ease-in-out;
}
.saga__marks { position: absolute; inset: 0; }
.saga__mark {
  position: absolute; bottom: 0;
  width: 26px; height: 26px; margin-left: -13px;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.saga__mark span {
  position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  transform: rotate(45deg);
  background: var(--bg-raise);
  border: 1px solid var(--brass-dim);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.saga__mark:hover span, .saga__mark:focus-visible span { border-color: var(--cape-lift); }
.saga__mark:focus-visible { outline: 1px solid var(--cape); outline-offset: 2px; }
.saga__mark[aria-selected='true'] span {
  background: var(--cape);
  border-color: var(--cape-lift);
  box-shadow: 0 0 10px var(--cape-ghost), 0 0 4px rgba(217, 90, 69, 0.5);
}
.saga__knight {
  position: absolute; left: 0; bottom: 16px;
  width: 34px; height: 32px; margin-left: -17px;
  image-rendering: pixelated;
  transition: left 1.15s ease-in-out;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55));
}
@media (prefers-reduced-motion: no-preference) {
  .saga__knight.is-walking { animation: sagaWalkBob 0.24s ease-in-out infinite; }
  @keyframes sagaWalkBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2.5px); }
  }
}
/* the card: height RESERVED so a longer waypoint never pumps the room */
.saga__card {
  min-height: 10.6em;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--cape);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(179, 54, 43, 0.045), transparent 55%);
}
.saga__when { margin: 0; color: var(--cape-lift); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; }
.saga__ttl { margin: 0.3rem 0 0.45rem; color: var(--ink-bright); font-family: var(--display); font-weight: 700; font-size: 1.06rem; }
.saga__txt { margin: 0; color: var(--ink); font-family: var(--serif); font-size: 0.95rem; line-height: 1.55; text-wrap: pretty; }
.saga__stat { margin: 0.6rem 0 0; color: var(--ink-faint); font-size: 0.72rem; letter-spacing: 0.05em; }
.saga__hint { margin: 0.9rem 0 0; text-align: center; color: var(--ink-faint); font-style: italic; font-family: var(--serif); font-size: 0.8rem; }
@media (prefers-reduced-motion: reduce) {
  .saga__fill, .saga__knight { transition: none; }
}
@media (max-width: 560px) {
  .saga__summon { gap: 0.65rem; padding: 0.75rem 0.8rem; }
  .saga__stage { padding: 1.7rem 0.75rem 0.85rem; }
  .saga__card { min-height: 14em; }
  .saga__knight { width: 28px; height: 26px; margin-left: -14px; }
}

/* ═══ keep the lanterns lit ═══ */
.act--lamp {
  /* v148: no longer bare black — hearthlight pools around the lantern and a low
     warm floor glow rises to meet it (Trevor: "another blackish page") */
  background:
    radial-gradient(52% 38% at 50% 32%, rgba(224, 158, 74, 0.1), transparent 62%),
    radial-gradient(90% 46% at 50% 104%, rgba(160, 96, 34, 0.1), transparent 62%),
    radial-gradient(80% 70% at 50% 100%, var(--brass-ghost), transparent 65%),
    var(--bg);
}
@media (max-width: 700px) {
  .act { border-radius: 16px 16px 0 0; }
}
/* ═══ THE LANTERN: the section's instrument. Tap it → the widow's cruse tips, a bead of
   oil falls, the pool ripples and rises, the flame catches. Three states ride
   #act-lamp[data-lamp]: dim (pilot light) · burn (steady — the resting state once real
   supporters exist, and after a pour settles) · blaze (the pour's payoff, ~2.6s).
   State scale lives on .lantern__flame; the flicker loop lives on the INNER .lnt-flick so
   the two transforms never fight (#277). Everything here is transform/opacity — the room's
   height never changes, so the curtain never re-measures. ═══ */
.lantern {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.1rem;
  position: relative;
}
.lantern__halo {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 430px;
  height: 380px;
  transform: translate(-50%, -50%) scale(0.7);
  background: radial-gradient(closest-side, rgba(255, 193, 105, 0.28), rgba(255, 193, 105, 0.1) 45%, transparent 72%);
  opacity: 0.16;
  transition: opacity 0.7s ease, transform 0.7s ease;
  pointer-events: none;
}
/* the flood: the lamp's light cast over the whole room — same state machine as the
   flame, so the card, the note, and the wall of names all stand in ONE light (v155).
   Absolutely positioned (zero layout height), kept ≤ 110vw under html's overflow-x
   clip (#273); pure opacity/transform, so the curtain never re-measures. */
.lantern__flood {
  position: absolute;
  left: 50%;
  top: 30%;
  width: min(110vw, 1200px);
  height: 880px;
  transform: translate(-50%, -22%) scale(0.7);
  background: radial-gradient(closest-side, rgba(255, 186, 96, 0.13), rgba(255, 168, 76, 0.05) 44%, transparent 72%);
  opacity: 0;
  transition: opacity 1.3s ease, transform 1.3s ease;
  pointer-events: none;
}
#act-lamp[data-lamp='burn'] .lantern__flood { opacity: 0.55; transform: translate(-50%, -22%) scale(0.95); }
#act-lamp[data-lamp='blaze'] .lantern__flood { opacity: 1; transform: translate(-50%, -22%) scale(1.08); }
.lantern__tap {
  border: 0;
  background: none;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  position: relative;
  border-radius: 14px;
}
.lantern__tap:focus-visible { outline: 1px solid var(--brass); outline-offset: 4px; }
.lantern__tap:active .lantern__svg { transform: scale(0.985); }
.lantern__svg { width: 212px; height: auto; display: block; overflow: visible; transition: transform 0.12s ease; }
/* metalwork + glass */
.lnt-metal { fill: var(--brass-dim); }
.lnt-ring { fill: none; stroke: var(--brass-dim); stroke-width: 3; }
.lnt-rivet { fill: rgba(0, 0, 0, 0.35); }
.lnt-slit { fill: rgba(0, 0, 0, 0.35); }
.lnt-glass { fill: rgba(255, 220, 160, 0.05); }
.lnt-glare { fill: rgba(255, 255, 255, 0.05); }
.lnt-wick { fill: #46362a; }
.lnt-oiltop { fill: #e9be72; }
.lnt-flcore { fill: rgba(255, 250, 235, 0.92); }
/* the oil pool rises a touch with each pour (JS sets translateY) */
.lantern__oil { transition: transform 0.8s ease 0.15s; }
.lantern__ripple {
  fill: none;
  stroke: #f2cd85;
  stroke-width: 1.2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.lantern__bead { fill: #f2cd85; opacity: 0; }
/* the cruse tips around its own mouth */
.cruse__tip {
  transform-box: view-box;
  transform-origin: 104px 38px;
  transition: transform 0.28s ease;
}
.cruse__tip.pouring { transform: rotate(-32deg); }
.cruse__body { fill: rgba(90, 68, 38, 0.55); stroke: var(--brass); stroke-width: 1.6; }
.cruse__handle { fill: none; stroke: var(--brass); stroke-width: 1.6; }
.cruse__oil { fill: rgba(240, 200, 126, 0.65); }
/* the flame's three states */
.lantern__flame {
  transform-box: view-box;
  transform-origin: 60px 101px;
  transform: scale(0.44);   /* the pilot light reads as a real flame even before the pour (v155b) */
  transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.44, 1);
}
#act-lamp[data-lamp='burn'] .lantern__flame { transform: scale(0.82); }
#act-lamp[data-lamp='blaze'] .lantern__flame { transform: scale(1.14); }
.lantern__glow { opacity: 0.2; transition: opacity 0.55s ease; transform-box: fill-box; transform-origin: center; }
#act-lamp[data-lamp='burn'] .lantern__glow { opacity: 0.45; }
#act-lamp[data-lamp='blaze'] .lantern__glow { opacity: 0.85; }
.lnt-air { fill: rgb(255 190 90); opacity: 0.03; transition: opacity 0.55s ease; }
#act-lamp[data-lamp='burn'] .lnt-air { opacity: 0.07; }
#act-lamp[data-lamp='blaze'] .lnt-air { opacity: 0.13; }
#act-lamp[data-lamp='burn'] .lantern__halo { opacity: 0.3; transform: translate(-50%, -50%) scale(0.9); }
#act-lamp[data-lamp='blaze'] .lantern__halo { opacity: 0.85; transform: translate(-50%, -50%) scale(1.15); }
/* v158 (Trevor: "remove the light surge behind the button — make the BUTTON surge"):
   the big outer bloom is gone; the light lands ON the plate (a deeper falling pool,
   a brighter rim) and the card itself lifts and breathes at blaze. */
#act-lamp[data-lamp='burn'] .lamp__coin--hero {
  border-color: rgba(230, 185, 110, 0.55);
  box-shadow:
    0 22px 52px -20px rgba(0, 0, 0, 0.75),
    inset 0 22px 44px -26px rgba(255, 200, 115, 0.3);
}
#act-lamp[data-lamp='blaze'] .lamp__coin--hero {
  border-color: var(--brass-lift);
  transform: scale(1.03);
  box-shadow:
    0 26px 56px -20px rgba(0, 0, 0, 0.78),
    inset 0 28px 56px -26px rgba(255, 200, 115, 0.45),
    inset 0 1px 0 rgba(255, 224, 160, 0.35);
}
.lamp__coin--hero { transition: transform 0.5s cubic-bezier(0.3, 1.2, 0.4, 1), border-color 0.6s ease, box-shadow 0.6s ease; }
/* the cue line under the lantern — height RESERVED so the aha swap never resizes the room */
.lantern__cue {
  margin: 0 0 0.75rem;   /* v148: the invitation now stands ABOVE the lantern */
  min-height: 1.5em;
  color: var(--ink-faint);
  font-style: italic;
  font-size: 0.88rem;
  transition: color 0.5s ease;
}
.lantern__cue--aha { color: var(--brass); }
/* the donate card waits for the first pour, then arrives like poured oil:
   top-down fill, a settle, one warm bloom. Reduced motion never hides it. */
.lamp--waiting {
  opacity: 0;
  transform: translateY(14px);
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}
.lamp--poured { animation: lamppour 1.05s cubic-bezier(0.3, 1.15, 0.4, 1) both; }
@keyframes lamppour {
  0% { opacity: 0; transform: translateY(14px); clip-path: inset(0 0 100% 0); }
  55% { opacity: 1; }
  /* the final clip retreats FAR beyond the glow (v158): resting at -24% it was slicing
     the card's soft bloom into a hard-edged rectangle — Trevor's "square edges of light" */
  100% { opacity: 1; transform: none; clip-path: inset(-160% -160% -160% -160%); }
}
@media (prefers-reduced-motion: reduce) {
  .lamp--waiting { opacity: 1; transform: none; clip-path: none; pointer-events: auto; }
  .lamp--poured { animation: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .lnt-flick { transform-box: view-box; transform-origin: 60px 101px; }
  #act-lamp[data-lamp='burn'] .lnt-flick { animation: lntFlick 2.9s ease-in-out infinite; }
  #act-lamp[data-lamp='blaze'] .lnt-flick { animation: lntFlick 1.1s ease-in-out infinite; }
  #act-lamp[data-lamp='burn'] .lantern__glow,
  #act-lamp[data-lamp='blaze'] .lantern__glow { animation: lntPulse 2.9s ease-in-out infinite; }
  @keyframes lntFlick {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(0.95, 1.06) translateX(0.5px); }
    65% { transform: scale(1.05, 0.95) translateX(-0.5px); }
  }
  @keyframes lntPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
  /* the loops sleep when the section is offscreen (the IO in lampVial toggles this) */
  #act-lamp.lamp-asleep .lnt-flick,
  #act-lamp.lamp-asleep .lantern__glow { animation-play-state: paused; }
}
@media (max-width: 640px) {
  .lantern__svg { width: 172px; }
  .lantern__halo { width: 330px; height: 290px; }
}
/* reduced motion: the states still apply, but they snap rather than tween */
@media (prefers-reduced-motion: reduce) {
  .lantern__flame, .lantern__glow, .lantern__oil, .lnt-air, .lantern__halo,
  .lantern__flood, .cruse__tip, .lantern__cue, .lamp__coin--hero { transition: none; }
}
.lamp {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 0.4rem;
}
.lamp__logo { display: block; margin-bottom: 0.35rem; }
.lamp__logo svg { width: 34px; height: 34px; display: block; }
.lamp__logo--cash rect { fill: #00d632; }
.lamp__logo--cash text {
  fill: #fff;
  font-family: Arial, sans-serif;
  font-size: 26px;
  font-weight: 700;
  text-anchor: middle;
}
.lamp__logo--venmo rect { fill: #008cff; }
.lamp__logo--venmo path { fill: #fff; }
/* v155b (Trevor: "hard square edges of light — ugly"): the old double inset ring drew two
   square outlines of light; the plate is now ROUNDED and lit the way the room is — a soft
   pool falling from the lantern above, no hard lines anywhere. */
.lamp__coin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 230px;
  border: 1px solid var(--brass-faint);
  border-radius: 16px;
  background:
    radial-gradient(130% 100% at 50% -12%, rgba(255, 196, 110, 0.13), transparent 58%),
    linear-gradient(180deg, #191309, #0e0a05);
  box-shadow:
    0 20px 46px -20px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 214, 140, 0.13);
  padding: 1.3rem 1.8rem 1.1rem;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.lamp__coin:hover { transform: translateY(-2px); border-color: var(--brass); }
.lamp__k {
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
}
.lamp__v {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ink-bright);
  letter-spacing: 0.02em;
}
.lamp__c { color: var(--ink-faint); font-size: 0.78rem; font-style: italic; }
.lamp__coin.copied .lamp__c { color: var(--brass-lift); }
.lamp__coin { text-decoration: none; }
.lamp__coin--hero {
  min-width: 300px;
  padding: 1.7rem 2.4rem 1.4rem;
  box-shadow:
    0 22px 52px -20px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 214, 140, 0.15);
}
.lamp__coin--hero .lamp__logo { transition: transform 0.3s ease; }
.lamp__coin--hero .lamp__logo svg { width: 46px; height: 46px; }
.lamp__coin--hero:hover .lamp__logo { transform: translateY(-2px) scale(1.06); }
.lamp__coin--hero .lamp__v { font-size: 1.42rem; }
.oil-shine { fill: rgba(255, 246, 224, 0.55); }
.lamp__note {
  margin: 2rem auto 0;
  text-align: center;
  color: var(--ink);
  font-size: 1.02rem;
  max-width: 52ch;
  text-wrap: pretty;
}
/* ═══ the name wall: supporters who chose to shine ═══ */
.wall { margin: 2.7rem auto 0; max-width: 62ch; text-align: center; }
.wall__invite {
  font-family: var(--display);
  color: var(--brass);
  letter-spacing: 0.06em;
  font-size: 1.06rem;
  margin: 0 0 1.15rem;
}
.wall__names {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 1.1rem;
}
.wall__names li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink-bright);
  font-size: 1.04rem;
}
/* v155: every supporter's name IS a small votive lamp — the flame kindles when the
   room lights (per-name delay walks the wall) and flares when the vial pours */
.wall__lamp {
  flex-direction: column;
  gap: 0.28rem;
  font-size: 0.98rem;
}
.wall__fl {
  width: 12px; height: 20px;
  opacity: 0.16;
  filter: grayscale(0.85);
  transition: opacity 0.9s ease, filter 0.9s ease, transform 0.5s ease;
  transition-delay: inherit;   /* the li carries the walk-the-wall stagger inline */
}
.wall--kindled .wall__fl {
  opacity: 1;
  filter: grayscale(0) drop-shadow(0 0 7px rgba(244, 205, 120, 0.75));
}
.wall--surge .wall__fl {
  transform: scale(1.28);
  filter: grayscale(0) drop-shadow(0 0 13px rgba(255, 218, 130, 0.95));
}
@media (prefers-reduced-motion: no-preference) {
  .wall--kindled .wall__lamp .wall__fl { animation: vigilFlick 3.1s ease-in-out infinite; }
  .wall--kindled .wall__lamp:nth-child(2n) .wall__fl { animation-duration: 2.5s; animation-delay: -0.9s; }
  .wall--kindled .wall__lamp:nth-child(3n) .wall__fl { animation-duration: 3.6s; animation-delay: -1.4s; }
  /* a running animation would override the surge's transform (#277) — yield to the flare */
  .wall--surge .wall__lamp .wall__fl { animation: none; }
  /* and the flicker sleeps with the rest of the room's loops (no offscreen frames) */
  #act-lamp.lamp-asleep .wall__fl { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .wall__fl { transition: none; }
}
.wall__ghost { color: var(--ink-faint); font-style: italic; opacity: 0.62; }
.wall__vow {
  margin: 1.7rem 0 0;
  color: var(--ink-faint);
  font-style: italic;
  font-size: 0.86rem;
}
.wall__secret {
  margin: 1.35rem 0 0;
  color: var(--ink-faint);
  font-style: italic;
  font-size: 0.92rem;
}

/* ═══ the phone pass: 95% of the gang reads this on a phone ═══ */
@media (max-width: 640px) {
  .act { padding: 4.2rem 1.15rem; }
  .act__head { margin-bottom: 2.5rem; }
  .plate { padding: 4.5rem 1.15rem 2.6rem; }
  .game__tabs { flex-wrap: wrap; }
  .game__tabs button { flex: 1 1 42%; padding: 0.85rem 0.4rem 0.75rem; }
  .engine { padding: 2.7rem 0 2.5rem; }
  .reelband { margin-left: -1.15rem; margin-right: -1.15rem; }
  /* the middle era names collide at phone width — keep only the two anchors */
  .tl__marks span:nth-child(2),
  .tl__marks span:nth-child(3),
  .tl__marks span:nth-child(4),
  .tl__marks span:nth-child(5) { display: none; }
  /* the dense-century stars touch at phone width — keep the headliners */
  .tl__star.minor { display: none; }
  .lpage { padding: 1.5rem 1.15rem 1.1rem; }
  .lpage__text { font-size: 1rem; }
}
@media (max-width: 700px) {
  .bar__inner { display: grid; grid-template-columns: 1fr 1fr; }
  .search { grid-column: 1 / -1; }
  select.filter { max-width: none; width: 100%; }
  .toggle, .lucky { justify-content: center; text-align: center; }
}

/* ═══ v154 · THE ENGINES PASS — shared primitives ═══ */

/* THE TRYLINE (WOW-PASS §12.1, finally built): ONE invitation grammar for every
   toy on the page — small caps, centered, em-rules — so the visitor learns the
   language once and every demo after that self-announces. It breathes twice as
   its section arrives, then rests. */
.tryline {
  margin: 1rem auto 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: var(--display);
  font-size: 0.6rem;
  font-style: normal;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
}
.tryline::before, .tryline::after {
  content: '';
  flex: 0 1 3.2em;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-faint));
}
.tryline::after { background: linear-gradient(90deg, var(--brass-faint), transparent); }
@media (prefers-reduced-motion: no-preference) {
  html.js .in .tryline, html.js .in.tryline { animation: trybreathe 2.4s ease 0.9s 2; }
  @keyframes trybreathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
  }
}
/* the interlinear's tryline sits above the words, tight */
.interlinear-wrap .tryline { margin: 0 auto 0.8rem; }
/* the fold marker rides the new flex summary */
.how summary::after { margin-left: 0.45em; }

/* THE LITE-DEMO STAMP: pressed on the atlas glass like an inspector's mark —
   nobody mistakes the window for the whole atlas */
.atlas__stamp {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  font-family: var(--display);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(var(--act-hue-hi), 0.75);
  border: 1px solid rgba(var(--act-hue), 0.45);
  border-radius: 2px;
  background: rgba(6, 5, 5, 0.55);
  padding: 0.32rem 0.5rem 0.28rem 0.62rem;
  transform: rotate(2deg);
  pointer-events: none;
}

/* THE DEMO PLATE: the promise under the lite map — every dot becomes a door */
.demoplate {
  margin: 1.4rem 0 1.6rem;
  border: 1px solid var(--acc-faint);
  background:
    radial-gradient(120% 100% at 50% 0%, var(--acc-ghost), transparent 60%),
    var(--bg-raise);
  padding: 1.05rem 1.3rem 1rem;
}
.demoplate__stamp {
  margin: 0 0 0.55rem;
  text-align: center;
  font-family: var(--display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--acc-lift);
}
.demoplate__body {
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.98rem;
  text-align: center;
  text-wrap: pretty;
}
.demoplate__body b { color: var(--ink); }

/* WHAT THE MAP KNOWS: the place card's riches, straight from the Lands' data */
.placecard__knows {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0.75rem 0 0;
  border-top: 1px dotted rgba(184, 148, 94, 0.22);
  display: grid;
  gap: 0.45rem;
}
.placecard__knows li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--ink-dim);
  font-size: 0.92rem;
  line-height: 1.5;
}
.placecard__knows li::before {
  content: '✦';
  position: absolute;
  left: 0; top: 0.12em;
  font-size: 0.72em;
  color: var(--acc);
}
.placecard__knows b { color: var(--ink); }

/* ═══ v154 · THE ARCADE PASS — additions ═══ */

/* the touch confirm line on the nameplate: phones preview on the first tap,
   and this line names the second */
.arc__go-hint {
  color: var(--ph-hi);
  font-style: normal;
  font-size: 0.9em;
  letter-spacing: 0.14em;
}
@media (prefers-reduced-motion: no-preference) {
  .arc__go-hint { animation: gohintpulse 1.6s ease-in-out infinite; }
  @keyframes gohintpulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }
}

/* the congregation steps out of the dark one at a time (the secret roster) */
@media (prefers-reduced-motion: no-preference) {
  .arc__tile--stepout {
    animation: kinstepout 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes kinstepout {
    from { opacity: 0; transform: translateY(10px) scale(0.9); filter: brightness(3); }
    to { opacity: 1; transform: none; filter: none; }
  }
}

/* the secret screen burns low: an ember wash under the old code's fire */
.arc__kin {
  background:
    radial-gradient(90% 60% at 50% 100%, rgba(255, 77, 40, 0.09), transparent 65%),
    radial-gradient(70% 40% at 50% 0%, rgba(255, 77, 40, 0.05), transparent 60%);
}

/* ═══ v154 · THE COMMUNITY PASS — the fellowship hall lifted ═══ */

/* THE SUMMONS: parish business waits behind one great door — the survey cannot
   be missed, and seven joke-cards no longer dominate the room */
.polls__fold > summary { list-style: none; }
.polls__fold > summary::-webkit-details-marker { display: none; }
/* v156 (Trevor: "people would pass it by"): the summons is now UNMISSABLE, in the parish's
   own voice — a red wax VOTE seal on the corner, the clerk's urgent line, and a slow beckon
   pulse. Soft rounded light, no square rings (the lamp-card lesson). */
.polls__summon {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.2rem;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--brass-faint);
  border-radius: 14px;
  background:
    radial-gradient(120% 100% at 50% -12%, rgba(255, 196, 110, 0.1), transparent 58%),
    linear-gradient(180deg, #171209, #0e0a06);
  box-shadow:
    0 20px 46px -20px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 214, 140, 0.12),
    0 0 44px -18px var(--acc-soft);
  padding: 1.3rem 1.5rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  position: relative;
}
.polls__summon::before {
  content: '';
  position: absolute;
  top: -1px; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc-soft) 30%, var(--acc-soft) 70%, transparent);
}
.polls__summon:hover, .polls__summon:focus-visible {
  border-color: var(--brass);
  transform: translateY(-2px);
  box-shadow:
    0 22px 50px -20px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 214, 140, 0.15),
    0 8px 34px -12px rgba(0, 0, 0, 0.6), 0 0 54px -14px var(--acc-soft);
  outline: none;
}
/* the standing call above the fold (v159, Trevor: "further prompts") — the house tryline
   grammar, wearing the summons' red */
.polls__cue { margin-bottom: 1rem; color: #d97a5b; }
/* the clerk's line: the one RED note in the hall — it cannot be scrolled past unread */
.polls__require {
  font-family: var(--display);
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d97a5b;
}
/* the wax VOTE seal pressed on the corner — kin to the register's TCM matrix */
.polls__seal {
  position: absolute;
  top: -14px; right: 14px;
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% 46% 52% 48% / 48% 52% 46% 52%;
  background: radial-gradient(circle at 38% 32%, #b45536, #83301d 55%, #481810);
  color: rgba(243, 205, 152, 0.85);
  font-family: var(--display);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  transform: rotate(-12deg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), inset 0 0 0 5px rgba(72, 24, 16, 0.35), inset 0 0 12px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 1;
}
/* the beckon: every so often the summons glows once and the seal presses — gated on
   the room being awake so it never spends frames offscreen */
@media (prefers-reduced-motion: no-preference) {
  .polls--awake .polls__fold:not([open]) .polls__summon { animation: pollBeckon 7s ease-in-out infinite; }
  @keyframes pollBeckon {
    0%, 82%, 100% { border-color: var(--brass-faint); }
    88% { border-color: rgba(217, 122, 91, 0.75); box-shadow: 0 20px 46px -20px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 214, 140, 0.12), 0 0 52px -10px rgba(217, 122, 91, 0.45); }
  }
  .polls--awake .polls__fold:not([open]) .polls__seal { animation: pollSealPress 7s ease-in-out infinite; }
  @keyframes pollSealPress {
    0%, 82%, 100% { transform: rotate(-12deg) scale(1); }
    88% { transform: rotate(-12deg) scale(1.12); }
  }
}
.polls__gavel {
  font-size: 1.7rem;
  line-height: 1;
  filter: grayscale(1) sepia(0.6) saturate(2.4) hue-rotate(-8deg) brightness(1.06);
}
.polls__sumtext { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.polls__sumtext b {
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--ink-bright);
  letter-spacing: 0.02em;
}
.polls__sumtext i { color: var(--ink-dim); font-size: 0.9rem; font-style: italic; }
.polls__sumgo {
  font-family: var(--display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--acc-lift);
  border: 1px solid var(--acc-faint);
  border-radius: 2px;
  padding: 0.55rem 0.85rem 0.5rem;
  white-space: nowrap;
}
.polls__fold[open] .polls__go-open { display: none; }
.polls__fold:not([open]) .polls__go-close { display: none; }
.polls__fold[open] .polls__summon { margin-bottom: 2.4rem; }
@media (max-width: 560px) {
  .polls__summon { grid-template-columns: auto 1fr; padding: 1.1rem 1.2rem; }
  .polls__sumgo { grid-column: 1 / -1; justify-self: center; }
}
/* THE FEATURE LEDGER, lifted (v154): each row rises as the room arrives, the
   glyphs burn in their feature's own hue (v156 --ph), and a row warms underhand */
.ylist__ic { stroke: var(--ph, var(--acc)); }
.ylist li { transition: background 0.3s ease, border-color 0.25s ease; }
.ylist li:hover {
  background:
    linear-gradient(90deg, var(--acc-ghost), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.016), transparent 55%),
    rgba(0, 0, 0, 0.24);
}
@media (prefers-reduced-motion: no-preference) {
  html.js .yours .ylist li {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
  }
  html.js .yours.in .ylist li { opacity: 1; transform: none; }
  html.js .yours.in .ylist li:nth-child(2) { transition-delay: 0.1s; }
  html.js .yours.in .ylist li:nth-child(3) { transition-delay: 0.2s; }
  html.js .yours.in .ylist li:nth-child(4) { transition-delay: 0.3s; }
  html.js .yours.in .ylist li:nth-child(5) { transition-delay: 0.4s; }
  html.js .yours.in .ylist li:nth-child(6) { transition-delay: 0.5s; }
  html.js .yours.in .ylist li:nth-child(7) { transition-delay: 0.6s; }
  html.js .yours.in .ylist li:nth-child(8) { transition-delay: 0.7s; }
  html.js .yours.in .ylist li:nth-child(9) { transition-delay: 0.8s; }
  /* each glyph blooms as its row lands, then the light settles */
  html.js .yours.in .ylist li .ylist__ic { animation: ylistglow 1.4s ease both; }
  html.js .yours.in .ylist li:nth-child(2) .ylist__ic { animation-delay: 0.1s; }
  html.js .yours.in .ylist li:nth-child(3) .ylist__ic { animation-delay: 0.2s; }
  html.js .yours.in .ylist li:nth-child(4) .ylist__ic { animation-delay: 0.3s; }
  html.js .yours.in .ylist li:nth-child(5) .ylist__ic { animation-delay: 0.4s; }
  html.js .yours.in .ylist li:nth-child(6) .ylist__ic { animation-delay: 0.5s; }
  html.js .yours.in .ylist li:nth-child(7) .ylist__ic { animation-delay: 0.6s; }
  html.js .yours.in .ylist li:nth-child(8) .ylist__ic { animation-delay: 0.7s; }
  html.js .yours.in .ylist li:nth-child(9) .ylist__ic { animation-delay: 0.8s; }
  @keyframes ylistglow {
    0% { filter: none; }
    45% { filter: drop-shadow(0 0 7px var(--acc-soft)); }
    100% { filter: drop-shadow(0 0 2px var(--acc-ghost)); }
  }
}

/* the amend hint rides the cast line, quiet until needed */
.poll__amendhint { color: var(--ink-faint); font-size: 0.85em; font-style: italic; }

/* the open chamber: a warm pool of light falls on the motions, and the coda
   sits like a gavel line beneath (v154, Trevor: dress the survey) */
.polls__fold[open] {
  background: radial-gradient(72% 60% at 50% 34%, var(--acc-ghost), transparent 70%);
}
/* the leading option's tally burns brightest — the race is visible at a glance */
.poll__opt.is-lead .poll__bar i {
  background: linear-gradient(90deg, var(--brass), var(--brass-lift));
  box-shadow: 0 0 12px -2px var(--acc-soft);
}
.poll__opt.is-lead .poll__pct { color: var(--brass-lift); }
/* your ballot wears its seal */
.poll__face { position: relative; }
.poll__opt.is-mine .poll__face::after {
  content: '✓';
  position: absolute;
  right: -7px; bottom: -7px;
  width: 22px; height: 22px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  font-size: 0.7rem;
  color: var(--bg);
  background: radial-gradient(circle at 34% 28%, #eedcb6, var(--brass) 62%, var(--brass-dim));
  border: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.5);
}
.poll__opt--text.is-mine .poll__tname::after { content: '  ✓'; color: var(--brass-lift); }