/* ═══════════════════════════════════════════════════════════════
   THE CHEATER FILES — styles
   Lane: "2 A.M. surveillance war-room" — cobalt noir, paper evidence,
   highlighter tags, red reserved for stamps & verdicts.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* palette — see DESIGN.md */
  --bg:        oklch(0.145 0.024 244);
  --bg-deep:   oklch(0.110 0.020 244);
  --surface:   oklch(0.190 0.028 244);
  --surface-2: oklch(0.230 0.030 244);
  --line:      oklch(0.340 0.030 244);
  --ink:       oklch(0.955 0.006 244);
  --muted:     oklch(0.790 0.018 244);
  --dim:       oklch(0.670 0.020 244);
  --red:       oklch(0.600 0.215 27);
  --red-bright:oklch(0.670 0.210 27);
  --red-deep:  oklch(0.430 0.160 27);
  --tag:       oklch(0.860 0.155 92);
  --tag-ink:   oklch(0.280 0.060 92);
  --paper:     oklch(0.965 0.012 95);
  --paper-2:   oklch(0.920 0.020 95);
  --paper-ink: oklch(0.240 0.020 260);
  --paper-dim: oklch(0.440 0.020 260);
  --blue:      oklch(0.660 0.110 244);
  --bubble-out:oklch(0.520 0.170 262);
  --wood:      oklch(0.560 0.090 65);
  --wood-deep: oklch(0.400 0.070 65);

  --f-display: 'Staatliches', 'Arial Narrow', Impact, sans-serif;
  --f-mono: 'Courier Prime', 'Courier New', monospace;
  --f-body: 'Archivo', system-ui, 'Segoe UI', sans-serif;
  --f-sys: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* z scale */
  --z-hud: 10; --z-chip: 30; --z-toast: 60; --z-loader: 80;

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");

  --gutter: clamp(1.2rem, 5vw, 3rem);
  --measure: 68ch;
}

/* ── base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
html.js body:not(.is-loaded) { overflow: hidden; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--blue); text-underline-offset: .2em; }
a:hover { color: var(--ink); }
::selection { background: var(--red); color: white; }
:focus-visible { outline: 2px solid var(--tag); outline-offset: 3px; border-radius: 2px; }
button { font: inherit; color: inherit; }

/* film grain over everything (decorative, non-interactive) */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 5;
  background: var(--noise); background-size: 140px;
  opacity: .05; pointer-events: none;
}

.skip-link {
  position: fixed; top: .6rem; left: 50%; translate: -50% 0; z-index: var(--z-toast);
  background: var(--tag); color: var(--tag-ink); font-family: var(--f-mono);
  padding: .5rem .9rem; border-radius: .3rem; transform: translateY(-300%);
  transition: transform .25s;
}
.skip-link:focus { transform: translateY(0); }

.dim { color: var(--dim); }
.red-note { color: var(--red-bright); font-style: normal; }

/* dotted leaders (tally, receipts, sentencing) */
.dots, .t-dots { flex: 1 1 1rem; min-width: 1rem; border-bottom: 2px dotted color-mix(in oklab, currentColor 45%, transparent); translate: 0 -.28em; }

/* ── buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-block; font-family: var(--f-display); font-size: 1.15rem;
  letter-spacing: .09em; text-decoration: none; cursor: pointer;
  padding: .8rem 1.6rem .68rem; border-radius: .35rem; border: 2px solid transparent;
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, border-color .18s, color .18s;
}
.btn-red {
  background: var(--red); color: white;
  box-shadow: 0 .34rem 0 var(--red-deep);
}
.btn-red:hover { transform: translateY(-2px); box-shadow: 0 .48rem 0 var(--red-deep); color: white; }
.btn-red:active { transform: translateY(.22rem); box-shadow: 0 .1rem 0 var(--red-deep); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--red-bright); color: var(--red-bright); }

/* ── stamps ──────────────────────────────────────────────────── */
.stamp {
  position: relative; display: inline-block;
  font-family: var(--f-display); color: var(--red-bright);
  border: .13em solid currentColor; border-radius: .12em;
  padding: .1em .38em .01em; letter-spacing: .07em; line-height: 1.05;
  transform: rotate(-9deg);
  text-shadow: .035em .03em 0 color-mix(in oklab, var(--red-bright) 45%, transparent);
  user-select: none;
}
.stamp::before {
  content: ''; position: absolute; inset: .12em; border-radius: inherit;
  border: .045em solid currentColor; opacity: .5; pointer-events: none;
}
/* slams onto the footage panel (lives inside .hero-shot) */
.stamp-hero {
  position: absolute; left: -9%; top: 7%; z-index: 2;
  font-size: clamp(2.4rem, 3.2vw, 4.6rem); transform: rotate(-13deg);
}
.stamp-lie { font-size: 1.55rem; transform: rotate(-6deg); margin-bottom: .9rem; }
.stamp-guilty { font-size: clamp(3rem, 9vw, 6rem); transform: rotate(-13deg); }

/* ── fixed chrome ────────────────────────────────────────────── */
.progress-line { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: var(--z-chip); background: color-mix(in oklab, var(--line) 40%, transparent); }
.progress-line i { display: block; height: 100%; background: var(--red-bright); transform: scaleX(0); transform-origin: 0 50%; }

.case-chip {
  position: fixed; top: .95rem; left: .95rem; z-index: var(--z-chip);
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .16em;
  color: var(--muted); border: 1px solid var(--line); border-radius: 2rem;
  padding: .4rem .85rem .36rem; background: color-mix(in oklab, var(--bg) 72%, transparent);
}
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red-bright); animation: blink 1.6s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: .15; } }
html.js body:not(.is-loaded) .case-chip,
html.js body:not(.is-loaded) .progress-line { visibility: hidden; }

.toast {
  position: fixed; left: 50%; bottom: 1.4rem; translate: -50% 0; z-index: var(--z-toast);
  background: var(--paper); color: var(--paper-ink); font-family: var(--f-mono); font-size: .88rem;
  padding: .62rem 1.1rem; border-radius: .4rem; box-shadow: 0 10px 30px oklch(0 0 0 / .45);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ── loader ──────────────────────────────────────────────────── */
html.no-js #loader { display: none; }
#loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  background: var(--bg-deep); display: grid; place-items: center;
  transition: clip-path .75s cubic-bezier(.76,0,.24,1);
  clip-path: inset(0 0 0 0);
}
#loader.done { clip-path: inset(0 0 100% 0); }
#loader.gone { display: none; }
.loader-inner { text-align: center; font-family: var(--f-mono); }
.loader-label { font-size: .72rem; letter-spacing: .22em; color: var(--dim); }
.loader-status { margin-top: 1.6rem; font-size: .95rem; color: var(--red-bright); letter-spacing: .1em; }
.loader-dots i { animation: blink 1s steps(2, start) infinite; }
.loader-dots i:nth-child(2) { animation-delay: .2s; }
.loader-dots i:nth-child(3) { animation-delay: .4s; }
.loader-bar { width: min(420px, 72vw); height: 12px; border: 1px solid var(--line); margin: 1.1rem auto 0; padding: 2px; }
.loader-bar i { display: block; height: 100%; width: 0%; background: var(--red); transition: width .25s linear; }
.loader-pct { font-family: var(--f-display); font-size: 2.3rem; margin-top: .9rem; letter-spacing: .05em; }

/* ── layout shells ───────────────────────────────────────────── */
section { padding-block: clamp(2.75rem, 6vh, 4.75rem); }
.hero { padding-block: 0; }
/* desktop: enlarge everything ~7% so nobody squints, and give the content
   columns a touch more room. rem-based sizes/spacing scale together. */
@media (min-width: 1100px) { :root { font-size: 17px; } }
@media (min-width: 1500px) { :root { font-size: 17.5px; } }
.suspect, .incident, .lies, .receipts, .board, .verdict { position: relative; }
.suspect, .incident, .lies, .receipts, .board {
  max-width: 76rem; margin-inline: auto; padding-inline: var(--gutter);
}
/* the receipts run near-full-bleed so the five chat screenshots are large */
.receipts { max-width: 100rem; }
@media (min-width: 1180px) { .receipts { max-width: min(140rem, 96vw); } }

/* exhibit header — the named kicker system (a literal case file) */
.ex-head { margin-bottom: clamp(1.6rem, 3.5vh, 2.6rem); }
.ex-tag {
  position: relative; display: inline-block;
  font-family: var(--f-mono); font-weight: 700; font-size: .8rem; letter-spacing: .16em;
  background: var(--tag); color: var(--tag-ink);
  padding: .5rem .95rem .44rem 1.7rem; transform: rotate(-2deg);
  clip-path: polygon(0 50%, 9% 0, 100% 0, 100% 100%, 9% 100%);
}
.ex-tag::before {
  content: ''; position: absolute; left: .72rem; top: 50%; translate: 0 -50%;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--tag-ink) 50%, transparent);
}
.ex-tag--red { background: var(--red); color: white; }
.ex-tag--red::before { box-shadow: inset 0 0 0 1.5px oklch(1 0 0 / .55); }
.ex-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.3rem, 6vw, 4.2rem); letter-spacing: .02em; line-height: 1; margin-top: 1.1rem; }
.ex-title:first-child { margin-top: 0; }  /* sections with no exhibit tag (The Suspect) */
.ex-note { font-family: var(--f-mono); color: var(--muted); font-size: 1.02rem; margin-top: .8rem; max-width: 54ch; }

/* ── hero ────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100svh; display: flex; overflow: clip; background: radial-gradient(120% 90% at 50% 0%, oklch(0.185 0.032 250) 0%, var(--bg) 55%, var(--bg-deep) 100%); }
/* scanlines + vignette */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, oklch(1 0 0 / .028) 0 1px, transparent 1px 4px),
    radial-gradient(130% 100% at 50% 50%, transparent 55%, oklch(0.06 0.015 244 / .8) 100%);
}
/* slow searchlight sweep */
.hero::after {
  content: ''; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(38rem 30rem at 30% 36%, oklch(0.52 0.09 250 / .16), transparent 65%);
  animation: sweep 22s ease-in-out infinite alternate;
}
@keyframes sweep { to { transform: translate(22%, 10%); } }

/* the footage: suspect on camera, graded like a night recording */
.hero-shot {
  position: relative; z-index: 0; justify-self: end;
  width: 100%; max-width: 52rem; rotate: 1.5deg;
  box-shadow: 0 30px 80px oklch(0 0 0 / .55);
}
/* the photo now paints above .hero::before, so it carries its own footage texture */
.shot-scan {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, oklch(1 0 0 / .05) 0 1px, transparent 1px 4px),
    radial-gradient(125% 100% at 50% 50%, transparent 52%, oklch(0.06 0.015 244 / .6) 100%);
}
.hero-shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border: 1px solid color-mix(in oklab, var(--ink) 22%, transparent);
  filter: saturate(.8) contrast(1.07) brightness(.9);
}
.hero-hud {
  position: absolute; inset: 0; z-index: var(--z-hud); pointer-events: none;
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .18em; color: var(--muted);
}
.hud-rec { position: absolute; top: 1.15rem; right: 1.3rem; display: inline-flex; align-items: center; gap: .45rem; color: var(--red-bright); font-weight: 700; }
.hud-rec i { width: .62rem; height: .62rem; border-radius: 50%; background: var(--red-bright); animation: blink 1.1s steps(2, start) infinite; }
.hud-time { position: absolute; bottom: 4.2rem; right: 1.3rem; font-variant-numeric: tabular-nums; }
.hud-cam { position: absolute; bottom: 4.2rem; left: 1.3rem; }
.hud-q { position: absolute; top: 1.2rem; left: 50%; translate: -50% 0; font-size: .66rem; opacity: .8; }
.hud-corner { position: absolute; width: 22px; height: 22px; border: 0 solid color-mix(in oklab, var(--ink) 38%, transparent); }
.c-tl { top: .95rem; left: .95rem; border-top-width: 2px; border-left-width: 2px; }
.c-tr { top: .95rem; right: .95rem; border-top-width: 2px; border-right-width: 2px; }
.c-bl { bottom: 4rem; left: .95rem; border-bottom-width: 2px; border-left-width: 2px; }
.c-br { bottom: 4rem; right: .95rem; border-bottom-width: 2px; border-right-width: 2px; }

/* one centered unit: copy + footage share the same container, so they never
   drift apart on ultra-wide screens (the old absolute-to-viewport bug) */
.hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 112rem; margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(2rem, 3.4vw, 4.5rem);
  padding-top: 9vh; padding-bottom: 14vh;
}
.hero-copy { min-width: 0; }
.hero-kicker { font-family: var(--f-mono); color: var(--red-bright); font-size: .96rem; letter-spacing: .14em; margin-bottom: 2rem; min-height: 1.4em; }
.typed { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; }
html.js .typed::after { content: '▌'; animation: blink .9s steps(2, start) infinite; margin-left: .1em; }
.typed.type-done::after { content: ''; }

.hero-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(3.4rem, 6.2vw, 7.5rem);
  line-height: .96; letter-spacing: .015em;
}
.hero-title .line { display: block; overflow: clip; }
.hero-title .line-in { display: block; }
.hero-title em { font-style: normal; color: var(--red-bright); }

.hero-title, .hero-sub, .hero-kicker { text-shadow: 0 2px 22px oklch(0.11 0.02 244 / .9); }
.hero-sub { margin-top: 2.2rem; color: var(--muted); font-size: 1.18rem; max-width: 44ch; }
.hero-cta { margin-top: 2.8rem; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.hero-cta .btn { font-size: 1.38rem; padding: .95rem 2.1rem .8rem; }
.hero-hint { font-family: var(--f-mono); font-size: .82rem; color: var(--dim); letter-spacing: .1em; }

.ticker {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3rem;
  border-top: 1px solid var(--line); background: color-mix(in oklab, var(--bg-deep) 88%, transparent);
  display: flex; align-items: center; overflow-x: clip;
}
.ticker-track { display: flex; width: max-content; will-change: transform; }
.tk-group { display: flex; gap: 2.6rem; padding-right: 2.6rem; flex: none; }
.tk-group span { font-family: var(--f-mono); font-size: .84rem; letter-spacing: .12em; color: var(--red-bright); white-space: nowrap; }
.tk-group span::after { content: '·'; margin-left: 2.6rem; color: var(--line); }

/* ── exhibit A: suspect ──────────────────────────────────────── */
.suspect-grid { display: grid; grid-template-columns: minmax(250px, 330px) 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

.polaroid {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  perspective: 1100px; width: 100%; max-width: 330px; text-align: left;
  transform: rotate(-2deg); transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.polaroid:hover { transform: rotate(-.5deg) translateY(-4px); }
.flip-inner { position: relative; display: block; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.4,0,.2,1); }
.polaroid.flipped .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back {
  display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(var(--paper), var(--paper-2)); border-radius: .2rem;
  padding: .85rem .85rem 1rem; box-shadow: 0 18px 44px oklch(0 0 0 / .5);
}
.flip-front { position: relative; }
.flip-back {
  position: absolute; inset: 0; transform: rotateY(180deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  text-align: center; padding: 1.4rem;
}
.mug-photo {
  position: relative; display: block; aspect-ratio: 1 / 1.04; overflow: clip; border-radius: .1rem;
  background: linear-gradient(oklch(0.875 0.02 245), oklch(0.79 0.032 245));
}
.mug-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 28%; }
/* booking-room height chart, laid over the photo */
.mug-photo::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 34px, oklch(1 0 0 / .16) 34px 36px);
}
.mug-plate {
  position: absolute; bottom: .6rem; left: 50%; translate: -50% 0; z-index: 2; white-space: nowrap;
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .1em;
  background: var(--paper); color: var(--paper-ink); padding: .24rem .55rem .2rem; border: 1px solid oklch(0.6 0.02 260 / .5);
  box-shadow: 0 2px 8px oklch(0 0 0 / .35);
}
.polaroid-caption { display: block; font-family: var(--f-mono); color: var(--paper-ink); font-size: .85rem; text-align: center; margin-top: .8rem; }
.flip-hint { position: absolute; top: .55rem; right: .65rem; font-family: var(--f-mono); font-size: .64rem; color: var(--paper-dim); }
.back-note { font-family: var(--f-display); font-size: 2.9rem; line-height: .95; color: var(--red); transform: rotate(-7deg); }
.back-hint { font-family: var(--f-mono); font-size: .8rem; color: var(--paper-dim); max-width: 26ch; }
.coffee-ring { position: absolute; right: 1.1rem; bottom: 1.6rem; width: 74px; height: 74px; border-radius: 50%; border: 9px solid oklch(0.52 0.09 60 / .3); }

.dossier { margin: 0; font-family: var(--f-mono); }
.dossier .row { display: grid; grid-template-columns: 11.5rem 1fr; gap: 1rem; padding: .78rem 0; border-bottom: 1px dashed color-mix(in oklab, var(--line) 80%, transparent); }
.dossier dt { color: var(--dim); font-size: .84rem; letter-spacing: .12em; padding-top: .22em; }
.dossier dd { margin: 0; font-size: 1.06rem; }
.dossier em { color: var(--red-bright); }

.meter { display: inline-block; width: min(9.5rem, 40vw); height: .72rem; border: 1px solid var(--line); border-radius: .2rem; padding: 2px; vertical-align: -.1em; margin-right: .4rem; }
.meter i { display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--tag), oklch(0.68 0.19 55), var(--red)); border-radius: .1rem; }

.redact {
  border: 0; cursor: pointer; font-family: inherit; font-size: inherit;
  background: oklch(0.09 0.01 260); color: transparent; padding: 0 .4em; border-radius: .14em;
  transition: background .35s, color .35s;
}
.redact:hover, .redact:focus-visible, .redact.revealed { background: var(--tag); color: var(--tag-ink); }


/* ── the incident report ─────────────────────────────────────── */
.report {
  position: relative; max-width: 44rem; margin-inline: auto;
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.4rem, 4vw, 2.4rem);
  font-size: 1rem; transform: rotate(-.6deg);
  box-shadow: 0 30px 70px oklch(0 0 0 / .5);
}
.report .r-row b { margin-left: auto; text-align: right; }
.report-narrative {
  text-align: left; line-height: 1.75; margin-top: .6rem; text-wrap: pretty;
}
.report-narrative:first-of-type { border-top: 1px dashed var(--paper-dim); padding-top: 1rem; margin-top: .8rem; }
.report .r-foot { margin-top: 1.1rem; }
.stamp-report {
  position: absolute; right: -1.2rem; top: -1.4rem;
  font-size: clamp(1.4rem, 2.4vw, 2rem); transform: rotate(8deg);
}

/* ── exhibit B: timeline ─────────────────────────────────────── */
.lies-wrap { position: relative; max-width: 72rem; margin-inline: auto; padding-block: 1rem 1rem; }
.lies-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: color-mix(in oklab, var(--line) 90%, transparent); transform-origin: 50% 0; }
.lie { position: relative; width: calc(50% - 3.4rem); padding: .4rem 0 2.8rem; }
.lie:nth-child(even) { margin-right: auto; text-align: right; }
.lie:nth-child(odd) { margin-left: auto; }
.lie::before {
  content: ''; position: absolute; top: 1.15rem; width: 11px; height: 11px; border-radius: 50%;
  background: var(--red-bright); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--line);
}
.lie:nth-child(odd)::before { left: -3.95rem; }
.lie:nth-child(even)::before { right: -3.95rem; }
.lie-date { font-family: var(--f-mono); color: var(--dim); font-size: .95rem; letter-spacing: .14em; margin-bottom: .7rem; }
.lie-said { margin: 0 0 1rem; font-family: var(--f-mono); font-style: italic; font-size: clamp(1.45rem, 1.8vw, 1.9rem); line-height: 1.4; color: var(--ink); position: relative; }
.lie-said::before { content: '“'; font-family: var(--f-display); font-style: normal; color: var(--red-bright); font-size: 1.6em; line-height: 0; vertical-align: -.28em; margin-right: .08em; }
.lie-truth { color: var(--muted); font-size: 1.14rem; line-height: 1.65; max-width: 46ch; }
.lie:nth-child(even) .lie-truth { margin-left: auto; }

mark {
  color: inherit; padding: .02em .14em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  background: linear-gradient(color-mix(in oklab, var(--tag) 92%, transparent), color-mix(in oklab, var(--tag) 92%, transparent)) no-repeat 0 60% / 0% 88%;
  transition: background-size .65s cubic-bezier(.22,1,.36,1), color .3s .2s;
}
mark.lit, html.no-js mark { background-size: 100% 88%; color: var(--tag-ink); }

.lie-major { width: 100% !important; text-align: center !important; margin-top: 1.4rem; padding: 3rem clamp(1rem, 6vw, 4rem) 1rem; }
.lie-major::before { display: none; }
.lie-major .lie-said { font-size: clamp(1.75rem, 3vw, 2.35rem); max-width: 34ch; margin-inline: auto; }
.lie-major .lie-truth { max-width: 54ch; margin-inline: auto !important; font-size: 1.28rem; }
.lie-major .stamp-lie { font-size: 2rem; }

/* ── exhibit B: the receipts (real chat screenshots) ─────────── */
/* center the EXHIBIT B header over the wide grid */
.receipts .ex-head { text-align: center; }
.receipts .ex-note { margin-inline: auto; }

/* flex (not grid) so exactly-five never leaves a lopsided empty column;
   cards grow to fill each row and any wrapped row stays centered */
.receipts-grid {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: clamp(1.2rem, 1.6vw, 2rem);
}
.receipt-shot { flex: 1 1 320px; max-width: 440px; padding: .4rem; }
.receipt-shot {
  position: relative; display: block; width: 100%; padding: .5rem; border: 0;
  background: linear-gradient(oklch(0.23 0.028 250), oklch(0.17 0.024 250));
  border: 1px solid var(--line); border-radius: 1rem; cursor: zoom-in;
  box-shadow: 0 18px 44px oklch(0 0 0 / .45);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s;
}
.receipt-shot:hover { transform: translateY(-6px); box-shadow: 0 26px 56px oklch(0 0 0 / .55); border-color: color-mix(in oklab, var(--red-bright) 55%, var(--line)); }
.receipt-shot img { display: block; width: 100%; height: auto; border-radius: .6rem; }
.rs-tag {
  position: absolute; top: .95rem; left: .95rem;
  font-family: var(--f-mono); font-weight: 700; font-size: .62rem; letter-spacing: .14em;
  color: var(--red-bright); background: color-mix(in oklab, var(--bg-deep) 82%, transparent);
  border: 1px solid color-mix(in oklab, var(--red-bright) 55%, transparent);
  border-radius: 2rem; padding: .22rem .5rem .18rem;
}

/* ── exhibit D: evidence wall ────────────────────────────────── */
.wall {
  position: relative;
  background: linear-gradient(oklch(0.175 0.026 246), oklch(0.125 0.023 246));
  border: 1px solid var(--line); border-radius: .9rem;
  padding: clamp(1.6rem, 3.5vw, 2.8rem);
  box-shadow: inset 0 0 80px oklch(0 0 0 / .35);
  /* larger floor → 3 wide columns; with 6 items that's exactly 2 full rows,
     no empty cells, and each piece fills much more of the container */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(2.2rem, 4vw, 3.2rem) clamp(1.6rem, 3vw, 2.6rem);
  align-items: start;
}
.string { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.string path { fill: none; stroke: var(--red); stroke-width: 2; opacity: .85; filter: drop-shadow(0 3px 3px oklch(0 0 0 / .5)); }

.item {
  position: relative; z-index: 1; border: 0; cursor: zoom-in; text-align: left; width: 100%;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
  box-shadow: 0 14px 34px oklch(0 0 0 / .45);
}
.item:hover { transform: translateY(-6px) rotate(0deg) !important; box-shadow: 0 24px 50px oklch(0 0 0 / .55); z-index: 2; }
.item:nth-child(2) { transform: rotate(-2deg); }
.item:nth-child(3) { transform: rotate(1.6deg); margin-top: 1.4rem; }
.item:nth-child(4) { transform: rotate(-1.2deg); }
.item:nth-child(5) { transform: rotate(2.2deg); margin-top: 1.8rem; }
.item:nth-child(6) { transform: rotate(-3deg); }
.item:nth-child(7) { transform: rotate(1.4deg); margin-top: 1rem; }
.pin {
  position: absolute; top: -8px; left: 50%; translate: -50% 0; z-index: 3;
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, oklch(0.75 0.19 27), var(--red) 55%, var(--red-deep));
  box-shadow: 0 3px 5px oklch(0 0 0 / .55);
}

.paper {
  background: linear-gradient(var(--paper), var(--paper-2)); color: var(--paper-ink);
  font-family: var(--f-mono); padding: 1.15rem 1.15rem 1rem; border-radius: .15rem;
  display: flex; flex-direction: column; gap: .34rem; font-size: .84rem; line-height: 1.45;
}
.paper::after { content: ''; position: absolute; inset: 0; background: var(--noise); background-size: 140px; opacity: .06; pointer-events: none; border-radius: inherit; }
.r-head { display: block; text-align: center; font-weight: 700; letter-spacing: .18em; font-size: .82rem; padding-bottom: .5rem; border-bottom: 1px dashed var(--paper-dim); margin-bottom: .35rem; }
.r-sub { display: block; text-align: center; font-size: .68rem; letter-spacing: .1em; color: var(--paper-dim); margin-bottom: .3rem; }
.r-row { display: flex; align-items: baseline; gap: .45rem; }
.r-row .red { color: var(--red-deep); }
.r-foot { display: block; text-align: center; font-size: .68rem; letter-spacing: .14em; color: var(--paper-dim); border-top: 1px dashed var(--paper-dim); padding-top: .5rem; margin-top: .4rem; }

.polaroid-sm { background: linear-gradient(var(--paper), var(--paper-2)); padding: .7rem .7rem .8rem; border-radius: .15rem; }
.p-img { position: relative; display: block; background: oklch(0.155 0.02 250); border-radius: .1rem; overflow: clip; }
.p-img img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 30%; }
.p-cap { display: block; font-family: var(--f-mono); font-size: .78rem; color: var(--paper-ink); text-align: center; margin-top: .65rem; }

/* evidence photos keep their true aspect ratio — never crop actual evidence */
.item-evidence-2 .p-img img { aspect-ratio: auto; object-fit: contain; }

/* real screenshot, pinned to the wall at its natural aspect ratio (no forced crop) */
.wall-shot {
  background: oklch(0.135 0.02 250); border-radius: .6rem; overflow: clip;
  padding-bottom: .6rem; border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
}
.wall-shot img { display: block; width: 100%; height: auto; }
.wall-shot .shot-cap { display: block; font-family: var(--f-mono); font-size: .7rem; color: var(--dim); padding: .55rem .75rem 0; }

/* lightbox */
#lightbox { border: 0; background: transparent; padding: 0; max-width: min(92vw, 34rem); width: 100%; }
#lightbox::backdrop { background: oklch(0.06 0.015 244 / .92); }
.lightbox-inner { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.lightbox-side { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.lightbox-card { width: 100%; text-align: center; }
.lightbox-card .item,
.lightbox-card .receipt-shot { transform: none !important; cursor: default; pointer-events: none; box-shadow: 0 30px 80px oklch(0 0 0 / .6); font-size: 1rem; }
.lightbox-card .pin, .lightbox-card .rs-tag { display: none; }
/* chat receipts are tall portraits — cap by HEIGHT so they never exceed the viewport */
.lightbox-card .receipt-shot { display: inline-block; width: auto; }
.lightbox-card .receipt-shot img { max-height: 72svh; width: auto; max-width: 100%; }
.lightbox-note { font-family: var(--f-mono); color: var(--tag); text-align: center; max-width: 42ch; font-size: .95rem; }
.lightbox-note::before { content: 'DETECTIVE’S NOTE — '; color: var(--dim); font-size: .74rem; letter-spacing: .12em; display: block; margin-bottom: .3rem; }

/* a tall receipt puts the note BESIDE the image so the screenshot can run nearly
   full screen-height instead of the note stealing vertical space beneath it */
@media (min-width: 820px) {
  #lightbox:has(.receipt-shot) { max-width: min(96vw, 62rem); }
  .lightbox-inner:has(.receipt-shot) { flex-direction: row; align-items: center; gap: 1.9rem; }
  .lightbox-inner:has(.receipt-shot) .lightbox-card { width: auto; flex: 0 0 auto; }
  /* explicit height forces the screenshot to scale UP and run the full screen height
     (a plain max-height won't upscale past the image's native ~524px) */
  /* let the card grow to the upscaled image width — its grid max-width:440px
     would otherwise clip it and the image would spill over the note column */
  .lightbox-inner:has(.receipt-shot) .lightbox-card .receipt-shot { padding: 0; max-width: none; width: auto; }
  .lightbox-inner:has(.receipt-shot) .lightbox-card .receipt-shot img { height: 90svh; max-height: none; width: auto; max-width: none; border-radius: .4rem; }
  .lightbox-inner:has(.receipt-shot) .lightbox-side { align-items: flex-start; max-width: 22rem; flex: 0 1 auto; }
  .lightbox-inner:has(.receipt-shot) .lightbox-note { text-align: left; }
}

/* ── sealed evidence terminal (decorative prop) ──────────────── */
.sealed { max-width: 76rem; margin-inline: auto; padding-inline: var(--gutter); position: relative; }
.sealed-inner {
  position: relative; overflow: clip;
  max-width: 34rem; margin-inline: auto; text-align: center;
  background: linear-gradient(oklch(0.205 0.028 246), oklch(0.16 0.026 246));
  border: 1px solid var(--line); border-radius: 1rem;
  padding: clamp(2.2rem, 5vw, 3.2rem) clamp(1.4rem, 4vw, 2.6rem);
  box-shadow: 0 30px 70px oklch(0 0 0 / .45), inset 0 1px 0 color-mix(in oklab, var(--ink) 10%, transparent);
}
/* hazard stripe across the top of the panel */
.sealed-inner::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 5px;
  background: repeating-linear-gradient(45deg, var(--red) 0 10px, oklch(0.2 0.02 246) 10px 20px);
}
.sealed-tag {
  display: inline-block; font-family: var(--f-mono); font-weight: 700; font-size: .72rem;
  letter-spacing: .22em; color: var(--red-bright);
  border: 1px solid var(--red-bright); border-radius: 2rem; padding: .38rem .95rem .32rem;
}
.sealed-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.55rem, 3.2vw, 2.3rem); line-height: 1.06; letter-spacing: .015em; margin-top: 1.3rem; }
.sealed-note { color: var(--muted); font-family: var(--f-mono); font-size: .88rem; line-height: 1.6; margin-top: 1rem; }

.sealed-form { margin-top: 2rem; display: grid; gap: 1rem; text-align: left; }
.field-label { display: block; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .18em; color: var(--dim); margin-bottom: .45rem; }
.sealed-form input {
  width: 100%; font-family: var(--f-mono); font-size: .95rem; color: var(--ink);
  background: var(--bg-deep); border: 1px solid var(--line); border-radius: .4rem;
  padding: .72rem .85rem;
}
.sealed-form input::placeholder { color: var(--dim); }
.sealed-form .btn { margin-top: .4rem; width: 100%; text-align: center; }
.sealed-status { min-height: 1.5em; font-family: var(--f-mono); font-size: .84rem; letter-spacing: .1em; color: var(--red-bright); text-align: center; }

@keyframes deny-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.sealed-form.denied { animation: deny-shake .22s ease-in-out 2; }

/* ── verdict ─────────────────────────────────────────────────── */
.verdict { text-align: center; max-width: 76rem; margin-inline: auto; padding-inline: var(--gutter); }
.verdict-kicker { font-family: var(--f-mono); color: var(--dim); letter-spacing: .2em; font-size: .8rem; }
.verdict-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(3rem, 9vw, 6rem); line-height: 1; margin-top: 1.2rem; }
.verdict-title em { font-style: normal; color: var(--red-bright); display: inline-block; transform: skewX(-5deg); }
.verdict-sub { color: var(--muted); margin-top: 1.2rem; }
.verdict-btns { display: flex; justify-content: center; gap: 1.1rem; flex-wrap: wrap; margin-top: 2.4rem; }
.btn-vote { font-size: 1.35rem; padding: 1rem 2.1rem .85rem; }

.gavel-zone { position: relative; height: 15rem; margin-top: 2.5rem; display: grid; place-items: center; }
.gavel { width: min(230px, 55vw); overflow: visible; }
#gavelSwing { transform-origin: 96px 58px; }
.gv-head { fill: var(--wood); stroke: var(--wood-deep); stroke-width: 3; }
.gv-neck { fill: var(--wood-deep); }
.gv-handle { fill: var(--wood-deep); }
.gv-base { fill: var(--wood-deep); }
.gv-impact line { stroke: var(--tag); stroke-width: 4; stroke-linecap: round; }
.gv-impact { opacity: 0; }
.stamp-guilty { position: absolute; opacity: 0; pointer-events: none; }
html.no-js .stamp-guilty { opacity: 1; }

.sentence { max-width: 36rem; margin: 1.5rem auto 0; text-align: left; }
.sentence-title { font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; letter-spacing: .06em; text-align: center; margin-bottom: 1.2rem; }
.sentence-list { list-style: none; margin: 0; padding: 0; font-family: var(--f-mono); }
.sentence-list li { display: flex; align-items: baseline; gap: .7rem; padding: .68rem 0; border-bottom: 1px dashed color-mix(in oklab, var(--line) 80%, transparent); font-size: 1.02rem; flex-wrap: wrap; }
.sentence-list b { color: var(--red-bright); letter-spacing: .1em; }
.sentence-list .dim { flex-basis: 100%; font-size: .78rem; margin-top: -.2rem; }

/* confetti */
.cf {
  position: fixed; z-index: var(--z-toast); pointer-events: none;
  width: .5rem; height: .85rem; background: var(--c, var(--red));
  animation: cf-fly var(--dur, 1.4s) cubic-bezier(.15,.55,.4,1) var(--delay, 0s) forwards;
  opacity: 0;
}
@keyframes cf-fly {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx, 0px), var(--dy, -300px)) rotate(var(--rot, 400deg)); opacity: 0; }
}

/* ── footer ──────────────────────────────────────────────────── */

/* ── responsive ──────────────────────────────────────────────── */
/* below this, the footage becomes a dimmed full-bleed backdrop behind the title */
@media (max-width: 1120px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { grid-area: 1 / 1; z-index: 1; }
  .hero-shot {
    grid-area: 1 / 1; z-index: 0; justify-self: stretch; align-self: stretch;
    max-width: none; rotate: 0deg; box-shadow: none;
    margin: calc(-9vh - 2rem) calc(var(--gutter) * -1) calc(-14vh - 2rem);
  }
  .hero-shot img { width: 100%; height: 100%; border: 0; opacity: .3; object-fit: cover; object-position: 62% 18%; }
  .shot-scan { display: none; }
  .stamp-hero { left: auto; right: 4%; top: 8%; }
}

@media (max-width: 880px) {
  .suspect-grid { grid-template-columns: 1fr; }
  .polaroid { margin-inline: auto; }
  .dossier .row { grid-template-columns: 9.5rem 1fr; gap: .7rem; }

  .lies-line { left: .45rem; }
  .lie, .lie:nth-child(odd), .lie:nth-child(even) { width: auto; margin: 0 0 0 2.4rem; text-align: left; }
  .lie:nth-child(even) .lie-truth { margin-left: 0; }
  .lie::before, .lie:nth-child(odd)::before, .lie:nth-child(even)::before { left: -2.55rem; right: auto; }
  .lie-major { margin-left: 2.4rem !important; padding-inline: 0; text-align: left !important; }
  .lie-major .lie-said, .lie-major .lie-truth { margin-inline: 0 !important; }

  .gavel-zone { height: 12rem; }
}
@media (max-width: 560px) {
  .dossier .row { grid-template-columns: 1fr; gap: .15rem; padding: .62rem 0; }
  .hud-q, .hud-cam { display: none; }
  .stamp-hero { font-size: 1.9rem; }
  .hero-inner { padding-top: 13vh; }
  .btn-vote { width: 100%; }
}

/* ── reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .hero::after { animation: none; }
  html.js .typed::after { content: ''; }
}