/* ============================================================
   CCWORLDWIDE — design system
   Palette is strict: black void, black panel, three golds, bone.
   ============================================================ */

:root {
  --black-void: #050505;
  --black-panel: #0C0C0C;
  --gold-core: #C9A227;
  --gold-high: #EDCB6A;
  --gold-shadow: #7A5C1E;
  --bone: #E8E4DA;

  --gold-gradient: linear-gradient(180deg, var(--gold-high) 0%, var(--gold-core) 52%, var(--gold-shadow) 100%);

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-label: 'Archivo', 'Helvetica Neue', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;

  --pad-x: clamp(24px, 6vw, 96px);
  --ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/CormorantGaramond-var.woff2') format('woff2-variations'),
       url('/fonts/CormorantGaramond-var.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/Archivo-var.woff2') format('woff2-variations'),
       url('/fonts/Archivo-var.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-var.woff2') format('woff2-variations'),
       url('/fonts/Inter-var.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
html, body { background: var(--black-void); }
body {
  color: var(--bone);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }

::selection { background: var(--gold-shadow); color: var(--bone); }

body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }

/* ---------- typography primitives ---------- */
.kicker {
  font-family: var(--font-label);
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-core);
  white-space: nowrap;
}

.display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: 0.005em;
  color: var(--bone);
  font-size: clamp(38px, 6.2vw, 104px);
}

.line { display: block; overflow: hidden; }
.line-inner { display: block; transform: translateY(0); }

.body-copy {
  max-width: 62ch;
  font-size: clamp(15px, 1.15vw, 18px);
  color: var(--bone);
  opacity: 0.92;
}

.rule {
  height: 1px;
  width: 100%;
  max-width: 520px;
  background: linear-gradient(90deg, var(--gold-core), rgba(201, 162, 39, 0));
  transform-origin: left center;
}

/* ---------- preloader ---------- */
#preloader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--black-void);
  display: flex; align-items: center; justify-content: center;
}
.preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.preloader-mark { width: clamp(96px, 12vw, 150px); height: auto; opacity: 0; }
.preloader-line { width: clamp(140px, 20vw, 260px); height: 1px; background: rgba(201, 162, 39, 0.18); overflow: hidden; }
.preloader-line-fill { display: block; height: 100%; width: 100%; background: var(--gold-gradient); transform: scaleX(0); transform-origin: left center; }
.preloader-count {
  font-family: var(--font-label);
  font-size: 11px; letter-spacing: 0.32em;
  color: var(--gold-core);
}

/* ---------- cursor ---------- */
#cursor-dot, #cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 90;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
}
#cursor-dot { width: 5px; height: 5px; background: var(--gold-high); }
#cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid rgba(201, 162, 39, 0.55);
  transition: width 0.35s var(--ease-lux), height 0.35s var(--ease-lux), border-color 0.35s var(--ease-lux);
}
#cursor-ring.is-active { width: 56px; height: 56px; border-color: rgba(237, 203, 106, 0.9); }

/* ---------- grain ---------- */
#grain {
  position: fixed; inset: -60px; z-index: 60;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.motion #grain { animation: grain-shift 1.1s steps(4) infinite; }
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-18px, 12px); }
  50% { transform: translate(12px, -16px); }
  75% { transform: translate(-10px, -8px); }
  100% { transform: translate(0, 0); }
}

/* ---------- iris overlay ---------- */
#iris {
  position: fixed; inset: 0; z-index: 30;
  background: transparent;
  opacity: 0; pointer-events: none;
}
#iris video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- nav ---------- */
#nav {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(18px, 2.6vw, 30px) clamp(20px, 3.2vw, 40px);
  opacity: 0;
}
body.booted #nav { opacity: 1; transition: opacity 1.2s var(--ease-lux) 0.2s; }
#nav-mark img { height: clamp(30px, 3vw, 38px); width: auto; }
#nav-contact {
  font-family: var(--font-label);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--gold-core);
  position: relative;
  padding: 12px 2px; /* tap target */
}
#nav-contact::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px;
  height: 1px; background: var(--gold-gradient);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.6s var(--ease-lux);
}
#nav-contact:hover::after, #nav-contact:focus-visible::after { transform: scaleX(1); }

/* ---------- keyboard hint (first page, bottom-right; desktop only) ---------- */
#keys-hint {
  position: fixed; right: clamp(20px, 3.2vw, 40px); bottom: clamp(18px, 3svh, 30px);
  z-index: 70;
  display: none; /* JS adds body.kbd only on verified fine-pointer desktops */
  flex-direction: column; align-items: flex-end; gap: 10px;
  opacity: 0;
  transition: opacity 1s var(--ease-lux);
  pointer-events: none;
}
body.kbd #keys-hint { display: flex; }
body.booted #keys-hint { opacity: 0.85; }
body.booted #keys-hint.hint-hidden { opacity: 0; }
.keys-row { display: flex; align-items: center; gap: 6px; }
.key {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: 1px solid rgba(201, 162, 39, 0.55);
  border-radius: 5px;
  background: linear-gradient(180deg, #191919, #0a0a0a);
  box-shadow: 0 2px 0 rgba(122, 92, 30, 0.5), inset 0 1px 0 rgba(237, 203, 106, 0.14);
  color: var(--gold-high);
  font-family: var(--font-label);
  font-size: 12px;
  line-height: 1;
}
.keys-label {
  margin-left: 7px;
  font-family: var(--font-label);
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--bone);
  opacity: 0.7;
}

/* ---------- chapters / stages ---------- */
.chapter { position: relative; }
/* Heights set the scroll distance each pinned chapter occupies —
   trimmed ~25% so the story takes less scrolling to traverse. */
#cold-open { height: 190svh; }
#act-1 { height: 360svh; }
#act-3 { height: 400svh; }
#act-4 { height: 150svh; }

.pin {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
}
/* act-2 flows over its sticky stage */
.chapter-flow .stage-sticky {
  position: sticky; top: 0;
  height: 100svh;
  margin-bottom: -100svh;
}
.flow-content {
  position: relative; z-index: 10;
  padding: 24svh 0 18svh;
}

.stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.chapter-flow .stage { position: sticky; }
/* Poster-first: each poster is frame 0 of its loop, so the element is
   visible immediately and the handoff to playback is seamless. */
.stage-video, .stage-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Scrims run to SOLID void at the exact top/bottom edges so adjacent
   chapters blend through black instead of meeting at a hard slide-line. */
.stage-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(5, 5, 5, 0) 30%, rgba(5, 5, 5, 0.72) 100%),
    linear-gradient(180deg, #050505 0%, rgba(5, 5, 5, 0.42) 8%, rgba(5, 5, 5, 0.10) 22%, rgba(5, 5, 5, 0.10) 72%, rgba(5, 5, 5, 0.48) 91%, #050505 100%);
}
.stage-scrim-heavy {
  background:
    radial-gradient(95% 75% at 50% 50%, rgba(5, 5, 5, 0.08) 12%, rgba(5, 5, 5, 0.88) 92%),
    linear-gradient(180deg, #050505 0%, rgba(5, 5, 5, 0.45) 9%, rgba(5, 5, 5, 0.22) 40%, rgba(5, 5, 5, 0.55) 90%, #050505 100%);
}

/* A1 carries letterbox bars baked into the source (~13% top/bottom) —
   crop them out and calm the hero stage down. */
#cold-open .stage-video, #act-4 .stage-video {
  transform: scale(1.36);
  filter: brightness(0.78);
}
/* contact reprise: steadier, darker void so the links carry the screen */
#act-4 .stage-video { filter: brightness(0.55); }

/* A2 gold flow — original look minus 15% brightness; the default
   scrim carries the text. */
#act-1 .stage-video { filter: brightness(0.85); }
#act-4 .stage-scrim {
  background:
    radial-gradient(70% 65% at 50% 52%, rgba(5, 5, 5, 0.62) 0%, rgba(5, 5, 5, 0.18) 55%, rgba(5, 5, 5, 0.75) 100%),
    linear-gradient(180deg, #050505 0%, rgba(5, 5, 5, 0.42) 8%, rgba(5, 5, 5, 0.10) 22%, rgba(5, 5, 5, 0.10) 72%, rgba(5, 5, 5, 0.48) 91%, #050505 100%);
}

.chapter-content {
  position: relative; z-index: 10;
  padding: 0 var(--pad-x);
  max-width: 1480px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  gap: clamp(22px, 3.2vh, 40px);
}

/* ---------- cold open ---------- */
.cold-open-content {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(18px, 3vh, 30px);
  text-align: center;
  padding: 0 var(--pad-x);
}
#cold-open-mark {
  width: clamp(180px, 24vw, 300px); height: auto;

  opacity: 0;
}
.cold-open-line {
  font-family: var(--font-label);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0;
}
/* the signature — the name as a gradient headline (cold open + act IV) */
.signature-name {
  font-family: var(--font-label);
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* once split into letters, each glyph paints its own gradient so
   per-letter transforms can't break the clip */
.signature-name.name-enchanted { background: none; }
.name-letter {
  display: inline-block;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  will-change: transform;
}
.scroll-cue {
  position: absolute; bottom: 4svh; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  opacity: 0;
}
.scroll-cue-label {
  font-family: var(--font-label);
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* recenter — tracking adds a trailing gap */
  color: var(--bone);
  opacity: 0.7;
}
.scroll-cue-line {
  width: 1px; height: clamp(44px, 7svh, 76px);
  background: linear-gradient(180deg, rgba(201, 162, 39, 0), var(--gold-core));
}
body.motion .scroll-cue-line { animation: cue-pulse 2.8s var(--ease-lux) infinite; }
@keyframes cue-pulse {
  0%, 100% { opacity: 0.25; transform: scaleY(0.82); transform-origin: top; }
  50% { opacity: 0.9; transform: scaleY(1); }
}

/* ---------- act 1 screens ---------- */
.screen {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center;
}
.screen-b { justify-content: center; text-align: center; opacity: 0; visibility: hidden; }
.closing-line { font-size: clamp(34px, 4.6vw, 76px); font-style: italic; font-weight: 500; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 56px);
  align-items: start;
  max-width: 1100px;
}
.stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(44px, 5.6vw, 96px);
  line-height: 1;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.stat-label {
  margin-top: 10px;
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--bone);
  opacity: 0.68;
  max-width: 30ch;
}

/* ---------- act 2 dossier ---------- */
.dossier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(8px, 1.6vh, 20px);
  perspective: 900px; /* cards tilt in on reveal */
}
.dossier-card {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: rgba(12, 12, 12, 0.82);
  background-image: linear-gradient(rgba(12, 12, 12, 0.76), rgba(12, 12, 12, 0.76)), url('/assets/img/tex-obsidian.webp');
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(201, 162, 39, 0.32);
  padding: clamp(24px, 2.6vw, 40px);
  transition: transform 0.7s var(--ease-lux), border-color 0.7s var(--ease-lux), background 0.7s var(--ease-lux);
  will-change: transform;
}
/* gold sheen sweeps across the card on hover */
.dossier-card::after {
  content: "";
  position: absolute; inset: -40% -60%;
  background: linear-gradient(115deg, transparent 42%, rgba(237, 203, 106, 0.11) 50%, transparent 58%);
  transform: translateX(-70%);
  transition: transform 1.2s var(--ease-lux);
  pointer-events: none;
}
.dossier-card:hover, .dossier-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(237, 203, 106, 0.85);
  background-image: linear-gradient(rgba(12, 12, 12, 0.68), rgba(12, 12, 12, 0.68)), url('/assets/img/tex-obsidian.webp');
}
.dossier-card:hover::after, .dossier-card:focus-visible::after { transform: translateX(70%); }
.card-label {
  font-family: var(--font-label);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--gold-core);
  transition: letter-spacing 0.7s var(--ease-lux), color 0.7s var(--ease-lux);
}
.dossier-card:hover .card-label, .dossier-card:focus-visible .card-label {
  letter-spacing: 0.34em;
  color: var(--gold-high);
}
.card-role {
  margin-top: 6px;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.5;
}
.card-copy {
  margin-top: 16px;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.7;
  opacity: 0.88;
}
.consumer-lab {
  margin-top: clamp(20px, 3vh, 36px);
  border-top: 1px solid rgba(201, 162, 39, 0.28);
  padding: clamp(24px, 3vh, 40px) clamp(20px, 2vw, 32px) clamp(10px, 1.6vh, 20px);
  background-color: rgba(12, 12, 12, 0.55);
  background-image: linear-gradient(rgba(12, 12, 12, 0.82), rgba(12, 12, 12, 0.82)), url('/assets/img/tex-carbon.webp');
  background-size: cover;
  background-position: center;
}
.lab-sub {
  margin-top: 10px;
  font-size: clamp(12px, 0.95vw, 14px);
  opacity: 0.6;
}
.lab-rows { margin-top: clamp(16px, 2vh, 26px); display: flex; flex-direction: column; }
.lab-row {
  display: grid;
  grid-template-columns: minmax(180px, 320px) 1fr;
  gap: clamp(12px, 2vw, 32px);
  align-items: baseline;
  padding: clamp(14px, 1.8vh, 20px) 0;
  border-bottom: 1px solid rgba(201, 162, 39, 0.16);
}
.lab-row:last-child { border-bottom: 0; }
.lab-name {
  font-family: var(--font-label);
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--gold-core);
}
.lab-copy { font-size: clamp(12px, 0.95vw, 14px); opacity: 0.8; }

/* ---------- act 3 doctrine ---------- */
.doctrine-kicker {
  position: absolute; top: clamp(84px, 12svh, 120px); left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  opacity: 0;
}
.doctrine-beat {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(10px, 2svh, 22px);
  text-align: center;
  padding: 0 var(--pad-x);
  opacity: 0; visibility: hidden;
}
.doctrine-num {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.6vw, 22px);
  letter-spacing: 0.35em;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.doctrine-word { font-size: clamp(44px, 7.4vw, 128px); letter-spacing: 0.06em; font-weight: 500; }
.doctrine-copy {
  font-size: clamp(13px, 1.05vw, 16px);
  letter-spacing: 0.03em;
  opacity: 0.78;
  max-width: 52ch;
}

/* ---------- act 4 contact ---------- */
.contact-content {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(16px, 2.6svh, 28px);
  text-align: center;
  /* the signature above the mark pushes the whole stack lower */
  padding: clamp(36px, 9svh, 104px) var(--pad-x) 0;
}
.contact-name {
  font-size: clamp(17px, 2vw, 29px);
  opacity: 0;
}
body.reduced .contact-name, body.no-pins .contact-name { opacity: 1; }
#contact-mark { width: clamp(120px, 13vw, 176px); height: auto; }
.contact-links {
  display: flex; gap: clamp(32px, 5vw, 72px);
  margin-top: clamp(8px, 2svh, 18px);
}
.contact-link {
  font-family: var(--font-label);
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--gold-core);
  position: relative;
  padding: 12px 2px;
}
.contact-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px;
  height: 1px; background: var(--gold-gradient);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.6s var(--ease-lux);
}
.contact-link:hover::after, .contact-link:focus-visible::after { transform: scaleX(1); }

#footer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(18px, 3svh, 30px) clamp(20px, 3.2vw, 40px);
}
#footer p {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--bone);
  opacity: 0.42;
}
#sound-toggle {
  color: var(--gold-core);
  opacity: 0.55;
  padding: 10px;
  transition: opacity 0.4s var(--ease-lux);
}
#sound-toggle:hover { opacity: 1; }
#sound-toggle .sound-wave { opacity: 0; transition: opacity 0.3s; }
#sound-toggle .sound-mute { opacity: 1; transition: opacity 0.3s; }
#sound-toggle[aria-pressed="true"] .sound-wave { opacity: 1; }
#sound-toggle[aria-pressed="true"] .sound-mute { opacity: 0; }

/* ---------- reveal defaults (JS animates; these are safe finals) ---------- */
.reveal { opacity: 0; transform: translateY(28px); }
body.no-js .reveal, body.reduced .reveal { opacity: 1; transform: none; }

/* ============================================================
   REDUCED MOTION + NO-PIN (mobile) MODES
   ============================================================ */
body.reduced .pin,
body.no-pins .pin {
  position: relative;
  height: auto;
  min-height: 100svh;
  overflow: visible;
  display: flex; flex-direction: column; justify-content: center;
  gap: 6svh;
  padding: 12svh 0;
}
body.reduced .chapter,
body.no-pins .chapter { height: auto !important; }
body.reduced .stage,
body.no-pins .stage { position: absolute; inset: 0; }
body.reduced .screen,
body.no-pins .screen,
body.reduced .doctrine-beat,
body.no-pins .doctrine-beat,
body.reduced .cold-open-content,
body.no-pins .cold-open-content,
body.reduced .contact-content,
body.no-pins .contact-content {
  position: relative; inset: auto;
  opacity: 1; visibility: visible;
  height: auto;
}
body.reduced .cold-open-content, body.no-pins .cold-open-content { min-height: 88svh; justify-content: center; }
body.reduced .contact-content, body.no-pins .contact-content { min-height: 70svh; }
body.reduced .doctrine-beat, body.no-pins .doctrine-beat { min-height: 62svh; justify-content: center; }
body.reduced .doctrine-kicker, body.no-pins .doctrine-kicker { position: relative; top: auto; left: auto; transform: none; opacity: 1; align-self: center; }
body.reduced #cold-open-mark, body.no-pins #cold-open-mark { opacity: 1; }
body.reduced .cold-open-line, body.no-pins .cold-open-line { opacity: 1; }
body.reduced .scroll-cue, body.no-pins .scroll-cue { opacity: 0.6; }
body.reduced .screen-b, body.no-pins .screen-b { min-height: 44svh; }
body.reduced #footer, body.no-pins #footer { position: relative; margin-top: 8svh; }
body.reduced .line-inner { transform: none !important; }
body.reduced .stat-num { /* counters set instantly by JS */ }

/* static poster stages in reduced mode */
body.reduced .stage-video { opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .stats { grid-template-columns: 1fr; gap: 26px; }
  .dossier-grid { grid-template-columns: 1fr; }
  .lab-row { grid-template-columns: 1fr; gap: 4px; }
  .display { font-size: clamp(34px, 9.4vw, 56px); }
  .doctrine-word { font-size: clamp(40px, 12vw, 72px); }
  .closing-line { font-size: clamp(28px, 7.6vw, 44px); }
  .stat-num { font-size: clamp(48px, 13vw, 72px); }
  .flow-content { padding: 16svh 0 12svh; }
}

@media (hover: none), (pointer: coarse) {
  #cursor-dot, #cursor-ring { display: none; }
  /* mobile: no sound control — the score simply plays */
  #sound-toggle { display: none; }
  #keys-hint { display: none !important; }
  /* no instructional overlays on touch — the story just scrolls */
  .scroll-cue-label { display: none !important; }
}
@media (max-width: 767px) {
  #keys-hint { display: none !important; }
}