/* ============================================================
   AGORA COSMICA · PAPER COSMOS
   A shelf of handmade shadow-box dioramas. Navy paper, gold light.
   ============================================================ */

:root {
  --paper-0: #080B20;
  --paper-1: #0A0F31;
  --paper-2: #101743;
  --paper-3: #151C47;
  --paper-4: #1C245C;
  --frame: #161D4D;
  --blueprint-ink: #B4C8FF;
  --frame-w: clamp(12px, 1.7vw, 24px);
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.55'/></svg>");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--bg-deep-space);
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 165, 57, .35) rgba(8, 11, 32, .9);
}

html.gated { overflow: hidden; }

body {
  background:
    radial-gradient(140% 90% at 50% 0%, var(--bg-cosmic-void) 0%, var(--bg-deep-space) 52%, var(--bg-deep-space-darker) 100%);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-weight: 350;
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  min-height: 100svh;
}

::selection { background: rgba(212, 165, 57, .32); color: #F6D55C; }

img { display: block; max-width: 100%; }

a { color: var(--gold-ui); text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold-hover);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ------------------------------------------------------------
   Atmosphere
   ------------------------------------------------------------ */
#motes {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 50; pointer-events: none; opacity: .9;
}

.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background-image: var(--noise);
  background-size: 180px 180px;
  opacity: .055;
  mix-blend-mode: overlay;
}

.vignette {
  position: fixed; inset: 0; z-index: 55; pointer-events: none;
  background: radial-gradient(120% 105% at 50% 42%, transparent 52%, rgba(8, 11, 32, .5) 100%);
}

/* ------------------------------------------------------------
   Cursor
   ------------------------------------------------------------ */
.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
  body.has-cursor .cursor { display: block; }
  .cursor { position: fixed; inset: 0 auto auto 0; z-index: 300; pointer-events: none; }
  .cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; width: 0; height: 0; }
  .cursor-dot::after {
    content: ""; position: absolute; left: -3px; top: -3px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold-hover);
    box-shadow: 0 0 8px rgba(246, 213, 92, .6);
    transition: transform .3s var(--ease-out-expo), opacity .3s;
  }
  .cursor-ring::after {
    content: ""; position: absolute; left: -15px; top: -15px;
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid rgba(230, 188, 92, .55);
    transition: transform .45s var(--ease-out-expo), opacity .45s, border-color .45s;
  }
  .cursor.is-hover .cursor-ring::after { transform: scale(1.7); border-color: rgba(246, 213, 92, .9); }
  .cursor.is-hover .cursor-dot::after { transform: scale(.4); }
  .cursor.is-down .cursor-ring::after { transform: scale(.8); }
  .cursor.is-gone .cursor-ring::after, .cursor.is-gone .cursor-dot::after { opacity: 0; }
}

/* ------------------------------------------------------------
   Shared type + controls
   ------------------------------------------------------------ */
.kicker {
  font-family: var(--font-ui);
  font-weight: 420;
  font-size: .68rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.kicker::before {
  content: ""; display: inline-block; width: 26px; height: 1px;
  background: var(--gold-ui); opacity: .7;
  margin-right: 12px; vertical-align: middle;
}

.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 480;
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-primary);
  padding: 1.1em 2em .95em;
  border: 1px solid rgba(212, 165, 57, .55);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(230, 188, 92, .07), rgba(230, 188, 92, .015));
  transition: color .4s, border-color .4s, box-shadow .5s, translate .5s var(--ease-out-expo);
}
.btn:hover, .btn:focus-visible {
  color: var(--gold-hover);
  border-color: rgba(246, 213, 92, .9);
  box-shadow: 0 0 28px rgba(246, 213, 92, .16), inset 0 0 16px rgba(246, 213, 92, .07);
  translate: 0 -2px;
}
.btn--ghost { border-color: rgba(210, 210, 210, .2); color: var(--text-secondary); background: none; }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: rgba(246, 213, 92, .7); }
.btn--lg { font-size: .92rem; padding: 1.2em 2.6em 1.05em; }
.btn[disabled] { opacity: .3; pointer-events: none; }

/* ------------------------------------------------------------
   Gate · paper proscenium
   ------------------------------------------------------------ */
#gate {
  position: fixed; inset: 0; z-index: 150;
  background:
    radial-gradient(120% 100% at 50% 20%, var(--bg-astral) 0%, var(--bg-deep-space) 55%, var(--bg-deep-space-darker) 100%);
  overflow: hidden;
}

.gate-arch {
  position: absolute; left: 50%; top: 60%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}
.gate-arch--far  { width: 170vmin; height: 170vmin; box-shadow: 0 0 0 200vmax #0E1439; }
.gate-arch--mid  { width: 142vmin; height: 142vmin; box-shadow: 0 0 0 200vmax #0A0F31; }
.gate-arch--near {
  width: 116vmin; height: 116vmin;
  box-shadow: 0 0 0 200vmax var(--paper-0), inset 0 0 80px rgba(8, 11, 32, .9);
  border: 1px solid rgba(230, 188, 92, .22);
}

.gate-curtain {
  position: absolute; top: -4%; bottom: -4%; width: 30%;
  background:
    repeating-linear-gradient(90deg, rgba(8, 11, 32, .55) 0 16px, rgba(42, 51, 116, .28) 16px 44px),
    linear-gradient(90deg, #0A0E2E, #131A45);
  box-shadow: 0 0 90px 20px rgba(8, 11, 32, .85);
}
.gate-curtain::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--noise); background-size: 180px; opacity: .1;
}
.gate-curtain--l { left: -6%; }
.gate-curtain--r { right: -6%; }

.gate-stars { position: absolute; inset: 0; pointer-events: none; }

.gate-inner {
  position: relative; z-index: 10;
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 6vh 6vw;
  gap: .4rem;
}

.gate-logo { position: relative; margin-bottom: 2.4rem; }
.gate-logo::before {
  content: ""; position: absolute; inset: -70%;
  background: radial-gradient(circle, rgba(230, 188, 92, .22), transparent 62%);
}
.gate-logo .eclipse {
  position: relative;
  filter: drop-shadow(0 4px 3px rgba(8, 11, 32, .9)) drop-shadow(0 10px 26px rgba(230, 188, 92, .28));
}
.eclipse-ring { stroke-dasharray: 478; stroke-dashoffset: 430; transition: stroke-dashoffset .5s var(--ease-in-out-soft); }
#gate.ready .eclipse-ring { stroke-dashoffset: 0; }

.gate-kicker {
  font-size: .66rem; font-weight: 420; letter-spacing: .4em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 1.6rem;
}
.gate-title {
  font-family: var(--font-ui); font-weight: 300;
  font-size: var(--step-5); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-primary); line-height: 1.05;
}
.gate-tagline {
  font-family: var(--font-content); font-style: italic;
  font-size: var(--step-1); color: var(--gold-primary);
  margin-top: 1rem;
}

.gate-loading {
  min-height: 2.2rem; margin-top: 3rem;
  font-size: .7rem; font-weight: 380; letter-spacing: .3em; text-transform: uppercase;
  color: var(--text-tertiary);
  transition: opacity .4s;
}
.gate-loading .ellip { animation: ellip 1.4s infinite; display: inline-block; }
.gate-loading .ellip:nth-child(2) { animation-delay: .22s; }
.gate-loading .ellip:nth-child(3) { animation-delay: .44s; }
@keyframes ellip { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
#gate.ready .gate-loading { opacity: 0; visibility: hidden; position: absolute; }

.gate-actions {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  margin-top: 3rem;
  opacity: 0; transform: translateY(14px);
  transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo);
}
#gate.ready .gate-actions { opacity: 1; transform: none; }

.gate-note {
  margin-top: 1.6rem;
  font-size: .72rem; font-weight: 350; color: var(--text-tertiary);
  opacity: 0; transition: opacity .8s .15s;
}
#gate.ready .gate-note { opacity: .85; }

.gate-company {
  position: absolute; bottom: 4.5vh; left: 0; right: 0;
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-tertiary); opacity: .6;
}

#gate.gate-off { transition: opacity .9s var(--ease-in-out-soft), visibility 0s .95s; opacity: 0; visibility: hidden; }

/* ------------------------------------------------------------
   Persistent chrome
   ------------------------------------------------------------ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(20px, 4vw, 44px);
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo);
}
.topbar::before {
  content: ""; position: absolute; inset: -20px 0 -30px; z-index: -1;
  background: linear-gradient(180deg, rgba(8, 11, 32, .65), transparent);
  pointer-events: none;
}
body.entered .topbar { opacity: 1; pointer-events: auto; transform: none; }

.topbar-brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .72rem; font-weight: 420; letter-spacing: .34em; text-transform: uppercase;
  color: var(--text-secondary);
  transition: color .4s;
}
.topbar-brand:hover { color: var(--gold-hover); }
.topbar-link {
  font-size: .7rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-tertiary); transition: color .4s;
}
.topbar-link:hover { color: var(--gold-hover); }

.rail {
  position: fixed; right: 26px; top: 50%; transform: translateY(-50%);
  z-index: 100; display: grid; gap: 6px;
  opacity: 0; pointer-events: none;
  transition: opacity .9s .3s;
}
body.entered .rail { opacity: 1; pointer-events: auto; }
.rail button { padding: 6px; display: grid; place-items: center; }
.rail i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(210, 210, 210, .3);
  transition: background .4s, transform .4s var(--ease-out-expo), box-shadow .4s;
}
.rail button:hover i { background: var(--gold-primary); transform: scale(1.35); }
.rail button.on i {
  background: var(--gold-primary); transform: scale(1.5);
  box-shadow: 0 0 10px rgba(246, 213, 92, .7);
}
@media (max-width: 1100px), (pointer: coarse) { .rail { display: none; } }
html.rm .rail { display: none; }

.mute {
  position: fixed; right: 22px; bottom: 22px; z-index: 100;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--gold-primary);
  border: 1px solid rgba(212, 165, 57, .4);
  background: rgba(12, 17, 51, .72);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .8s .4s, transform .8s .4s var(--ease-out-expo), border-color .4s, color .4s, box-shadow .4s;
}
body.entered .mute { opacity: 1; pointer-events: auto; transform: none; }
.mute:hover { color: var(--gold-hover); border-color: rgba(246, 213, 92, .8); box-shadow: 0 0 18px rgba(246, 213, 92, .18); }
.mute .mute-x { opacity: 0; transition: opacity .3s; }
.mute[aria-pressed="true"] .mute-x { opacity: 1; }
.mute[aria-pressed="true"] .mute-w1, .mute[aria-pressed="true"] .mute-w2 { opacity: .25; }
.mute .mute-w1, .mute .mute-w2 { transition: opacity .3s; }

/* ------------------------------------------------------------
   Scene scaffolding
   ------------------------------------------------------------ */
.scene { position: relative; height: 230vh; }
.scene .hold {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid; place-items: center;
  padding: clamp(60px, 8vh, 90px) clamp(16px, 4vw, 56px) clamp(20px, 5vh, 60px);
}

/* ------------------------------------------------------------
   Prologue
   ------------------------------------------------------------ */
.scene-prologue { height: 250vh; }

.pro-sky { position: absolute; inset: 0; pointer-events: none; }
.pro-sheet { position: absolute; left: -4%; right: -4%; }
.pro-sheet--a {
  top: -6%; height: 46%;
  background: linear-gradient(180deg, #090D2B, var(--paper-1));
  box-shadow: 0 26px 50px rgba(8, 11, 32, .55);
}
.pro-sheet--b {
  top: 33%; height: 42%;
  background: linear-gradient(180deg, #0D1338, var(--paper-2));
  box-shadow: 0 26px 50px rgba(8, 11, 32, .5);
}
.pro-sheet--c {
  bottom: -6%; height: 40%;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-3));
  box-shadow: 0 -20px 44px rgba(8, 11, 32, .45);
}
.pro-sheet::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--noise); background-size: 180px; opacity: .07;
}

.hole {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle, #FFF3C4 0%, var(--gold-star) 30%, rgba(230, 188, 92, .5) 56%, transparent 74%);
  box-shadow: 0 0 14px 5px rgba(246, 213, 92, .3), 0 0 0 1px rgba(8, 11, 32, .5);
  animation: hole-tw var(--tw, 3.4s) ease-in-out var(--d, 0s) infinite alternate;
}
.hole--free { position: absolute; left: var(--x); top: var(--y); }
@keyframes hole-tw {
  from { opacity: .5; transform: scale(.85); }
  to   { opacity: 1;  transform: scale(1.1); }
}

.qstars { position: absolute; inset: 8% 5%; list-style: none; pointer-events: none; }
.qstars li {
  position: absolute; left: var(--x); top: var(--y);
  display: flex; align-items: center; gap: 12px;
}
.qstars li span {
  font-size: .68rem; font-weight: 350; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-tertiary); white-space: nowrap;
}
.qstars li.qr { flex-direction: row-reverse; translate: -100% 0; }

.pro-copy { position: relative; text-align: center; max-width: 65ch; z-index: 4; }
.pro-kicker { margin-bottom: 3.2rem; }
.poem { display: grid; gap: 1.15em; }
.poem-line {
  font-family: var(--font-content); font-style: italic;
  font-size: var(--step-4); line-height: 1.25;
  color: var(--text-primary);
}
.poem-line:last-child { color: var(--gold-primary); }
.pro-lead {
  margin: 3.4rem auto 0; max-width: 56ch;
  font-weight: 320; font-size: var(--step-0); line-height: 1.75;
  color: var(--text-tertiary);
}

.scrollhint {
  position: absolute; bottom: 4.5vh; left: 50%; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 12px;
  opacity: 0;
  transition: opacity 1.1s var(--ease-in-out-soft) 1.3s;
}
body.entered .scrollhint { opacity: 1; }
body.entered .scrollhint.gone { opacity: 0; transition-delay: 0s; transition-duration: .5s; }
.scrollhint span {
  font-size: .62rem; letter-spacing: .4em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.scrollhint i {
  width: 1px; height: 52px;
  background: linear-gradient(var(--gold-primary), transparent);
  transform-origin: top;
  animation: hint-drop 2.6s var(--ease-in-out-soft) infinite;
}
@keyframes hint-drop {
  0% { transform: scaleY(0); opacity: 0; }
  40% { transform: scaleY(1); opacity: 1; }
  85%, 100% { transform: scaleY(1); opacity: 0; }
}

/* ------------------------------------------------------------
   Passages · constellation voids
   ------------------------------------------------------------ */
.passage {
  position: relative; height: 96vh; min-height: 560px;
  display: grid; place-items: center;
  overflow: hidden;
}
.passage-svg {
  position: absolute; inset: 4% 0; width: 100%; height: 92%;
  pointer-events: none;
}
.cline {
  stroke: var(--gold-ui); stroke-width: 1.4; stroke-linecap: round;
  opacity: .75;
}
.cstars circle { fill: var(--gold-star); opacity: 0; }
.cstars .cglow { fill: rgba(246, 213, 92, .16); }
html.rm .cstars circle { opacity: 1; }

.passage-copy { position: relative; text-align: center; z-index: 2; padding: 0 6vw; }
.passage-copy .kicker { margin-bottom: 1.8rem; }
.passage-copy .kicker::before { display: none; }
.passage-q {
  font-family: var(--font-content); font-style: italic;
  font-size: var(--step-3); line-height: 1.3; color: var(--text-primary);
}
.passage-sub {
  margin-top: 1.2rem;
  font-size: .74rem; font-weight: 350; letter-spacing: .26em; text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ------------------------------------------------------------
   Diorama shadow boxes
   ------------------------------------------------------------ */
.diorama {
  display: grid;
  grid-template-columns: minmax(290px, 360px) 1fr;
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
  width: min(94vw, 1460px);
}
.diorama .caption { order: -1; } /* caption-left default */
.diorama--caption-right { grid-template-columns: 1fr minmax(290px, 360px); }
.diorama--caption-right .caption { order: 2; }
.diorama--caption-right .stage { order: 1; }

.stage {
  position: relative;
  width: 100%; max-width: 1080px;
  height: clamp(320px, 66vh, 700px);
  height: clamp(320px, 66svh, 700px);
  margin-inline: auto;
  border-radius: 4px;
  background: var(--paper-0);
  perspective: 1150px;
  overflow: hidden;
  box-shadow:
    0 60px 110px -30px rgba(8, 11, 32, .95),
    0 24px 44px -8px rgba(8, 11, 32, .7),
    0 2px 0 rgba(246, 213, 92, .05);
}

.box-tilt {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
}
.scene.awake .box-tilt { will-change: transform; }

.layer { position: absolute; inset: -5%; }
.layer .fill {
  width: 100%; height: 100%;
  object-fit: cover;
}
.blur-far { filter: blur(2.4px) saturate(.9) brightness(.86); transform: scale(1.22); }
.blur-near { filter: blur(1.8px); }

.tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(110% 100% at 50% 40%, transparent 40%, rgba(10, 14, 46, .62) 100%),
    linear-gradient(180deg, rgba(13, 19, 56, .5), rgba(13, 19, 56, .1) 42%, rgba(10, 14, 46, .6));
}

.layer-band {
  inset: auto -5% -5% -5%;
  height: var(--band-h, 50%);
}
.layer-band img { transform: scale(1.06); }
.band-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(246, 213, 92, .12), transparent 7%),
    linear-gradient(180deg, rgba(8, 11, 32, .55), transparent 26%);
}

.layer-wing { inset: -6% auto -6% auto; width: 30%; }
.layer-wing--l { left: -7%; }
.layer-wing--r { right: -7%; }
.layer-wing img { transform: scale(1.06); }
.layer-wing::after {
  content: ""; position: absolute; inset: 0;
}
.layer-wing--l::after {
  background:
    linear-gradient(270deg, rgba(246, 213, 92, .16), transparent 10%),
    linear-gradient(90deg, rgba(8, 11, 32, .55), transparent 45%);
}
.layer-wing--r::after {
  background:
    linear-gradient(90deg, rgba(246, 213, 92, .16), transparent 10%),
    linear-gradient(270deg, rgba(8, 11, 32, .55), transparent 45%);
}

.rim-glow {
  position: absolute;
  left: var(--gx, 50%); top: var(--gy, 45%);
  width: 68%; aspect-ratio: 1;
  margin: 0;
  translate: -50% -50% -22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 188, 92, .34) 0%, rgba(230, 188, 92, .13) 36%, transparent 66%);
  mix-blend-mode: screen;
  animation: glow-breathe 7s var(--ease-in-out-soft) infinite alternate;
}
.rim-glow--halo {
  width: 56%;
  background: radial-gradient(circle, rgba(246, 213, 92, .5) 0%, rgba(230, 188, 92, .16) 40%, transparent 66%);
}
.rim-glow--candle {
  width: 52%;
  background: radial-gradient(circle, rgba(246, 213, 92, .4) 0%, rgba(212, 165, 57, .14) 38%, transparent 64%);
  animation-duration: 4.5s;
}
@keyframes glow-breathe {
  from { opacity: .75; transform: scale(.97); }
  to   { opacity: 1;   transform: scale(1.05); }
}

.layer-subject {
  inset: auto auto -2% auto;
  left: var(--sub-x, 50%);
  width: var(--sub-w, 34%);
  height: var(--sub-h, 84%);
  filter: drop-shadow(0 30px 34px rgba(8, 11, 32, .8)) drop-shadow(0 6px 10px rgba(8, 11, 32, .6));
}
.subject-card {
  position: absolute; inset: 0; display: block; overflow: hidden;
  background: var(--paper-1);
}
.subject-card::after {
  content: ""; position: absolute; inset: 0;
  box-shadow:
    inset 0 0 0 2px rgba(230, 188, 92, .16),
    inset 0 2px 0 rgba(246, 213, 92, .18),
    inset 0 -26px 40px -18px rgba(8, 11, 32, .55),
    inset 0 20px 40px -24px rgba(8, 11, 32, .4);
}
.layer-subject--arch .subject-card { border-radius: 46% 46% 0 0 / 34% 34% 0 0; }

.voice-glow {
  position: absolute; inset: -16%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 213, 92, .55) 0%, rgba(230, 188, 92, .2) 42%, transparent 70%);
  opacity: calc(var(--amp, 0) * .95);
  transform: scale(calc(.94 + var(--amp, 0) * .12));
}

.layer-fore {
  inset: auto -6% -5% -6%;
  height: 19%;
  background:
    linear-gradient(180deg, rgba(246, 213, 92, .07), transparent 12%),
    linear-gradient(180deg, #1A214F, #10163E);
}
.layer-fore::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--noise); background-size: 180px; opacity: .08;
}

.leak {
  position: absolute; inset: -4%;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(46% 34% at 6% 2%, rgba(246, 213, 92, .26), transparent 70%),
    linear-gradient(115deg, rgba(246, 213, 92, .1), transparent 30%);
}
.leak--cool {
  background:
    radial-gradient(46% 34% at 90% 0%, rgba(246, 213, 92, .2), transparent 70%),
    linear-gradient(245deg, rgba(246, 213, 92, .08), transparent 30%);
}
.leak--candle {
  background:
    radial-gradient(40% 34% at 64% 46%, rgba(246, 213, 92, .18), transparent 70%),
    radial-gradient(50% 40% at 8% 4%, rgba(230, 188, 92, .14), transparent 70%);
}

.box-frame {
  position: absolute; inset: 0; z-index: 8;
  border: var(--frame-w) solid var(--frame);
  border-radius: 4px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(230, 188, 92, .24),
    inset 0 2px 0 rgba(246, 213, 92, .07);
}
.box-frame::before {
  content: ""; position: absolute; inset: -1px;
  box-shadow:
    inset 0 30px 54px -20px rgba(8, 11, 32, .9),
    inset 0 -24px 48px -22px rgba(8, 11, 32, .75),
    inset 26px 0 52px -26px rgba(8, 11, 32, .7),
    inset -26px 0 52px -26px rgba(8, 11, 32, .7);
}
.box-frame::after {
  content: ""; position: absolute; inset: -1px;
  background-image: var(--noise); background-size: 180px; opacity: .05;
}

.stage-note {
  position: absolute; z-index: 9;
  left: calc(var(--frame-w) + 12px); bottom: calc(var(--frame-w) + 10px);
  font-size: .66rem; font-weight: 350; letter-spacing: .08em;
  color: rgba(202, 202, 202, .78);
  max-width: 36ch; line-height: 1.5;
  padding: 8px 12px;
  background: rgba(8, 11, 32, .62);
  border-left: 1px solid rgba(212, 165, 57, .5);
  border-radius: 0 3px 3px 0;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Dickinson specifics */
.dark-sky {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 32%, var(--bg-astral) 0%, var(--bg-deep-space) 56%, var(--bg-deep-space-darker) 100%);
}
.ms { position: absolute; }
.ms img {
  width: 100%; height: auto;
  box-shadow: 0 22px 44px rgba(8, 11, 32, .7), 0 5px 12px rgba(8, 11, 32, .55);
}
.ms--1 { width: 24%; left: 6%;  top: 6%;  rotate: -8deg; }
.ms--2 { width: 21%; right: 4%; top: 12%; rotate: 7deg; }
.ms--3 { width: 26%; left: 22%; top: 26%; rotate: -4deg; }
.ms--4 { width: 27%; left: 2%;  bottom: -6%; rotate: 9deg; }
.ms--5 { width: 34%; right: -7%; bottom: -12%; rotate: -13deg; }

.paper-moon {
  position: absolute; left: 16%; top: 12%;
  width: 9%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #F6D55C, #D4A539 70%);
  box-shadow: 0 0 34px 10px rgba(246, 213, 92, .3), 0 4px 8px rgba(8, 11, 32, .6);
}

/* Gautama petals */
.petals { position: absolute; inset: 0; pointer-events: none; }
.petals i {
  position: absolute;
  width: 16px; height: 12px;
  border-radius: 62% 38% 55% 45%;
  background: radial-gradient(ellipse at 40% 35%, #E0954F, #A85A2E 78%);
  box-shadow: 0 4px 8px rgba(8, 11, 32, .55);
  opacity: .92;
  animation: petal 11s var(--ease-in-out-soft) infinite alternate;
}
.petals i:nth-child(1) { left: 12%; top: 22%; animation-duration: 10s; }
.petals i:nth-child(2) { left: 30%; top: 62%; width: 12px; height: 9px; animation-duration: 13s; animation-delay: -3s; }
.petals i:nth-child(3) { left: 66%; top: 30%; animation-duration: 9s; animation-delay: -5s; }
.petals i:nth-child(4) { left: 82%; top: 58%; width: 20px; height: 14px; animation-duration: 14s; animation-delay: -8s; }
.petals i:nth-child(5) { left: 48%; top: 14%; width: 11px; height: 8px; animation-duration: 12s; animation-delay: -2s; }
.petals i:nth-child(6) { left: 72%; top: 76%; animation-duration: 15s; animation-delay: -6s; }
@keyframes petal {
  from { transform: translate3d(0, -12px, 0) rotate(-14deg); }
  to   { transform: translate3d(10px, 14px, 0) rotate(16deg); }
}

/* Plato cave corners */
.cave-corner {
  position: absolute; top: -8%;
  width: 32%; height: 38%;
}
.cave-corner::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(130% 120% at 50% -20%, #131A45 0%, #0A0F2E 58%, #080B20 100%);
}
.cave-corner::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--noise); background-size: 180px; opacity: .09;
}
.cave-corner--l { left: -7%; rotate: 2deg; }
.cave-corner--l::before { box-shadow: inset -3px -3px 0 rgba(230, 188, 92, .1); }
.cave-corner--r { right: -7%; rotate: -2deg; }
.cave-corner--r::before { box-shadow: inset 3px -3px 0 rgba(230, 188, 92, .1); }

/* ------------------------------------------------------------
   Captions
   ------------------------------------------------------------ */
.caption { max-width: 42ch; }
.caption-num { margin-bottom: 2rem; }
.caption-name {
  font-family: var(--font-ui); font-weight: 300;
  font-size: var(--step-3); line-height: 1.12;
  letter-spacing: .01em;
  color: var(--text-primary);
}
.caption-epithet {
  font-family: var(--font-content); font-style: italic;
  font-size: var(--step-0);
  color: var(--gold-primary);
  margin-top: .5rem;
}
.caption-era {
  margin-top: 1.1rem;
  font-size: .66rem; font-weight: 400; letter-spacing: .26em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.caption-wisdom {
  position: relative;
  margin-top: 1.9rem; padding-left: 20px;
  font-family: var(--font-content);
  font-size: var(--step-1); line-height: 1.6;
  color: var(--text-secondary);
  max-width: 38ch;
}
.caption-wisdom::before {
  content: ""; position: absolute; left: 0; top: .45em; bottom: .4em;
  width: 1px;
  background: linear-gradient(var(--gold-primary), rgba(230, 188, 92, .1));
}
.honesty {
  margin-top: 1.7rem;
  font-size: .68rem; font-weight: 380; letter-spacing: .12em;
  color: var(--text-tertiary);
}
.honesty::before {
  content: ""; display: inline-block;
  width: 7px; height: 7px; margin-right: 10px;
  border: 1px solid var(--gold-ui); border-radius: 50%;
  vertical-align: 1px; opacity: .8;
}
.caption-cta {
  display: inline-block; margin-top: 1.4rem;
  font-size: .74rem; font-weight: 450; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-ui);
  padding-bottom: 3px;
  background: linear-gradient(var(--gold-hover), var(--gold-hover)) left bottom / 0 1px no-repeat;
  transition: color .4s, background-size .5s var(--ease-out-expo);
}
.caption-cta:hover, .caption-cta:focus-visible { color: var(--gold-hover); background-size: 100% 1px; }

/* Audio row */
.audio-row {
  display: flex; align-items: center; gap: 14px;
  margin-top: 1.8rem;
  --amp: 0;
}
.play {
  display: inline-flex; align-items: center; gap: 10px;
  padding: .78em 1.25em .72em;
  border: 1px solid rgba(212, 165, 57, .45);
  border-radius: 999px;
  color: var(--gold-primary);
  transition: border-color .4s, color .4s, box-shadow .3s;
}
.play:hover, .play:focus-visible { border-color: rgba(246, 213, 92, .85); color: var(--gold-hover); }
.play .play-label {
  font-size: .72rem; font-weight: 440; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
}
.play .ic-pause { display: none; }
.audio-row.is-playing .ic-pause { display: block; }
.audio-row.is-playing .ic-play { display: none; }
.audio-row.is-playing .play {
  border-color: rgba(246, 213, 92, .9);
  box-shadow: 0 0 calc(10px + var(--amp) * 30px) rgba(246, 213, 92, calc(.1 + var(--amp) * .35));
}
.dur {
  font-size: .66rem; letter-spacing: .1em; color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  min-width: 3.2em;
}
.track {
  position: relative; flex: 0 1 110px; height: 2px;
  background: rgba(210, 210, 210, .14);
  border-radius: 2px; overflow: hidden;
}
.track-fill {
  position: absolute; inset: 0;
  background: var(--gold-ui);
  transform: scaleX(0); transform-origin: left;
}

/* ------------------------------------------------------------
   Council
   ------------------------------------------------------------ */
.scene-council { height: 260vh; --amp: 0; }
.council-wrap {
  display: grid; gap: clamp(20px, 3.5vh, 40px);
  justify-items: center;
  width: min(94vw, 1240px);
}
.stage--council {
  width: 100%;
  height: clamp(280px, 42svh, 520px);
}
.dark-sky--council {
  background: radial-gradient(110% 100% at 50% 88%, #221D3F 0%, var(--bg-deep-space) 46%, var(--bg-deep-space-darker) 100%);
}

.council-card { position: absolute; bottom: 12%; width: 20%; transform-origin: 50% 100%; }
.council-card--1 { left: 5%;  rotate: -2deg; }
.council-card--2 { left: 27%; bottom: 7%; width: 22%; rotate: 1.4deg; }
.council-card--3 { right: 27%; bottom: 7%; width: 22%; rotate: -1.4deg; }
.council-card--4 { right: 5%;  rotate: 2deg; }
.council-card .subject-card { position: relative; inset: auto; }
.council-card img { width: 100%; height: auto; }
.council-card .subject-card::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(0deg, rgba(246, 213, 92, .34), rgba(246, 213, 92, .06) 46%, transparent 62%);
  opacity: calc(.18 + var(--amp) * .82);
}
.council-card .subject-card::after {
  box-shadow:
    inset 0 0 0 2px rgba(230, 188, 92, .18),
    inset 0 -30px 44px -20px rgba(8, 11, 32, .8);
}
.council-card { filter: drop-shadow(0 24px 26px rgba(8, 11, 32, .75)); }

.fire {
  position: absolute; left: 50%; bottom: 10%;
  width: 26%;
}
.fire-glow {
  position: absolute; left: 50%; bottom: -30%;
  width: 340%; aspect-ratio: 1.6;
  translate: -50% 0;
  background: radial-gradient(50% 60% at 50% 78%, rgba(246, 213, 92, .5) 0%, rgba(212, 165, 57, .16) 45%, transparent 72%);
  mix-blend-mode: screen;
  opacity: calc(.52 + var(--amp) * .48);
  transform: scale(calc(.96 + var(--amp) * .14));
  transform-origin: 50% 80%;
}
.flames { position: relative; width: 100%; display: block; }
.flame { transform-origin: 50% 100%; }
.flame--back  { fill: var(--gold-deep);  opacity: .85; }
.flame--mid   { fill: var(--gold-ui); }
.flame--front { fill: var(--gold-hover); }
.fire-logs {
  position: absolute; left: -12%; right: -12%; bottom: -3%;
  height: 9px; border-radius: 5px;
  background: linear-gradient(90deg, #241A0E, #3A2C18 50%, #241A0E);
  transform: rotate(-2.5deg);
  box-shadow: 0 5px 4px -2px rgba(8, 11, 32, .8), 0 -7px 0 -2px #2C2113;
}

.layer-fore--council { background: linear-gradient(180deg, rgba(246, 213, 92, .05), transparent 14%), linear-gradient(180deg, #14193F, #0D1233); }

.council-names {
  position: absolute; z-index: 9; list-style: none;
  left: var(--frame-w); right: var(--frame-w); bottom: calc(var(--frame-w) + 8px);
  display: flex; justify-content: space-around;
  pointer-events: none;
}
.council-names li { text-align: center; }
.council-names b {
  display: block;
  font-size: .64rem; font-weight: 450; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-secondary);
}
.council-names span {
  font-family: var(--font-content); font-style: italic;
  font-size: .68rem; color: var(--text-tertiary);
}

.caption--council {
  max-width: 60ch; text-align: center;
}
.caption--council .caption-wisdom { margin-inline: auto; }
.caption--council .caption-epithet { margin-top: .3rem; }
.council-body {
  margin: 1.1rem auto 0; max-width: 48ch;
  font-family: var(--font-content);
  font-size: var(--step-0); line-height: 1.65;
  color: var(--text-secondary);
}
.caption--council .audio-row { justify-content: center; margin-top: 1.4rem; }
.caption--council .honesty { margin-top: 1.2rem; }
.caption--council .caption-num { margin-bottom: 1.1rem; }

/* ------------------------------------------------------------
   The unbuilt box · blueprint
   ------------------------------------------------------------ */
.scene-unbuilt { height: 250vh; }
.unbuilt-wrap {
  display: grid; gap: clamp(24px, 4vh, 44px);
  align-items: center;
  width: min(94vw, 1380px);
}
@media (min-width: 1020px) {
  .unbuilt-wrap { grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 4vw, 72px); }
}

.stage--blueprint { background: var(--bg-deep-space); height: clamp(300px, 56svh, 640px); }
.bp-grid {
  position: absolute; inset: -5%;
  background-image:
    repeating-linear-gradient(0deg, rgba(126, 146, 226, .13) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(126, 146, 226, .13) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, rgba(148, 168, 240, .16) 0 1px, transparent 1px 130px),
    repeating-linear-gradient(90deg, rgba(148, 168, 240, .16) 0 1px, transparent 1px 130px);
  mask-image: radial-gradient(120% 100% at 50% 45%, #000 40%, transparent 96%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 45%, #000 40%, transparent 96%);
}
.bp-dawn {
  position: absolute; inset: auto -5% -5% -5%; height: 52%;
  background: radial-gradient(80% 100% at 50% 100%, rgba(230, 188, 92, .2), rgba(230, 188, 92, .05) 48%, transparent 74%);
  opacity: .5;
}
.bp-lines { position: absolute; inset: 5%; width: 90%; height: 90%; }
.bp-cut  { fill: none; stroke: var(--gold-ui); stroke-width: 1.6; stroke-dasharray: 10 8; opacity: .9; }
.bp-fold { stroke: #8FA2E8; stroke-width: 1; stroke-dasharray: 2 7; opacity: .6; }
.bp-reg  { fill: none; stroke: #8FA2E8; stroke-width: 1; opacity: .65; }
.bp-star { fill: none; stroke: var(--gold-ui); stroke-width: 1; stroke-dasharray: 2 3; opacity: .8; }
.scene-unbuilt.awake .bp-cut { animation: march 26s linear infinite; }
@keyframes march { to { stroke-dashoffset: -180; } }

.bp-note {
  position: absolute; z-index: 4;
  font-size: .7rem; font-weight: 320; font-style: italic; letter-spacing: .06em;
  color: var(--blueprint-ink); opacity: .8;
}
.bp-note::before {
  content: ""; display: inline-block; width: 18px; height: 1px;
  background: currentColor; opacity: .55; margin-right: 9px; vertical-align: middle;
}
.bp-note--1 { left: 17%; top: 7%; }
.bp-note--2 { right: 6%; top: 26%; }
.bp-note--3 { left: 26%; top: 34%; }
.bp-note--4 { left: 50%; top: 56%; transform: translateX(-50%); }
.bp-note--4::before { display: none; }
.bp-note--5 { right: 10%; bottom: 10%; }

.box-frame--blueprint {
  border-style: dashed; border-width: 2px; border-color: rgba(212, 165, 57, .5);
  box-shadow: none;
}
.box-frame--blueprint::before, .box-frame--blueprint::after { display: none; }

.caption--unbuilt { max-width: 52ch; }
.unbuilt-lead {
  margin-top: 1.6rem;
  font-family: var(--font-content);
  font-size: var(--step-0); line-height: 1.75;
  color: var(--text-secondary);
  max-width: 50ch;
}
.caption-name--cw { margin-top: 2.6rem; font-size: var(--step-4); }
.cw-line {
  margin-top: 1rem;
  font-family: var(--font-content); font-style: italic;
  font-size: var(--step-1); color: var(--text-primary);
}
.cw-detail {
  margin-top: .9rem;
  font-size: .8rem; font-weight: 350; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.cw-feature {
  margin-top: 1.8rem;
  font-family: var(--font-content); font-style: italic;
  font-size: var(--step-1); line-height: 1.5;
  color: var(--gold-primary);
  max-width: 30ch;
}
.caption--unbuilt .btn { margin-top: 2.2rem; }

/* ------------------------------------------------------------
   The shelf · zoom out
   ------------------------------------------------------------ */
.scene-shelf { height: 320vh; }
.scene-shelf .hold {
  background: radial-gradient(130% 100% at 50% 30%, var(--paper-1) 0%, var(--bg-deep-space) 55%, var(--bg-deep-space-darker) 100%);
  padding: 0;
}

.wall-zoom {
  position: absolute; inset: 0;
  display: grid; place-items: center; align-content: center;
  gap: clamp(14px, 2.4vh, 30px);
  transform-origin: 55.5% 88%;
  will-change: transform;
}

.wall-zoom { --wall-w: min(84vw, 1150px, calc(94svh - 160px)); }
.wall {
  width: var(--wall-w);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1vw, 16px);
}
.mini {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--paper-2);
  border: 3px solid var(--paper-4);
  border-radius: 3px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(8, 11, 32, .85),
    0 12px 26px -10px rgba(8, 11, 32, .85);
}
.mini img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .94;
}
.mini .lit {
  position: absolute; inset: 0; opacity: 0;
  background:
    linear-gradient(180deg, rgba(246, 213, 92, .2), transparent 34%),
    radial-gradient(90% 62% at 50% 12%, rgba(230, 188, 92, .26), transparent 74%);
}
.mini::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 10px 20px -8px rgba(8, 11, 32, .85), inset 0 -8px 18px -8px rgba(8, 11, 32, .7);
}

.bench {
  position: relative;
  width: var(--wall-w);
  height: clamp(64px, 9vh, 96px);
}
.bench::before {
  content: ""; position: absolute; left: -2%; right: -2%; top: 0; height: 12px;
  background: linear-gradient(180deg, #232C6B, var(--paper-4) 55%, #141B4A);
  border-radius: 3px;
  box-shadow: 0 16px 30px -8px rgba(8, 11, 32, .9), inset 0 1px 0 rgba(246, 213, 92, .14);
}
.mini--blueprint {
  position: absolute; left: 51%; bottom: calc(100% - 10px);
  width: 11.5%; aspect-ratio: 4 / 5;
  background: var(--bg-deep-space);
  border: 1px dashed rgba(212, 165, 57, .65);
  border-radius: 3px;
  box-shadow: 0 14px 26px -8px rgba(8, 11, 32, .9);
  overflow: hidden;
}
.bp-mini-grid {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(126, 146, 226, .16) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(126, 146, 226, .16) 0 1px, transparent 1px 9px);
}
.bp-mini-cut {
  position: absolute; inset: 18%;
  border: 1px dashed rgba(212, 165, 57, .8);
  border-radius: 2px;
}
.bench-pencil {
  position: absolute; left: 34%; top: -8px;
  width: 8%; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #2E2415 0 12%, var(--gold-ui) 12% 88%, #E8D5A8 88%);
  transform: rotate(-3deg);
  box-shadow: 0 3px 5px rgba(8, 11, 32, .7);
}

.shelf-scrim {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(110% 95% at 50% 50%, rgba(8, 11, 32, .88) 0%, rgba(8, 11, 32, .74) 46%, rgba(8, 11, 32, .5) 100%);
  pointer-events: none;
}

.shelf-copy {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  text-align: center;
  gap: .4rem;
  padding: 10vh 6vw;
  opacity: 0;
  pointer-events: none;
}
.scene-shelf.shelf-live .shelf-copy { pointer-events: auto; }
.shelf-title {
  font-family: var(--font-content); font-style: italic; font-weight: 400;
  font-size: var(--step-4); line-height: 1.15;
  color: var(--text-primary);
  margin-top: 1.6rem;
}
.shelf-stat {
  margin-top: 1.4rem;
  font-size: .82rem; font-weight: 460; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold-primary);
}
.shelf-roll {
  margin-top: 1.6rem; max-width: 66ch;
  font-family: var(--font-content); font-style: italic;
  font-size: .92rem; line-height: 1.9;
  color: var(--text-tertiary);
}
.shelf-lead {
  margin-top: 1.5rem; max-width: 44ch;
  font-weight: 330; font-size: var(--step-0); line-height: 1.7;
  color: var(--text-secondary);
}
.shelf-copy .btn { margin-top: 2.2rem; }
.shelf-trust {
  margin-top: 2rem;
  font-size: .66rem; font-weight: 400; letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.footer {
  position: relative;
  background: var(--bg-deep-space-darker);
  padding: 12vh 6vw 9vh;
  display: grid; justify-items: center; text-align: center;
  gap: 1.1rem;
}
.footer::before {
  content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 165, 57, .5), transparent);
}
.footer-brand { display: grid; justify-items: center; gap: .9rem; margin-bottom: .6rem; }
.footer-word {
  font-size: .95rem; font-weight: 330; letter-spacing: .42em; text-transform: uppercase;
  color: var(--text-primary);
}
.footer-tag {
  font-family: var(--font-content); font-style: italic;
  font-size: .95rem; color: var(--gold-primary);
}
.footer-honesty {
  max-width: 52ch;
  font-size: .84rem; font-weight: 330; line-height: 1.7;
  color: var(--text-tertiary);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 14px 34px; justify-content: center; margin-top: 1.2rem; }
.footer-links a {
  font-size: .76rem; font-weight: 430; letter-spacing: .16em;
  color: var(--gold-ui);
  padding-bottom: 3px;
  background: linear-gradient(var(--gold-hover), var(--gold-hover)) left bottom / 0 1px no-repeat;
  transition: color .4s, background-size .5s var(--ease-out-expo);
}
.footer-links a:hover, .footer-links a:focus-visible { color: var(--gold-hover); background-size: 100% 1px; }
.footer-trust {
  margin-top: 1.6rem;
  font-size: .66rem; font-weight: 400; letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.footer-company { font-size: .7rem; font-weight: 350; letter-spacing: .12em; color: var(--text-tertiary); }
.footer-whisper {
  margin-top: 1.8rem;
  font-family: var(--font-content); font-style: italic;
  font-size: .8rem; color: var(--text-tertiary); opacity: .65;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 980px) {
  /* boxes flow naturally on small screens; pinning stays for prologue + shelf */
  .scene:not(.scene-prologue):not(.scene-shelf) { height: auto; }
  .scene:not(.scene-prologue):not(.scene-shelf) .hold {
    position: relative;
    height: auto; min-height: 100vh; min-height: 100svh;
    padding-top: 76px; padding-bottom: 10vh;
    align-content: center;
  }
  .diorama, .diorama--caption-right { grid-template-columns: 1fr; gap: 26px; width: min(94vw, 620px); }
  .diorama .caption, .diorama--caption-right .caption { order: 2; }
  .diorama .stage, .diorama--caption-right .stage { order: 1; }
  .qstars li.qhm span { display: none; }
  .stage { height: min(52svh, 118vw); }
  .qstars li { left: var(--mx, var(--x)); top: var(--my, var(--y)); }
  .caption { max-width: 60ch; }
  .caption-num { display: none; }
  .caption-name { font-size: var(--step-2); }
  .caption-wisdom { margin-top: 1.2rem; font-size: var(--step-0); }
  .honesty { margin-top: 1.1rem; }
  .audio-row { margin-top: 1.2rem; }
  .caption-cta { margin-top: 1rem; }
  .stage-note { display: none; }
  .council-names { display: none; }
  .stage--council { height: min(48svh, 120vw); }
  .council-card { width: 24%; bottom: 30%; }
  .council-card--1 { left: 2%; }
  .council-card--2 { left: 26%; bottom: 8%; width: 25%; }
  .council-card--3 { right: 26%; bottom: 8%; width: 25%; }
  .council-card--4 { right: 2%; }
  .fire { width: 30%; bottom: 9%; }
  .caption--council, .caption--unbuilt { text-align: left; }
  .caption--council { text-align: center; }
  .stage--blueprint { height: min(44svh, 110vw); }
  .bp-note--3 { top: 40%; }
  .wall-zoom { --wall-w: min(92vw, calc(64svh - 110px)); }
  .wall { grid-template-columns: repeat(5, 1fr); }
  .mini--blueprint { width: 14%; }
  .shelf-roll { font-size: .8rem; max-width: 90vw; }
  .qstars li span { font-size: .56rem; letter-spacing: .12em; }
  .qstars { inset: 6% 4%; }
  .gate-actions { gap: 12px; }
  .topbar { padding: 16px 20px; }
  .mute { right: 16px; bottom: 16px; }
}

@media (max-width: 480px) {
  .gate-title { letter-spacing: .1em; }
  .poem-line { font-size: var(--step-3); }
  .passage-q { font-size: var(--step-2); }
  .stage { height: min(50svh, 128vw); }
  .btn { font-size: .72rem; padding: 1em 1.5em .9em; }
  .btn--lg { font-size: .78rem; }
}

/* ------------------------------------------------------------
   Reduced motion · designed stillness
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
html.rm *, html.rm *::before, html.rm *::after {
  animation: none !important;
  transition-duration: .15s !important;
}
html.rm .scene { height: auto; }
html.rm .scene .hold { position: relative; height: auto; min-height: 100svh; }
html.rm .cline { opacity: .75; }
html.rm .passage { height: auto; min-height: 70vh; padding: 14vh 0; }
html.rm .shelf-copy, html.rm .shelf-scrim { opacity: 1; pointer-events: auto; }
html.rm .mini .lit { opacity: 1; }
html.rm .wall-zoom { position: relative; padding: 12vh 0 6vh; }
html.rm .shelf-copy { position: relative; padding: 6vh 6vw 14vh; }
html.rm .scene-shelf .hold { display: block; }
html.rm .eclipse-ring { stroke-dashoffset: 0; }
html.rm .scrollhint { display: none; }
html.rm #motes { display: none; }
html.rm .blur-far { filter: saturate(.9) brightness(.86); transform: scale(1.22); }
html.rm .layer-subject { translate: -50% 0; }
html.rm .fire { translate: -50% 0; }

/* Sleep offscreen dioramas: pause ambient css motion too. */
.scene:not(.awake) :is(.petals i, .rim-glow, .hole, .hole--free) { animation-play-state: paused; }
html.rm .scene :is(.petals i, .rim-glow, .hole, .hole--free) { animation: none !important; }