/* =========================================================
   2026 — "Telescreen" design system (v0.2)
   Palette from design/VISUAL_DIRECTION.md, AA-checked variants in
   docs/DESIGN_TOKENS.md. Every effect has a static fallback:
   html.js gates initial (hidden/animated) states; reduced motion
   and no-JS readers get final states.
   ========================================================= */

@font-face { font-family: "Oswald"; src: url("../fonts/oswald-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fonts/oswald-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ink: #111111;
  --void: #0B0B0B;
  --screen: #121414;
  --paper: #EEEAE1;
  --paper-deep: #E4DFD3;
  --manila: #D9CFB8;
  --white: #FAFAF7;
  --alert: #C32228;
  --alert-on-ink: #E5484D;
  --slate: #77736C;
  --slate-text: #5E5A54;
  --slate-on-ink: #A8A39A;

  --f-display: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter: clamp(1rem, 4vw, 3.5rem);
  --ease: cubic-bezier(.2,.75,.15,1);
  --ease-snap: cubic-bezier(.7,0,.2,1);
  --hud-h: 3rem;

  --scan: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
  --halftone: radial-gradient(circle, currentColor 1.1px, transparent 1.4px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hud-h); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--void); color: var(--paper);
  font: 400 1.125rem/1.6 var(--f-body); font-kerning: normal;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--alert-on-ink); }
:focus-visible { outline: 3px solid var(--alert-on-ink); outline-offset: 3px; }
::selection { background: var(--alert); color: var(--white); }
p { margin: 0 0 1.1rem; }
cite { font-style: italic; }

.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 200; background: var(--alert); color: var(--white); padding: .7rem 1rem; font: 500 .8rem/1 var(--f-mono); text-decoration: none; }
.skip-link:focus { top: 4rem; color: var(--white); }

/* ---------------- texture layers ---------------- */
.grain {
  position: fixed; inset: -50%; z-index: 150; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: no-preference) {
  .grain { animation: grain 1s steps(6) infinite; }
}
@keyframes grain {
  0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); }
  60% { transform: translate(-1%,3%); } 80% { transform: translate(3%,1%); } 100% { transform: translate(0,0); }
}

.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--alert-on-ink); transform-origin: left; transform: scaleX(var(--progress, 0)); }

/* ---------------- HUD ---------------- */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110; height: var(--hud-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 var(--gutter);
  font: 400 .72rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper);
  background: linear-gradient(rgba(11,11,11,.92), rgba(11,11,11,.7));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(238,234,225,.12);
}
.hud a { text-decoration: none; }
.hud__id b { font: 700 1rem/1 var(--f-display); letter-spacing: .02em; margin-right: .5rem; }
.hud__id span { color: var(--slate-on-ink); }
.hud__nav ol { display: flex; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.hud__nav a { position: relative; display: block; padding: .45rem .55rem; color: var(--slate-on-ink); border: 1px solid transparent; transition: color .2s, border-color .2s, background .2s; }
.hud__nav a:hover { color: var(--paper); border-color: var(--slate); }
.hud__nav a[aria-current="true"] { background: var(--alert); border-color: var(--alert); color: var(--white); }
.hud__nav a::after {
  content: attr(data-label); position: absolute; top: calc(100% + .45rem); left: 50%; transform: translate(-50%, -4px);
  white-space: nowrap; background: var(--paper); color: var(--ink); padding: .35rem .5rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.hud__nav a:hover::after, .hud__nav a:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.hud__readout { margin: 0; display: flex; gap: 1rem; color: var(--slate-on-ink); }
.hud__readout span:last-child { color: var(--alert-on-ink); min-width: 4ch; text-align: right; }
html:not(.js) .hud__readout { display: none; }
@media (max-width: 52rem) { .hud__nav { display: none; } .hud__id span { display: none; } }

/* ---------------- shared atoms ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 500 .78rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  padding: .95rem 1.2rem; border: 1px solid currentColor; background: transparent; color: inherit;
  cursor: pointer; text-decoration: none; position: relative; overflow: hidden;
  transition: color .25s var(--ease), border-color .25s, transform .15s;
}
.btn::before { content: ""; position: absolute; inset: 0; background: var(--alert); transform: translateX(-101%); transition: transform .35s var(--ease); z-index: -1; }
.btn { isolation: isolate; }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover, .btn:focus-visible { color: var(--white); border-color: var(--alert); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--red { background: var(--alert); border-color: var(--alert); color: var(--white); }
.btn--red::before { background: var(--ink); }
.btn--ghost { color: var(--paper); }
.btn--ghost-dark { color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--block { width: 100%; }

.tag {
  display: inline-block; font: 500 .66rem/1.45 var(--f-mono); letter-spacing: .05em; text-transform: uppercase;
  padding: .08rem .38rem; border: 1px solid currentColor; text-decoration: none; vertical-align: .12em;
  color: var(--slate-on-ink); white-space: nowrap; transition: background .2s, color .2s;
}
.tag:hover { background: currentColor; }
.tag:hover { color: var(--alert-on-ink); background: transparent; box-shadow: inset 0 -1.5em 0 rgba(229,72,77,.15); }
.tag--red { color: var(--alert-on-ink); }
.chapter--paper .tag, .chapter--deep .tag { color: var(--slate-text); }
.chapter--paper .tag--red, .chapter--deep .tag--red { color: var(--alert); }

.stamp {
  display: inline-block; font: 700 .8rem/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase;
  padding: .45rem .65rem .4rem; border: 2.5px solid currentColor; transform: rotate(-3deg);
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><filter id='r'><feTurbulence baseFrequency='.55' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 1.9'/></filter><rect width='100%' height='100%' filter='url(%23r)'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><filter id='r'><feTurbulence baseFrequency='.55' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 1.9'/></filter><rect width='100%' height='100%' filter='url(%23r)'/></svg>");
}
.stamp--red { color: var(--alert-on-ink); }
.chapter--paper .stamp--red, .chapter--deep .stamp--red { color: var(--alert); }
.stamp--ink { color: var(--ink); }

.eyebrow { font: 500 .72rem/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--alert-on-ink); margin-bottom: .8rem; }
.chapter--paper .eyebrow, .chapter--deep .eyebrow { color: var(--alert); }
.small { font-size: .92rem; opacity: .8; }
.center { text-align: center; }
.meta { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
.xlat { font: 400 .68rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.lede { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.4; max-width: 36rem; }

.quote { margin: 0; position: relative; }
.quote p {
  margin: 0; font: 700 clamp(2rem, 5.2vw, 3.6rem)/1.02 var(--f-display); text-transform: uppercase; letter-spacing: .005em;
}
.quote::before {
  content: ""; position: absolute; left: -1rem; top: .2em; bottom: .2em; width: 4px; background: var(--alert-on-ink);
}
.quote--ink p { color: var(--ink); }
.quote--ink::before { background: var(--alert); }

/* ---------------- 00 · boot ---------------- */
.boot {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; align-items: center;
  padding: calc(var(--hud-h) + 3rem) var(--gutter) 6rem;
  background: radial-gradient(ellipse 70% 60% at 72% 45%, #1b1d1d 0%, var(--void) 70%);
}
.boot::before { content: ""; position: absolute; inset: 0; background: var(--scan); pointer-events: none; z-index: 1; }
.boot__inner { position: relative; z-index: 3; max-width: 46rem; }

.boot__bands { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.boot__bands i { position: absolute; left: -20%; width: 140%; height: 7vmin; background: var(--alert); transform: rotate(-24deg) translateX(var(--bx, 0)); opacity: .92; }
.boot__bands i:nth-child(1) { top: 72%; }
.boot__bands i:nth-child(2) { top: 82%; height: 2.2vmin; opacity: .7; }
.boot__bands i:nth-child(3) { top: 12%; height: 1.2vmin; opacity: .5; left: 30%; }
.js .boot__bands i { transform: rotate(-24deg) translateX(-130%); transition: transform 1.4s var(--ease-snap); }
.js .is-booted .boot__bands i { transform: rotate(-24deg) translateX(var(--bx, 0)); }
.js .is-booted .boot__bands i:nth-child(2) { transition-delay: .15s; }
.js .is-booted .boot__bands i:nth-child(3) { transition-delay: .3s; }

.eye {
  position: absolute; z-index: 2; right: -8vw; top: 50%; width: min(78vw, 980px); transform: translateY(-50%);
  color: var(--paper); overflow: visible;
}
.eye__rings circle { fill: none; stroke: rgba(238,234,225,.14); stroke-width: 1; stroke-dasharray: 2 6; }
.eye__rings circle:nth-child(2) { stroke-dasharray: 40 10 2 10; stroke: rgba(229,72,77,.35); }
.eye__outline { fill: rgba(238,234,225,.03); stroke: var(--paper); stroke-width: 2.5; }
.eye__irisfill { fill: url(#halftone); color: var(--alert-on-ink); stroke: var(--alert-on-ink); stroke-width: 2; }
.eye__spokes line { stroke: var(--alert-on-ink); stroke-width: 1; opacity: .7; }
.eye__ring2 { fill: none; stroke: var(--paper); stroke-width: 1; stroke-dasharray: 3 4; }
.eye__pupil { fill: var(--void); stroke: var(--paper); stroke-width: 1.5; }
.eye__glint { fill: var(--paper); }
.eye__iris { transform: translate(var(--ex, 0px), var(--ey, 0px)); transition: transform .25s var(--ease); }
.eye__lid { fill: var(--void); transition: transform .12s ease-in; }
.eye__lid--top { transform: translateY(var(--lid-t, -100%)); }
.eye__lid--bot { transform: translateY(var(--lid-b, 100%)); }
.eye.is-blink .eye__lid--top { --lid-t: 0%; }
.eye.is-blink .eye__lid--bot { --lid-b: 0%; }
.js .eye__lid--top { --lid-t: 0%; } .js .eye__lid--bot { --lid-b: 0%; }
.js .is-booted .eye__lid--top { --lid-t: -100%; transition: transform .9s .5s var(--ease); }
.js .is-booted .eye__lid--bot { --lid-b: 100%; transition: transform .9s .5s var(--ease); }
.js .is-booted .eye.is-blink .eye__lid { transition: transform .09s ease-in; }
.js .is-booted .eye.is-blink .eye__lid--top { --lid-t: 0%; }
.js .is-booted .eye.is-blink .eye__lid--bot { --lid-b: 0%; }
@media (prefers-reduced-motion: no-preference) {
  .eye__rings { animation: spin 90s linear infinite; transform-origin: 0 0; }
  .eye__rings circle:nth-child(2) { animation: spin 40s linear infinite reverse; transform-origin: 0 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 52rem) { .eye { right: -30vw; top: 30%; width: 120vw; opacity: .45; } }

.term {
  margin: 0 0 2rem; font: 400 .74rem/1.75 var(--f-mono); letter-spacing: .06em; color: var(--slate-on-ink);
  white-space: pre-wrap;
}
.term span { display: block; }
.js .term span[data-type] { visibility: hidden; }
.js .term span.is-typed { visibility: visible; }
.term span.is-typing::after { content: "▌"; color: var(--alert-on-ink); animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.title {
  margin: 0; font: 700 clamp(7.5rem, 28vw, 24rem)/.76 var(--f-display); letter-spacing: -.04em; display: flex;
}
.title span { display: inline-block; }
.title__b { color: var(--alert-on-ink); }
.js .title span { clip-path: inset(0 0 100% 0); transform: translateY(18%); transition: clip-path 1s var(--ease), transform 1s var(--ease); }
.js .is-booted .title span { clip-path: inset(-5% -5% -5% -5%); transform: none; }
.js .is-booted .title__b { transition-delay: .18s; }

.slogan {
  margin: 1.6rem 0 0; font: 700 clamp(1.5rem, 4.4vw, 3.3rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em;
  display: flex; flex-wrap: wrap; gap: 0 .32em; max-width: 14em;
}
.slogan span { display: inline-block; }
.slogan__red { color: var(--void); background: var(--alert-on-ink); padding: 0 .15em; }
.js .slogan span { opacity: 0; transform: translateY(.6em); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.js .is-booted .slogan span { opacity: 1; transform: none; }
.js .is-booted .slogan span:nth-child(1) { transition-delay: .35s; }
.js .is-booted .slogan span:nth-child(2) { transition-delay: .43s; }
.js .is-booted .slogan span:nth-child(3) { transition-delay: .51s; }
.js .is-booted .slogan span:nth-child(4) { transition-delay: .59s; }
.js .is-booted .slogan span:nth-child(5) { transition-delay: .85s; }

.boot__desc { margin-top: 1.6rem; max-width: 34rem; font-size: 1.05rem; color: rgba(238,234,225,.85); }
.js .boot__desc, .js .redact { opacity: 0; transition: opacity .8s 1s; }
.js .is-booted .boot__desc, .js .is-booted .redact { opacity: 1; }

.redact { margin-top: 2rem; max-width: 34rem; border-top: 1px solid rgba(238,234,225,.2); padding-top: 1.2rem; }
.redact__q { font: 500 .72rem/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--alert-on-ink); margin-bottom: .6rem; }
.redact__a { margin: 0; font-size: 1rem; }
.redact__a span { background: linear-gradient(var(--paper), var(--paper)) no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.js .redact__a span { color: transparent; background-size: 100% 100%; }
.js [data-redact].is-lifted .redact__a span { color: inherit; background-size: 0% 100%; background-position: right; transition: background-size .9s var(--ease-snap), color .3s .5s; }
html:not(.js) .redact__a span { background: none; }
.redact__btn { margin-top: 1rem; }

.scrollcue {
  position: absolute; z-index: 3; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .6rem; text-decoration: none;
  font: 500 .68rem/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--slate-on-ink);
}
.scrollcue i { width: 1px; height: 2.6rem; background: linear-gradient(var(--alert-on-ink), transparent); }
@media (prefers-reduced-motion: no-preference) { .scrollcue i { animation: cue 1.8s var(--ease) infinite; transform-origin: top; } }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------------- chapter shells & openers ---------------- */
.chapter { position: relative; }
.chapter--screen { background: var(--screen); color: var(--paper); }
.chapter--screen::before { content: ""; position: absolute; inset: 0; background: var(--scan); pointer-events: none; }
.chapter--paper { background: var(--paper); color: var(--ink); }
.chapter--deep { background: var(--paper-deep); color: var(--ink); }
.chapter--day { background: var(--void); color: var(--paper); }

.opener {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0 clamp(1rem, 3vw, 2.5rem);
  padding: clamp(5rem, 14vw, 10rem) var(--gutter) clamp(2.5rem, 6vw, 4rem);
}
.opener__num {
  font: 700 clamp(7rem, 24vw, 19rem)/.72 var(--f-display); letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 2px var(--paper); opacity: .9;
}
.chapter--paper .opener__num, .chapter--deep .opener__num { -webkit-text-stroke-color: var(--ink); }
.opener__kicker { font: 500 .72rem/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--alert-on-ink); margin: 0 0 .9rem; }
.chapter--paper .opener__kicker, .chapter--deep .opener__kicker { color: var(--alert); }
.opener__title { margin: 0; font: 700 clamp(2.6rem, 8vw, 6.5rem)/.9 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; }
.opener__band { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--alert); transform-origin: left; }
.chapter--screen .opener__band, .chapter--day .opener__band { background: var(--alert-on-ink); }
.opener::after { /* diagonal constructivist slab */
  content: ""; position: absolute; right: -6%; top: 10%; width: 38%; height: 140%; z-index: -0;
  background-image: var(--halftone); background-size: 9px 9px; color: rgba(195,34,40,.35);
  transform: skewX(-24deg); pointer-events: none;
}
.chapter--screen .opener::after, .chapter--day .opener::after { color: rgba(229,72,77,.22); }
.opener > * { position: relative; z-index: 1; }
.js .opener .opener__num { transform: translateX(-12%); opacity: 0; transition: transform 1.1s var(--ease), opacity .8s; }
.js .opener .opener__title, .js .opener .opener__kicker { clip-path: inset(0 100% 0 0); transition: clip-path 1s .15s var(--ease-snap); }
.js .opener .opener__band { transform: scaleX(0); transition: transform 1.2s .1s var(--ease-snap); }
.js .opener::after { opacity: 0; transform: skewX(-24deg) translateY(10%); transition: opacity 1s .2s, transform 1.4s var(--ease); }
.js .opener.is-in .opener__num { transform: none; opacity: .9; }
.js .opener.is-in .opener__title, .js .opener.is-in .opener__kicker { clip-path: inset(-10% -2% -10% 0); }
.js .opener.is-in .opener__band { transform: scaleX(1); }
.js .opener.is-in::after { opacity: 1; transform: skewX(-24deg); }
@media (max-width: 40rem) { .opener { grid-template-columns: 1fr; } .opener__num { font-size: 7rem; margin-bottom: .5rem; } }

.wrap { max-width: 72rem; margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) var(--gutter) clamp(4rem, 9vw, 8rem); }
.narrow { max-width: 38rem; }

/* ---------------- scrollytelling ---------------- */
.scrolly { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.scrolly__stage { position: sticky; top: var(--hud-h); height: calc(100svh - var(--hud-h)); overflow: hidden; }
.scrolly__steps { position: relative; z-index: 2; padding: 30vh var(--gutter) 40vh; }
.step {
  min-height: 75vh; display: flex; flex-direction: column; justify-content: center; max-width: 30rem;
}
.step > * { position: relative; }
.js .step { opacity: .22; transition: opacity .5s var(--ease); }
.js .step.is-active { opacity: 1; }
.scrolly--right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.scrolly--right .scrolly__stage { order: 2; }
@media (max-width: 52rem) {
  .scrolly, .scrolly--right { grid-template-columns: 1fr; }
  .scrolly__stage { grid-row: 1; grid-column: 1; }
  .scrolly__steps { grid-row: 1; grid-column: 1; padding: 70vh 1rem 50vh; }
  .step { min-height: 90vh; max-width: none; justify-content: flex-end; }
  .step > * { background: rgba(11,11,11,.88); padding: .9rem 1rem; margin: 0; backdrop-filter: blur(4px); }
  .step > * + * { padding-top: 0; }
  .step .quote::before { left: 0; }
  .step .quote p { padding-left: .8rem; }
  .js .step { opacity: 1; }
}
html:not(.js) .scrolly__stage { position: relative; height: 70vh; top: 0; }
html:not(.js) .scrolly { grid-template-columns: 1fr; }
html:not(.js) .scrolly__steps { padding: 3rem var(--gutter); }
html:not(.js) .step { min-height: 0; margin-bottom: 3rem; }

/* ---------------- 01 · day stage ---------------- */
.daystage { position: absolute; inset: 0; perspective: 900px; overflow: hidden; }
.sky { position: absolute; inset: 0; transition: background 1.4s var(--ease); background: linear-gradient(180deg, #0d0f12 0%, #191414 60%, #2a1414 100%); }
.daystage[data-phase="1"] .sky { background: linear-gradient(180deg, #1c2026 0%, #5a2a26 62%, #C32228 100%); }
.daystage[data-phase="2"] .sky { background: linear-gradient(180deg, #8f8b84 0%, #d7d1c4 60%, #EEEAE1 100%); }
.daystage[data-phase="3"] .sky { background: linear-gradient(180deg, #4a4843 0%, #6e6a63 100%); }
.daystage[data-phase="4"] .sky { background: linear-gradient(180deg, #121416 0%, #3a1a1a 70%, #7a1d20 100%); }
.daystage[data-phase="5"] .sky { background: linear-gradient(180deg, #050505 0%, #111 100%); }
.city {
  position: absolute; left: 50%; top: 58%; width: 150%; height: 150%;
  transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-32deg);
  transform-origin: 50% 50%;
}
.unrec {
  position: absolute; inset: 0; display: grid; place-items: start; padding: 7% 6%; opacity: 0; transition: opacity 1s var(--ease);
  background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(229,72,77,.45) 14px 16px);
}
.unrec span { font: 700 clamp(2.5rem, 9vw, 7rem)/1 var(--f-display); text-transform: uppercase; color: var(--void); background: var(--alert-on-ink); padding: .1em .3em; transform: rotate(-8deg); letter-spacing: .02em; }
.daystage[data-phase="3"] .unrec { opacity: 1; }
.dial { position: absolute; left: 50%; top: 50%; width: min(70%, 62vh); transform: translate(-50%, -50%); overflow: visible; }
.dial__face { fill: rgba(11,11,11,.72); stroke: rgba(238,234,225,.4); stroke-width: 1; }
.dial__ticks line { stroke: rgba(238,234,225,.55); stroke-width: 1; }
.dial__ticks line.major { stroke: var(--paper); stroke-width: 2; }
.dial__ticks text { fill: var(--slate-on-ink); font: 500 9px var(--f-mono); text-anchor: middle; dominant-baseline: middle; }
.dial__track { fill: none; stroke: rgba(238,234,225,.1); stroke-width: 18; }
.dial__arc, .dial__hatch { fill: none; stroke-width: 18; transform: rotate(15deg); stroke-dasharray: 458 1000; stroke-dashoffset: 458; transition: stroke-dashoffset 1.6s var(--ease), opacity .8s; }
.dial__arc { stroke: var(--paper); }
.dial__hatch { stroke: url(#hatchpat); opacity: 0; stroke-dashoffset: 0; }
html:not(.js) .dial__arc { stroke-dashoffset: 0; }
.daystage[data-phase="2"] .dial__arc, .daystage[data-phase="3"] .dial__arc, .daystage[data-phase="4"] .dial__arc, .daystage[data-phase="5"] .dial__arc { stroke-dashoffset: 0; }
.daystage[data-phase="2"] .dial__arc { stroke: var(--alert-on-ink); }
.daystage[data-phase="3"] .dial__hatch, .daystage[data-phase="4"] .dial__hatch, .daystage[data-phase="5"] .dial__hatch { opacity: 1; }
.daystage[data-phase="3"] .dial__arc, .daystage[data-phase="4"] .dial__arc, .daystage[data-phase="5"] .dial__arc { stroke: rgba(238,234,225,.25); }
.dial__pin line { stroke: var(--alert-on-ink); stroke-width: 3; }
.dial__pin text { fill: var(--alert-on-ink); font: 500 10px var(--f-mono); letter-spacing: .08em; }
.dial__pin--rec line { stroke: var(--paper); stroke-dasharray: 3 3; }
.dial__pin--rec text { fill: var(--paper); }
.js .dial__pin { opacity: 0; transition: opacity .6s; }
.js .daystage:not([data-phase="0"]) .dial__pin--start { opacity: 1; }
.js .daystage[data-phase="4"] .dial__pin--rec, .js .daystage[data-phase="5"] .dial__pin--rec { opacity: 1; }
.dial__big { fill: var(--paper); font: 700 52px/1 var(--f-display); text-anchor: middle; letter-spacing: .01em; }
.dial__sub { fill: var(--alert-on-ink); font: 500 9px var(--f-mono); letter-spacing: .2em; text-anchor: middle; }
.stamps { position: absolute; right: 6%; bottom: 10%; list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; justify-items: end; }
.stamps li { font: 700 clamp(.8rem, 1.6vw, 1.1rem)/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; padding: .5rem .7rem; border: 2.5px solid var(--paper); color: var(--paper); background: rgba(11,11,11,.6); transform: rotate(-4deg) scale(1.6); opacity: 0; transition: transform .35s var(--ease-snap), opacity .2s; }
.stamps li:nth-child(2) { transform: rotate(3deg) scale(1.6); transition-delay: .15s; }
.stamps li:nth-child(3) { transform: rotate(-2deg) scale(1.6); transition-delay: .3s; }
.daystage[data-phase="3"] .stamps li { opacity: 1; transform: rotate(-4deg); }
.daystage[data-phase="3"] .stamps li:nth-child(2) { transform: rotate(3deg); }
.daystage[data-phase="3"] .stamps li:nth-child(3) { transform: rotate(-2deg); }
html:not(.js) .stamps li { opacity: 1; transform: none; }
.stage__label { position: absolute; left: 1.2rem; bottom: 1rem; margin: 0; font: 500 .62rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); opacity: .6; }
.daystage[data-phase="2"] .stage__label { color: var(--ink); }

/* ---------------- 02 · dispatch ---------------- */
.dispatch {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 6vw, 6rem); align-items: start;
  max-width: 76rem; margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) var(--gutter) clamp(5rem, 10vw, 9rem);
}
.dispatch__copy { max-width: 36rem; }
.dispatch .stamp { margin: .5rem 0 2rem; }
.dispatch__log { list-style: none; margin: 0 0 2.5rem; padding: 1rem 1.1rem; font: 400 .78rem/1.6 var(--f-mono); color: var(--slate-on-ink); border: 1px solid rgba(238,234,225,.15); background: rgba(0,0,0,.3); min-height: 6.2rem; }
.log { opacity: 0; transform: translateX(-6px); animation: logIn .35s var(--ease) forwards; }
.log::before { content: attr(data-t) "  "; color: var(--alert-on-ink); }
.log--sys { color: var(--paper); }
@keyframes logIn { to { opacity: 1; transform: none; } }
html:not(.js) .dispatch__log { display: none; }
.dispatch__reveal { margin-top: 2.5rem; }
.js .dispatch__reveal { display: none; }
.js .dispatch__reveal.is-shown { display: block; animation: rise .8s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }

.phone-wrap { position: sticky; top: calc(var(--hud-h) + 2rem); }
.phone {
  position: relative; width: 300px; height: 600px; border-radius: 42px; overflow: hidden;
  background: #1a1c1c; border: 10px solid #050505; box-shadow: 0 0 0 1px #333, 0 40px 80px -20px rgba(0,0,0,.8), 0 0 120px -40px rgba(229,72,77,.5);
}
.phone__notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 90px; height: 24px; background: #050505; border-radius: 14px; z-index: 6; }
.phone__status { position: absolute; top: 12px; left: 22px; right: 22px; z-index: 5; display: flex; justify-content: space-between; font: 500 .62rem/1 var(--f-mono); color: var(--paper); letter-spacing: .08em; }
.phone__sig { display: flex; gap: 2px; align-items: flex-end; }
.phone__sig i { width: 3px; background: var(--paper); }
.phone__sig i:nth-child(1) { height: 4px; } .phone__sig i:nth-child(2) { height: 6px; } .phone__sig i:nth-child(3) { height: 8px; } .phone__sig i:nth-child(4) { height: 10px; opacity: .3; }
.phone__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.phone__route { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.phone__route path { fill: none; stroke: var(--alert-on-ink); stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; opacity: 0; transition: stroke-dashoffset 1.8s var(--ease), opacity .3s; }
.phone[data-state="route"] .phone__route path, .phone[data-state="end"] .phone__route path { opacity: 1; stroke-dashoffset: 0; }
.phone__car { position: absolute; z-index: 3; width: 16px; height: 16px; margin: -8px 0 0 -8px; left: 50%; top: 82%; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 4px rgba(229,72,77,.6), 0 0 22px var(--alert-on-ink); }
@media (prefers-reduced-motion: no-preference) { .phone__car { animation: ping 1.6s ease-out infinite; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.7), 0 0 22px var(--alert-on-ink); } 100% { box-shadow: 0 0 0 18px rgba(229,72,77,0), 0 0 22px var(--alert-on-ink); } }
.phone__panel {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4; padding: 1.1rem; border-radius: 26px;
  background: var(--paper); color: var(--ink); box-shadow: 0 -10px 40px rgba(0,0,0,.4);
  transform: translateY(115%); transition: transform .55s var(--ease);
}
.phone[data-state="offline"] .phone__panel--offline,
.phone[data-state="request"] .phone__panel--request,
.phone[data-state="route"] .phone__panel--route,
.phone[data-state="end"] .phone__panel--end { transform: none; }
.phone__h { font: 700 1.6rem/1 var(--f-display); text-transform: uppercase; margin: 0 0 .8rem; }
.phone__p { font-size: .95rem; margin-bottom: .9rem; }
.req__ring { position: absolute; top: -26px; right: 18px; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 700 1.1rem/1 var(--f-display); }
.req__ring svg { position: absolute; inset: 4px; transform: rotate(-90deg); }
.req__ring circle { fill: none; stroke: rgba(238,234,225,.2); stroke-width: 3; }
.req__ring .req__ringfg { stroke: var(--alert-on-ink); stroke-dasharray: 100; stroke-dashoffset: var(--ring, 0); transition: stroke-dashoffset 1s linear; }
.req__rows { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0 0 1rem; font: 400 .78rem/1.3 var(--f-mono); }
.req__rows dt { color: var(--slate-text); text-transform: uppercase; letter-spacing: .06em; }
.req__rows dd { margin: 0; background: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(17,17,17,.12) 4px 5px); padding: 0 .3rem; }
.req__btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: .5rem; }
.phone__toast { margin: .8rem 0 0; min-height: 2.6em; font: 500 .72rem/1.35 var(--f-mono); color: var(--alert); text-transform: uppercase; letter-spacing: .04em; }
.phone.is-shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.phone-cap { margin: 1rem 0 0; text-align: center; font: 500 .62rem/1 var(--f-mono); letter-spacing: .16em; color: var(--alert-on-ink); }
html:not(.js) .phone__panel--request { transform: none; }
@media (max-width: 52rem) {
  .dispatch { grid-template-columns: 1fr; }
  .phone-wrap { position: relative; top: 0; justify-self: center; grid-row: 2; }
  .phone { width: 280px; height: 540px; }
}

/* ---------------- 03 · score ---------------- */
.slots {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 3rem 0 1rem;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  box-shadow: 12px 12px 0 var(--alert);
}
.slots::before { content: ""; position: absolute; inset: 0; background: var(--scan); pointer-events: none; }
.slot { padding: 1.4rem 1.2rem 1.2rem; border-right: 1px solid rgba(238,234,225,.15); }
.slot:nth-child(3) { border-right: 0; }
.slot__k { font: 500 .68rem/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--slate-on-ink); margin: 0; }
.slot__v { margin: .6rem 0 .4rem; font: 700 clamp(3rem, 8vw, 6rem)/1 var(--f-display); font-variant-numeric: tabular-nums; color: var(--paper); min-height: 1em; }
.slot__v.is-rolling { color: var(--alert-on-ink); filter: blur(.4px); }
.slot__s { margin: 0; font: 500 .7rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--alert-on-ink); }
.js .slot__s { opacity: 0; transition: opacity .4s; }
.js .slots.is-done .slot__s { opacity: 1; }
.slots__verdict { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); pointer-events: none; }
.slots__verdict .stamp { font-size: clamp(.9rem, 2.4vw, 1.6rem); background: rgba(250,250,247,.92); color: var(--alert); transform: rotate(-6deg); white-space: nowrap; }
.js .slots__verdict { opacity: 0; transform: translate(-50%, -50%) scale(2.6); transition: transform .35s var(--ease-snap), opacity .15s; }
.js .slots.is-done .slots__verdict { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.js .slots.is-done { animation: thud .35s .2s; }
@keyframes thud { 40% { transform: translate(2px, 3px); } }
@media (max-width: 40rem) {
  .slots { grid-template-columns: 1fr; }
  .slot { border-right: 0; border-bottom: 1px solid rgba(238,234,225,.15); display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .slot__v { grid-row: span 2; grid-column: 2; font-size: 3rem; margin: 0; }
  .slot__s { grid-column: 1; }
}

.cut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; margin: clamp(5rem, 10vw, 8rem) 0; }
.cut__copy .quote { margin-left: 1rem; }
@media (max-width: 52rem) { .cut { grid-template-columns: 1fr; } }
.tickets { display: grid; gap: .55rem; }
.ticket {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem;
  height: 2.6rem; padding: 0 .9rem; background: var(--white); border: 1px solid var(--ink);
  font: 500 .7rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  -webkit-mask: radial-gradient(circle 6px at 0 50%, transparent 98%, #000) , radial-gradient(circle 6px at 100% 50%, transparent 98%, #000);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.ticket__bar { height: 1px; border-top: 1.5px dashed var(--slate); }
.ticket__cut {
  position: absolute; right: 0; top: 0; bottom: 0; width: var(--cw, 18%); display: grid; place-items: center;
  background: repeating-linear-gradient(-45deg, var(--alert) 0 3px, transparent 3px 7px); color: var(--white); border-left: 2px solid var(--alert);
  font: 700 1.1rem/1 var(--f-display);
}
.ticket__cut b { background: var(--alert); padding: .1rem .4rem; }
@media (prefers-reduced-motion: no-preference) {
  .ticket__cut { animation: wobble var(--dur, 3.2s) ease-in-out infinite alternate; animation-delay: var(--del, 0s); }
}
@keyframes wobble { from { width: 8%; } to { width: 42%; } }
.js .ticket { opacity: 0; transform: translateX(-30px); transition: opacity .4s, transform .5s var(--ease); }
.js .tickets.is-in .ticket { opacity: 1; transform: none; }
.tickets__cap { margin: .4rem 0 0; font: 500 .66rem/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--alert); }

.dossier { margin-top: clamp(4rem, 8vw, 6rem); }
.dossier__tabs { display: none; }
.js .dossier__tabs { display: flex; gap: .35rem; padding-left: 1.2rem; }
.dossier__tabs button {
  font: 500 .72rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; text-align: left; cursor: pointer;
  padding: .75rem 1rem .65rem; border: 1px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0;
  background: var(--paper-deep); color: var(--ink); transform: translateY(6px); transition: transform .25s var(--ease), background .2s;
}
.dossier__tabs button span { display: inline-block; font: 700 .9rem/1 var(--f-display); color: var(--alert); margin-right: .45rem; }
.dossier__tabs button:hover { transform: translateY(2px); }
.dossier__tabs button[aria-selected="true"] { background: var(--manila); transform: translateY(1px); }
.dossier__sheet {
  position: relative; background: var(--manila); border: 1px solid var(--ink); padding: clamp(1.4rem, 4vw, 2.6rem); min-height: 18rem;
  box-shadow: 8px 8px 0 rgba(17,17,17,.9);
}
.dossier__panel { position: relative; background: var(--white); padding: 1.6rem 1.6rem 2.4rem; background-image: repeating-linear-gradient(transparent 0 1.85rem, rgba(17,17,17,.08) 1.85rem calc(1.85rem + 1px)); }
.dossier__panel + .dossier__panel { margin-top: 1.2rem; }
.js .dossier__panel + .dossier__panel { margin-top: 0; }
.js .dossier__panel:not([hidden]) { animation: sheetIn .45s var(--ease); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(14px) rotate(-.6deg); } }
.dossier__panel h3 { margin: 0 0 1rem; font: 700 1.5rem/1 var(--f-display); text-transform: uppercase; }
.dossier__panel ul { padding-left: 1.1rem; margin: 0 0 1rem; }
.dossier__panel li { margin-bottom: .6rem; }
.redlist li::marker { color: var(--alert); content: "■  "; }
.dossier__stamp { position: absolute; right: 1.2rem; bottom: 1rem; font-size: 1rem; }
@media (max-width: 40rem) { .js .dossier__tabs { flex-wrap: wrap; padding-left: 0; } .dossier__tabs button { flex: 1 1 45%; border-radius: 8px 8px 0 0; } }

/* ---------------- 04 · voices ---------------- */
.voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2rem); margin: 3rem 0 1rem; perspective: 1400px; }
.voice {
  position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; cursor: pointer; color: inherit; font: inherit; text-align: left;
  transform-style: preserve-3d; transition: transform .8s var(--ease);
}
.voice:hover { transform: translateY(-6px) rotateY(6deg); }
.voice[aria-pressed="true"] { transform: rotateY(180deg); }
.voice__front, .voice__back {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1.5px solid var(--ink); overflow: hidden;
}
.voice__front { background: var(--white); display: flex; flex-direction: column; }
.voice__back { background: var(--ink); color: var(--paper); transform: rotateY(180deg); padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; font-size: 1.15rem; line-height: 1.35; }
.voice__back b { font: 700 clamp(2rem, 4.5vw, 3.2rem)/1 var(--f-display); text-transform: uppercase; color: var(--alert-on-ink); margin-bottom: .7rem; display: block; }
.voice__label { padding: .7rem .9rem; border-top: 1.5px solid var(--ink); font: 500 .7rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; display: flex; justify-content: space-between; }
.voice__label::after { content: "Turn ↻"; color: var(--alert); }
.voice__fig { flex: 1; position: relative; overflow: hidden; }
.voice__fig::before { /* faceless silhouette, filled with halftone */
  content: ""; position: absolute; inset: 0;
  -webkit-mask: radial-gradient(circle at 50% 36%, #000 18%, transparent 18.5%), radial-gradient(ellipse 40% 34% at 50% 100%, #000 99%, transparent 100%);
  mask: radial-gradient(circle at 50% 36%, #000 18%, transparent 18.5%), radial-gradient(ellipse 40% 34% at 50% 100%, #000 99%, transparent 100%);
}
.voice__fig--a { background: var(--alert); }
.voice__fig--a::before { background: radial-gradient(circle, var(--ink) 2.2px, transparent 2.6px) 0 0 / 8px 8px; }
.voice__fig--b { background: var(--paper-deep); }
.voice__fig--b::before { background: repeating-linear-gradient(0deg, var(--ink) 0 2px, transparent 2px 6px); }
.voice__fig--c { background: var(--ink); }
.voice__fig--c::before { background: radial-gradient(circle, var(--paper) 1.6px, transparent 2px) 0 0 / 7px 7px; }
.voice__fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 60%, rgba(0,0,0,.08)); }
html:not(.js) .voice { aspect-ratio: auto; transform: none !important; }
html:not(.js) .voice__front, html:not(.js) .voice__back { position: relative; transform: none; backface-visibility: visible; }
html:not(.js) .voice__fig { height: 12rem; }
@media (max-width: 46rem) { .voices { grid-template-columns: 1fr 1fr; } .voice:last-child { grid-column: span 2; aspect-ratio: 3 / 2; } }
@media (max-width: 30rem) { .voices { grid-template-columns: 1fr; } .voice, .voice:last-child { grid-column: auto; aspect-ratio: 4 / 3; } }

.why { margin-top: clamp(4rem, 8vw, 6rem); }
.why__chips { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: .8rem; }
.why__chips li {
  font: 700 clamp(1.3rem, 3.4vw, 2.2rem)/1 var(--f-display); text-transform: uppercase; padding: .6rem 1rem .5rem; border: 2px solid var(--ink); background: var(--white);
  transition: background .3s, color .3s, transform .3s var(--ease);
}
.why__chips li:hover { background: var(--ink); color: var(--paper); transform: rotate(-2deg); }
.js .why__chips li { opacity: 0; transform: translateY(20px) rotate(4deg); }
.js .why.is-in .why__chips li { opacity: 1; transform: none; transition: opacity .5s, transform .7s var(--ease); }
.js .why.is-in .why__chips li:nth-child(2) { transition-delay: .12s; }
.js .why.is-in .why__chips li:nth-child(3) { transition-delay: .24s; }

.verdict { margin-top: 3.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.verdict__out { margin: 0; max-width: 34rem; font: 500 .85rem/1.5 var(--f-mono); color: var(--alert); text-transform: uppercase; letter-spacing: .03em; }
.js .verdict__out:empty { display: none; }
.closing-q { margin-top: 3.5rem; font: 700 clamp(1.6rem, 4vw, 2.8rem)/1.08 var(--f-display); text-transform: uppercase; max-width: 22em; }
.closing-q em { font-style: normal; color: var(--alert); }

/* ---------------- 05 · centaur ---------------- */
.cen { width: 100%; height: 100%; color: var(--paper); }
.cen text { font: 500 11px var(--f-mono); letter-spacing: .14em; fill: currentColor; text-anchor: middle; }
.cen__grid { color: rgba(238,234,225,.06); transition: color .8s; }
.cen[data-phase="1"] .cen__grid { color: rgba(229,72,77,.22); }
.cen__human, .cen__machine { transition: transform 1.1s var(--ease); }
.cen__human circle, .cen__human path { fill: var(--paper); }
.cen__human text, .cen__machine text { font-size: 10px; }
.cen__machine rect { fill: none; stroke: var(--alert-on-ink); stroke-width: 2.5; }
.cen__machine path { stroke: var(--alert-on-ink); stroke-width: 1; fill: none; }
.cen__machine text { fill: var(--alert-on-ink); }
.cen__human { transform: translate(110px, 205px) scale(1.5); }
.cen__machine { transform: translate(300px, 205px) scale(.75); }
.cen[data-phase="1"] .cen__human { transform: translate(300px, 215px) scale(.7); }
.cen[data-phase="1"] .cen__machine { transform: translate(110px, 200px) scale(1.7); }
.cen[data-phase="2"] .cen__human { transform: translate(150px, 205px) scale(1.05); }
.cen[data-phase="2"] .cen__machine { transform: translate(250px, 205px) scale(1.05); }
.cen[data-phase="3"] .cen__human { transform: translate(140px, 205px) scale(1.15); }
.cen[data-phase="3"] .cen__machine { transform: translate(260px, 205px) scale(1.15); }
.cen__arrows path { fill: none; stroke: currentColor; stroke-width: 2; transition: d .9s var(--ease), stroke .5s, opacity .5s; }
.cen__arrows { color: var(--paper); }
.cen[data-phase="1"] .cen__arrows { color: var(--alert-on-ink); }
.cen[data-phase="3"] .cen__arrows path { stroke-dasharray: 5 5; }
.cen__mind ellipse { fill: none; stroke: var(--paper); stroke-width: 1.5; stroke-dasharray: 4 6; transform-origin: 200px 200px; transform: scale(.4); opacity: 0; transition: transform 1.1s var(--ease), opacity .6s; }
.cen__mind text { opacity: 0; transition: opacity .6s .3s; font-size: 10px; }
.cen[data-phase="2"] .cen__mind ellipse { transform: scaleX(1.95) scaleY(1.4); opacity: 1; }
.cen[data-phase="2"] .cen__mind text { opacity: 1; }
.cen__title { font: 700 34px var(--f-display) !important; letter-spacing: .04em !important; }
.cen[data-phase="1"] .cen__title { fill: var(--alert-on-ink); }
html:not(.js) .scrolly--right .scrolly__stage { height: 60vh; }
@media (max-width: 52rem) { .scrolly--right .cen { height: auto; margin-top: 1rem; } }

/* ---------------- 06 · files ---------------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2.5rem 0 1rem; }
.filters button { font: 500 .72rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: .6rem .9rem; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; border-radius: 99px; transition: background .2s, color .2s; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.desk {
  list-style: none; margin: 2rem 0 1rem; padding: clamp(1.5rem, 4vw, 3rem);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: clamp(1rem, 2.5vw, 1.8rem);
  background: #2a2724; border-radius: 4px;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 9px), linear-gradient(#2e2a27, #242120);
  box-shadow: inset 0 0 80px rgba(0,0,0,.5);
}
.file { --r: -1.5deg; transition: transform .45s var(--ease), opacity .4s, filter .4s; scroll-margin-top: 5rem; }
.file:nth-child(3n+2) { --r: 1.8deg; } .file:nth-child(3n) { --r: -.6deg; } .file:nth-child(4n) { --r: 2.4deg; }
.file article {
  height: 100%; padding: 1.1rem 1.1rem 1.2rem; background: var(--white); color: var(--ink); transform: rotate(var(--r));
  box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 14px 26px -10px rgba(0,0,0,.65); position: relative; transition: transform .35s var(--ease), box-shadow .35s;
  background-image: linear-gradient(90deg, transparent 2.1rem, rgba(195,34,40,.25) 2.1rem, rgba(195,34,40,.25) calc(2.1rem + 1px), transparent calc(2.1rem + 1px));
}
.file article::before { content: ""; position: absolute; top: -10px; left: 50%; width: 46px; height: 18px; transform: translateX(-50%) rotate(-3deg); background: rgba(217,207,184,.85); }
.file:hover article, .file:target article, .file:focus-within article { transform: rotate(0) scale(1.03); box-shadow: 0 30px 50px -16px rgba(0,0,0,.8); }
.file:target article { outline: 3px solid var(--alert); }
.file header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .9rem; }
.file__id { font: 700 1.6rem/1 var(--f-display); }
.file .stamp { font-size: .62rem; }
.file__q { font: 700 1.3rem/1.1 var(--f-display); text-transform: uppercase; margin-bottom: 1rem; }
.file dl { margin: 0; display: grid; gap: .1rem; font: 400 .74rem/1.45 var(--f-mono); }
.file dt { color: var(--slate-text); text-transform: uppercase; letter-spacing: .08em; font-size: .64rem; margin-top: .45rem; }
.file dd { margin: 0; }
.file.is-dim { opacity: .18; filter: grayscale(1); transform: scale(.96); }
.js .file { opacity: 0; transform: translateY(-40px) rotate(8deg); }
.js .desk.is-in .file { opacity: 1; transform: none; }
.js .desk.is-in .file.is-dim { opacity: .18; transform: scale(.96); }
.js .desk.is-in .file:nth-child(2) { transition-delay: .07s; } .js .desk.is-in .file:nth-child(3) { transition-delay: .14s; }
.js .desk.is-in .file:nth-child(4) { transition-delay: .21s; } .js .desk.is-in .file:nth-child(5) { transition-delay: .28s; }
.js .desk.is-in .file:nth-child(6) { transition-delay: .35s; } .js .desk.is-in .file:nth-child(7) { transition-delay: .42s; }

.drawers { margin-top: 3rem; display: grid; gap: .7rem; }
.drawer { border: 1.5px solid var(--ink); background: var(--white); transition: box-shadow .3s; }
.drawer[open] { box-shadow: 8px 8px 0 var(--alert); }
.drawer summary { list-style: none; cursor: pointer; padding: 1.05rem 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font: 700 1.15rem/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after { content: "+"; font: 400 1.4rem/1 var(--f-mono); color: var(--alert); transition: transform .3s var(--ease); }
.drawer[open] summary::after { transform: rotate(45deg); }
.drawer summary:hover { background: var(--paper); }
.drawer__body { padding: .4rem 1.2rem 1.4rem; font-size: 1rem; border-top: 1px dashed var(--slate); }
.drawer[open] .drawer__body { animation: rise .45s var(--ease); }
.drawer__body dl { margin: .8rem 0; display: grid; grid-template-columns: 7rem 1fr; gap: .6rem 1rem; }
.drawer__body dt { font: 500 .78rem/1.6 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--alert); }
.drawer__body dd { margin: 0; }
.drawer__body ol, .drawer__body ul { padding-left: 1.2rem; margin: .8rem 0; }
.drawer__body li { margin-bottom: .55rem; }
@media (max-width: 34rem) { .drawer__body dl { grid-template-columns: 1fr; gap: .1rem; } .drawer__body dd { margin-bottom: .6rem; } }

.finale { background: var(--void); color: var(--paper); padding: clamp(5rem, 12vw, 9rem) var(--gutter); display: grid; justify-items: center; gap: 2rem; text-align: center; position: relative; overflow: hidden; }
.finale::before { content: ""; position: absolute; inset: 0; background: var(--scan); }
.finale__eye { width: min(80vw, 520px); position: relative; }
.finale__iris { fill: url(#halftone); color: var(--alert-on-ink); stroke: var(--alert-on-ink); stroke-width: 2; }
.finale__pupil { fill: var(--void); stroke: var(--paper); }
.finale__outline { fill: none; stroke: var(--paper); stroke-width: 3; }
.finale__lid { fill: var(--void); transition: transform 1.6s .3s var(--ease-snap); }
.finale__lid--t { transform: translateY(-100%); } .finale__lid--b { transform: translateY(100%); }
.finale.is-in .finale__lid { transform: none; }
.finale__seam { fill: none; stroke: var(--paper); stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity .4s 1.7s; }
.finale.is-in .finale__seam { opacity: 1; }
html:not(.js) .finale__seam { opacity: 0; }
.finale__line { position: relative; margin: 0; font: 700 clamp(2.4rem, 8vw, 6rem)/.95 var(--f-display); text-transform: uppercase; }
.js .finale__line { opacity: 0; letter-spacing: .3em; transition: opacity 1s 1.6s, letter-spacing 1.6s 1.4s var(--ease); }
.js .finale.is-in .finale__line { opacity: 1; letter-spacing: 0; }

.colophon { background: var(--void); color: var(--slate-on-ink); padding: 2rem var(--gutter) 3rem; font: 400 .76rem/1.6 var(--f-mono); border-top: 1px solid rgba(238,234,225,.12); display: grid; gap: .5rem; }
.colophon p { margin: 0; max-width: 60rem; }
.colophon b { color: var(--paper); }

/* ---------------- motion & media fallbacks ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}
@media print {
  .hud, .grain, .progress, .scrollcue, .eye, .phone-wrap, .filters, .verdict { display: none !important; }
  body, .chapter--screen, .chapter--day, .boot, .finale { background: #fff !important; color: #000 !important; }
  .js .step, .js .file, .js .dispatch__reveal { opacity: 1 !important; display: block !important; transform: none !important; }
  .js .dossier__panel[hidden] { display: block !important; }
}
.filters[hidden] { display: none; }