/* ==========================================================================
   SECRET JUICE page — layered on top of styles.css.

   The promo film (CASE FILE Nº 355) plays behind the whole page. The page is
   the rest of the case: an evidence-camera readout that follows the film,
   then the file itself as you scroll (the report with its tape ripped off,
   the evidence, the formula, the can under the lamp), and a BUY NOW that is
   always one tap away. Type borrows the film's: Special Elite for anything
   typed, Montserrat 900 for the verdict. Colour comes from the can: strawberry
   and kiwi.
   ========================================================================== */

@font-face{ font-family:"Special Elite"; src:url("fonts/special-elite.woff2") format("woff2"); font-display:swap; }
@font-face{ font-family:"Montserrat"; src:url("fonts/montserrat.woff2") format("woff2"); font-weight:700 900; font-display:swap; }

.page-juice{
  --straw:#e3203a;
  --straw-lift:#ff3d52;
  --kiwi:#8cc63f;
  --paper:#efe6cf;
  --ink-type:#1f1b17;
  --typed:"Special Elite", "Courier New", monospace;
  --verdict:"Montserrat", var(--display);
  --dim:0;
}

body.page-juice{ height:auto; min-height:100%; overflow-x:hidden; overflow-y:auto; overscroll-behavior:auto; }

/* --------------------------------------------------------------- the film */

.film{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:#000; }
.film__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  /* the film drifts back and softens as the file opens over it */
  transform:scale(calc(1 + var(--dim) * .06));
  filter:blur(calc(var(--dim) * 14px)) saturate(calc(1 - var(--dim) * .3));
}
/* Slow devices: the film darkens behind the file but isn't re-blurred every frame (src/quality.js). */
.q-lite .film__video{ filter:none; }
.film__shade{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(5,5,5,.88), rgba(5,5,5,0) 42%),
    rgba(5,5,5, calc(.08 + var(--dim) * .8));
}

.page-juice .hud--top{ transition:background .4s var(--ease); }
/* Scrolled, the header is a solid strip: the file passes under it, never through its letters. */
.page-juice.is-scrolled .hud--top{ background:rgba(5,5,5,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(242,243,245,.06); }
.page-juice .hud--top .nav{ margin-left:auto; }

/* The stamps land from far bigger than they end; nothing may widen the page on the way. */
.juice{ position:relative; z-index:2; overflow-x:clip; }

/* Shared type */
.typed{
  margin:0;
  font-family:var(--typed); font-size:clamp(.78rem, .95vw, .92rem); letter-spacing:.08em; text-transform:uppercase;
  color:rgba(239,230,207,.72);
}

/* The buy button: the can's red, the film's heavy type, an arrow that runs. */
.buy{
  pointer-events:auto;
  display:inline-flex; align-items:center; gap:.9em;
  padding:1.05em 1.9em 1em;
  font-family:var(--verdict); font-weight:900; font-size:.86rem; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; text-decoration:none;
  background:var(--straw);
  border-radius:2px;
  box-shadow:0 12px 40px -12px rgba(227,32,58,.8);
  animation:beacon 2.6s var(--ease) infinite;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.buy span{ transition:transform .35s var(--ease); }
.buy:hover{ background:var(--straw-lift); transform:translateY(-2px); }
.buy:hover span{ transform:translateX(6px); }
.buy--big{ font-size:clamp(.9rem, 1.2vw, 1.05rem); padding:1.25em 2.4em 1.2em; }
@keyframes beacon{
  0%, 100%{ box-shadow:0 12px 40px -12px rgba(227,32,58,.8), 0 0 0 0 rgba(255,61,82,.5); }
  60%{ box-shadow:0 12px 40px -12px rgba(227,32,58,.8), 0 0 0 16px rgba(255,61,82,0); }
}

/* The header's BUY NOW jolts when the film's DECLASSIFIED stamp lands. */
.cta-buy{ background:var(--straw) !important; border-color:var(--straw) !important; margin-left:clamp(10px, 1.2vw, 18px); }
.cta-buy.is-hit{ animation:jolt .7s var(--ease); }
@keyframes jolt{
  0%{ transform:scale(1); }
  18%{ transform:scale(1.18) rotate(-3deg); box-shadow:0 0 0 10px rgba(255,61,82,.35); }
  100%{ transform:scale(1); }
}

/* Evidence-camera corners, on the phone monitor and around the can. */
.corner{ position:absolute; width:clamp(16px, 2vw, 26px); height:clamp(16px, 2vw, 26px); border:2px solid rgba(239,230,207,.8); }
.corner--tl{ left:0; top:0; border-right:0; border-bottom:0; }
.corner--tr{ right:0; top:0; border-left:0; border-bottom:0; }
.corner--bl{ left:0; bottom:0; border-right:0; border-top:0; }
.corner--br{ right:0; bottom:0; border-left:0; border-top:0; }

/* ------------------------------------------------------------------- hero */

.hero{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(96px, 13vh, 130px) var(--gut) clamp(40px, 7vh, 72px);
}
.monitor{ display:none; }
/* The film runs bright in places (the paper, the lamp): shade the header's
   strip and the copy's corner so they read over any frame. */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(rgba(5,5,5,.78), rgba(5,5,5,0) 24%),
    linear-gradient(90deg, rgba(5,5,5,.72), rgba(5,5,5,.25) 42%, rgba(5,5,5,0) 60%);
}
.hero > *{ position:relative; }
.hero > .readout, .hero > .sound, .hero > .cue{ position:absolute; }

.readout{
  position:absolute; top:clamp(92px, 13vh, 124px); left:var(--gut);
  display:grid; gap:.5em;
  font-family:var(--typed); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(239,230,207,.85);
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.readout p{ margin:0; }
.readout__rec{ display:flex; align-items:center; gap:.7em; }
.readout__rec b{ width:9px; height:9px; border-radius:50%; background:var(--straw-lift); animation:rec 1.1s steps(2, jump-none) infinite; }
@keyframes rec{ 0%{ opacity:1 } 100%{ opacity:.15 } }
.readout__tc{ font-variant-numeric:tabular-nums; color:rgba(239,230,207,.6); }
.readout__log{ color:var(--kiwi); }
.readout__log::after{ content:"_"; margin-left:.15em; animation:rec .9s steps(2, jump-none) infinite; }

.hero__copy{ max-width:620px; position:relative; }
.hero__copy > *{ transition:opacity .6s var(--ease), transform .6s var(--ease); }
/* The cut-out letters on a strip of black tape, as on the film's end card. */
.hero__brand{ margin:.55em 0 .45em; line-height:0; }
.hero__brand picture, .verdict__tape picture{
  display:inline-block; padding:.9em 1.6em;
  background:linear-gradient(175deg, #1b1b1b, #070707 55%, #161616);
  clip-path:polygon(0 8%, 5% 0, 18% 6%, 34% 0, 50% 5%, 66% 0, 82% 6%, 96% 0, 100% 10%, 99% 90%, 94% 100%, 78% 94%, 60% 100%, 42% 95%, 24% 100%, 6% 94%, 1% 100%);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.9);
  transform:rotate(-2deg);
}
.hero__brand img{ display:block; width:clamp(240px, 30vw, 500px); height:auto; }
.hero__by{ margin:0; font-family:var(--verdict); font-weight:800; font-size:clamp(.9rem, 1.1vw, 1.05rem); letter-spacing:.34em; color:#fff; }
.hero__sub{ margin:.8em 0 0; max-width:44ch; font-size:clamp(.92rem, 1.05vw, 1.02rem); line-height:1.6; color:rgba(242,243,245,.72); }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:clamp(20px, 3vh, 30px); }
.open{
  pointer-events:auto;
  font-family:var(--typed); font-size:.9rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper); text-decoration:none;
  border-bottom:1px solid rgba(239,230,207,.4); padding-bottom:.25em;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.open:hover{ color:#fff; border-color:var(--kiwi); }

/* While the film shows its own end card, the page steps back to the button. */
body.is-endcard .hero__copy > :not(.hero__cta){ opacity:0; transform:translate3d(0, -12px, 0); }
body.is-endcard .hero__cta .open{ opacity:0; }
.readout{ transition:opacity .6s var(--ease); }
body.is-endcard .readout{ opacity:0; }

.sound{
  position:absolute; right:var(--gut); bottom:clamp(40px, 7vh, 72px);
  display:inline-flex; align-items:center; gap:.9em;
  padding:.8em 1.2em;
  font-family:var(--label); font-weight:500; font-size:.66rem; letter-spacing:.28em;
  color:var(--bone); background:rgba(5,5,5,.45); backdrop-filter:blur(6px);
  border:1px solid rgba(242,243,245,.3); border-radius:999px; cursor:pointer;
}
.sound:hover{ border-color:var(--bone); }
.sound__bars{ display:flex; align-items:flex-end; gap:2px; height:12px; }
.sound__bars i{ width:2px; height:3px; background:var(--bone); }
.sound[aria-pressed="true"] .sound__bars i{ animation:eq .9s var(--ease) infinite alternate; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(2){ animation-delay:-.3s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(3){ animation-delay:-.6s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(4){ animation-delay:-.15s; }
@keyframes eq{ from{ height:3px; } to{ height:12px; } }

.cue{
  position:absolute; left:50%; bottom:clamp(18px, 3vh, 30px); transform:translateX(-50%);
  margin:0; display:flex; flex-direction:column; align-items:center; gap:.7em;
  font-family:var(--label); font-size:.6rem; letter-spacing:.34em; color:rgba(242,243,245,.55);
}
.cue i{ width:1px; height:28px; background:linear-gradient(var(--bone), transparent); animation:drip 1.8s var(--ease) infinite; }
@keyframes drip{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* --------------------------------------------------------- shared sections */

.report, .evidence, .formula, .suspect{
  position:relative;
  max-width:1320px; margin:0 auto;
  padding:clamp(90px, 14vh, 160px) var(--gut);
}
/* Headlines size to their own column (cqi), so a wide screen can never push
   them into the paper beside them. */
.head{ margin-bottom:clamp(26px, 4vh, 44px); container-type:inline-size; }
.head__title{
  margin:.25em 0 0;
  font-family:var(--verdict); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.4rem, min(6vw, 16cqi), 6rem); line-height:.9; letter-spacing:-.01em;
  color:#fff;
}
[data-reveal] .head{ opacity:0; transform:translate3d(0, 40px, 0); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].is-in .head{ opacity:1; transform:none; }

.polaroid{
  margin:0; padding:12px 12px 46px; width:clamp(170px, 17vw, 250px);
  background:#f6f3ea; box-shadow:0 22px 50px -18px rgba(0,0,0,.9);
  position:relative;
  transform:rotate(var(--r));
  opacity:0; translate:0 -70px; rotate:calc(var(--r) * 2);
  transition:opacity .6s var(--ease), translate .8s var(--ease), rotate .8s var(--ease);
  transition-delay:calc(.9s + var(--n) * .35s);
}
[data-reveal].is-in .polaroid{ opacity:1; translate:0 0; rotate:0deg; }
.polaroid img{ display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; }
.polaroid figcaption{
  position:absolute; left:14px; right:14px; bottom:13px;
  font-family:var(--typed); font-size:.72rem; letter-spacing:.06em; color:#3a3530;
}
.polaroid::before{ /* the clip that holds it */
  content:""; position:absolute; top:-10px; left:50%; width:44px; height:18px; margin-left:-22px;
  background:linear-gradient(#cfd2d6, #8d9297); border-radius:3px; box-shadow:0 2px 4px rgba(0,0,0,.5);
}

.stamp{
  position:absolute;
  font-family:var(--display); font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  color:var(--straw); border:4px solid var(--straw); padding:.12em .4em .04em; border-radius:4px;
  mix-blend-mode:multiply; opacity:.85;
}

/* ------------------------------------------------------------ 01 · report */

.report{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.3fr) minmax(0, .7fr); gap:clamp(24px, 4vw, 60px); align-items:center; }
.report .head{ align-self:start; }
.folder{
  position:relative;
  padding:clamp(14px, 1.6vw, 22px);
  background:#c9a86a url("img/juice/manila.webp") center / 512px;
  background-image:image-set(url("img/juice/manila.avif") type("image/avif"), url("img/juice/manila.webp") type("image/webp"));
  box-shadow:0 40px 80px -30px rgba(0,0,0,.95);
  transform:rotate(-1.5deg) translate3d(0, 60px, 0); opacity:0;
  transition:transform 1s var(--ease), opacity .8s var(--ease);
}
[data-reveal].is-in .folder{ transform:rotate(-1.5deg); opacity:1; }
.page{
  position:relative;
  padding:clamp(22px, 3vw, 44px) clamp(22px, 3vw, 46px) clamp(30px, 4vw, 56px);
  background:var(--paper) url("img/juice/paper.webp") center / 512px;
  background-image:image-set(url("img/juice/paper.avif") type("image/avif"), url("img/juice/paper.webp") type("image/webp"));
  font-family:var(--typed); color:var(--ink-type);
  font-size:clamp(1.05rem, 1.65vw, 1.55rem); line-height:1.9;
}
.page p{ margin:0; }
.page__head{ font-size:.62em; letter-spacing:.08em; padding-bottom:.9em; margin-bottom:1em !important; border-bottom:1px solid rgba(31,27,23,.35); }
.page__gap{ margin-top:1.1em !important; }

/* The redaction: black tape over the word, ripped off in turn once the file
   is open, then a red marker ring around what it hid (as in the film). */
.redact{ position:relative; background:none; color:inherit; padding:0 .12em; white-space:nowrap; }
.redact::before{
  content:""; position:absolute; inset:.12em -.25em .02em;
  background:linear-gradient(170deg, #1a1a1a, #050505 60%, #1c1c1c);
  clip-path:polygon(0 12%, 6% 0, 20% 8%, 36% 0, 52% 6%, 70% 0, 86% 7%, 100% 0, 98% 88%, 90% 100%, 72% 92%, 55% 100%, 38% 93%, 20% 100%, 4% 94%);
  box-shadow:0 2px 3px rgba(0,0,0,.4);
  transform-origin:0 50%;
  transition:transform .55s cubic-bezier(.55, 0, .7, .2), opacity .45s ease-in;
  transition-delay:calc(1.1s + var(--n) * .6s);
}
[data-reveal].is-in .redact::before{ transform:translate3d(35%, -170%, 0) rotate(-26deg); opacity:0; }
.redact svg{
  position:absolute; left:-.45em; top:-.3em; width:calc(100% + .9em); height:calc(100% + .6em);
  overflow:visible; pointer-events:none;
}
.redact ellipse{
  fill:none; stroke:#d11f2f; stroke-width:2.4; vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset .55s var(--ease);
  transition-delay:calc(1.45s + var(--n) * .6s);
}
[data-reveal].is-in .redact ellipse{ stroke-dashoffset:0; }
.redact--short svg{ left:-.7em; width:calc(100% + 1.4em); }

.stamp--classified{ right:clamp(14px, 2vw, 30px); bottom:clamp(14px, 2vw, 26px); font-size:clamp(1rem, 1.7vw, 1.6rem); transform:rotate(-12deg); }

.exhibits{ display:grid; gap:clamp(18px, 3vw, 34px); justify-items:center; }

/* ---------------------------------------------------------- 02 · evidence */

.proof{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(10px, 1.4vw, 20px);
}
.proof li{
  position:relative;
  container-type:inline-size; text-align:center;
  padding:clamp(20px, 2.4vw, 34px) clamp(18px, 2vw, 28px);
  background:rgba(5,5,5,.55); backdrop-filter:blur(10px);
  border:1px solid rgba(242,243,245,.1);
  border-top:3px solid var(--straw);
  opacity:0; transform:translate3d(0, 60px, 0);
  transition:opacity .7s var(--ease), transform .9s var(--ease);
  transition-delay:calc(.3s + var(--n) * .12s);
}
.proof li:nth-child(even){ border-top-color:var(--kiwi); }
[data-reveal].is-in .proof li{ opacity:1; transform:none; }
.proof b{
  display:block;
  font-family:var(--verdict); font-weight:900; line-height:.9;
  /* sized to the tile, so ZERO and 200MG always sit inside it */
  font-size:clamp(2rem, 24cqi, 6.4rem); color:#fff; font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.proof b small{ font-size:.34em; margin-left:.15em; letter-spacing:.04em; }
.proof li > span{ display:block; margin-top:.9em; font-family:var(--typed); font-size:.82rem; letter-spacing:.08em; color:rgba(239,230,207,.72); }

/* ----------------------------------------------------------- 03 · formula */

.formula{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows:auto 1fr; column-gap:clamp(40px, 5.5vw, 100px); }
.formula .head{ grid-column:1; }
.sheet{
  grid-column:2; grid-row:1 / span 2; align-self:start;
  padding:clamp(26px, 3.4vw, 50px);
  background:var(--paper) url("img/juice/paper.webp") center / 512px;
  background-image:image-set(url("img/juice/paper.avif") type("image/avif"), url("img/juice/paper.webp") type("image/webp"));
  box-shadow:0 40px 80px -30px rgba(0,0,0,.95);
  font-family:var(--typed); color:var(--ink-type);
  transform:rotate(.8deg) translate3d(0, 60px, 0); opacity:0;
  transition:transform 1s var(--ease), opacity .8s var(--ease);
}
[data-reveal].is-in .sheet{ transform:rotate(.8deg); opacity:1; }
.sheet__head{ display:flex; justify-content:space-between; margin:0 0 1.2em; padding-bottom:.7em; border-bottom:2px solid var(--ink-type); font-size:clamp(1.1rem, 1.6vw, 1.45rem); }
.sheet__rows{ list-style:none; margin:0; padding:0; display:grid; gap:.8em; font-size:clamp(.82rem, 1.12vw, 1.08rem); }
.sheet__note{ margin:1.6em 0 0; font-size:.72rem; color:rgba(31,27,23,.6); }
.sheet__rows li{
  display:flex; align-items:baseline; gap:.6em;
  /* typed, row after row */
  clip-path:inset(0 100% 0 0);
  transition:clip-path .6s steps(18, end);
  transition-delay:calc(.9s + var(--n) * .16s);
}
[data-reveal].is-in .sheet__rows li{ clip-path:inset(0 0 0 0); }
.sheet__rows span{ flex:0 1 auto; }
.sheet__rows li::after{ content:""; order:1; flex:1; border-bottom:1px dotted rgba(31,27,23,.55); transform:translateY(-.3em); }
.sheet__rows b{ order:2; font-weight:400; }
.polaroid--formula{ grid-column:1; grid-row:2; align-self:end; justify-self:center; }

/* ----------------------------------------------------- 04 · identified */

.suspect{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(24px, 4vw, 70px); align-items:center; }
.stage{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:1.2em;
  padding:clamp(40px, 6vh, 70px) 0 clamp(20px, 3vh, 36px);
  /* the lamp's cone, and the film's red and green lights */
  background:
    radial-gradient(40% 55% at 50% 0%, rgba(255,244,214,.2), transparent 70%),
    radial-gradient(35% 45% at 28% 62%, rgba(227,32,58,.32), transparent 70%),
    radial-gradient(35% 45% at 72% 62%, rgba(140,198,63,.28), transparent 70%);
}
.stage__lamp{ position:absolute; top:0; left:50%; width:120px; height:14px; margin-left:-60px; border-radius:0 0 60px 60px; background:linear-gradient(#3b3b3b, #0d0d0d); box-shadow:0 10px 40px 10px rgba(255,244,214,.25); }
.stage__frame{
  position:relative; padding:clamp(18px, 2.4vw, 30px) clamp(40px, 5vw, 70px);
  perspective:900px;
}
.can{
  display:block; height:clamp(320px, 58vh, 600px); width:auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.8));
  transform:rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) translate3d(0, 40px, 0);
  opacity:0;
  transition:opacity .9s var(--ease), transform .3s var(--ease);
  animation:float 5s ease-in-out infinite;
}
[data-reveal].is-in .can{ opacity:1; transform:rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); }
@keyframes float{ 0%, 100%{ translate:0 0; } 50%{ translate:0 -10px; } }
.stage .corner{ opacity:0; transform:scale(1.6); transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:.5s; }
.stage .corner--tl{ transform-origin:0 0; } .stage .corner--tr{ transform-origin:100% 0; }
.stage .corner--bl{ transform-origin:0 100%; } .stage .corner--br{ transform-origin:100% 100%; }
[data-reveal].is-in .stage .corner{ opacity:1; transform:none; }

.stamp--declassified{
  left:50%; top:58%;
  font-size:clamp(2rem, 3.6vw, 3.4rem); border-width:6px;
  mix-blend-mode:normal; background:rgba(5,5,5,.12);
  translate:-50% -50%;
  transform:scale(2.6) rotate(-4deg); opacity:0;
  transition:transform .28s cubic-bezier(.5, 0, .75, 0), opacity .18s ease-in;
  transition-delay:1.3s;
}
[data-reveal].is-in .stamp--declassified{ transform:scale(1) rotate(-14deg); opacity:.92; }
[data-reveal].is-in .stage{ animation:thud .4s 1.58s both; }
@keyframes thud{ 0%{ transform:none; } 30%{ transform:translate3d(0, 4px, 0); } 60%{ transform:translate3d(0, -2px, 0); } 100%{ transform:none; } }

.verdict{ container-type:inline-size; opacity:0; transform:translate3d(0, 50px, 0); transition:opacity .9s var(--ease), transform 1s var(--ease); transition-delay:.3s; }
[data-reveal].is-in .verdict{ opacity:1; transform:none; }
.out{
  margin:0;
  font-family:var(--verdict); font-weight:900; text-transform:uppercase;
  font-size:clamp(3rem, min(8vw, 17cqi), 8.4rem); line-height:.88; letter-spacing:-.015em;
  color:#fff;
}
.out span{ display:block; }
.out__red{ color:var(--straw-lift); text-shadow:0 0 50px rgba(227,32,58,.45); }
.verdict__tape{ margin:clamp(18px, 3vh, 30px) 0 0; line-height:0; }
.verdict__tape img{ display:block; width:clamp(200px, 22vw, 340px); height:auto; }
.verdict__by{ margin:1.4em 0 0; font-family:var(--verdict); font-weight:800; font-size:.95rem; letter-spacing:.34em; color:#fff; }
.verdict__support{ margin:.6em 0 clamp(22px, 3.4vh, 34px); font-family:var(--verdict); font-weight:700; font-size:.8rem; letter-spacing:.24em; color:rgba(242,243,245,.7); }
.verdict__url{ margin:1.2em 0 0; font-family:var(--verdict); font-weight:800; font-size:.9rem; letter-spacing:.2em; color:#fff; }

.legal{ position:relative; z-index:2; padding:0 var(--gut) clamp(40px, 7vh, 70px); }
.legal p{ max-width:760px; margin:0 auto; text-align:center; font-size:.72rem; line-height:1.6; color:rgba(242,243,245,.45); }

/* ---------------------------------------------------------------- phones */

@media (max-aspect-ratio: 4/5), (max-width: 760px){
  .film__video{ filter:none; transform:none; }  /* already blurred at encode, and cheaper this way */
  .film__shade{ background:rgba(5,5,5, calc(.45 + var(--dim) * .4)); }

  .hero{ justify-content:flex-start; padding-top:88px; gap:16px; }
  .monitor{
    display:block; position:relative; margin:0 -4px;
    padding:10px; aspect-ratio:auto;
  }
  .monitor__video{ display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; background:#000; box-shadow:0 20px 50px -16px rgba(0,0,0,.95); }
  .readout{ position:static; grid-auto-flow:column; justify-content:space-between; align-items:center; font-size:.62rem; gap:.4em 1em; }
  .readout__log{ grid-column:1 / -1; }
  .hero__copy{ margin-top:4px; }
  .hero__brand{ margin:.35em 0 .3em; }
  .hero__brand img{ width:min(66vw, 300px); }
  .cta-buy{ font-size:.6rem; letter-spacing:.16em; padding:.8em 1.2em; }
  .hero::before{ display:none; }
  .hero > .readout, .hero > .sound{ position:static; }
  .hero__by{ letter-spacing:.28em; font-size:.82rem; }
  .hero__sub{ font-size:.86rem; }
  .buy{ font-size:.74rem; padding:1em 1.4em; }
  .sound{ position:static; align-self:flex-start; }
  .cue{ display:none; }
  body.is-endcard .hero__copy > :not(.hero__cta){ opacity:1; transform:none; }
  body.is-endcard .hero__cta .open, body.is-endcard .readout{ opacity:1; }

  .report{ grid-template-columns:1fr; gap:26px; }
  .page{ font-size:1.02rem; line-height:1.85; }
  .exhibits{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
  .polaroid{ width:100%; max-width:170px; padding:8px 8px 34px; }
  .polaroid figcaption{ font-size:.58rem; left:9px; right:9px; bottom:10px; }

  .proof{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  .proof b{ font-size:clamp(1.8rem, 24cqi, 3.4rem); }
  .proof li > span{ font-size:.66rem; }

  .formula{ grid-template-columns:1fr; }
  .sheet{ grid-column:1; grid-row:auto; padding:20px 16px; }
  .sheet__rows{ font-size:.68rem; gap:.5em; }
  .polaroid--formula{ grid-row:auto; margin-top:26px; justify-self:end; max-width:150px; }

  .suspect{ grid-template-columns:1fr; text-align:center; }
  .can{ height:min(52vh, 420px); }
  .verdict__tape img{ width:min(56vw, 260px); }
  .out{ font-size:clamp(3rem, 16vw, 4.6rem); }
}

@media (prefers-reduced-motion: reduce){
  .buy, .can, .readout__rec b, .readout__log::after, .cue i, .cta-buy.is-hit{ animation:none; }
  .redact::before, .redact ellipse, .sheet__rows li, .polaroid, .proof li, .folder, .sheet, .verdict, .stamp--declassified{ transition-duration:0s; transition-delay:0s; }
}

/* A phone held sideways: the hero reads top to bottom (the readout, then the
   copy, then SOUND), so the readout never sits on the copy and the scroll cue
   never on OPEN THE FILE. */
@media (orientation:landscape) and (max-height:520px){
  .hero{ min-height:0; justify-content:flex-start; gap:14px; padding-top:72px; padding-bottom:28px; }
  .hero > .readout, .hero > .sound{ position:static; }
  .readout{ grid-auto-flow:column; justify-content:start; align-items:center; gap:.4em 1.4em; font-size:.66rem; }
  .readout__log{ grid-column:1 / -1; }
  .sound{ align-self:flex-start; }
  .cue{ display:none; }
}