/* Last Seen website. Colours and fonts follow the app (mockup/template.html). */
/* fonts are self-hosted since 9-11 (GDPR: no request to Google); Latin subset from Google Fonts, licence OFL */
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/atkinson-hyperlegible-400.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/atkinson-hyperlegible-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/atkinson-hyperlegible-700.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-stretch: 75% 100%; font-display: swap; src: url('/assets/fonts/bricolage-grotesque-var.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/jetbrains-mono-var.woff2') format('woff2'); }
@font-face { font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/permanent-marker-400.woff2') format('woff2'); }
:root {
  --ink: #0C101B;
  --ink-2: #121827;
  --ink-3: #1A2133;
  --line: #283049;
  --text: #ECE7DC;
  --muted: #8F95A8;
  --amber: #F2A33A;
  --amber-ink: #2A1A05;
  --marker: 'Permanent Marker', 'Marker Felt', 'Comic Sans MS', cursive;
  --tape: #F5C518;
  --tape-ink: #1D1A15;
  --paper: #F1E9D8;
  --paper-ink: #1D1A15;
  --paper-muted: #6B6352;
  --display: 'Bricolage Grotesque', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --wrap: 1120px;
  --gutter: 16px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 17px/1.6 var(--body);
  overflow-x: clip;   /* clip, not hidden: hidden would make body a scroll box and break the sticky story */
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--amber); text-underline-offset: 3px; }
a:hover { color: #ffbe63; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 32px; } }

/* type */
h1, h2, h3 {
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 .4em;
  text-wrap: balance;
}
h1 { font-size: clamp(42px, 8vw, 84px); }
h2 { font-size: clamp(32px, 5vw, 52px); }
h3 { font-size: 26px; }
p { margin: 0 0 1em; }
.lead { font-size: 20px; color: #d9d3c6; max-width: 36em; }
.label {
  font: 600 12px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.muted { color: var(--muted); }
.prose { max-width: 42em; }
.prose h2 { margin-top: 1.6em; font-size: clamp(28px, 4vw, 40px); }
.prose h3 { margin-top: 1.4em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }

/* header */
.site-head { border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand {
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: .01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.brand span { color: var(--amber); }
.nav { display: flex; gap: 20px; align-items: center; }
.nav a { color: var(--text); text-decoration: none; font-size: 15px; white-space: nowrap; }
.nav a:hover { color: var(--amber); }
.nav .hide-sm, .nav .hide-xs { display: none; }
@media (min-width: 480px) { .nav .hide-xs { display: inline; } }
@media (min-width: 820px) { .nav .hide-sm { display: inline; } }
@media (max-width: 479px) { .brand { font-size: 22px; } .nav { gap: 14px; } }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 14px;
  font: 700 17px/1 var(--body);
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.btn-amber { background: var(--amber); color: var(--amber-ink); }
.btn-amber:hover { background: #ffb44f; color: var(--amber-ink); }
.btn-ghost { background: var(--ink-3); color: var(--text); border: 1px solid var(--line); }
.btn-ghost:hover { color: var(--text); border-color: var(--muted); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-small { padding: 10px 14px; font-size: 15px; border-radius: 10px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 24px 0 10px; }
.cta-note { font-size: 15px; color: var(--muted); }
/* official store badges: shown as delivered, only scaled */
.store-badge { display: inline-block; line-height: 0; border-radius: 9px; transition: transform .15s ease, opacity .15s ease; }
.store-badge img { height: 54px; width: auto; }
.store-badge:hover { transform: translateY(-2px); opacity: .92; }
@media (max-width: 400px) { .store-badge img { height: 48px; } }   /* both still side by side on a small phone */

/* start screen: the intro film fills the first screen and plays by itself (muted until "Sound on") */
.cine { position: relative; background: #000; overflow: hidden; height: calc(100vh - 65px); height: calc(100svh - 65px); min-height: 320px; }
/* 21:9 film: letterboxed on tall screens so the phone and the title card stay whole, filled edge to edge on wide ones */
.cine-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
@media (min-aspect-ratio: 4/3) { .cine-video { object-fit: cover; } }
/* standing phones: no big black bars; the box is as tall as the film, with room underneath for the buttons */
@media (max-aspect-ratio: 4/3) {
  .cine { height: calc(100vw * 3 / 7 + 170px); min-height: 0; }
  .cine-video { bottom: auto; height: calc(100vw * 3 / 7); }
}
/* "Play your first case" appears over the title card at the end of the intro */
.cine-cta {
  position: absolute; left: 50%; bottom: 15%; transform: translate(-50%, 14px);
  opacity: 0; pointer-events: none; transition: opacity .7s ease, transform .7s ease;
}
.cine-cta .btn { font-size: 19px; padding: 17px 30px; border-radius: 16px; box-shadow: 0 12px 40px rgba(242,163,58,.25); white-space: nowrap; }
.cine.cta-on .cine-cta { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
@media (max-aspect-ratio: 4/3) { .cine-cta { bottom: 86px; } }
/* the film plays silently straight away (wish of the owner, 9-11: the top must never look empty);
   a tap anywhere on it starts it again from the top, with sound */
.cine-gate {
  position: absolute; inset: 0; z-index: 2; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  border: 0; padding: 24px var(--gutter) 92px; cursor: pointer; color: var(--text); font-family: var(--body);
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 32%);
  transition: opacity .6s ease;
}
.cine.opened .cine-gate { opacity: 0; pointer-events: none; }
.gate-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px;
  border: 1px solid var(--amber); background: rgba(12,16,27,.6); color: var(--amber); backdrop-filter: blur(6px);
  font: 600 14px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  animation: soundcall 1.6s ease-in-out infinite;
}
.cine-gate:hover .gate-pill, .cine-gate:focus-visible .gate-pill { background: var(--amber); color: var(--amber-ink); }
.cine-cta, .cine-sound { z-index: 3; }
@media (prefers-reduced-motion: reduce) { .gate-pill { animation: none; } }
@keyframes ringpulse { 0% { box-shadow: 0 0 0 0 rgba(47,191,95,.55); } 100% { box-shadow: 0 0 0 28px rgba(47,191,95,0); } }
.cine-gate[hidden], .cine-sound[hidden] { display: none; }
.cine-down {
  position: absolute; z-index: 3; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(236,231,220,.3); color: var(--text); text-decoration: none; font: 600 18px var(--mono);
  animation: nudge 2.4s ease-in-out infinite;
}
.cine-down:hover { color: var(--amber); border-color: var(--amber); }
@keyframes nudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .cine-down { animation: none; } }
.cine-sound {
  position: absolute; left: var(--gutter); bottom: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(236,231,220,.35);
  background: rgba(12,16,27,.55); color: var(--text); backdrop-filter: blur(6px);
  font: 600 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.cine-sound:hover { border-color: var(--amber); color: var(--amber); }
@media (max-width: 719px) { .cine-sound { top: 16px; bottom: auto; } }

/* hero */
.hero { position: relative; overflow: hidden; padding: 48px 0 64px; }
.hero .wrap { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: 1.15fr .85fr; } .hero { padding: 72px 0 96px; } }
.hero h1 { margin-top: 12px; }
.hero-phone { position: relative; justify-self: center; width: min(320px, 78vw); }
.hero-phone .tape { top: 40%; left: -22%; right: -60vw; transform: rotate(-12deg); }

.phone {
  position: relative;
  z-index: 1;
  border-radius: 38px;
  padding: 10px;
  background: #05070C;
  border: 1px solid #2c3346;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 6px rgba(255,255,255,.03);
}
.phone img { border-radius: 29px; }

/* the LOCKED tape from the app, used as decoration */
.tape {
  position: absolute;
  left: -60vw;
  right: -60vw;
  height: 40px;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  background: var(--tape);
  color: var(--tape-ink);
  border-top: 2px solid var(--tape-ink);
  border-bottom: 2px solid var(--tape-ink);
  font: 800 20px/1 var(--display);
  font-stretch: 75%;
  letter-spacing: .08em;
  pointer-events: none;
  user-select: none;
}
.tape-band { position: relative; height: 56px; overflow: hidden; margin: 8px 0; }
.tape-band .tape { top: 8px; transform: rotate(-1.5deg); }

/* notification bubble */
.notif {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: center;
  max-width: 420px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(30, 34, 43, .92);
  border: 1px solid #2f3646;
  font-size: 15px;
  line-height: 1.35;
}
.notif .ic { width: 34px; height: 34px; border-radius: 9px; background: #2BB08F; display: grid; place-items: center; color: #08241d; font: 800 15px var(--display); }
.notif b { display: block; }
.notif time { align-self: start; font: 12px var(--mono); color: var(--muted); }

/* sections */
.section { padding: 64px 0; }
.section-alt { background: var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 40em; margin-bottom: 32px; }

.steps { display: grid; gap: 16px; counter-reset: step; padding: 0; margin: 0; list-style: none; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li {
  counter-increment: step;
  padding: 22px;
  border-radius: 18px;
  background: var(--ink-3);
  border: 1px solid var(--line);
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--amber-ink);
  font: 800 17px var(--display);
}
.steps h3 { font-size: 24px; margin-bottom: 6px; }
.steps p { margin: 0; color: #cfc9bc; }

.shots { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.shots figure { margin: 0; }
.shots .phone { border-radius: 30px; padding: 8px; }
.shots .phone img { border-radius: 23px; }
.shots figcaption { margin-top: 14px; font-size: 15px; color: #cfc9bc; }

/* dossiers (case cards) */
.cases { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.dossier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 24px;
  color: var(--paper-ink);
  text-decoration: none;
}
.dossier .tab {
  position: absolute;
  top: 0;
  left: 18px;
  padding: 5px 12px 6px;
  border-radius: 8px 8px 0 0;
  background: var(--tab, #E57A9B);
  color: var(--tab-ink, #2B0F19);
  font: 600 11px/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dossier .paper {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 18px;
  border-radius: 6px 16px 16px 16px;
  background: var(--paper);
  border-top: 6px solid var(--tab, #E57A9B);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
  transition: transform .2s ease;
}
a.dossier:hover .paper { transform: translateY(-3px) rotate(-.4deg); }
a.dossier:hover { color: var(--paper-ink); }
.dossier .cover-wrap {
  position: relative;
  margin: -20px -20px 16px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 0 10px 0 0;
  background: #111;
}
.dossier .cover, .dossier .cover-film {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 62%;
  filter: contrast(1.05) saturate(.9);
}
.dossier .cover-film { opacity: 0; transition: opacity .4s ease; }
.dossier.film-on .cover-film { opacity: 1; }
.dossier h3 { font-size: 30px; margin: 0 0 8px; color: var(--paper-ink); }
.dossier p { margin: 0 0 14px; color: #3a352b; font-size: 16px; }
.dossier .snippet {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #E6DCC6;
  font: 13px/1.45 var(--mono);
  color: #3a352b;
}
.dossier .meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font: 600 12px/1.3 var(--mono);
  letter-spacing: .06em;
  color: var(--paper-muted);
  text-transform: uppercase;
}
.dossier .price { color: var(--paper-ink); }

/* feature list */
.features { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.feature { padding: 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--ink-3); }
.feature h3 { font-size: 24px; margin-bottom: 6px; }
.feature p { margin: 0; color: #cfc9bc; }

/* pricing */
.pricing { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.plan { padding: 24px; border-radius: 18px; background: var(--ink-3); border: 1px solid var(--line); }
.plan.free { border-color: var(--amber); }
.plan .big { font: 800 44px/1 var(--display); font-stretch: 75%; margin: 10px 0 6px; }
.plan ul { list-style: none; padding: 0; margin: 12px 0 0; }
.plan li { padding: 6px 0; border-top: 1px dashed var(--line); display: flex; justify-content: space-between; gap: 12px; }
.plan li:first-child { border-top: 0; }

/* case page */
.case-hero { padding: 40px 0 24px; }
.crumbs { font: 13px var(--mono); color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.case-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .case-grid { grid-template-columns: 1.2fr .8fr; align-items: start; } }
.file {
  padding: 22px;
  border-radius: 16px;
  background: var(--ink-3);
  border: 1px solid var(--line);
}
.file dl { margin: 0; display: grid; gap: 14px; }
.file dt { font: 600 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.file dd { margin: 4px 0 0; }
.hook {
  font: 800 clamp(26px, 4vw, 36px)/1.1 var(--display);
  font-stretch: 75%;
  border-left: 4px solid var(--tab, var(--amber));
  padding-left: 18px;
  margin: 8px 0 28px;
  max-width: 24em;
}
.side { display: grid; gap: 18px; }
.case-film { width: min(300px, 80vw); justify-self: center; }
.case-film video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 29px; background: #000; }
.side > .btn { justify-self: center; }
.case-nav { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 28px 0 0; border-top: 1px solid var(--line); margin-top: 40px; }
.note {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(242,163,58,.08);
  border: 1px solid rgba(242,163,58,.35);
  font-size: 15px;
}

/* faq */
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font: 700 19px/1.35 var(--body); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--amber); font: 700 22px/1 var(--mono); }
.faq details[open] summary::after { content: '–'; }
.faq details > div { padding-top: 10px; color: #d6d0c3; }

/* lists of other games */
.games { display: grid; gap: 14px; margin: 18px 0 28px; }
.game { padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--ink-3); }
.game h3 { font-size: 22px; margin-bottom: 4px; }
.game p { margin: 0; color: #cfc9bc; }
.game.ours { border-color: var(--amber); }

/* closing call to action */
.closer { text-align: center; padding: 80px 0; }
.closer .cta-row { justify-content: center; }

/* footer */
.site-foot { border-top: 1px solid var(--line); padding: 40px 0 56px; font-size: 15px; color: var(--muted); }
.foot-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 28px; }
.site-foot h4 { margin: 0 0 10px; font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin: 6px 0; }
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) { a.dossier:hover .paper { transform: none; } }

/* ===================================================================
   Immersive homepage (4-11): the site behaves like the phone you found
   =================================================================== */

/* film grain over everything, very light */
body::after {
  content: ''; position: fixed; inset: -50%; z-index: 9999; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); filter: blur(4px); transition: opacity .9s ease, transform .9s ease, filter .9s ease; }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* --- 1. lock-screen story --- */
.story { position: relative; height: 380vh; background: radial-gradient(ellipse at 70% 40%, #151b2b 0%, var(--ink) 60%); }
.story-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.story-grid { display: grid; gap: 28px; align-items: center; width: 100%; }
@media (min-width: 900px) { .story-grid { grid-template-columns: 1.1fr .9fr; gap: 56px; } }
.story-text h1 { font-size: clamp(36px, 6vw, 72px); margin: 10px 0 18px; }
.story-beat {
  margin: 0 0 10px; font: 800 clamp(22px, 3vw, 34px)/1.15 var(--display); font-stretch: 75%; color: #d9d3c6;
  opacity: .12; transform: translateX(-10px); transition: opacity .6s ease, transform .6s ease, color .6s ease;
}
.story-beat.on { opacity: 1; transform: none; color: var(--text); }
.story-beat.on:last-of-type { color: var(--amber); }
.story-cta { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; pointer-events: none; }
.story-cta.on { opacity: 1; transform: none; pointer-events: auto; }
/* the found phone: a 3D model (phone3d.js) over a still of itself */
.story-phone { position: relative; height: min(86vh, 860px); height: min(86svh, 860px); }
.story-phone::before {
  content: ""; position: absolute; inset: 18% 6% 10%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(242,163,58,.13), rgba(242,163,58,.04) 55%, transparent);
}
.story-phone .phone-poster, .story-phone .phone3d { position: absolute; inset: 0; width: 100%; height: 100%; }
.phone-poster { object-fit: contain; }
.phone3d { visibility: hidden; }
.story-phone.is-3d .phone3d { visibility: visible; }
.story-phone.is-3d .phone-poster { visibility: hidden; }
@media (max-width: 899px) {
  .story-sticky { align-items: flex-start; padding-top: 18px; }
  .story-text h1 { font-size: 32px; margin-bottom: 10px; }
  .story-beat { font-size: 20px; margin-bottom: 4px; }
  .story-beat:not(.on), .story-beat.on:has(~ .story-beat.on) { display: none; }   /* one line at a time, so the phone stays put */
  .story-phone { height: 56vh; height: 56svh; }
  .story-cta .cta-note { display: none; }
}

/* --- 2. evidence board --- */
.board { position: relative; padding: 90px 0 110px; background:
  radial-gradient(ellipse at 20% 10%, rgba(242,163,58,.06), transparent 50%),
  repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 7px), #0f1320; }
.board-pins { position: relative; display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; margin-top: 30px; }
.board-string { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.board-string path { fill: none; stroke: #c4302b; stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
/* Each photo is pinned up, gets a flash, then someone goes over it with a red marker. */
.evidence {
  --d: 0s;
  position: relative; margin: 0; padding: 12px 12px 16px; background: #ece5d6; color: #1d1a15; border-radius: 3px;
  transform: rotate(var(--r)); transform-origin: 50% 0; opacity: 0; box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
.evidence:nth-of-type(2) { --d: .5s; } .evidence:nth-of-type(3) { --d: 1s; }
@media (max-width: 760px) {   /* stacked: each one starts when it scrolls in, and the string runs behind the photos, not over the text */
  .evidence:nth-of-type(n) { --d: 0s; z-index: 3; }
}
.evidence.in { opacity: 1; animation: pinned 1.3s cubic-bezier(.3, .8, .4, 1) var(--d) both, sway 7s ease-in-out calc(var(--d) + 1.3s) infinite alternate; }
@keyframes pinned {
  0% { opacity: 0; transform: translateY(-70px) rotate(calc(var(--r) + 9deg)) scale(1.05); }
  40% { opacity: 1; transform: translateY(5px) rotate(var(--r)) scale(1); }
  52% { transform: translateY(0) rotate(calc(var(--r) - 3deg)); }
  68% { transform: rotate(calc(var(--r) + 1.8deg)); }
  84% { transform: rotate(calc(var(--r) - .8deg)); }
  100% { opacity: 1; transform: rotate(var(--r)); }
}
@keyframes sway { from { transform: rotate(var(--r)); } to { transform: rotate(calc(var(--r) + .7deg)); } }
.evidence.in .pin { animation: pinpush .3s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d) + .45s) both; }
@keyframes pinpush { from { opacity: 0; transform: translateY(-24px) scale(1.6); box-shadow: 0 16px 12px rgba(0,0,0,.35); } }
/* the Evidence tape is torn off the roll and slapped on: it unrolls left to right, then gets pressed flat */
.evidence .tag { clip-path: inset(0 100% 0 0); }
.evidence.in .tag { animation: tapeon .75s cubic-bezier(.3, .7, .3, 1) calc(var(--d) + .95s) both; }
@keyframes tapeon {
  0% { clip-path: inset(0 100% 0 0); transform: rotate(-6deg) translateY(-6px) scale(1.12); }
  55% { clip-path: inset(0 0 0 0); transform: rotate(7deg) translateY(-3px) scale(1.12); box-shadow: 0 10px 14px rgba(0,0,0,.35); }
  80% { transform: rotate(3deg) scale(.97); }
  100% { clip-path: inset(0 0 0 0); transform: rotate(4deg) scale(1); }
}
.shot { position: relative; container-type: inline-size; }
.evidence img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 2px; filter: contrast(1.05); }
.shot::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; border-radius: 2px; }
.evidence.in .shot::after { animation: flash .5s ease-out calc(var(--d) + .7s); }
@keyframes flash { 0% { opacity: 0; } 12% { opacity: .85; } 100% { opacity: 0; } }
.marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.marks path { fill: none; stroke: #e0372d; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .92;
  stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.evidence.in .marks path { animation: draw .6s ease-out calc(var(--d) + 1.25s + var(--i) * .55s) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.scribble {
  position: absolute; white-space: nowrap; font: 4.4cqw/1 var(--marker); color: #ff4a3d; transform: rotate(-4deg);
  text-shadow: 0 0 .4cqw #000, 0 .2cqw .3cqw #000; clip-path: inset(-60% 100% -60% -15%);
}
.evidence.in .scribble { animation: write .8s steps(14, end) calc(var(--d) + 1.55s + var(--i) * .55s) forwards; }
@keyframes write { to { clip-path: inset(-60% -15% -60% -15%); } }
.ink-stamp {
  position: absolute; left: 50%; top: 78%; padding: .8cqw 3cqw; border: 1cqw solid currentColor; border-radius: 1.4cqw;
  box-shadow: inset 0 0 0 .6cqw #0000, inset 0 0 0 1cqw currentColor; color: #e0372d;
  font: 800 9cqw/1 var(--display); font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-13deg); opacity: 0; mix-blend-mode: screen;
}
.evidence.in .ink-stamp { animation: slam .32s cubic-bezier(.2, 1.3, .4, 1) calc(var(--d) + 2.3s) forwards; }
@keyframes slam {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-24deg) scale(2.4); }
  to { opacity: .9; transform: translate(-50%, -50%) rotate(-13deg) scale(1); }
}
.evidence.in .shot:has(.ink-stamp) { animation: thud .28s ease-out calc(var(--d) + 2.5s); }
@keyframes thud { 25% { transform: translate(2px, 3px); } 50% { transform: translate(-2px, -1px); } 75% { transform: translate(1px, 1px); } }
.evidence figcaption { margin-top: 12px; font-size: 15px; line-height: 1.45; }
.evidence figcaption b { display: block; font: 800 22px var(--display); font-stretch: 75%; text-transform: uppercase; }
.evidence .pin { position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 35% 35%, #ff7a72, #b3201b 60%, #6d0d0a); box-shadow: 0 3px 4px rgba(0,0,0,.5); }
.evidence .tag { position: absolute; z-index: 3; top: 18px; right: -8px; padding: 4px 10px; background: var(--tape); color: var(--tape-ink); font: 700 11px var(--mono);
  letter-spacing: .12em; text-transform: uppercase; transform: rotate(4deg); box-shadow: 0 3px 6px rgba(0,0,0,.35); }

/* --- 3. case files --- */
.files { overflow-x: clip; }
.files .dossier .paper { transition: box-shadow .3s ease; }
/* slideshow: site.js adds is-live. All files share one grid cell, so the stage is exactly as tall as the tallest file. */
.show.is-live .cases { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; perspective: 1400px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.show.is-live .cases.dragging { cursor: grabbing; }
.show.is-live .cases.dragging .dossier { pointer-events: none; }
.show.is-live .dossier { grid-area: 1 / 1; width: min(400px, 78vw); will-change: transform; -webkit-user-drag: none; }
.show.is-live .dossier img { -webkit-user-drag: none; }
.show.is-live .dossier .paper { position: relative; }
.show.is-live .dossier .paper::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #090c15; opacity: var(--dim, 0); pointer-events: none; }
.show.is-live .dossier .tab { filter: brightness(calc(1 - var(--dim, 0) * .7)); }
.show-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; }
.show-nav[hidden] { display: none; }
.show-btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--ink-3); color: var(--text); cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.show-btn:hover { color: var(--amber); border-color: var(--amber); }
.show-btn[hidden] { display: none; }
.show-btn svg { width: 18px; height: 18px; }
.show-pause .i-play, .show-pause.paused .i-pause { display: none; }
.show-pause.paused .i-play { display: block; }
.show-segs { flex: 0 1 300px; min-width: 0; display: flex; gap: 6px; }
.show-seg { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.show-bar { display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; transition: background .15s ease; }
.show-seg:hover .show-bar { background: #3b4564; }
.show-seg[aria-current] .show-bar { background: #59627f; }
.show-bar span { display: block; height: 100%; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform 80ms linear; }
.files .dossier:hover .paper { box-shadow: 0 26px 50px rgba(0,0,0,.55); transform: none; }
.xtape {
  position: absolute; left: -20%; right: -20%; top: 46%; z-index: 2; padding: 6px 0; text-align: center; white-space: nowrap; overflow: hidden;
  background: var(--tape); color: var(--tape-ink); border-top: 2px solid var(--tape-ink); border-bottom: 2px solid var(--tape-ink);
  font: 800 15px var(--display); font-stretch: 75%; letter-spacing: .1em; text-transform: uppercase;
  transform: rotate(-9deg) translateX(-110%); transition: transform 1s cubic-bezier(.2, .9, .3, 1);
}
.dossier.in .xtape { transform: rotate(-9deg) translateX(0); }
.dossier.film-on .xtape { transform: rotate(-9deg) translateX(115%); }

/* --- 4. the accusation --- */
.accuse { position: relative; padding: 110px 0; overflow: hidden; background: linear-gradient(180deg, var(--ink), #170c10 55%, var(--ink)); }
.accuse-grid { display: grid; gap: 50px; align-items: center; }
@media (min-width: 900px) { .accuse-grid { grid-template-columns: 1.2fr .8fr; } }
.typed { font-size: clamp(44px, 7vw, 88px); min-height: 1.1em; }
.typed.typing::after { content: '▍'; color: var(--amber); animation: caret .8s steps(1) infinite; margin-left: 4px; }
@keyframes caret { 50% { opacity: 0; } }
.verdict { display: flex; justify-content: center; }
.verdict-card { position: relative; width: min(340px, 86vw); padding: 26px 26px 30px; border-radius: 18px; background: var(--ink-3); border: 1px solid var(--line); }
.verdict-card .score { display: block; margin-top: 10px; font: 800 72px/1 var(--display); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.verdict-card small { display: block; margin-top: 6px; font: 600 13px var(--mono); color: var(--muted); letter-spacing: .1em; }
.stamp {
  position: absolute; right: -10px; top: 26px; padding: 6px 16px; border: 4px solid #3fbf72; border-radius: 10px; color: #3fbf72;
  font: 800 34px var(--display); font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase;
  transform: rotate(-12deg) scale(2.4); opacity: 0;
}
.verdict.in .stamp { animation: stamp .45s cubic-bezier(.2, 1.6, .5, 1) 1.6s forwards; }
@keyframes stamp { to { transform: rotate(-12deg) scale(1); opacity: .95; } }
.verdict.in .verdict-card { animation: thud .3s ease 1.75s; }
@keyframes thud { 40% { transform: translateY(4px) scale(.99); } }

/* --- 5. the flashlight --- */
.flash { position: relative; min-height: 90vh; display: flex; align-items: center; overflow: hidden; background: #07090e; --x: 50%; --y: 50%; cursor: crosshair; }
.flash-clues span {
  position: absolute; padding: 6px 10px; border-radius: 10px; background: rgba(40, 44, 56, .9); border: 1px solid #39405a;
  font: 600 14px var(--mono); color: #e8e3d6; white-space: nowrap; transform: rotate(-2deg);
}
.flash-clues span:nth-child(even) { transform: rotate(2deg); }
.flash-dark { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle 190px at var(--x) var(--y), rgba(7,9,14,0) 0, rgba(7,9,14,.55) 120px, rgba(7,9,14,.97) 200px); }
.flash-copy { position: relative; z-index: 2; pointer-events: none; text-align: center; }
.flash-copy .lead { margin: 0 auto; }
.flash-copy h2 { font-size: clamp(40px, 6vw, 72px); text-shadow: 0 4px 30px #000; }

/* --- 6. receipts --- */
.receipts { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: stretch; }
.receipt {
  position: relative; padding: 26px 24px 34px; background: #f3efe6; color: #1d1a15; font-family: var(--mono); font-size: 14px;
  display: flex; flex-direction: column;   /* all three end at the same height, footer at the bottom */
  box-shadow: 0 20px 40px rgba(0,0,0,.45);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
}
.receipt:nth-child(2) { transform: rotate(1.2deg); } .receipt:nth-child(1) { transform: rotate(-1deg); }
.receipt.reveal:not(.in) { transform: translateY(26px); }
.receipt .r-head { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px dashed #b9b2a2; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: #5e584a; }
.receipt .r-big { margin: 0 0 10px; font: 800 54px/1 var(--display); font-stretch: 75%; }
.receipt ul { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 2px dashed #b9b2a2; }
.receipt li { display: flex; justify-content: space-between; padding: 4px 0; }
.receipt .r-foot { margin: auto 0 0; padding-top: 16px; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: #7a7364; }

/* --- 7. incoming call --- */
.call { padding: 110px 16px 130px; display: flex; justify-content: center; background: radial-gradient(ellipse at 50% 30%, #1b2235, var(--ink) 65%); }
.call-card { width: min(420px, 100%); text-align: center; padding: 40px 24px 30px; border-radius: 34px;
  background: linear-gradient(180deg, rgba(36,41,56,.9), rgba(14,17,26,.95)); border: 1px solid #2c3346; box-shadow: 0 40px 90px rgba(0,0,0,.5); }
.call-card.ringing { animation: buzz .45s linear 2; }
@keyframes buzz { 0%, 100% { transform: translate(0, 0) rotate(0); } 15% { transform: translate(-3px, 1px) rotate(-1deg); } 30% { transform: translate(3px, -1px) rotate(1deg); }
  45% { transform: translate(-3px, 0) rotate(-.6deg); } 60% { transform: translate(3px, 1px) rotate(.6deg); } 75% { transform: translate(-1px, 0); } }
.call-card h2 { font-size: clamp(42px, 8vw, 60px); margin: 8px 0 4px; }
.call-sub { color: var(--muted); margin: 0 0 34px; }
.call-actions { display: flex; justify-content: space-around; gap: 20px; }
.call-btn { display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; background: none; color: var(--text); text-decoration: none; cursor: pointer; font: 600 14px var(--body); }
.call-btn svg { width: 74px; height: 74px; padding: 20px; border-radius: 50%; color: #fff; }
.call-decline svg { background: #e5483f; }
.call-accept svg { background: #2fbf5f; animation: ringpulse 1.4s ease-out infinite; }
.call-accept:hover svg { background: #36d26a; } .call-decline:hover svg { background: #f05a51; }
.call-accept:hover { color: var(--text); }
.call-note { margin: 26px 0 0; min-height: 1.5em; font: 600 13px var(--mono); letter-spacing: .08em; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .reveal, .evidence { opacity: 1; transform: none; filter: none; transition: none; }
  .evidence, .evidence * { animation: none !important; }
  .evidence { transform: rotate(var(--r)); }
  .marks path { stroke-dashoffset: 0; } .scribble { clip-path: none; } .evidence .tag { clip-path: none; } .ink-stamp { opacity: .9; }
  .call-card.ringing { animation: none; }
  .story { height: auto; } .story-sticky { position: static; height: auto; padding: 60px 0; }
  .story-beat, .story-cta { opacity: 1; transform: none; }
  .story-beat:not(.on), .story-beat.on:has(~ .story-beat.on) { display: block; }
  .stamp { opacity: .95; transform: rotate(-12deg); } .verdict.in .stamp, .verdict.in .verdict-card { animation: none; }
  .xtape { transform: rotate(-9deg); transition: none; }
  .call-accept svg { animation: none; }
}

/* the sound button asks for attention while the intro plays muted */
.cine-sound.loud { border-color: var(--amber); color: var(--amber); animation: soundcall 1.6s ease-in-out infinite; }
@keyframes soundcall { 50% { box-shadow: 0 0 0 10px rgba(242,163,58,0); } 0% { box-shadow: 0 0 0 0 rgba(242,163,58,.5); } }
@media (prefers-reduced-motion: reduce) { .cine-sound.loud { animation: none; } }
/* rotated cards and tags must never cause sideways scrolling */
.board, .files, .receipts-wrap, .accuse, .flash, .call { overflow-x: clip; }
html { overflow-x: clip; }