@charset "UTF-8";
/* ===== site.css ===== */
/* ============================================================
   ATTACK OF THE KILLER TOMATOES — "THE TOMATO FILES"
   Design system. Dark declassified-dossier theme.
   ============================================================ */

/* ---------- 1. FONTS ---------- */
@font-face{font-family:"Kaneda Gothic";src:url("/fonts/KanedaGothic-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Kaneda Gothic";src:url("/fonts/KanedaGothic-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Kaneda Gothic";src:url("/fonts/KanedaGothic-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Kaneda Gothic";src:url("/fonts/KanedaGothic-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Kaneda Gothic";src:url("/fonts/KanedaGothic-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Kaneda Gothic";src:url("/fonts/KanedaGothic-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* ---------- 2. TOKENS ---------- */
:root{
  /* brand */
  --red:#ef1714; --yellow:#fcee22; --green:#288f47; --orange:#fea51f; --paper:#f5e6c8;
  /* derived */
  --red-deep:#8f0d0b; --red-glow:#ff3b32; --paper-2:#e6d2ab; --paper-3:#cbb89a;
  --green-crt:#5cff9d;
  /* ink */
  --ink:#100c0a; --ink-1:#181210; --ink-2:#221917; --ink-3:#2c211d; --ink-4:#392b25;
  --line:rgba(245,230,200,.22); --line-2:rgba(245,230,200,.13);
  --txt:#f8f1e4; --muted:#c2b39c; --muted-2:#a5957e;
  /* type */
  --display:"Kaneda Gothic",Impact,"Arial Narrow Bold",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --stamp:"Special Elite","Courier New",monospace;
  /* layout */
  --pad:clamp(20px,5vw,64px);
  --max:1280px; --max-narrow:820px;
  --r:2px; --r-lg:4px;
  --nav-h:88px;
  --ease:cubic-bezier(.2,.7,.25,1);
}

/* ---------- 3. RESET ---------- */
*,
*::before,
*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 28px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink);color:var(--txt);
  font-family:var(--display);font-weight:500;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,
svg,
video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,
textarea,
select{font:inherit;color:inherit}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
ul,
ol{margin:0}
ul,
ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
::selection{background:var(--red);color:#fff}
hr{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- 4. PAGE FILM GRAIN + SCANLINES ---------- */
.fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:9000}
.fx__grain{
  position:absolute;inset:-150%;opacity:.018;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation:grain 900ms steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion:reduce){.fx__grain{animation:none}}

/* ---------- 5. TYPE SCALE ---------- */
.d1{font-family:var(--display);font-weight:900;line-height:.82;letter-spacing:-.02em;text-transform:uppercase;
    font-size:clamp(2.9rem,10.5vw,8.5rem)}
.d2{font-family:var(--display);font-weight:900;line-height:.86;letter-spacing:-.015em;text-transform:uppercase;
    font-size:clamp(2.2rem,6.4vw,4.8rem)}
.d3{font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:-.01em;text-transform:uppercase;
    font-size:clamp(1.5rem,3.2vw,2.4rem)}
.d4{font-family:var(--display);font-weight:700;line-height:1.1;text-transform:uppercase;
    font-size:clamp(1.1rem,1.9vw,1.4rem);letter-spacing:.005em}
.lede{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.6;font-weight:500;color:#efe4d2;max-width:60ch}
.body{font-size:1.15rem;line-height:1.7;font-weight:500;color:#e2d7c3;max-width:66ch}
.body strong{color:#fff8ea;font-weight:700}

/* file label / kicker */
.kicker{
  font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);display:inline-flex;align-items:center;gap:.7em;
}
.kicker::before{content:"";width:26px;height:1px;background:currentColor;flex:none}
.kicker--green{color:var(--green-crt)}

.mono{font-family:var(--mono);font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}

/* ---------- 6. LAYOUT ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:var(--max-narrow)}
.sec{position:relative;padding-block:clamp(48px,7vw,104px)}
.sec--tight{padding-block:clamp(34px,4.5vw,64px)}
.sec__head{display:flex;flex-direction:column;gap:13px;margin-bottom:clamp(26px,3.2vw,44px);max-width:70ch}
.sec__head--center{align-items:center;text-align:center;margin-inline:auto}
.grid{display:grid;gap:clamp(16px,2vw,26px)}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.g3,
.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g3,
.g4{grid-template-columns:minmax(0,1fr)}}

/* section surfaces */
.sec--panel{background:var(--ink-1)}
.sec--paper{background:var(--paper);color:#241a12}
.sec--paper .body{color:#4a3a2a}
.sec--paper .kicker{color:var(--red-deep)}
.sec--paper .mono{color:#8a755a}
.sec--red{background:linear-gradient(160deg,var(--red-deep),#5c0806 70%)}

/* hairline rule with file code */
.rule{display:flex;align-items:center;gap:16px;padding-block:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rule .mono{white-space:nowrap;min-width:0}
@media (max-width:1100px){.rule{flex-wrap:wrap;row-gap:6px}.rule .mono{white-space:normal}}
.rule::after{content:"";flex:1;height:1px;background:repeating-linear-gradient(to right,var(--line) 0 6px,transparent 6px 12px)}

/* ---------- 7. BUTTONS ---------- */
.btn{
  --bg:var(--red);--fg:#fff;--bd:var(--red);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.95em 1.7em;background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  font-family:var(--mono);font-size:.88rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  border-radius:var(--r);cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 -2px rgba(0,0,0,.6),0 0 26px -6px var(--bd)}
.btn:active{transform:translateY(0)}
.btn--ghost{--bg:transparent;--fg:var(--txt);--bd:rgba(245,230,200,.35)}
.btn--ghost:hover{--bg:rgba(245,230,200,.07);--bd:var(--paper)}
.btn--yellow{--bg:var(--yellow);--fg:#1a1206;--bd:var(--yellow)}
.btn--green{--bg:var(--green);--fg:#fff;--bd:var(--green)}
.btn--sm{padding:.72em 1.25em;font-size:.78rem}
.btn--block{width:100%}
.btn__ico{width:1em;height:1em;flex:none}

/* ---------- 8. STAMPS + REDACTION ---------- */
.stamp{
  display:inline-block;font-family:var(--stamp);font-size:clamp(.7rem,1.1vw,.9rem);
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);
  border:2.5px solid currentColor;padding:.34em .7em;border-radius:2px;
  transform:rotate(-6deg);opacity:.86;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(239,23,20,.25);
  mix-blend-mode:screen;
}
.sec--paper .stamp{mix-blend-mode:multiply;opacity:.72}
.stamp--r3{transform:rotate(3deg)}
.stamp--lg{font-size:clamp(.9rem,2vw,1.4rem);border-width:3px;padding:.3em .6em}

/* redaction: black bar that wipes away on reveal.
   Base state is READABLE — the bar is only applied when JS is confirmed,
so no-JS visitors and crawlers always get the text. */
.redact{
  position:relative;display:inline-block;color:var(--red);
  border-radius:1px;padding-inline:.15em;
}
.sec--paper .redact{color:var(--red-deep)}

.js .redact{
  color:transparent;background:#000;cursor:pointer;
  transition:color .35s .25s ease,background .5s var(--ease);
}
.js .redact::after{
  content:"";position:absolute;inset:0;background:#000;
  transform-origin:right center;transition:transform .55s var(--ease);
}
.js .redact.is-open{color:var(--red);background:transparent}
.js .sec--paper .redact.is-open{color:var(--red-deep)}
.js .redact.is-open::after{transform:scaleX(0)}

@media (prefers-reduced-motion:reduce){
  .js .redact{color:var(--red);background:transparent;transition:none}
  .js .sec--paper .redact{color:var(--red-deep)}
  .js .redact::after{display:none}
}

/* highlighter */
.hl{background:linear-gradient(transparent 58%,rgba(252,238,34,.32) 58% 92%,transparent 92%);color:var(--yellow)}
.sec--paper .hl{color:#241a12;background:linear-gradient(transparent 58%,rgba(252,238,34,.75) 58% 92%,transparent 92%)}

/* ---------- 9. TICKER ---------- */
.ticker{
  position:relative;overflow:hidden;background:var(--red);color:#fff;
  border-block:1px solid rgba(0,0,0,.35);
}
.ticker--dark{background:var(--ink-2);color:var(--muted);border-block-color:var(--line)}
.ticker__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.ticker--fast .ticker__track{animation-duration:26s}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__grp{display:flex;flex:none;align-items:center}
.ticker__item{
  display:inline-flex;align-items:center;gap:.85em;padding:.62em 1.15em;
  font-family:var(--mono);font-size:.79rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
}
.ticker__item::after{content:"◆";font-size:.55em;opacity:.6}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* ---------- 10. NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:8000;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(10,7,6,.72);backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line-2);
  transition:background .3s,border-color .3s;
}
.nav.is-stuck{background:rgba(10,7,6,.94);border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;gap:22px;width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.nav__logo{display:flex;align-items:center;gap:10px;flex:none}
.nav__logo img{height:60px;width:auto;transition:height .2s var(--ease)}
.nav__links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__link{
  position:relative;padding:.6em .82em;border-radius:var(--r);
  font-family:var(--mono);font-size:.82rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  transition:color .2s,background .2s;
}
.nav__link:hover,
.nav__link[aria-current="page"]{color:var(--txt);background:rgba(245,230,200,.06)}
.nav__link[aria-current="page"]::after{
  content:"";position:absolute;left:.82em;right:.82em;bottom:.34em;height:1px;background:var(--red);
}
.nav__dot{width:5px;height:5px;border-radius:50%;background:var(--red);display:inline-block;margin-right:.5em;
  animation:blip 1.6s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.nav__dot{animation:none}}
.nav__cta{margin-left:8px}

/* Seasonal nav item. Tinted to the contest page's own yellow and outlined so
   it reads as a limited thing rather than a sixth section, because the row had
   the width for a sixth link but not the attention.

   One word, and nowrap, because the label has to hold on one line: at 1025px,
   the narrowest width that still shows this row, "Pumpkin Contest" wrapped
   inside its own pill and took "Organic Intelligence" and "Fan Club" onto
   second lines with it, turning a 61px bar into a ragged 83px one. Nothing
   wrapped there before this item existed. Measured both ways.

   Drop "hot" from the entry in site.json when the contest closes and every
   rule below goes quiet with it. */
.nav__link--hot{
  color:var(--yellow);border:1px solid rgba(252,238,34,.42);
  background:rgba(252,238,34,.08);margin-left:6px;white-space:nowrap;
}
.nav__link--hot:hover,
.nav__link--hot[aria-current="page"]{color:var(--yellow);background:rgba(252,238,34,.16)}
.nav__dot--hot{background:var(--yellow)}
.nav__burger{
  display:none;margin-left:auto;width:42px;height:42px;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r);
}
.nav__burger span{display:block;width:18px;height:1.5px;background:var(--txt);position:relative;transition:.25s var(--ease)}
.nav__burger span::before,
.nav__burger span::after{
  content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--txt);transition:.25s var(--ease)}
.nav__burger span::before{top:-6px}.nav__burger span::after{top:6px}
body.menu-open .nav__burger span{background:transparent}
body.menu-open .nav__burger span::before{top:0;transform:rotate(45deg)}
body.menu-open .nav__burger span::after{top:0;transform:rotate(-45deg)}

/* mobile drawer */
.menu{
  position:fixed;inset:var(--nav-h) 0 0;z-index:7900;background:var(--ink);
  display:flex;flex-direction:column;padding:clamp(20px,6vw,40px) var(--pad) 40px;
  transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  overflow-y:auto;
}
body.menu-open .menu{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.menu__link{
  display:flex;align-items:baseline;gap:14px;padding:.62em 0;border-bottom:1px solid var(--line-2);
  font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,7vw,2.4rem);text-transform:uppercase;line-height:1.05;
}
.menu__link .mono{font-size:.6rem;color:var(--red);flex:none}
.menu__link--hot,
.menu__link--hot .mono{color:var(--yellow)}
.menu__foot{margin-top:auto;padding-top:28px;display:flex;flex-wrap:wrap;gap:10px}
/* Raised from 960 when Fan Club made the bar five items, and from 1024 when
   Contest made it six. Measured rather than guessed, because .nav__in spends
   more width than it looks: 51px of padding each side and a 22px gap either
   side of the link row, so a 1025px viewport offers the bar only 908px of
   usable space. Logo 81 + links 720 + button 133 + 44 of gaps needs 978. Five
   links fit in 908 with 36px to spare; six do not, and the shortfall came out
   as "Organic Intelligence" and "Fan Club" wrapping into a ragged 83px bar.
   978 of content wants a 1096px viewport, which would mean a 1120 breakpoint.

   It stays at 1024 only because the Get Tickets button is currently switched
   off in site.json, which gives back its 133px and the 22px gap beside it: six
   links then need 823 and fit inside 908 with 85px spare. Turn navCta.show
   back on and this pair has to move to 1119/1120 or the bar goes ragged again.
   Both halves move together or the two menus overlap or leave a gap. */
@media (max-width:1024px){
  .nav__links{display:none}
  .nav__burger{display:flex}
}
@media (min-width:1025px){.menu{display:none}}

/* ---------- 11. HERO ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(var(--nav-h) + 40px);overflow:hidden;isolation:isolate;
}
.hero__bg{position:absolute;inset:0;z-index:-3}
.hero__bg video,
.hero__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05) brightness(.72)}
.hero__tint{position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(85% 65% at 30% 45%,rgba(0,0,0,.72),transparent 70%),
    linear-gradient(180deg,rgba(16,12,10,.70) 0%,rgba(16,12,10,.28) 30%,rgba(16,12,10,.72) 72%,var(--ink) 100%);
}
.hero__lines{position:absolute;inset:0;z-index:-1;opacity:.22;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,0,0,.4) 3px 4px)}
.hero__in{position:relative;width:100%;max-width:var(--max);margin-inline:auto;padding:0 var(--pad) clamp(28px,5vw,56px);display:flex;flex-direction:column;gap:clamp(18px,2.6vw,30px)}

.hero__badge{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.hero__logo{width:min(660px,86%);margin-left:-.02em;filter:drop-shadow(0 8px 34px rgba(0,0,0,.7))}
.hero__title{max-width:16ch}
.hero__title .l2{color:var(--red);text-shadow:0 0 44px rgba(239,23,20,.42)}
.hero__sub{max-width:52ch;color:#f2e8d6;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero__scroll{display:flex;align-items:center;gap:10px;color:var(--muted-2);font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase}
.hero__scroll i{width:1px;height:26px;background:linear-gradient(var(--red),transparent);display:block;animation:drop 1.8s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.hero__scroll i{animation:none}}
@media (max-width:640px){
  .hero{min-height:92svh}
  .hero__logo{width:100%}
}

/* ---------- 12. CARDS ---------- */
.card{
  position:relative;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:12px;
  transition:transform .28s var(--ease),border-color .28s,background .28s;overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:linear-gradient(160deg,rgba(239,23,20,.10),transparent 55%);
}
.card:hover{transform:translateY(-4px);border-color:rgba(245,230,200,.28);background:var(--ink-3)}
.card:hover::before{opacity:1}
.card__code{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;color:var(--red);text-transform:uppercase}
.card__title{font-family:var(--display);font-weight:700;font-size:1.05rem;text-transform:uppercase;line-height:1.2}
.card__note{font-size:1.08rem;line-height:1.65;font-weight:500;color:#d6c9b3}
.card__media{margin:calc(-1*clamp(18px,2.2vw,26px)) calc(-1*clamp(18px,2.2vw,26px)) 4px;aspect-ratio:16/10;overflow:hidden;background:var(--ink-3);position:relative}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);filter:saturate(.85)}
.card:hover .card__media img{transform:scale(1.045)}
.card__link{position:absolute;inset:0;z-index:2}

/* paper card variant */
.card--paper{background:var(--paper);border-color:rgba(36,26,18,.2);color:#241a12}
.card--paper .card__note{color:#4a3826}
.card--paper .card__code{color:var(--red-deep)}
.card--paper:hover{background:#fbf0da}

/* play badge */
.play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;width:54px;height:54px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.8);background:rgba(10,7,6,.55);backdrop-filter:blur(4px);
  display:grid;place-items:center;transition:.28s var(--ease);z-index:1;
}
.play::after{content:"";border-left:13px solid #fff;border-block:8px solid transparent;margin-left:4px}
.card:hover .play,
.evi:hover .play{background:var(--red);border-color:var(--red);scale:1.08}

/* ---------- 13. EVIDENCE BOARD (timeline) ---------- */
.board{position:relative}
.board__string{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.board__string path{fill:none;stroke:var(--red);stroke-width:1.4;opacity:.5;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.4s var(--ease)}
.board.is-in path{stroke-dashoffset:0}
.board__grid{position:relative;z-index:1;display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.board__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.board__grid{grid-template-columns:minmax(0,1fr)}}
.evi{
  position:relative;background:var(--paper);color:#241a12;padding:12px 12px 16px;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.85),0 2px 0 rgba(0,0,0,.4);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.evi:nth-child(odd){rotate:-1.1deg}
.evi:nth-child(even){rotate:.9deg}
.evi:nth-child(3n){rotate:-.4deg}
.evi:hover{rotate:0deg;transform:translateY(-6px) scale(1.015);box-shadow:0 22px 46px -14px rgba(0,0,0,.9)}
.evi__pin{
  position:absolute;top:-9px;left:50%;translate:-50%;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff6b5e,var(--red) 60%,#7a0a08);
  box-shadow:0 3px 6px rgba(0,0,0,.6);z-index:3;
}
.evi__media{aspect-ratio:4/3;overflow:hidden;background:#2a211a;position:relative}
.evi__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.1) sepia(.18)}
.evi__media--empty{display:grid;place-items:center;background:
  repeating-linear-gradient(45deg,#241a12 0 8px,#2e231a 8px 16px)}
.evi__media--empty span{font-family:var(--stamp);font-size:.72rem;letter-spacing:.2em;color:rgba(245,230,200,.4);text-transform:uppercase}
.evi__body{padding:12px 6px 0;display:flex;flex-direction:column;gap:7px}
.evi__yr{font-family:var(--display);font-weight:900;font-size:1.9rem;line-height:.9;color:var(--red-deep)}
.evi__code{font-family:var(--mono);font-size:.69rem;letter-spacing:.2em;color:#8a755a;text-transform:uppercase}
.evi__title{font-family:var(--display);font-weight:800;font-size:1.02rem;text-transform:uppercase;line-height:1.12}
.evi__status{font-family:var(--stamp);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red-deep);
  border:1.5px solid currentColor;padding:.24em .5em;align-self:flex-start;opacity:.8}
.evi__note{font-size:1.06rem;line-height:1.6;font-weight:500;color:#453521}
.evi__link{position:absolute;inset:0;z-index:4}

/* ---------- 14. STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--ink-1)}
.stats>div{padding:clamp(20px,3vw,34px) clamp(14px,2vw,24px);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.stats>div:last-child{border-right:0}
.stats dt{font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,5.4vw,3.6rem);line-height:.85;color:var(--red)}
.stats dd{margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2)}
.stats .g{color:var(--green-crt)}
.stats .y{color:var(--yellow)}
.stats .p{color:var(--paper)}
@media (max-width:760px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats>div:nth-child(2n){border-right:0}
  .stats>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

/* ---------- 15. DOSSIER (two-col doc) ---------- */
.doss{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,60px);align-items:start}
@media (max-width:900px){.doss{grid-template-columns:minmax(0,1fr)}}
.doss__sheet{
  position:relative;background:var(--paper);color:#241a12;padding:clamp(24px,3.4vw,44px);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.9);border-radius:2px;
}
.doss__sheet::before{
  content:"";position:absolute;left:22px;top:0;bottom:0;width:1px;background:rgba(239,23,20,.22)
}
.doss__sheet::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:2px;
  background:radial-gradient(120% 100% at 100% 0,rgba(120,90,50,.13),transparent 55%);
}
.doss__sheet>*{position:relative;z-index:1;padding-left:clamp(14px,2vw,26px)}
.doss__hdr{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  border-bottom:2px solid rgba(36,26,18,.25);padding-bottom:12px;margin-bottom:20px}
.doss__aside{display:flex;flex-direction:column;gap:18px;position:sticky;top:calc(var(--nav-h) + 24px)}
@media (max-width:900px){.doss__aside{position:static}}
.doss__photo{position:relative;background:var(--ink-2);border:1px solid var(--line);padding:10px}
.doss__photo img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.3) contrast(1.1)}
.doss__photo figcaption{padding-top:10px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);display:flex;justify-content:space-between;gap:10px}
.doss__stampwrap{position:absolute;right:-10px;top:-14px;z-index:2}

/* definition rows */
.rows{display:flex;flex-direction:column;border-top:1px solid rgba(36,26,18,.18)}
.rows>div{display:flex;justify-content:space-between;gap:16px;padding:.72em 0;border-bottom:1px solid rgba(36,26,18,.18)}
.rows dt{font-family:var(--mono);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:#8a755a}
.rows dd{margin:0;font-family:var(--display);font-weight:700;font-size:1.02rem;text-transform:uppercase;text-align:right}
.sec:not(.sec--paper) .rows{border-top-color:var(--line)}
.sec:not(.sec--paper) .rows>div{border-bottom-color:var(--line)}
.sec:not(.sec--paper) .rows dt{color:var(--muted-2)}

/* ---------- 16. TERMINAL ---------- */
.term{
  background:#050a06;border:1px solid rgba(92,255,157,.24);border-radius:var(--r-lg);
  padding:clamp(18px,2.4vw,28px);font-family:var(--mono);font-size:.82rem;line-height:1.75;
  color:var(--green-crt);position:relative;overflow:hidden;
  box-shadow:inset 0 0 60px -20px rgba(92,255,157,.28);
}
.term::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.35) 2px 4px)}
.term__bar{display:flex;align-items:center;gap:8px;margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px solid rgba(92,255,157,.2);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.term__bar i{width:7px;height:7px;border-radius:50%;background:var(--green-crt);box-shadow:0 0 8px var(--green-crt)}
.term p{margin:0}
.term .q{color:#8fffbe;opacity:.55}
.term .cur{display:inline-block;width:.55em;height:1.05em;background:var(--green-crt);vertical-align:-2px;animation:blink 1.05s steps(2) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.term .cur{animation:none}}

/* ---------- 17. PODCAST LIST ---------- */
.tx{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.tx__row{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(12px,2vw,22px);align-items:center;
  padding:clamp(14px,2vw,20px) 0;border-bottom:1px solid var(--line);
  transition:padding-inline .28s var(--ease),background .28s;position:relative;
}
.tx__row:hover{background:rgba(245,230,200,.035);padding-inline:clamp(8px,1.4vw,16px)}
.tx__n{font-family:var(--mono);font-size:.76rem;letter-spacing:.18em;color:var(--red);white-space:nowrap}
.tx__t{font-family:var(--display);font-weight:600;font-size:clamp(.98rem,1.6vw,1.16rem);line-height:1.3;text-transform:uppercase}
.tx__m{display:flex;align-items:center;gap:10px;flex:none}
.tx__len{font-family:var(--mono);font-size:.82rem;letter-spacing:.14em;color:var(--muted-2);white-space:nowrap}
.tx__new{font-family:var(--mono);font-size:.67rem;letter-spacing:.18em;background:var(--yellow);color:#1a1206;padding:.24em .5em;border-radius:2px;font-weight:700}
.tx__wave{display:flex;align-items:flex-end;gap:2px;height:18px;flex:none}
.tx__wave i{width:2px;background:var(--green);opacity:.5;transition:.3s var(--ease)}
.tx__row:hover .tx__wave i{background:var(--green-crt);opacity:1}
@media (max-width:640px){.tx__wave{display:none}}

/* ---------- 18. FORM ---------- */
.form{display:flex;flex-direction:column;gap:14px}
.form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:560px){.form__grid{grid-template-columns:minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:6px}

/* Side-by-side fields share label / input / hint rows,
so a label that wraps
   to two lines lifts its neighbour's row instead of shunting its own input
   down out of line with the one beside it. */
@supports (grid-template-rows:subgrid){
  @media (min-width:561px){
    .form__grid{grid-template-rows:auto auto auto}
    .form__grid>.field{display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:6px}
  }
}
.field__h{
  font-family:var(--mono);font-size:.67rem;line-height:1.5;letter-spacing:.08em;
  color:var(--muted-2);align-self:start;
}
.sec--paper .field__h{color:#8a755a}
.field label{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.field input,
.field select,
.field textarea{
  width:100%;padding:.85em 1em;background:rgba(10,7,6,.6);border:1px solid var(--line);border-radius:var(--r);
  color:var(--txt);font-family:var(--mono);font-size:.85rem;transition:border-color .2s,background .2s;
}
.field input::placeholder{color:var(--muted-2);opacity:.7}
.field input:focus,
.field select:focus,
.field textarea:focus{border-color:var(--red);background:rgba(10,7,6,.9);outline:none}
.sec--paper .field input,
.sec--paper .field select{background:rgba(255,255,255,.65);border-color:rgba(36,26,18,.25);color:#241a12}
.sec--paper .field label{color:#8a755a}
.form__note{font-family:var(--mono);font-size:.72rem;line-height:1.7;letter-spacing:.06em;color:var(--muted-2)}
.form__msg{padding:.9em 1.1em;border-radius:var(--r);font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;display:none}
.form__msg.ok{display:block;background:rgba(40,143,71,.16);border:1px solid var(--green);color:var(--green-crt)}
.form__msg.err{display:block;background:rgba(239,23,20,.14);border:1px solid var(--red);color:#ff8a84}

/* Honeypot. A real, focusable text input that no human ever sees, moved
   off-screen rather than hidden: form-filling bots skip display:none and
   type="hidden", and skipping is precisely what must not happen here. Kept out
   of the tab order by tabindex="-1" in the markup, so aria-hidden on the
   wrapper is safe. See honeypot() in src/blocks.mjs. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Turnstile slot. The height is reserved up front even though the widget is
   not rendered until first focus: without it the submit button jumps down the
   moment someone taps into the form, which on mobile means jumping out from
   under the thumb reaching for it. An empty gap is the lesser problem. */
.ts{min-height:65px;margin:2px 0}
.ts:empty{min-height:65px}
.check{display:flex;gap:10px;align-items:flex-start;font-family:var(--mono);font-size:.8rem;line-height:1.6;color:var(--muted)}
.check input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:var(--red)}

/* ---------- 19. PRESS ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{
  padding:.55em 1.05em;border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  transition:.2s var(--ease);
}
.filters button:hover{color:var(--txt);border-color:rgba(245,230,200,.3)}
.filters button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}

.art{
  position:relative;display:flex;flex-direction:column;background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .28s var(--ease),border-color .28s;
}
.art:hover{transform:translateY(-4px);border-color:rgba(245,230,200,.28)}
.art__media{aspect-ratio:16/10;overflow:hidden;background:var(--ink-3);position:relative}
.art__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);filter:saturate(.8) contrast(1.05)}
.art:hover .art__media img{transform:scale(1.05)}
.art__tag{position:absolute;top:10px;left:10px;z-index:2;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  background:var(--red);color:#fff;padding:.34em .6em;border-radius:2px}
.art__body{padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;gap:9px;flex:1}
.art__src{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.art__src i{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
.art__h{font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.22;text-transform:uppercase}
.art__d{font-size:1.06rem;line-height:1.62;font-weight:500;color:#cabba3;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art__more{margin-top:auto;padding-top:6px;font-family:var(--mono);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.art__link{position:absolute;inset:0;z-index:3}

.art--feat{grid-column:1/-1;flex-direction:row}
/* Pinned, not auto. With aspect-ratio:auto the card took its height from
   whichever image was featured, so a portrait one-sheet made it enormous.
   16/9 matches the height the card had when the featured image happened to be
   landscape, and holds it whatever gets promoted next. */
.art--feat .art__media{width:46%;aspect-ratio:16/9;flex:none}
.art--feat .art__media img{object-position:center 32%}
.art--feat .art__body{padding:clamp(22px,3vw,40px);justify-content:center;gap:14px}
.art--feat .art__h{font-size:clamp(1.4rem,2.8vw,2.1rem);line-height:1.06}
.art--feat .art__d{-webkit-line-clamp:4;line-clamp:4;font-size:1.14rem}
@media (max-width:820px){.art--feat{flex-direction:column}.art--feat .art__media{width:100%;aspect-ratio:16/9}}

/* article page */
.prose{max-width:72ch;font-size:1.16rem;line-height:1.78;font-weight:500;color:#e0d5c1}
.prose p{margin-block:1.25em}
.prose p:first-child{margin-top:0}
.prose strong{color:var(--txt);font-weight:600}
.prose em{color:#ddd0b8}
.prose a{color:var(--red-glow);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--yellow)}
.prose h2,
.prose h3{font-family:var(--display);font-weight:800;text-transform:uppercase;color:var(--txt);
  margin-block:1.7em .6em;line-height:1.15}
.prose h2{font-size:1.62rem}.prose h3{font-size:1.3rem}
.prose ul,
.prose ol{margin-block:1.25em;padding-left:1.3em;list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-block:.5em}
.prose img{margin-block:1.6em;border-radius:var(--r)}
.prose blockquote{margin:1.8em 0;padding-left:1.2em;border-left:2px solid var(--red);color:var(--txt);font-style:italic}

/* legal doc */
.legal{max-width:78ch;font-size:1.12rem;line-height:1.78;font-weight:500;color:#ddd1bd}
.legal p{margin-block:1.1em}
.legal h2,
.legal h3,
.legal h4{font-family:var(--display);font-weight:800;text-transform:uppercase;color:var(--txt);line-height:1.2}
.legal h2{font-size:1.4rem;margin-block:2em .6em;color:var(--orange)}
.legal h3{font-size:1.12rem;margin-block:1.6em .5em;color:var(--txt)}
.legal ul,
.legal ol{margin-block:1em;padding-left:1.4em;list-style:disc}
.legal ol{list-style:decimal}
.legal li{margin-block:.55em}
.legal a{color:var(--red-glow);text-decoration:underline;text-underline-offset:3px}
.legal strong{color:var(--txt)}

/* ---------- 20. STORE ---------- */
.prod{
  position:relative;display:flex;flex-direction:column;background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .28s var(--ease),border-color .28s;
}
.prod:hover{transform:translateY(-5px);border-color:var(--red)}
.prod__media{aspect-ratio:1;background:#faf6ee;overflow:hidden;position:relative}
.prod__media img{width:100%;height:100%;object-fit:contain;transition:transform .45s var(--ease)}
.prod:hover .prod__media img{transform:scale(1.05)}
.prod__flag{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;padding:.32em .55em;border-radius:2px;background:var(--yellow);color:#1a1206;font-weight:700}
.prod__flag--out{background:var(--ink-4);color:var(--muted)}
.prod__body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod__type{font-family:var(--mono);font-size:.79rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.prod__t{font-family:var(--display);font-weight:600;font-size:1.08rem;line-height:1.3}
.prod__foot{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.prod__price{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--yellow)}
.prod__cta{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.prod__link{position:absolute;inset:0;z-index:3}

/* ---------- 21. THEATERS ---------- */
.thr{display:flex;flex-direction:column;gap:10px}
.thr__row{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:clamp(14px,2vw,18px);background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .25s,background .25s,transform .25s var(--ease);
}
.thr__row:hover{border-color:var(--red);background:var(--ink-3);transform:translateX(3px)}
.thr__st{font-family:var(--display);font-weight:900;font-size:1.05rem;color:var(--red);
  width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r);flex:none}
.thr__n{font-family:var(--display);font-weight:700;font-size:1rem;text-transform:uppercase;line-height:1.25}
.thr__a{font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;color:var(--muted-2);margin-top:4px}
.thr__d{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-crt);margin-top:5px}
@media (max-width:640px){
  .thr__row{grid-template-columns:auto 1fr;gap:12px}
  .thr__row .btn{grid-column:1/-1;width:100%}
}

/* ---------- 22. FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:clamp(16px,2.2vw,22px) 40px clamp(16px,2.2vw,22px) 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:clamp(1rem,1.7vw,1.16rem);text-transform:uppercase;line-height:1.3;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red-glow)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;translate:0 -50%;
  border-right:1.5px solid var(--red);border-bottom:1.5px solid var(--red);rotate:45deg;
  transition:rotate .28s var(--ease),translate .28s var(--ease);
}
.faq details[open] summary::after{rotate:225deg;translate:0 -20%}
.faq__a{padding:0 40px 24px 0;font-size:1rem;line-height:1.72;font-weight:500;color:#dccfba;max-width:68ch}

/* ---------- 23. REVIEWS ---------- */
.rev{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,30px);
  display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.rev::before{content:"“";position:absolute;right:12px;top:-16px;font-family:Georgia,serif;font-size:8rem;color:var(--red);opacity:.11;line-height:1}
.rev__q{font-size:1rem;line-height:1.68;font-weight:500;color:#e2d7c3;position:relative;z-index:1}

/* ---------- 24. GALLERY ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.gal figure{margin:0;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);filter:saturate(.85)}
.gal figure:hover img{transform:scale(1.06)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;background:linear-gradient(transparent,rgba(10,7,6,.92));
  font-family:var(--mono);font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- 25. MODAL ---------- */
.modal{position:fixed;inset:0;z-index:9500;display:none;place-items:center;padding:var(--pad);
  background:rgba(4,3,2,.9);backdrop-filter:blur(8px)}
.modal[open],
.modal.is-open{display:grid}
.modal__box{width:min(1080px,100%);position:relative}
.modal__box video,
.modal__box iframe{width:100%;aspect-ratio:16/9;border:1px solid var(--line);background:#000;border-radius:var(--r)}
.modal__x{position:absolute;top:-46px;right:0;width:38px;height:38px;border:1px solid var(--line);border-radius:var(--r);
  display:grid;place-items:center;color:var(--txt);font-family:var(--mono);font-size:1rem;transition:.2s}
.modal__x:hover{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- 26. FOOTER ---------- */
.ft{background:var(--ink-1);border-top:1px solid var(--line);padding-top:clamp(48px,6vw,80px)}
.ft__top{display:grid;grid-template-columns:1.15fr repeat(4,minmax(0,.88fr));gap:clamp(20px,2.4vw,36px);padding-bottom:clamp(34px,4vw,52px)}
@media (max-width:1180px){.ft__top{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.ft__top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ft__top{grid-template-columns:minmax(0,1fr)}}
.ft__brand{display:flex;flex-direction:column;gap:16px}
.ft__brand img{width:190px}
.ft .ft__h{font-family:var(--mono);font-size:.82rem;letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.ft ul{display:flex;flex-direction:column;gap:9px}
.ft a{font-size:.92rem;font-weight:500;color:var(--muted);transition:color .2s}
.ft a:hover{color:var(--txt)}
.ft__news{display:flex;gap:8px;flex-wrap:wrap}
.ft__news input{flex:1 1 190px;padding:.8em 1em;background:rgba(10,7,6,.7);border:1px solid var(--line);
  border-radius:var(--r);font-family:var(--mono);font-size:.78rem;color:var(--txt)}
.ft__news input:focus{border-color:var(--red);outline:none}
.ft__soc{display:flex;gap:8px;flex-wrap:wrap}
.ft__soc a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r);
  color:var(--muted);transition:.2s var(--ease)}
.ft__soc a:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-2px)}
.ft__soc svg{width:16px;height:16px;fill:currentColor}
.ft__bot{border-top:1px solid var(--line);padding-block:22px;display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;align-items:center}
.ft__bot p{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--muted-2);line-height:1.7}

/* ---------- 27. REVEAL ---------- */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- 28. UTIL ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:9999;padding:1em 1.4em;background:var(--yellow);color:#1a1206;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.skip:focus{left:8px;top:8px}
.hide-mob{display:initial}
@media (max-width:640px){.hide-mob{display:none}}
.flex{display:flex}.wrapf{flex-wrap:wrap}.gap8{gap:8px}.gap12{gap:12px}
.ac{align-items:center}.jb{justify-content:space-between}.col{flex-direction:column}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}
.tc{text-align:center}

/* ---------- 29. HERO — SIZING PASS ---------- */
.hero{padding-top:calc(var(--nav-h) + clamp(14px,2.6vw,34px))}
.hero__in{gap:clamp(11px,1.6vw,20px)}
/* constrain the logo by HEIGHT — the lockup is nearly square,
width-sizing blows it up */
.hero__logo{height:clamp(84px,14vh,180px);width:auto;max-width:100%}
.hero__title{font-size:clamp(2rem,4.7vw,4rem);max-width:14ch}
.hero__sub{max-width:50ch;font-size:clamp(1.16rem,1.65vw,1.42rem)}
@media (max-height:760px){
  .hero__scroll{display:none}
  .hero__logo{height:clamp(70px,12vh,132px)}
}

/* two-column hero on wide screens: copy left,
one-sheet right */
.hero__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:end}
.hero__sheet{display:none}
@media (min-width:1080px){
  .hero__cols{grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr)}
  .hero__sheet{
    display:block;position:relative;justify-self:end;width:min(280px,100%);
    rotate:2.2deg;transition:rotate .4s var(--ease),transform .4s var(--ease);
  }
  .hero__sheet:hover{rotate:0deg;transform:translateY(-6px)}
  .hero__sheet img{
    width:100%;aspect-ratio:2/3;object-fit:cover;border:6px solid var(--paper);
    box-shadow:0 30px 60px -20px rgba(0,0,0,.95);
  }
  .hero__sheet figcaption{
    position:absolute;left:0;right:0;bottom:-30px;text-align:center;
    font-family:var(--mono);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);
  }
  .hero__sheet .stamp{position:absolute;top:-14px;left:-16px;z-index:2;background:rgba(10,7,6,.65)}
}

/* ---------- 30. HERO ENTRANCE (not IntersectionObserver-gated) ----------
   Above-the-fold content must never wait on JS: it animates in from CSS on
   load so the LCP element paints immediately even if site.js is slow/blocked. */
.ha{opacity:1}
.js .ha{opacity:0;animation:heroIn .62s var(--ease) forwards}
.js .ha-d1{animation-delay:.06s}
.js .ha-d2{animation-delay:.13s}
.js .ha-d3{animation-delay:.20s}
.js .ha-d5{animation-delay:.34s}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js .ha{opacity:1;animation:none;transform:none}
}

/* ===== components.css ===== */
/* ============================================================
   31. NAV DROPDOWNS
   ============================================================ */
.nav__item{position:relative}
.nav__item>button.nav__link{display:inline-flex;align-items:center;gap:.5em}
.nav__caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  rotate:45deg;translate:0 -2px;transition:rotate .22s var(--ease),translate .22s var(--ease);flex:none}
.nav__item[data-open="true"] .nav__caret{rotate:225deg;translate:0 2px}
.nav__panel{
  position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;min-width:252px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 26px 50px -18px rgba(0,0,0,.9);padding:8px;z-index:20;
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.nav__item[data-open="true"] .nav__panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.nav__panel::before{content:"";position:absolute;top:-12px;left:0;right:0;height:14px}
.nav__pl{display:flex;flex-direction:column;gap:2px;padding:.62em .8em;border-radius:var(--r);transition:background .18s}
.nav__pl:hover,
.nav__pl:focus-visible{background:rgba(245,230,200,.09)}
.nav__pl b{font-family:var(--display);font-weight:700;font-size:.92rem;text-transform:uppercase;color:var(--txt)}
.nav__pl span{font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;color:var(--muted-2);line-height:1.5}

/* mobile: dropdowns become inline groups */
.menu__sub{display:flex;flex-direction:column;gap:2px;padding:2px 0 12px 34px}
.menu__sub a{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:.44em 0}
.menu__sub a:hover{color:var(--txt)}

/* ============================================================
   32. BUZZ / BIG ENGAGEMENTS
   ============================================================ */
.buzz{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.buzz__c{
  position:relative;grid-column:span 4;display:flex;flex-direction:column;gap:11px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(16px,2vw,22px);overflow:hidden;
  transition:transform .28s var(--ease),border-color .28s,background .28s;
}
.buzz__c:hover{transform:translateY(-4px);border-color:var(--red);background:var(--ink-3)}
.buzz__c--wide{grid-column:span 6}
.buzz__c--hero{grid-column:span 12}
@media (max-width:900px){.buzz__c,
.buzz__c--wide{grid-column:span 6}}
@media (max-width:620px){.buzz__c,
.buzz__c--wide,
.buzz__c--hero{grid-column:span 12}}

.buzz__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.buzz__plat{
  display:inline-flex;align-items:center;gap:.45em;font-family:var(--mono);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:.34em .6em;border-radius:2px;flex:none;
}
.buzz__plat[data-p="reddit"]{background:#ff4500;color:#fff}
.buzz__plat[data-p="youtube"]{background:#ff0033;color:#fff}
.buzz__plat[data-p="press"]{background:var(--paper);color:#241a12}
.buzz__plat[data-p="tiktok"]{background:#fff;color:#111}
.buzz__plat[data-p="instagram"]{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);color:#fff}
.buzz__plat[data-p="rt"]{background:var(--yellow);color:#1a1206}
.buzz__where{font-family:var(--mono);font-size:.82rem;letter-spacing:.12em;color:var(--muted-2);text-transform:uppercase}

.buzz__h{font-family:var(--display);font-weight:700;font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.28;text-transform:uppercase}
.buzz__c--hero .buzz__h{font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.1}
.buzz__q{font-size:1.1rem;line-height:1.6;font-weight:500;color:#d3c6b0}

.buzz__stats{display:flex;flex-wrap:wrap;gap:16px;margin-top:auto;padding-top:11px;border-top:1px solid var(--line-2)}
.buzz__stat{display:flex;flex-direction:column;gap:2px}
.buzz__stat b{font-family:var(--display);font-weight:900;font-size:1.28rem;line-height:1;color:var(--yellow)}
.buzz__stat span{font-family:var(--mono);font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.buzz__media{margin:calc(-1*clamp(16px,2vw,22px)) calc(-1*clamp(16px,2vw,22px)) 2px;aspect-ratio:16/9;
  position:relative;overflow:hidden;background:var(--ink-3)}
.buzz__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.buzz__c:hover .buzz__media img{transform:scale(1.05)}
.buzz__link{position:absolute;inset:0;z-index:3}

/* ============================================================
   34. MAPBOX THEATER LOCATOR
   ============================================================ */
.loc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(14px,2vw,22px);align-items:stretch}
@media (max-width:940px){.loc{grid-template-columns:minmax(0,1fr)}}
.loc__list{display:flex;flex-direction:column;gap:9px;max-height:min(620px,78vh);overflow-y:auto;padding-right:6px;
  scrollbar-width:thin;scrollbar-color:var(--ink-4) transparent}
.loc__list::-webkit-scrollbar{width:7px}
.loc__list::-webkit-scrollbar-thumb{background:var(--ink-4);border-radius:4px}
.loc__list>*{flex:0 0 auto}

.loc__map{
  position:relative;min-height:min(620px,78vh);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--ink-2) center/cover no-repeat;
}
@media (max-width:940px){.loc__map{min-height:340px;order:-1}}
.loc__map::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(rgba(16,12,10,.18),rgba(16,12,10,.18));
  backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);
}
.loc__map.is-live::before,
.loc__map.is-live .loc__tap{display:none}
.loc__tap{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;cursor:pointer;text-align:center;
}
.loc__tap span{
  display:inline-flex;align-items:center;gap:.6em;padding:.85em 1.5em;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  border-radius:var(--r);box-shadow:0 12px 30px -10px rgba(0,0,0,.9);transition:transform .2s var(--ease)
}
.loc__tap:hover span{transform:translateY(-2px)}
/* Popup on the light basemap. It used to be a dark card, and the h4 inside it
   picked up the dark heading colour from the surrounding .sec--paper section,
   so the theater name rendered near-black on near-black. A light card removes
   the conflict entirely and reads better over light-v11. */
.mapboxgl-popup-content{
  background:#fff !important;color:#1a140c !important;
  border:1px solid rgba(26,20,12,.14);
  border-radius:var(--r-lg) !important;padding:15px 17px !important;
  font-family:var(--display);
  box-shadow:0 18px 38px -14px rgba(0,0,0,.45) !important;
  min-width:200px;
}
.mapboxgl-popup-content h4{
  margin:0 0 6px;font-family:var(--display);font-weight:700;font-size:1rem;
  line-height:1.2;text-transform:uppercase;color:#1a140c !important;
}
.mapboxgl-popup-content p{
  margin:0 0 10px;font-family:var(--mono);font-size:.76rem;line-height:1.6;
  color:#6b6357 !important;
}
.mapboxgl-popup-content a{
  display:inline-block;background:var(--red);color:#fff !important;
  padding:.55em .95em;border-radius:50px;
  font-family:"Oswald",var(--mono),sans-serif;font-size:.76rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
}
.mapboxgl-popup-content a:hover{background:#d31310}
.mapboxgl-popup-tip{border-top-color:#fff !important;border-bottom-color:#fff !important}
.mapboxgl-popup-close-button{color:#6b6357 !important;font-size:19px !important;padding:2px 8px !important}
/* The tomato marker from the Webflow locator. Anchored at its base so the
   point sits on the venue,
not above it. */
.loc__pin{
  width:34px;height:40px;cursor:pointer;
  background:url('/img/map-pin.png') center/contain no-repeat;
  transform-origin:50% 100%;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));
  transition:transform .2s var(--ease),filter .2s;
}
.loc__pin:hover,
.loc__pin.is-on{
  transform:scale(1.25);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)) saturate(1.15);
}
.loc__pin span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.thr__row.is-on{border-color:var(--yellow);background:var(--ink-3)}

/* ============================================================
   35. MOBILE DENSITY
   ============================================================ */
@media (max-width:640px){
  .d1{font-size:clamp(2.5rem,11vw,3.6rem)}
  .d2{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .grid{gap:14px}
  .card{padding:16px}
  .stats>div{padding:18px 14px}
  .btn{width:100%;padding:.95em 1.2em}
  .doss{gap:26px}
  .rule{flex-wrap:wrap;gap:8px}
  .rule::after{display:none}
}

/* ============================================================
   36. PAPER SURFACES — dark ink on cream,
wherever they appear
   The dossier sheet and paper cards can sit inside a DARK section,
so they must set their own text colours rather than inherit.
   ============================================================ */
.doss__sheet,
.card--paper,
.sec--paper{ color:#241a12 }

.doss__sheet .body,
.card--paper .body,
.sec--paper .body{ color:#4a3826 }

.doss__sheet .lede,
.card--paper .lede,
.sec--paper .lede{ color:#33261a }

.doss__sheet .body strong,
.card--paper .body strong,
.sec--paper .body strong{ color:#1a1109 }

.doss__sheet h1,
.doss__sheet h2,
.doss__sheet h3,
.doss__sheet h4,
.doss__sheet blockquote,
.card--paper h1,
.card--paper h2,
.card--paper h3,
.card--paper h4{ color:#1c130c }

.doss__sheet .kicker,
.card--paper .card__code,
.sec--paper .kicker{ color:var(--red-deep) }

.doss__sheet .mono,
.card--paper .mono,
.sec--paper .mono{ color:#7a6547 }

.doss__sheet .card__note,
.card--paper .card__note{ color:#4a3826 }

.doss__sheet .rows dt,
.sec--paper .rows dt{ color:#7a6547 }
.doss__sheet .rows dd,
.sec--paper .rows dd{ color:#241a12 }
.doss__sheet .rows,
.sec--paper .rows{ border-top-color:rgba(36,26,18,.22) }
.doss__sheet .rows>div,
.sec--paper .rows>div{ border-bottom-color:rgba(36,26,18,.22) }

/* highlighter + redaction on paper */
.doss__sheet .hl,
.sec--paper .hl,
.card--paper .hl{ color:#241a12;background:linear-gradient(transparent 58%,rgba(252,238,34,.8) 58% 92%,transparent 92%) }
.doss__sheet .redact,
.card--paper .redact{ color:var(--red-deep) }
.js .doss__sheet .redact.is-open,
.js .card--paper .redact.is-open{ color:var(--red-deep) }

/* form fields sitting on paper */
.doss__sheet .field label,
.sec--paper .field label{ color:#7a6547 }
.doss__sheet .field input,
.doss__sheet .field select,
.sec--paper .field input,
.sec--paper .field select{
  background:rgba(255,255,255,.72);border-color:rgba(36,26,18,.28);color:#241a12;font-weight:500;
}
.doss__sheet .field input::placeholder,
.sec--paper .field input::placeholder{ color:#9c8a6d;opacity:1 }
.doss__sheet .check,
.sec--paper .check{ color:#5c4832 }
.doss__sheet .form__note,
.sec--paper .form__note{ color:#7a6547 }
.doss__sheet .stamp{ mix-blend-mode:multiply;opacity:.72 }
.doss__sheet .doss__hdr{ border-bottom-color:rgba(36,26,18,.28) }

/* A card with nowhere to send anyone.
   .card lifts and warms on hover and .card__media carries a play badge, all of
   which promise a click. When an entry has no href those cues are a lie, so the
   badge is dropped in the template and the hover response is removed here. The
   status line reuses the .mono treatment of the meta line above it, in muted
   ink so it reads as a fact about the title rather than as an action. */
.card--static{cursor:default}
.card--static:hover{transform:none;border-color:var(--line);background:var(--ink-2)}
.card--static:hover::before{opacity:0}
.card--static:hover .card__media img{transform:none}
/* Bottom strip of a card: the meta line, the status line, or both. It carries
   the margin-top:auto that used to sit on the meta span, so the strip still
   sinks to the foot of the card when one of the two lines is absent. */
.card__foot{margin-top:auto;padding-top:8px;display:flex;flex-direction:column;gap:3px}
.card__status{
  /* .84rem matches the .mono meta line directly above it. Two mono lines in a
     row at different sizes reads as a mistake; colour does the de-emphasis. */
  font-family:var(--mono);font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);
}
.sec--paper .card--static:hover{background:var(--paper);border-color:rgba(36,26,18,.2)}
.sec--paper .card__status{color:var(--ink-on-paper-3)}

/* Form success panel — replaces the form on submit, the way Webflow's
   .w-form-done did. Centred in the space the fields used to occupy; the
   inline min-height set in JS keeps that space from collapsing. */
.form__done{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(12px,1.6vw,16px);text-align:center;
  padding:clamp(24px,4vw,40px) clamp(18px,3vw,28px);
  border:1px solid var(--green);border-radius:var(--r-lg);
  background:rgba(40,143,71,.10);
  color:var(--green-crt);
  outline:none;   /* focus is moved here programmatically, not by tabbing */
}
.form__done p{
  margin:0;color:inherit;max-width:32ch;
  font-family:var(--mono);font-size:.95rem;line-height:1.6;letter-spacing:.06em;
}
.form__done-tick{width:clamp(34px,5vw,42px);height:clamp(34px,5vw,42px);flex:none}
.form__done-tick circle{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.4}
.form__done-tick path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .form__done{animation:doneIn .34s var(--ease) both}
  @keyframes doneIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* Cream panels. Same reason the status messages need an override: the mint is
   built for the dark surfaces and is unreadable on paper. */
.sec--paper .form__done,
.doss__sheet .form__done,
.slip .form__done{
  background:rgba(40,143,71,.12);border-color:#1d6b34;color:#155a29;
}

/* ---------- where to buy ----------
   A list of outlets, not a set of cards: fifteen names in two groups read
   faster as a dense grid than as fifteen boxes with their own padding. The
   tiles are sized by their content rather than a fixed track, because the
   names run from "RCN" to "Charter / Spectrum" and a uniform grid would leave
   the short ones stranded in white space. */
/* Two cards, level with each other. The groups are alternatives, not steps,
   and stacking them as full-width bands implied an order that is not there.
   auto-fit with a 360px floor means they drop to one column on a narrow
   screen without a breakpoint, and stretch keeps their tops and bottoms in
   line even though one holds five outlets and the other ten. */
.buy__cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));
  gap:clamp(16px,2vw,26px);
  align-items:start;
  margin-top:clamp(22px,3vw,34px);
}

.buy__group{
  display:flex;flex-direction:column;
  padding:clamp(20px,2.4vw,30px);
  border:1px solid var(--paper-line);
  border-radius:clamp(14px,1.4vw,20px);
  background:#fffdf6;
  box-shadow:0 18px 40px -26px rgba(36,26,18,.5);
}

/* Each card is as tall as what is in it. Stretching them to match left the
   Digital card, which holds five outlets against the other ten, with an
   empty lower half that read as something failing to load. Their tops line
   up, which is what carries the pairing. */
.buy__head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--paper-line);
}
.buy__title{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,1.95rem);letter-spacing:.01em;color:var(--ink-on-paper);
}
/* Was .78rem, which is 12.5px of letterspaced uppercase mono and the hardest
   thing on the page to read. */
.buy__note{font-size:clamp(1rem,1.25vw,1.18rem);letter-spacing:.06em;color:var(--ink-on-paper-3)}
/* A sentence under a group head, where the group needs explaining rather
   than labelling. Provider Services has one because the thing a visitor
   needs to know there is not a name, it is that the film comes through an
   account they already have and there is nowhere to click.

   No max-width: this ran at 62ch, and in a condensed display face a ch is
   narrow enough that 62 of them came to about 450px inside a 1150px group.
   Four short ragged lines under a full-width row of logos read as a column
   that had been squeezed by accident, which it had. Across the group it sets
   on one line at desktop width and wraps naturally below that.

   Set at the same size as the dossier body copy rather than a notch under
   it, so every paragraph a visitor is asked to read on this site is the
   same size. */
.buy__body{
  margin:.9rem 0 0;
  font-size:clamp(1.3rem,1.68vw,1.52rem);line-height:1.58;
  color:var(--ink-on-paper-2,#4a3a2a);
}
.buy__grid{
  --buy-mark:clamp(28px,2.4vw,36px);
  display:flex;flex-wrap:wrap;gap:10px;margin-top:1rem;padding:0;list-style:none;
}
.buy__item{margin:0}
.buy__item > span,
.buy__item > a{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:calc(var(--buy-mark) + 1.2em + 2px);
  padding:.72em 1.05em;border:1px solid rgba(36,26,18,.22);border-radius:var(--r);
  background:var(--paper-card);
  font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,1.45vw,1.34rem);line-height:1.2;
  color:var(--ink-on-paper);
}
/* The region sits inside the tile rather than beside it: Rogers West Cable is
   the only Canadian outlet on the list and a visitor outside Canada should be
   able to skip it without reading the name twice. */
.buy__item em{
  font-style:normal;font-family:var(--mono);font-size:.88rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-on-paper-3);
}
.buy__item--link > a{text-decoration:none;transition:border-color .2s,background .2s}
.buy__item--link > a:hover,
.buy__item--link > a:focus-visible{border-color:var(--red-deep);background:#fbf0da}
.buy__foot{
  margin-top:clamp(22px,3vw,32px);font-size:.8rem;letter-spacing:.06em;
  line-height:1.7;color:var(--ink-on-paper-3);
}

/* A logo tile is sized by the logo, not the word: marks vary wildly in aspect
   (a Google Play wordmark against a round RCN) so the height is fixed and the
   width follows, which is what keeps a row of them looking level. Capped in
   width as well so an unusually wide mark cannot run the row off the grid. */
.buy__item--logo > span,
.buy__item--logo > a{padding:.6em .9em}
.buy__logo{
  display:block;height:var(--buy-mark);width:auto;max-width:200px;object-fit:contain;
}

/* ============================================================
   AMBIENT CLIP BEHIND A DARK PANEL
   ------------------------------------------------------------
   A section-wide video layer, kept well under the text. Only used on dark
   panels: at this opacity it reads as movement at the edge of vision, which
   is the point, but over cream paper the same layer would move the body
   copy's contrast around frame by frame.

   The clip sits well below the fold and browsers hold a muted autoplaying
   video until it is on screen, so most visitors never pay for more than its
   metadata. site.js starts it again when it scrolls back into view, which
   Chrome does not do reliably on its own.
   ============================================================ */
.has-footage { position: relative; isolation: isolate; overflow: hidden; }

.sec__footage {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Fades out at both ends so the clip does not meet the sections above and
     below on a hard line. */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

.sec__footage-v {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .16;
  filter: saturate(.8) contrast(1.05) brightness(.9);
}

/* Nothing moves for a visitor who has asked for that, and the still frame
   underneath carries the same texture. */
@media (prefers-reduced-motion: reduce) {
  .sec__footage-v { opacity: .1; }
}

/* ============================================================
   NOT OPEN YET
   ------------------------------------------------------------
   Until the release date none of these outlets can sell the film, so the
   tiles are shown as shut rather than as ready. Three signals, because any
   one of them alone reads as a rendering fault rather than as a state: the
   colour drains out of the marks, the border goes dashed the way an empty
   slot does, and a faint diagonal hatch sits over the tile.

   Only outlets with nothing to click yet. Apple TV takes pre-orders and has
   a working link, so it stays in full colour: greying it said the opposite
   of the truth.

   The logos keep their shape and their size, so the section still answers
   "where will I be able to buy this" at a glance. It is a closed shop with
   the sign still lit, not an empty window.
   ============================================================ */
.buy__item--shut > span,
.buy__item--shut > a {
  border-style: dashed;
  border-color: rgba(36, 26, 18, .3);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(36, 26, 18, .05) 0 6px,
    transparent 6px 12px
  );
  color: var(--ink-on-paper-3, #7a6547);
}

.buy__item--shut .buy__logo {
  filter: grayscale(1) contrast(.95);
  opacity: .62;
}

/* A link that works is still a link. Apple TV has a real URL and clicking it
   is useful, so the pending state dims it without disarming it. */
.buy__item--shut.buy__item--link > a:hover .buy__logo,
.buy__item--shut.buy__item--link > a:focus-visible .buy__logo {
  filter: grayscale(.2);
  opacity: .85;
}

/* The date, said once per group, next to the label that says what the group
   is. Red because it is the one piece of news in the section. */
.buy__soon {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-top: .1rem;
  padding: .3em .85em;
  border: 1px solid var(--red-deep);
  border-radius: 50px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(.95rem, 1.1vw, 1.08rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--red-deep);
  white-space: nowrap;
}

.buy__soon::before {
  content: "";
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: var(--red);
}

/* A word on the tile for an outlet that is already doing something, which
   right now means Apple TV taking pre-orders. Sits inside the tile next to
   the mark, so the state belongs to that outlet rather than to the group. */
.buy__tag {
  padding: .18em .6em;
  border-radius: 50px;
  background: var(--red-deep);
  font-family: var(--display);
  font-weight: 700;
  font-size: .8em;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* ===== watch.css ===== */
/* ============================================================
   37. WHERE TO WATCH — every film on one page
   ============================================================ */
.watch{display:flex;flex-direction:column;gap:clamp(16px,2.2vw,28px)}

.watch__row{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(18px,2.6vw,36px);
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(16px,2.2vw,26px);align-items:start;
  transition:border-color .28s,background .28s;
}
.watch__row:hover{border-color:rgba(245,230,200,.32);background:var(--ink-3)}
.watch__row[data-featured]{
  border-color:var(--red);
  background:linear-gradient(150deg,rgba(239,23,20,.10),var(--ink-2) 55%);
}
@media (max-width:820px){
  .watch__row{grid-template-columns:minmax(0,1fr);gap:16px}
}

/* poster / key art */
.watch__art{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink-3);aspect-ratio:16/10}
.watch__art--tall{aspect-ratio:2/3}
@media (max-width:820px){
  .watch__art,
.watch__art--tall{aspect-ratio:16/9;max-height:260px}
  .watch__art img{object-position:center 30%}
}
.watch__art img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.watch__row:hover .watch__art img{transform:scale(1.03)}
.watch__noart{
  width:100%;height:100%;display:grid;place-items:center;text-align:center;
  background:repeating-linear-gradient(45deg,#221917 0 10px,#2c211d 10px 20px);
}
.watch__noart span{font-family:var(--stamp);font-size:.79rem;letter-spacing:.18em;color:rgba(245,230,200,.42);line-height:1.7}
.watch__yr{
  position:absolute;left:10px;top:10px;z-index:2;
  font-family:var(--display);font-weight:900;font-size:1.15rem;line-height:1;
  background:rgba(16,12,10,.82);color:var(--paper);padding:.34em .55em;border-radius:2px;
  backdrop-filter:blur(4px);
}

/* body */
.watch__body{display:flex;flex-direction:column;gap:11px;min-width:0}
.watch__top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.watch__status{
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:.36em .62em;border-radius:2px;flex:none;
}
.watch__status[data-s="in-theaters"]{background:var(--red);color:#fff}
.watch__status[data-s="free"]{background:var(--green);color:#fff}
.watch__status[data-s="stream"]{background:var(--ink-4);color:var(--txt);border:1px solid var(--line)}

.watch__t{margin:0}
.watch__row[data-featured] .watch__t{color:var(--red-glow)}

.watch__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}
.watch__meta i{width:3px;height:3px;border-radius:50%;background:var(--muted-2);flex:none}
.watch__blurb{max-width:62ch;font-size:1.12rem}

/* viewing options */
.watch__where{display:flex;flex-direction:column;gap:7px;margin-top:auto;padding-top:6px}
.watch__opt{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:.78em 1em;border:1px solid var(--line);border-radius:var(--r);
  background:rgba(16,12,10,.55);
  transition:border-color .2s,background .2s,transform .2s var(--ease);
}
.watch__opt:hover{border-color:var(--red);background:rgba(239,23,20,.1);transform:translateX(3px)}
.watch__optl{display:flex;flex-direction:column;gap:2px;min-width:0}
.watch__optl b{font-family:var(--display);font-weight:700;font-size:.94rem;text-transform:uppercase;line-height:1.25}
.watch__optl em{font-style:normal;font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;color:var(--muted-2)}
.watch__arrow{font-family:var(--mono);color:var(--red);flex:none;transition:transform .2s var(--ease)}
.watch__opt:hover .watch__arrow{transform:translateX(3px)}

/* first option in each row reads as the primary action */
.watch__where .watch__opt:first-child{border-color:rgba(239,23,20,.55);background:rgba(239,23,20,.08)}
.watch__where .watch__opt:first-child b{color:var(--red-glow)}
.watch__row[data-featured] .watch__where .watch__opt:first-child{background:var(--red);border-color:var(--red)}
.watch__row[data-featured] .watch__where .watch__opt:first-child b,
.watch__row[data-featured] .watch__where .watch__opt:first-child em,
.watch__row[data-featured] .watch__where .watch__opt:first-child .watch__arrow{color:#fff}

/* ---------- homepage band that points at /watch ---------- */
.watchband{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(20px,3vw,44px);
  align-items:center;background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(20px,3vw,40px);
}
@media (max-width:860px){.watchband{grid-template-columns:minmax(0,1fr)}}
.watchband__r{
  display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:repeat(3,1fr);
  gap:8px;height:clamp(230px,26vw,320px);
}
.watchband__r img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);
  border:1px solid var(--line);filter:saturate(.85);transition:transform .4s var(--ease),filter .4s}
.watchband__r img:first-child{grid-row:1/4}
.watchband:hover .watchband__r img{filter:saturate(1)}
.watchband__r img:hover{transform:scale(1.03)}
@media (max-width:560px){.watchband__r{height:190px;gap:6px}}

/* ============================================================
   Locked viewing option — announced but not yet available.
   Muted,
non-interactive,
and visibly inert so nobody clicks it.
   ============================================================ */
.watch__opt--locked{
  cursor:default;opacity:.55;
  border-style:dashed;border-color:rgba(245,230,200,.18);
  background:rgba(16,12,10,.3);
}
.watch__opt--locked:hover{
  border-color:rgba(245,230,200,.18);
  background:rgba(16,12,10,.3);
  transform:none;
}
.watch__opt--locked .watch__optl b{color:var(--muted-2)}
.watch__lock{flex:none;display:grid;place-items:center;color:var(--muted-2)}

/* ===== paper.css ===== */
/* ============================================================
   38. PAPER SECTIONS — the readable half of the site
   Dark is for cinematic moments (hero, media, CTAs). Everything
   you actually READ sits on cream, with real ink-on-paper contrast.
   Every dark component gets a light counterpart here.
   ============================================================ */

:root{
  --ink-on-paper:#1e150d;      /* body copy on cream */
  --ink-on-paper-2:#4a3826;    /* secondary copy */
  --ink-on-paper-3:#7a6547;    /* labels, meta */
  --paper-card:#fdf7e9;        /* raised card on cream */
  --paper-line:rgba(36,26,18,.20);
  --paper-line-2:rgba(36,26,18,.11);
}

/* Subtle paper tooth so large cream areas are not flat. This lives on the
   section's own background rather than a ::before overlay because the torn
   edges need that pseudo-element. The alphas have the old overlay's
   opacity:.55 baked in, so it composites to the same colour. */
.sec--paper{
  color:var(--ink-on-paper);
  background-color:var(--paper);
  background-image:
    radial-gradient(90% 60% at 12% 0%,rgba(190,160,110,.088),transparent 60%),
    radial-gradient(70% 50% at 100% 100%,rgba(190,160,110,.072),transparent 62%);
}
.sec--paper>*{position:relative;z-index:1}

/* ---------- type ---------- */
.sec--paper .d1,
.sec--paper .d2,
.sec--paper .d3,
.sec--paper .d4,
.sec--paper h1,
.sec--paper h2,
.sec--paper h3,
.sec--paper h4{color:#1a1109}
.sec--paper .lede{color:#2e2216}
.sec--paper .body{color:var(--ink-on-paper-2)}
.sec--paper .body strong{color:#140d06}
.sec--paper .kicker{color:var(--red-deep)}
.sec--paper .kicker--green{color:#1d6b34}
.sec--paper .mono{color:var(--ink-on-paper-3)}
.sec--paper .rule{border-color:var(--paper-line)}
.sec--paper .rule::after{background:repeating-linear-gradient(to right,var(--paper-line) 0 6px,transparent 6px 12px)}
.sec--paper hr{border-top-color:var(--paper-line)}
.sec--paper .hl{color:#1a1109;background:linear-gradient(transparent 58%,rgba(252,238,34,.78) 58% 92%,transparent 92%)}
.sec--paper .redact{color:var(--red-deep)}
.js .sec--paper .redact{background:#241a12}
.js .sec--paper .redact.is-open{background:transparent;color:var(--red-deep)}

/* ---------- buttons ---------- */
.sec--paper .btn--ghost{--bg:transparent;--fg:#241a12;--bd:rgba(36,26,18,.42)}
.sec--paper .btn--ghost:hover{--bg:rgba(36,26,18,.07);--bd:#241a12}

/* ---------- generic card ---------- */
.sec--paper .card{
  background:var(--paper-card);border-color:var(--paper-line);
  box-shadow:0 2px 0 rgba(36,26,18,.08);
}
.sec--paper .card::before{background:linear-gradient(160deg,rgba(239,23,20,.07),transparent 55%)}
.sec--paper .card:hover{background:#fffdf6;border-color:rgba(36,26,18,.38);
  box-shadow:0 14px 28px -14px rgba(36,26,18,.35)}
.sec--paper .card__title{color:#1a1109}
.sec--paper .card__note{color:var(--ink-on-paper-2)}
.sec--paper .card__code{color:var(--red-deep)}
.sec--paper .card__media{background:#e6d9bf}

/* ---------- stats ---------- */
.sec--paper .stats{background:var(--paper-card);border-color:var(--paper-line)}
.sec--paper .stats>div{border-color:var(--paper-line)}
.sec--paper .stats dt{color:var(--red-deep)}
.sec--paper .stats dd{color:var(--ink-on-paper-3)}
.sec--paper .stats .y{color:#b58900}
.sec--paper .stats .g{color:#1d6b34}
.sec--paper .stats .p{color:#5a4632}

/* ---------- press cards ---------- */
.sec--paper .art{background:var(--paper-card);border-color:var(--paper-line)}
.sec--paper .art:hover{border-color:rgba(36,26,18,.4);box-shadow:0 14px 28px -14px rgba(36,26,18,.35)}
.sec--paper .art__media{background:#e6d9bf}
.sec--paper .art__h{color:#1a1109}
.sec--paper .art__d{color:var(--ink-on-paper-2)}
.sec--paper .art__src{color:var(--ink-on-paper-3)}
.sec--paper .art__src i{background:var(--ink-on-paper-3)}
.sec--paper .art__more{color:var(--red-deep)}
.sec--paper .filters button{border-color:var(--paper-line);color:var(--ink-on-paper-2)}
.sec--paper .filters button:hover{color:#1a1109;border-color:rgba(36,26,18,.45)}
.sec--paper .filters button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- buzz cards ---------- */
.sec--paper .buzz__c{background:var(--paper-card);border-color:var(--paper-line)}
.sec--paper .buzz__c:hover{background:#fffdf6;border-color:var(--red);
  box-shadow:0 14px 28px -14px rgba(36,26,18,.35)}
.sec--paper .buzz__h{color:#1a1109}
.sec--paper .buzz__q{color:var(--ink-on-paper-2)}
.sec--paper .buzz__where{color:var(--ink-on-paper-3)}
.sec--paper .buzz__media{background:#e6d9bf}
.sec--paper .buzz__stats{border-top-color:var(--paper-line-2)}
.sec--paper .buzz__stat b{color:#a8620a}
.sec--paper .buzz__stat span{color:var(--ink-on-paper-3)}
.sec--paper .buzz__plat[data-p="press"]{background:#241a12;color:var(--paper)}
.sec--paper .buzz__plat[data-p="tiktok"]{background:#111;color:#fff}

/* ---------- watch rows ---------- */
.sec--paper .watch__row{background:var(--paper-card);border-color:var(--paper-line)}
.sec--paper .watch__row:hover{background:#fffdf6;border-color:rgba(36,26,18,.4);
  box-shadow:0 14px 28px -14px rgba(36,26,18,.35)}
.sec--paper .watch__row[data-featured]{
  border-color:var(--red);background:linear-gradient(150deg,rgba(239,23,20,.09),var(--paper-card) 55%)}
.sec--paper .watch__t{color:#1a1109}
.sec--paper .watch__row[data-featured] .watch__t{color:var(--red-deep)}
.sec--paper .watch__blurb{color:var(--ink-on-paper-2)}
.sec--paper .watch__meta{color:var(--ink-on-paper-3)}
.sec--paper .watch__meta i{background:var(--ink-on-paper-3)}
.sec--paper .watch__art{background:#e6d9bf}
.sec--paper .watch__noart{background:repeating-linear-gradient(45deg,#e2d3b6 0 10px,#dccbaa 10px 20px)}
.sec--paper .watch__noart span{color:rgba(36,26,18,.5)}
.sec--paper .watch__status[data-s="stream"]{background:#e2d3b6;color:#241a12;border-color:var(--paper-line)}
.sec--paper .watch__opt{background:rgba(255,255,255,.6);border-color:var(--paper-line)}
.sec--paper .watch__opt:hover{border-color:var(--red);background:rgba(239,23,20,.08)}
.sec--paper .watch__optl b{color:#1a1109}
.sec--paper .watch__optl em{color:var(--ink-on-paper-3)}
.sec--paper .watch__where .watch__opt:first-child{border-color:rgba(239,23,20,.5);background:rgba(239,23,20,.07)}
.sec--paper .watch__where .watch__opt:first-child b{color:var(--red-deep)}

/* ---------- theater rows ---------- */
.sec--paper .thr__row{background:var(--paper-card);border-color:var(--paper-line)}
.sec--paper .thr__row:hover{background:#fffdf6;border-color:var(--red)}
.sec--paper .thr__st{color:var(--red-deep);border-color:var(--paper-line)}
.sec--paper .thr__n{color:#1a1109}
.sec--paper .thr__a{color:var(--ink-on-paper-3)}
.sec--paper .thr__d{color:#1d6b34}
.sec--paper .loc__list::-webkit-scrollbar-thumb{background:rgba(36,26,18,.28)}
.sec--paper .loc__map{border-color:var(--paper-line)}

/* ---------- podcast rows ---------- */
.sec--paper .tx{border-top-color:var(--paper-line)}
.sec--paper .tx__row{border-bottom-color:var(--paper-line)}
.sec--paper .tx__row:hover{background:rgba(36,26,18,.045)}
.sec--paper .tx__t{color:#1a1109}
.sec--paper .tx__n{color:var(--red-deep)}
.sec--paper .tx__len{color:var(--ink-on-paper-3)}
.sec--paper .tx__wave i{background:#1d6b34}

/* ---------- reviews ---------- */
.sec--paper .rev{background:var(--paper-card);border-color:var(--paper-line)}
.sec--paper .rev::before{color:var(--red-deep);opacity:.12}
.sec--paper .rev__q{color:var(--ink-on-paper-2)}

/* ---------- faq ---------- */
.sec--paper .faq{border-top-color:var(--paper-line)}
.sec--paper .faq details{border-bottom-color:var(--paper-line)}
.sec--paper .faq summary{color:#1a1109}
.sec--paper .faq summary:hover{color:var(--red-deep)}
.sec--paper .faq summary::after{border-color:var(--red-deep)}
.sec--paper .faq__a{color:var(--ink-on-paper-2)}

/* ---------- gallery ---------- */
.sec--paper .gal figure{background:#e6d9bf;border-color:var(--paper-line)}
.sec--paper .gal figcaption{background:linear-gradient(transparent,rgba(36,26,18,.9));color:var(--paper)}

/* ---------- forms on paper ---------- */
.sec--paper .field label{color:var(--ink-on-paper-3)}
.sec--paper .field input,
.sec--paper .field select,
.sec--paper .field textarea{
  background:rgba(255,255,255,.78);border-color:rgba(36,26,18,.28);color:#1e150d;font-weight:500;
}
.sec--paper .field input::placeholder,
.sec--paper .field textarea::placeholder{color:#9c8a6d;opacity:1}
.sec--paper .field input:focus,
.sec--paper .field select:focus,
.sec--paper .field textarea:focus{border-color:var(--red);background:#fff}
.sec--paper .check{color:#4a3826}
.sec--paper .form__note{color:var(--ink-on-paper-3)}

/* ---------- terminal keeps its dark CRT look on paper ---------- */
.sec--paper .term{border-color:rgba(36,26,18,.3);box-shadow:0 10px 26px -12px rgba(36,26,18,.5)}

/* ---------- evidence board reads as a corkboard on paper ---------- */
.sec--paper .evi{box-shadow:0 10px 24px -12px rgba(36,26,18,.5),0 1px 0 rgba(36,26,18,.18)}
.sec--paper .evi:hover{box-shadow:0 20px 38px -16px rgba(36,26,18,.55)}
.sec--paper .board__string path{stroke:var(--red-deep);opacity:.6}

/* ---------- dossier sheet on paper: lift it off the background ---------- */
.sec--paper .doss__sheet{
  background:#fffdf6;box-shadow:0 20px 46px -22px rgba(36,26,18,.55);
  border:1px solid var(--paper-line);
}
.sec--paper .doss__photo{background:var(--paper-card);border-color:var(--paper-line)}
.sec--paper .doss__photo figcaption{color:var(--ink-on-paper-3)}

/* ---------- watch band ---------- */
.sec--paper .watchband{background:var(--paper-card);border-color:var(--paper-line)}
.sec--paper .watchband__r img{border-color:var(--paper-line)}

/* ---------- prose / legal on paper ---------- */
.sec--paper .prose,
.sec--paper .legal{color:var(--ink-on-paper-2)}
.sec--paper .prose strong,
.sec--paper .legal strong{color:#140d06}
.sec--paper .prose em{color:#2e2216}
.sec--paper .prose a,
.sec--paper .legal a{color:var(--red-deep)}
.sec--paper .prose a:hover,
.sec--paper .legal a:hover{color:#5c0806}
.sec--paper .prose h2,
.sec--paper .prose h3,
.sec--paper .legal h2,
.sec--paper .legal h3,
.sec--paper .legal h4{color:#1a1109}
.sec--paper .legal h3{color:#a8620a}
.sec--paper .prose blockquote{border-left-color:var(--red-deep);color:#1e150d}

/* ============================================================
   39. HERO STILL — replaces the 12MB trailer background.
   The trailer opens in the modal instead; the still avoids both
   the distributor logo card and a huge LCP payload.
   ============================================================ */
.hero__bg picture,
.hero__bg img{width:100%;height:100%;display:block}
.hero__bg img{
  object-fit:cover;object-position:center 42%;
  filter:saturate(.92) contrast(1.06) brightness(.66);
  animation:heroPan 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroPan{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(1.14) translate3d(-1.5%,-1.5%,0)}
}
@media (prefers-reduced-motion:reduce){
  .hero__bg img{animation:none;transform:scale(1.04)}
}

/* ---------- pull quotes inside article prose ---------- */
.prose blockquote{
  margin:1.8em 0;padding:1.1em 1.3em;border-left:3px solid var(--red);
  background:rgba(239,23,20,.05);border-radius:0 var(--r) var(--r) 0;
}
.prose blockquote p{margin:0;font-size:1.18rem;line-height:1.6;font-style:italic}
.prose blockquote footer{
  margin-top:.7em;font-family:var(--mono);font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;font-style:normal;color:var(--muted-2);
}
.sec--paper .prose blockquote{background:rgba(239,23,20,.055);border-left-color:var(--red-deep)}
.sec--paper .prose blockquote p{color:#1e150d}
.sec--paper .prose blockquote footer{color:var(--ink-on-paper-3)}

/* Form status messages on a paper panel.
   .form__msg.ok is mint (#5cff9d) and .err a pale red (#ff8a84); both are tuned
   for the dark surfaces, and three of the five forms — fan club, screening
   demand, press intake — sit on cream .doss__sheet panels instead. Measured
   against that cream the mint is 1.03:1 and the pale red 1.65:1, i.e. all but
   invisible. .slip already carried ink-dark versions for exactly this reason;
   these are the same values generalised to every paper context, at 6.4:1 and
   7.3:1. The dark-surface rules are untouched (mint there is 11.2:1). */
.sec--paper .form__msg.ok,
.doss__sheet .form__msg.ok{
  background:rgba(40,143,71,.14);border-color:#1d6b34;color:#155a29;
}
.sec--paper .form__msg.err,
.doss__sheet .form__msg.err{
  background:rgba(239,23,20,.1);border-color:var(--red-deep);color:#8f0d0b;
}

/* ===== fixes.css ===== */
/* ============================================================
   40. ALIGNMENT + CONTAINMENT FIXES
   Loaded last. Each rule here fixes a specific observed defect.
   ============================================================ */

/* ------------------------------------------------------------------
   40.1  Measure widths
   `ch` is sized from the "0" glyph,
and Kaneda Gothic is condensed —
   so `max-width:66ch` collapsed body copy to roughly half the column
   it lives in. Use explicit widths instead.
   ------------------------------------------------------------------ */
.body{max-width:58rem}
.lede{max-width:40rem}
.prose{max-width:44rem}
.legal{max-width:46rem}
.watch__blurb{max-width:42rem}
.faq__a{max-width:44rem}
.sec__head{max-width:46rem}
.doss__sheet .body,
.doss__sheet .lede{max-width:none}   /* the sheet is already a column */
.card__note,
.buzz__q,
.art__d{max-width:none}

/* ------------------------------------------------------------------
   40.2  Grid/flex children must be allowed to shrink
   Grid and flex items default to min-height/min-width:auto,
so an
   <img> with a large intrinsic size forces its track open and spills
   out of a fixed-height container. This was pushing the /watch band
   collage over the podcast list below it.
   ------------------------------------------------------------------ */
.watchband__r{overflow:hidden}
.watchband__r img{min-height:0;min-width:0}

.grid>*,
.buzz>*,
.board__grid>*,
.stats>*,
.doss>*,
.lic>*,
.loc>*,
.watch__row>*,
.hero__cols>*,
.form__grid>*{min-width:0}

.watchband__r>*,
.watch__art>*,
.card__media>*,
.art__media>*,
.buzz__media>*,
.gal figure>*{min-height:0;min-width:0}

/* media wrappers should always clip,
never be pushed open */
.card__media,
.art__media,
.buzz__media,
.watch__art,
.gal figure{overflow:hidden}
.doss__photo{overflow:visible}
.doss__photo img{overflow:hidden;min-height:0;min-width:0}

/* ------------------------------------------------------------------
   40.3  Reveal system must fail open
   `.js .rv` (0,2,0) was overriding the reduced-motion `.rv` (0,1,0),
so a reader with reduced motion — or any browser where the observer
   never fires — got blank sections. Both fallbacks now win.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .js .rv,
  .js .rv.is-in{opacity:1!important;transform:none!important;transition:none!important}
}
/* JS sets this if the observer has not resolved in time */
.js.rv-failsafe .rv{opacity:1;transform:none}

/* ------------------------------------------------------------------
   40.4  Hero details
   ------------------------------------------------------------------ */
/* the poster's rotated stamp was being clipped by the figure box */
.hero__sheet{overflow:visible}
@media (min-width:1080px){
  .hero__sheet .stamp{top:-10px;left:-10px;padding:.3em .55em;white-space:nowrap}
}
/* cap the hero on very tall windows so the still is not magnified */
.hero{max-height:1100px}
.hero__sub{text-wrap:balance}
.hero__title{text-wrap:balance}

/* ------------------------------------------------------------------
   40.5  Section rhythm
   Two cream sections meeting edge-to-edge read as one long block.
   Give consecutive paper sections a hairline seam.
   ------------------------------------------------------------------ */
.sec--paper + .sec--paper:not(.is-torn){border-top:1px solid rgba(36,26,18,.14)}
/* A section that owns a bottom tear also owns its ::after, and this rule
   outranks the tear — so it must stand off those. They keep the hairline
   border above; only the red dot is skipped. */
.sec--paper + .sec--paper:not(.is-torn):not(.is-torn-b)::after{
  content:"";position:absolute;left:50%;top:0;translate:-50% 0;
  width:64px;height:3px;background:var(--red);opacity:.5;
}

/* ------------------------------------------------------------------
   40.6  Evidence board
   Rotation inflates the bounding box; give the grid room so cards do
   not clip against the section gutter,
and drop rotation on mobile.
   ------------------------------------------------------------------ */
.board{padding-inline:6px}
@media (max-width:620px){
  .evi,
.evi:nth-child(odd),
.evi:nth-child(even),
.evi:nth-child(3n){rotate:0deg}
}
/* posters are portrait — do not force a 4:3 crop through their middle */
.evi__media{aspect-ratio:3/4}
.evi__media img{object-position:center 22%}

/* ------------------------------------------------------------------
   40.7  Stats: ∞ should match the numerals optically
   ------------------------------------------------------------------ */
.stats dt{display:flex;align-items:baseline;min-height:1em}
.stats .p{font-size:clamp(2.6rem,6.2vw,4.2rem);line-height:.7}

/* ------------------------------------------------------------------
   40.8  Buzz hero card: stop cropping the key art through the title
   ------------------------------------------------------------------ */
.buzz__c--hero .buzz__media{aspect-ratio:21/9}
.buzz__c--hero .buzz__media img{object-position:center 34%}

/* ------------------------------------------------------------------
   40.9  Long single words (URLs, slugs) must not push layout wide
   ------------------------------------------------------------------ */
.prose,
.legal,
.card__note,
.buzz__q,
.art__d,
.watch__blurb,
.body{overflow-wrap:anywhere}

/* ============================================================
   41. HERO VIDEO (restored) — the still-image rules do not apply
   ============================================================ */
.hero__bg .hero__video{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.92) contrast(1.05) brightness(.7);
  animation:none;transform:none;
}

/* ============================================================
   42. PUBLIC TESTIMONY — witness statements,
not review cards
   ============================================================ */
.test{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.8vw,20px)}

/* ============================================================
   43. CAST CARDS — real headshots
   ============================================================ */
.cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:clamp(12px,1.8vw,20px)}
.cast__c{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--ink-2);border:1px solid var(--line);
  transition:transform .3s var(--ease),border-color .3s;
}
.cast__c:hover{transform:translateY(-4px);border-color:var(--red)}
.cast__ph{aspect-ratio:1;overflow:hidden;background:var(--ink-3)}
.cast__ph img{width:100%;height:100%;object-fit:cover;object-position:center 12%;
  filter:contrast(1.03);transition:transform .5s var(--ease)}
.cast__c:hover .cast__ph img{transform:scale(1.04)}
.cast__ph--none{display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,#221917 0 10px,#2c211d 10px 20px)}
.cast__ph--none span{font-family:var(--stamp);font-size:.72rem;letter-spacing:.16em;color:rgba(245,230,200,.4)}
.cast__b{padding:14px;display:flex;flex-direction:column;gap:4px}
.cast__r{font-family:var(--mono);font-size:.69rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.cast__n{font-family:var(--display);font-weight:800;font-size:1rem;text-transform:uppercase;line-height:1.15}
.cast__cr{font-family:var(--mono);font-size:.69rem;letter-spacing:.1em;color:var(--muted-2)}
.sec--paper .cast__c{background:var(--paper-card);border-color:var(--paper-line)}
.sec--paper .cast__ph{background:#e6d9bf}
.sec--paper .cast__n{color:#1a1109}
.sec--paper .cast__r{color:var(--red-deep)}
.sec--paper .cast__cr{color:var(--ink-on-paper-3)}

/* ============================================================
   44. FOOTER CONTACT BLOCK
   ============================================================ */
.ft__contact{display:flex;flex-direction:column;gap:12px}
.ft__row{
  display:flex;align-items:flex-start;gap:11px;padding:.7em .85em;
  border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .2s,background .2s;
}
.ft__row:hover{border-color:var(--red);background:rgba(239,23,20,.07)}
.ft__row i{font-style:normal;font-size:1rem;line-height:1.3;flex:none}
.ft__row div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ft__row b{font-family:var(--mono);font-size:.69rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.ft__row span{font-size:.98rem;font-weight:500;color:var(--txt);overflow-wrap:anywhere}

/* desktop: sits in the hero's right column */
@media (min-width:1080px){ .herolead{display:flex} }

/* below that,
the form moves under the hero copy so it is still captured */
@media (max-width:1079px){
  .herolead{display:flex;width:100%;justify-self:stretch;margin-top:6px}
  .herolead__h{font-size:1.3rem}
}
/* very small screens: keep the hero from becoming a wall of form */
@media (max-width:520px){
  .herolead__p{display:none}
}

/* Three-up stat row. Declared as a class rather than an inline style so the
   narrow-screen rules below can still take over — an inline grid-template
   would have outranked them and left three cramped columns on a phone. */
.stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Same reasoning for the two-up row. Without it the base .stats grid is four
   columns, so a pair of tiles sits in the left half with dead track beside it. */
.stats--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){
  .stats--3{grid-template-columns:minmax(0,1fr)}
  .stats--3>div{border-right:0;border-bottom:1px solid var(--line)}
  .stats--3>div:last-child{border-bottom:0}
}

/* ===== hero.css ===== */
/* ============================================================
   46. OI HERO — rebuilt
   The old hero stacked seven blocks in the left column and floated a
   dark form on dark footage. Now: identity, one line, one fact row,
   one action — beside a cream intake slip that reads as a real object.
   ============================================================ */

/* ---------- layout ---------- */
/* Sized for the Organic Intelligence intake slip. Scoped, because the
   homepage poster is far narrower and inherited a column it could not fill. */
/* Same correction as the homepage: a fractional first column let the copy
   drift away from the slip, leaving a corridor down the middle, and the
   section was bottom-aligned so the top third sat empty. */
.hero--oi{justify-content:center}
.hero--oi .hero__in{padding-bottom:clamp(48px,6vw,84px)}
@media (min-width:1080px){
  .hero--oi .hero__cols{
    grid-template-columns:minmax(0,560px) minmax(340px,420px);
    justify-content:center;
    gap:clamp(36px,4.4vw,74px);
    align-items:center;
    max-width:1150px;margin-inline:auto;width:100%;
  }
}
.hero__col{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px);align-items:flex-start}

/* ---------- logo ---------- */
.hero .hero__logo{
  height:clamp(96px,15vh,196px);width:auto;max-width:100%;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.75));
}

/* ---------- one positioning line ---------- */
.hero__line{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.15rem,2.1vw,1.72rem);line-height:1.14;letter-spacing:-.005em;
  color:var(--txt);margin:0;text-wrap:balance;
}
.hero__line span{display:block;color:var(--yellow);font-weight:700;font-size:.74em;margin-top:.3em}

/* ---------- inline facts{
  display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0;padding:0;list-style:none;
}

/* ---------- actions: one button + a quiet link ---------- */
.hero__acts{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.btn--big{padding:1.1em 2em;font-size:.84rem;letter-spacing:.18em}

/* ============================================================
   47. INTAKE SLIP — the hero capture form
   ============================================================ */
.slip{
  position:relative;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(#fffdf6,#f7ecd6);
  color:#1a1109;border-radius:3px;
  padding:clamp(22px,2.4vw,30px) clamp(20px,2.2vw,28px) clamp(20px,2.2vw,26px);
  box-shadow:0 30px 70px -26px rgba(0,0,0,.95), 0 2px 0 rgba(0,0,0,.35);
  width:100%;
  rotate:-.4deg;
  /* the corner is genuinely cut, so the fold reads as paper rather than as a
     black shape sitting on top of the card */
  clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}
/* red margin rule,
like a real form */
.slip::before{
  content:"";position:absolute;left:clamp(13px,1.4vw,17px);top:18px;bottom:18px;width:1px;
  background:linear-gradient(rgba(239,23,20,0),rgba(239,23,20,.3) 12%,rgba(239,23,20,.3) 88%,rgba(239,23,20,0));
}
.slip__punch{
  position:absolute;right:0;top:0;width:34px;height:34px;pointer-events:none;
  background:linear-gradient(225deg,rgba(36,26,18,.26) 0 50%,transparent 50%);
}

.slip__hd{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-right:26px;padding-bottom:12px;
  border-bottom:2px solid rgba(36,26,18,.28);
}
.slip__form{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--red-deep)}
.slip__cls{font-family:var(--mono);font-size:.69rem;letter-spacing:.18em;
  text-transform:uppercase;color:#8a755a}

.slip__h{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.28rem,1.9vw,1.6rem);line-height:.98;color:#1a1109;margin:0;
}
.slip__p{font-size:1.04rem;line-height:1.55;font-weight:500;color:#5a4632;margin:0}

.slip__f{display:flex;flex-direction:column;gap:14px;margin-top:2px}
.slip__field{display:flex;flex-direction:column;gap:6px}
.slip__field span{
  font-family:var(--mono);font-size:.76rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:#8a755a;
}
.slip__field input{
  width:100%;padding:.78em .9em;border-radius:6px;font-weight:500;font-size:.94rem;color:#1a1109;
  background:rgba(255,255,255,.92);border:1px solid rgba(36,26,18,.26);
  transition:border-color .18s,box-shadow .18s;
}
.slip__field input::placeholder{color:#a4906f;opacity:1}
.slip__field input:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(239,23,20,.14);background:#fff;
}

.slip__check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding-top:6px}
.slip__check input{width:17px;height:17px;flex:none;margin-top:1px;accent-color:var(--red)}
.slip__check span{font-size:.8rem;line-height:1.45;font-weight:500;color:#4a3826}

.slip__btn{
  width:100%;margin-top:8px;padding:1.05em 1.2em;border:0;border-radius:8px;cursor:pointer;
  background:var(--red);color:#fff;
  font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  transition:transform .18s var(--ease),background .18s,box-shadow .18s;
}
.slip__btn:hover{background:#d11310;transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(239,23,20,.7)}
.slip__btn:active{transform:translateY(0)}
.slip__btn:disabled{opacity:.65;cursor:wait;transform:none}
.slip .form__msg{margin:0;font-size:.72rem}
.slip .form__msg.ok{background:rgba(40,143,71,.14);border-color:#1d6b34;color:#155a29}
.slip .form__msg.err{background:rgba(239,23,20,.1);border-color:var(--red-deep);color:#8f0d0b}

.slip__stamp{display:none}

/* ---------- responsive ---------- */
@media (max-width:1079px){
  .slip{rotate:0deg;max-width:520px;margin-top:8px}
  .hero__cols{gap:26px}
}
@media (max-width:560px){
  .slip{padding:20px 18px}
  .slip__punch{width:42px;height:42px}
  .slip__stamp{display:none}
  .hero__acts{gap:12px;width:100%}
  .hero__acts .btn--big{width:100%}
}

/* the OI hero carries a form,
so it needs a little more vertical room */
@media (min-width:1080px){
  .hero:has(.slip){min-height:min(100svh,980px)}
}

/* Paired fields on the intake slip. Subgrid keeps the labels and inputs on
   shared rows,
so "City (optional)" wrapping cannot push its input out of
   line with the postal code beside it. */
.slip__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@supports (grid-template-rows:subgrid){
  .slip__row{grid-template-rows:auto auto}
  .slip__row>.slip__field{display:grid;grid-row:span 2;grid-template-rows:subgrid}
}
.slip__field i{font-style:normal;text-transform:none;letter-spacing:.02em;opacity:.7}
@media (max-width:420px){.slip__row{grid-template-columns:minmax(0,1fr)}}

/* The MovieWeb pull-quote — the hero's only body copy on the Webflow page.
   Sized to read as a critic quote,
not as a heading competing with the logo. */
.hero__quote{
  margin:18px 0 0;padding-left:16px;
  border-left:2px solid rgba(239,23,20,.55);
  max-width:38rem;
}
.hero__quote p{
  margin:0;font-size:clamp(.9rem,1.35vw,1.02rem);line-height:1.6;
  color:rgba(245,230,200,.9);font-style:italic;
}
.hero__quote cite{
  display:block;margin-top:7px;font-style:normal;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted-2);
}

/* ============================================================
   Organic Intelligence hero — Webflow parity.
   Scoped to .hero--oi so nothing else on the site is affected.
   Values read off the Webflow styles:
     .heading-1.orange  Kaneda Gothic 900, line-height 80%, #fea51f
     .body-text         16px/150%, weight 300, hsla(40,69%,87%), max 480px
     .oi-btn            Oswald 600, uppercase, 1.5px tracking, 50px pill
     .oi-btn.text-lg    16px, 14px/18px padding
     .oi-btn.outline    transparent, 1px border
   ============================================================ */
.hero--oi .hero__line{
  margin:14px 0 0;
  font-family:var(--display);font-weight:900;
  font-size:clamp(2.1rem,5vw,4.4rem);
  line-height:.8;letter-spacing:-.015em;text-transform:uppercase;
  color:var(--orange);
}
/* The pull quote. It was set at body size, a third of the headline above it,
   and read as a caption rather than as the thing being said about the film.
   At 2.7rem it is the second-loudest thing in the hero after the headline,
   which is what a one-line verdict from a review is worth here. It sets to
   four balanced lines in the hero column at desktop width; the short-window
   rule further down takes it back to a size that still fits above the fold,
   and the shadow holds it against the trailer moving behind. */
.hero--oi .hero__quote{
  margin:24px 0 0;padding:0;border:0;max-width:46rem;
}
.hero--oi .hero__quote p{
  font-family:var(--display);font-weight:500;font-style:normal;
  font-size:clamp(1.55rem,2.75vw,2.7rem);line-height:1.26;
  letter-spacing:-.005em;color:#fbf3e4;text-wrap:balance;
  text-shadow:0 2px 18px rgba(16,12,10,.75);
}
.hero--oi .hero__quote cite{
  display:block;margin-top:12px;font-style:normal;
  font-family:"Oswald",var(--mono),sans-serif;
  font-size:clamp(.98rem,1.1vw,1.08rem);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#d8c7a6;
  text-shadow:0 1px 10px rgba(16,12,10,.8);
}

/* Pill buttons, matching .oi-btn / .text-lg / .outline */
.hero--oi .hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero--oi .hero__acts .btn{
  --bg:var(--red);--fg:#fff;--bd:var(--red);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 18px;border-radius:50px;border:1px solid var(--bd);
  background:var(--bg);color:var(--fg);
  font-family:"Oswald",var(--mono),sans-serif;
  font-size:1rem;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;white-space:nowrap;
  box-shadow:0 8px 24px rgba(239,23,20,.3);
  transition:transform .3s ease-out,box-shadow .3s ease-out,background-color .3s ease-out,color .3s ease-out;
}
.hero--oi .hero__acts .btn:hover{
  background:#d31310;transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(239,23,20,.4);
}
.hero--oi .hero__acts .btn--ghost{
  --bg:transparent;--fg:var(--txt);--bd:rgba(245,230,200,.35);
  box-shadow:none;
}
.hero--oi .hero__acts .btn--ghost:hover{
  background:rgba(245,230,200,.08);color:#fff;
  border-color:var(--paper);box-shadow:none;
}
@media (max-width:520px){
  .hero--oi .hero__acts .btn{width:100%}
}

/* ============================================================
   47. HOMEPAGE HERO
   The old composition sat bottom-left with a 280px poster pinned to the
   far right of a 430px column, leaving a dead corridor down the middle.
   It now reads as one centred pairing: the title block and the one-sheet
   held together, vertically centred, with the frame doing the framing.
   ============================================================ */
.hero--home{justify-content:center}

.hero--home .hero__in{
  padding-bottom:clamp(64px,7vw,96px);
  gap:0;
}

.hero--home .hero__cols{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(26px,4vw,54px);
  align-items:center;
  justify-items:center;
  text-align:center;
  width:100%;
  /* holds the pair together instead of letting them drift to the edges */
  max-width:1140px;margin-inline:auto;
}

.hero--home .hero__col{
  align-items:center;text-align:center;
  gap:clamp(15px,1.9vw,23px);
}

.hero--home .hero__badge{justify-content:center}

.hero--home .hero__logo{
  height:clamp(96px,15vh,190px);
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.8));
}

.hero--home .hero__title{max-width:none}
.hero--home .hero__sub{margin-inline:auto}

/* the poster is the anchor, not an afterthought pinned to the margin */
.hero--home .hero__sheet{
  display:block;position:relative;
  width:min(340px,72vw);
  rotate:-2deg;
  transition:rotate .4s var(--ease),transform .4s var(--ease);
}
.hero--home .hero__sheet::after{
  content:"";position:absolute;inset:-14% -18%;z-index:-1;
  background:radial-gradient(closest-side,rgba(239,23,20,.3),transparent 72%);
  filter:blur(6px);
}
.hero--home .hero__sheet:hover{rotate:0deg;transform:translateY(-6px)}
.hero--home .hero__sheet img{
  width:100%;aspect-ratio:2/3;object-fit:cover;border:7px solid var(--paper);
  box-shadow:0 34px 70px -22px rgba(0,0,0,.95);
}
.hero--home .hero__sheet figcaption{
  position:absolute;left:0;right:0;bottom:-32px;text-align:center;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2);
}
/* The base stamp uses mix-blend-mode:screen, which all but disappears where it
   crosses the poster's pale border. Here it is a solid plate instead. */
.hero--home .hero__sheet .stamp{
  position:absolute;top:-15px;left:-15px;z-index:3;white-space:nowrap;
  mix-blend-mode:normal;opacity:1;
  background:var(--paper);color:var(--red-deep);
  box-shadow:0 6px 18px rgba(0,0,0,.5),inset 0 0 0 1px rgba(143,13,11,.25);
}

/* side by side once there is room for both to be full size */
@media (min-width:1000px){
  .hero--home .hero__cols{
    /* content-width text column rather than a fraction: a fraction left the
       short copy floating with a corridor of dead space beside the poster */
    grid-template-columns:minmax(0,560px) minmax(300px,380px);
    justify-content:center;
    gap:clamp(40px,4.6vw,76px);
    justify-items:stretch;
    text-align:left;
  }
  .hero--home .hero__col{align-items:flex-start;text-align:left}
  .hero--home .hero__badge{justify-content:flex-start}
  .hero--home .hero__sub{margin-inline:0}
  .hero--home .hero__sheet{width:min(376px,100%);justify-self:end}
}

/* the cue belongs to the section now, so it can sit centred at the foot */
.hero--home .hero__scroll{
  position:absolute;left:50%;bottom:clamp(16px,2.4vw,26px);
  translate:-50% 0;margin:0;z-index:2;
}
@media (max-height:760px){ .hero--home .hero__scroll{display:none} }

/* two lines of lede should read as one thought, not two */
.hero--home .hero__sub{line-height:1.45}

/* Softened corners on the hero's single action. The site radius token is 2px,
   which reads as a hard block at this size; 10px takes the edge off without
   turning it into a pill. */
.hero--home .hero__acts .btn{border-radius:10px}

/* ---------- hero buy card ----------
   Same paper card as the fan-club slip it replaced, so the hero's two-column
   balance is unchanged: the right-hand column still holds one cream card of
   about the same weight. What changed is the job. It was a form asking for an
   address in exchange for a link; it is the link now. */
.buyslip{
  position:relative;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(#fffdf6,#f7ecd6);
  color:#1a1109;border-radius:3px;
  padding:clamp(22px,2.4vw,30px) clamp(20px,2.2vw,28px) clamp(20px,2.2vw,26px);
  box-shadow:0 30px 70px -26px rgba(0,0,0,.95), 0 2px 0 rgba(0,0,0,.35);
  width:100%;rotate:-.4deg;
  clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}
/* Two by two rather than a stack of four: the logos are wordmarks of very
   different widths, and a grid gives each the same box to sit in without
   stretching any of them. */
.buyslip__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;list-style:none;
}
.buyslip__opt{
  display:flex;align-items:center;justify-content:center;min-height:62px;
  padding:.7em .8em;background:#fff;border:1px solid rgba(36,26,18,.22);
  border-radius:var(--r);transition:border-color .2s,transform .2s,box-shadow .2s;
}
.buyslip__opt img{display:block;max-height:26px;max-width:100%;width:auto;object-fit:contain}
.buyslip__opt span{font-family:var(--display);font-weight:600;font-size:.98rem}
.buyslip__opt:hover,
.buyslip__opt:focus-visible{
  border-color:var(--red-deep);transform:translateY(-2px);
  box-shadow:0 8px 18px -10px rgba(0,0,0,.5);
}
.buyslip__more{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  margin-top:.2rem;padding:.75em 1em;border-radius:var(--r);
  background:var(--red);color:#fff;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
}
.buyslip__more:hover,
.buyslip__more:focus-visible{background:var(--red-deep)}

/* The clip is a texture, not a picture. Measured across the loop, the region
   the title and quote sit over runs from Y=42 to Y=149 of 255 — the frame of
   the birthday party is nearly six times brighter than the frame of the bay.
   Taking the video down and carrying more of the scrim on the left, where the
   type is, means the words hold at the bright end of that range instead of
   only at the dark end. */
.hero--oi .hero__video,
.hero--home .hero__video{filter:saturate(.82) contrast(1.02) brightness(.52)}
.hero--oi .hero__tint,
.hero--home .hero__tint{
  background:
    linear-gradient(100deg,rgba(16,12,10,.86) 0%,rgba(16,12,10,.62) 42%,rgba(16,12,10,.3) 72%,transparent 100%),
    radial-gradient(85% 65% at 30% 45%,rgba(0,0,0,.5),transparent 72%),
    linear-gradient(180deg,rgba(16,12,10,.72) 0%,rgba(16,12,10,.3) 30%,rgba(16,12,10,.68) 74%,var(--ink) 100%);
}

/* Short desktop windows. The hero now carries a countdown strip as well as the
   logo, the headline, a pull quote at twice its old size, a button and the buy
   card. At 900px tall that fits with room to spare; at 700 it ran 127px past
   the fold and cut the Watch Trailer button in half. Everything here is the
   same furniture at a smaller setting rather than anything being dropped: the
   visitor on a laptop sees the whole hero, including the button. */
/* The hero's own budget. The countdown strip, the gap under it, the logo, the
   headline, a 40px quote, the button and the buy card all have to land inside
   one screen, and after the strip grew they did not: the Watch Trailer button
   finished 39px below the fold at 1440x900. The hero reclaims that from its
   own padding rather than from any of the things the page is there to say. */
.hero--oi{padding-top:calc(var(--nav-h) + 14px)}
.hero--oi .hero__in{padding-bottom:clamp(16px,2vw,30px)}
.hero--oi .hero__acts{margin-top:18px}

@media (min-width:761px) and (max-height:820px){
  .hero--oi .hero__line{font-size:clamp(1.9rem,3.6vw,3.1rem)}
  .hero--oi .hero__quote{margin-top:16px}
  .hero--oi .hero__quote p{font-size:clamp(1.3rem,2.05vw,1.95rem);line-height:1.28}
}


/* The buy card's own header and the clock's unit labels were the last things
   on the page still under 14px. The card header is the line that says what
   the card is and when, so it should not be the smallest type in the hero. */
.buyslip .slip__form{font-size:clamp(.88rem,1vw,.96rem)}
.buyslip .slip__cls{font-size:clamp(.86rem,.95vw,.92rem)}

/* The hero card, same state as the section below it: the four stores are
   shown but drained, so the card reads as a promise rather than as four
   buttons that do nothing yet. The "Every way to watch" button underneath
   stays fully live, because that one does work. */
.buyslip__opt--shut{
  border-style:dashed;
  background-image:repeating-linear-gradient(-45deg,rgba(36,26,18,.06) 0 6px,transparent 6px 12px);
}
.buyslip__opt--shut img{filter:grayscale(1) contrast(.95);opacity:.62}
.buyslip__opt--shut:hover img,
.buyslip__opt--shut:focus-visible img{filter:grayscale(.2);opacity:.85}

/* Below the two-column breakpoint everything in the hero stacks, and the quote
   at four lines was pushing the buy card to 727px on an 812px phone, i.e. off
   the first screen entirely. The card is what the page is for, so it goes
   above the quote.

   display:contents on the column lifts its two halves into the same grid as
   the card, which is what lets a third element be ordered between them. The
   markup order stays the reading order on a wide screen, where the card sits
   beside the copy and none of this applies. */
@media (max-width:1079px){
  .hero--oi .hero__col{display:contents}
  .hero--oi .hero__lead{order:1}
  .hero--oi .buyslip{order:2}
  .hero--oi .hero__tail{order:3}
  .hero--oi .hero__quote{margin-top:0}
}

/* On a wide screen the two halves are just the column's own contents. */
@media (min-width:1080px){
  .hero--oi .hero__tail{margin-top:0}
}

/* ===== dossier.css ===== */
/* ============================================================
   48. DOSSIER — physical artifacts instead of boxes
   Torn edges, tape, paperclips, marker scrawl, ticket stubs,
   filmstrips. The point is that nothing should look like a card.
   ============================================================ */

:root{ --marker:"Caveat","Bradley Hand",cursive; }

/* ------------------------------------------------------------------
   48.1  Torn paper edges between dark and cream sections
   ------------------------------------------------------------------ */
.sec--paper{ position:relative }

/* The tear owns ::before outright. It used to share the pseudo-element with
   the paper-tooth texture, which meant it inherited that rule's opacity:.55
   and painted a translucent cream over the dark section instead of a clean
   bite out of it. The texture now lives on the section background. */
.sec--paper.is-torn::before,
.sec--paper.is-torn-b::after{
  content:"";position:absolute;left:0;right:0;height:22px;z-index:2;
  pointer-events:none;opacity:1;background:var(--paper);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='22' preserveAspectRatio='none'><path d='M0 22 L0 6.3 Q17.6 8.7 35.3 5.8 Q52.9 1.9 70.6 4.2 Q88.2 9.3 105.9 8.4 Q123.5 6.5 141.2 9.4 Q158.8 11.5 176.5 9.4 Q194.1 5.5 211.8 9.0 Q229.4 11.2 247.1 8.8 Q264.7 4.7 282.4 8.0 Q300.0 12.3 317.6 9.6 Q335.3 5.3 352.9 5.5 Q370.6 9.7 388.2 7.8 Q405.9 5.4 423.5 9.8 Q441.2 9.5 458.8 5.7 Q476.5 4.9 494.1 11.6 Q511.8 13.8 529.4 9.9 Q547.1 5.4 564.7 8.1 Q582.4 11.1 600.0 7.0 Q617.6 6.5 635.3 12.0 Q652.9 15.6 670.6 12.4 Q688.2 9.0 705.9 12.3 Q723.5 11.6 741.2 6.1 Q758.8 2.7 776.5 5.2 Q794.1 8.5 811.8 8.2 Q829.4 2.8 847.1 4.9 Q864.7 9.1 882.4 7.4 Q900.0 2.4 917.6 5.0 Q935.3 8.7 952.9 6.5 Q970.6 2.9 988.2 5.4 Q1005.9 9.8 1023.5 7.4 Q1041.2 4.7 1058.8 6.5 Q1076.5 9.0 1094.1 6.7 Q1111.8 4.6 1129.4 9.2 Q1147.1 10.0 1164.7 5.6 Q1182.4 2.2 1200.0 6.3 L1200 22 Z' fill='black'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='22' preserveAspectRatio='none'><path d='M0 22 L0 6.3 Q17.6 8.7 35.3 5.8 Q52.9 1.9 70.6 4.2 Q88.2 9.3 105.9 8.4 Q123.5 6.5 141.2 9.4 Q158.8 11.5 176.5 9.4 Q194.1 5.5 211.8 9.0 Q229.4 11.2 247.1 8.8 Q264.7 4.7 282.4 8.0 Q300.0 12.3 317.6 9.6 Q335.3 5.3 352.9 5.5 Q370.6 9.7 388.2 7.8 Q405.9 5.4 423.5 9.8 Q441.2 9.5 458.8 5.7 Q476.5 4.9 494.1 11.6 Q511.8 13.8 529.4 9.9 Q547.1 5.4 564.7 8.1 Q582.4 11.1 600.0 7.0 Q617.6 6.5 635.3 12.0 Q652.9 15.6 670.6 12.4 Q688.2 9.0 705.9 12.3 Q723.5 11.6 741.2 6.1 Q758.8 2.7 776.5 5.2 Q794.1 8.5 811.8 8.2 Q829.4 2.8 847.1 4.9 Q864.7 9.1 882.4 7.4 Q900.0 2.4 917.6 5.0 Q935.3 8.7 952.9 6.5 Q970.6 2.9 988.2 5.4 Q1005.9 9.8 1023.5 7.4 Q1041.2 4.7 1058.8 6.5 Q1076.5 9.0 1094.1 6.7 Q1111.8 4.6 1129.4 9.2 Q1147.1 10.0 1164.7 5.6 Q1182.4 2.2 1200.0 6.3 L1200 22 Z' fill='black'/></svg>");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.sec--paper.is-torn::before{ top:-21px }
.sec--paper.is-torn-b::after{ bottom:-21px;transform:scaleY(-1) }


/* ------------------------------------------------------------------
   48.2  File-folder tab section headers
   ------------------------------------------------------------------ */
.tab{
  display:inline-flex;align-items:center;gap:.7em;position:relative;
  background:var(--red);color:#fff;padding:.5em 1.5em .5em 1.1em;
  font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 100%,0 100%);
  margin-bottom:-1px;
}
.tab--ink{background:#241a12;color:var(--paper)}

/* ------------------------------------------------------------------
   48.3  Marker annotations — scrawled margin notes with drawn marks
   ------------------------------------------------------------------ */
.scrawl{
  position:absolute;z-index:6;pointer-events:none;
  font-family:var(--marker);font-weight:700;
  font-size:clamp(1rem,1.5vw,1.35rem);line-height:1.05;
  color:var(--red);text-transform:none;letter-spacing:0;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.25));
}
.sec:not(.sec--paper) .scrawl{color:#ff5a52}
.scrawl--tilt{rotate:-7deg}
.scrawl__arrow{display:block;width:64px;height:38px;margin-top:2px;overflow:visible}
.scrawl__arrow path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
@media (max-width:900px){ .scrawl{display:none} }

/* hand-drawn ring around something important */
.ringed{position:relative}
.ringed::after{
  content:"";position:absolute;inset:-9px -14px;pointer-events:none;
  border:2.5px solid var(--red);border-radius:52% 48% 46% 54%/58% 42% 56% 44%;
  rotate:-2deg;opacity:.75;
}

/* ------------------------------------------------------------------
   48.4  Tape,
clips,
coffee
   ------------------------------------------------------------------ */
.tape{
  position:absolute;z-index:5;width:104px;height:28px;pointer-events:none;
  background:rgba(252,238,34,.5);
  border-left:1px solid rgba(36,26,18,.12);border-right:1px solid rgba(36,26,18,.12);
  box-shadow:0 1px 2px rgba(0,0,0,.22);
}
.tape--tl{top:-12px;left:22px;rotate:-6deg}

.clip{
  position:absolute;z-index:6;top:-14px;left:26px;width:24px;height:58px;pointer-events:none;
  border:3px solid #b9bcc2;border-radius:12px 12px 9px 9px;
  border-bottom-color:transparent;
  box-shadow:0 2px 3px rgba(0,0,0,.35);
  rotate:-8deg;
}
.clip::after{
  content:"";position:absolute;left:5px;top:7px;width:11px;height:40px;
  border:2.5px solid #d3d6dc;border-radius:8px 8px 6px 6px;border-bottom-color:transparent;
}

.coffee{
  position:absolute;z-index:1;width:112px;height:112px;pointer-events:none;
  border:9px solid rgba(120,72,28,.16);border-radius:50%;
  rotate:14deg;
}

/* ------------------------------------------------------------------
   48.5  THEATERS as torn ticket stubs
   ------------------------------------------------------------------ */
.sec--paper .thr__row,
.thr__row{
  position:relative;border-radius:0;
  background:
    radial-gradient(circle at 0 50%,transparent 9px,var(--paper-card) 9.5px),
    radial-gradient(circle at 100% 50%,transparent 9px,var(--paper-card) 9.5px);
  background-size:51% 100%,51% 100%;
  background-position:left,right;background-repeat:no-repeat;
  border:0;
  box-shadow:0 2px 0 rgba(36,26,18,.1);
}
.sec--paper .thr__row::before{
  content:"";position:absolute;left:74px;top:12px;bottom:12px;width:1px;
  background:repeating-linear-gradient(to bottom,rgba(36,26,18,.35) 0 4px,transparent 4px 9px);
}
.sec--paper .thr__row:hover{
  background:
    radial-gradient(circle at 0 50%,transparent 9px,#fffdf6 9.5px),
    radial-gradient(circle at 100% 50%,transparent 9px,#fffdf6 9.5px);
  background-size:51% 100%,51% 100%;
  background-position:left,right;background-repeat:no-repeat;
  transform:translateX(3px);
}
.thr__st{
  border:0;background:var(--red);color:#fff!important;border-radius:2px;
  width:46px;height:46px;font-size:1rem;
}

/* ------------------------------------------------------------------
   48.6  GALLERY as a filmstrip
   ------------------------------------------------------------------ */
.filmstrip{
  position:relative;background:#0d0908;padding:26px 12px;border-radius:2px;
  box-shadow:inset 0 0 40px rgba(0,0,0,.8);
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;scrollbar-color:#3a2c26 transparent;
}
.filmstrip::before,
.filmstrip::after{
  content:"";position:absolute;left:0;right:0;height:20px;pointer-events:none;
  background-image:radial-gradient(#f0e4cf 0 3.6px,transparent 4px);
  background-size:30px 20px;background-position:8px center;background-repeat:repeat-x;
  opacity:.82;
}
.filmstrip::before{top:3px}
.filmstrip::after{bottom:3px}
.filmstrip__t{display:flex;gap:8px;width:max-content}
.filmstrip figure{
  margin:0;position:relative;width:clamp(210px,22vw,290px);aspect-ratio:4/3;
  overflow:hidden;background:#1a1210;border:2px solid #0d0908;flex:none;
}
.filmstrip img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.06);
  transition:transform .5s var(--ease),filter .3s}
.filmstrip figure:hover img{transform:scale(1.05);filter:saturate(1.05)}
.filmstrip figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:8px 9px;
  background:linear-gradient(transparent,rgba(10,7,6,.94));
  font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:#d8c9b0;
}
.filmstrip__hint{
  font-family:var(--mono);font-size:.69rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2);margin-top:10px;
}

/* ------------------------------------------------------------------
   48.7  CAST as clipped surveillance photos
   ------------------------------------------------------------------ */
.cast__c{
  border-radius:0;background:var(--paper-card);border:0;
  padding:9px 9px 0;
  box-shadow:0 10px 24px -12px rgba(36,26,18,.6),0 1px 0 rgba(36,26,18,.2);
  overflow:visible;
}
.cast__c:nth-child(3n+1){rotate:-1.2deg}
.cast__c:nth-child(3n+2){rotate:.9deg}
.cast__c:nth-child(3n){rotate:-.4deg}
.cast__c:hover{rotate:0deg;transform:translateY(-6px) scale(1.02);border:0}
.cast__ph{border-radius:0;position:relative}
.cast__ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 30px rgba(36,26,18,.35);
}
.cast__b{padding:11px 4px 13px;background:transparent}
.cast__n{color:#1a1109}
.cast__r{color:var(--red-deep)}
.cast__cr{color:#8a755a}
.sec--paper .cast__c{background:var(--paper-card);border:0}
.cast__c .clip{left:auto;right:16px}

/* ------------------------------------------------------------------
   48.8  FAQ as an interrogation transcript
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   48.6b  Filmstrip frames open full size
   ------------------------------------------------------------------ */
.strip__open{
  display:block;width:100%;height:100%;padding:0;border:0;background:none;
  cursor:zoom-in;color:inherit;
}
.strip__open:focus-visible{outline:2px solid var(--red);outline-offset:-3px}
.strip__zoom{
  position:absolute;top:8px;right:8px;z-index:2;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;color:#f0e4cf;
  background:rgba(10,7,6,.6);backdrop-filter:blur(2px);
  opacity:0;transform:scale(.9);transition:opacity .22s,transform .22s var(--ease);
}
.filmstrip figure:hover .strip__zoom,
.strip__open:focus-visible .strip__zoom{opacity:1;transform:none}
/* the caption sits above the button so it stays legible over the image */
.filmstrip figcaption{z-index:1;pointer-events:none}

/* ------------------------------------------------------------------
   48.6c  Lightbox
   ------------------------------------------------------------------ */
/* Above the nav (8000), below the grain overlay (9000, pointer-events:none).
   At the old 1000 the fixed nav painted over the top of the dialog and swallowed
   the close button — its hit area landed on .nav__burger, so the ✕ could be seen
   but not clicked. Escape and the backdrop still closed it, which is why this
   survived: the dialog was escapable, just not by the control built for it. */
.lb{
  position:fixed;inset:0;z-index:8500;display:none;
  align-items:center;justify-content:center;padding:clamp(14px,4vw,48px);
  background:rgba(6,4,3,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.lb.is-open{display:flex}
.lb__fig{margin:0;max-width:min(1180px,100%);max-height:100%;display:flex;flex-direction:column;gap:12px}
.lb__img{
  max-width:100%;max-height:calc(100vh - 190px);width:auto;height:auto;object-fit:contain;
  border:2px solid #1a1210;border-radius:2px;box-shadow:0 40px 90px -30px #000;background:#0d0908;
}
.lb__cap{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:#d8c9b0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.lb__cap i{font-style:normal;color:var(--muted-2)}
.lb__x,
.lb__nav{
  position:absolute;z-index:2;display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(26,18,16,.9);border:1px solid rgba(245,230,200,.2);color:#f0e4cf;
  font-family:var(--mono);font-size:1rem;transition:background .2s,border-color .2s,transform .2s var(--ease);
}
.lb__x:hover,
.lb__nav:hover{background:var(--red);border-color:var(--red);transform:scale(1.06)}
.lb__x:focus-visible,
.lb__nav:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.lb__x{top:clamp(12px,2.4vw,26px);right:clamp(12px,2.4vw,26px)}
.lb__nav--prev{left:clamp(8px,2vw,26px)}
.lb__nav--next{right:clamp(8px,2vw,26px)}
@media (max-width:560px){
  .lb__nav{top:auto;bottom:clamp(12px,4vw,22px);width:42px;height:42px}
  .lb__img{max-height:calc(100vh - 230px)}
}
@media (prefers-reduced-motion:reduce){
  .strip__zoom,
.lb__x,
.lb__nav{transition:none}
}

/* ------------------------------------------------------------------
   48.9c  Story tagline — the Webflow pull-quote
   Red,
uppercase and on one line. The size is viewport-derived so the
   whole sentence fits the column without a hard <br>,
which would break
   in the wrong place on narrow screens. Wrapping is still allowed as a
   last resort rather than letting it overflow.
   ------------------------------------------------------------------ */
/* .doss__sheet blockquote sets a dark ink colour at higher specificity,
so this selector has to match it to win. */
.doss__sheet .oi-tagline,
.oi-tagline{
  margin:24px 0;padding-left:18px;
  border-left:3px solid var(--red-deep);
  font-family:var(--display);font-weight:800;
  font-size:clamp(.95rem,2.05vw,1.55rem);
  line-height:1.14;letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--red-deep);
  text-wrap:balance;
}
@media (max-width:520px){
  .oi-tagline{font-size:1.02rem;padding-left:14px}
}

/* ------------------------------------------------------------------
   48.9  FAQ — declassified file entries
   The previous version set questions in mono with a floating "Q:" in the
   gutter and boxed each answer, which read as a terminal dump and left
   the marker misaligned with its own text. This keeps the dossier tone
   through the file numbers and the red rule, but sets the question in the
   display face at a readable size and lets the answer breathe.
   ------------------------------------------------------------------ */
.faq--transcript{border-top:1px solid var(--paper-line)}

.faq--transcript details{
  border:0;border-bottom:1px solid var(--paper-line);
  position:relative;margin:0;padding:0;
  transition:background-color .25s var(--ease);
}
.faq--transcript details[open]{background:rgba(143,13,11,.055)}

/* question row */
.faq--transcript summary{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:clamp(10px,1.4vw,18px);
  padding:clamp(16px,2vw,22px) clamp(12px,1.6vw,20px);
  margin:0;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.34rem,1.95vw,1.62rem);
  line-height:1.3;letter-spacing:.005em;text-transform:none;
  color:var(--ink-on-paper);
  transition:color .2s;
}
.faq--transcript summary::-webkit-details-marker{display:none}
.faq--transcript summary::after{content:none}
.faq--transcript summary:hover{color:var(--red-deep)}
.faq--transcript details[open] summary{color:var(--ink-on-paper)}

/* file number instead of a bare Q: */
.faq--transcript summary::before{
  content:counter(faq,decimal-leading-zero);
  position:static;translate:none;padding:0;
  font-family:var(--mono);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;color:#a08a68;
  transform:translateY(-.15em);
}
.faq--transcript{counter-reset:faq}
.faq--transcript details{counter-increment:faq}
.faq--transcript details[open] summary::before{color:var(--red)}

/* chevron */
.faq--transcript .faq__x{
  width:26px;height:26px;flex:none;display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--paper-line);
  color:var(--red-deep);align-self:center;
  transition:transform .3s var(--ease),background-color .2s,border-color .2s;
}
.faq--transcript summary:hover .faq__x{background:rgba(143,13,11,.08);border-color:var(--red-deep)}
.faq--transcript details[open] .faq__x{transform:rotate(180deg);background:var(--red);border-color:var(--red);color:#fff}
.faq--transcript .faq__x svg{width:11px;height:11px}

/* answer */
.faq--transcript .faq__a{
  margin:0;padding:0 clamp(12px,1.6vw,20px) clamp(22px,2.6vw,28px)
          calc(clamp(12px,1.6vw,20px) + 1.9rem);
  max-width:48rem;
  /* the display face is condensed, so answers need real size and weight to
     hold up next to the questions — at 1rem/500 they read as small print */
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.2rem,1.55vw,1.36rem);line-height:1.7;letter-spacing:.012em;
  color:#241a10;
  border-left:2px solid var(--red);
  margin-left:clamp(12px,1.6vw,20px);
  padding-left:clamp(14px,1.8vw,20px);
  animation:faqIn .3s var(--ease);
}
.faq--transcript .faq__a::before{content:none}

@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .faq--transcript .faq__a{animation:none}
  .faq--transcript .faq__x{transition:none}
}
@media (max-width:560px){
  .faq--transcript summary{font-size:1.24rem;gap:10px}
  .faq--transcript .faq__a{padding-left:14px;margin-left:10px;font-size:1.08rem}
}

/* The ring is placed past the sheet edge on purpose. Below the wide layout
   that overhang reaches past the viewport and widens the page, so it tucks in
   and then drops out entirely on phones. */
.coffee--br{right:-38px;bottom:52px}
@media (max-width:1100px){ .coffee--br{right:-6px} }
@media (max-width:620px){ .coffee--br{display:none} }

/* ============================================================
   THE DOSSIER BODY COPY
   ------------------------------------------------------------
   "What Is Organic Intelligence?" is the one place on the page where somebody
   reads more than a line, and it was running at the site default of 1.15rem
   under a heading several times its size. Raised across the sheet so the
   synopsis and the paragraph under it match, with the opening paragraph a
   step above as a lead. Line height comes up with the size; measure is held
   by .body's own 66ch.
   ============================================================ */
.page-oi #story .doss__sheet .body {
  font-size: clamp(1.26rem, 1.5vw, 1.4rem);
  line-height: 1.72;
}

.page-oi #story .doss__sheet .body--lead {
  font-size: clamp(1.38rem, 1.7vw, 1.58rem);
  line-height: 1.6;
}

/* ============================================================
   ORGANIC INTELLIGENCE — THE REST OF THE PAGE
   ------------------------------------------------------------
   The where-to-buy block was set against the contest page, which is the
   scale that was read back and approved. Everything else on this page was
   still on the site defaults, and measured at 1440 the gap was wide: cast
   names 16px under a 31px heading, their roles 11px, the dossier's own
   Genre/Rating/Runtime labels 13px, photo captions 11.5px.

   The FAQ, the section ledes and the review slider were already at or above
   the mark and are left alone.

   Scoped under .page-oi, a class on this page's <main>. .cast__n, .rows,
   .doss__photo and .tab are shared with the homepage and the press pages,
   and this is a review of one page, not a decision about the whole site.
   ============================================================ */
.page-oi #cast .cast__n { font-size: clamp(1.26rem, 1.5vw, 1.42rem); }
.page-oi #cast .cast__r { font-size: clamp(.86rem, .98vw, .95rem); letter-spacing: .14em; }

.page-oi #story .rows dt { font-size: clamp(1rem, 1.15vw, 1.1rem); letter-spacing: .12em; }
.page-oi #story .rows dd { font-size: clamp(1.18rem, 1.38vw, 1.3rem); }

.page-oi #story .doss__photo figcaption,
.page-oi #trailer figcaption { font-size: clamp(.86rem, .98vw, .95rem); letter-spacing: .1em; }

.page-oi #trailer .filmstrip__hint { font-size: clamp(.86rem, .98vw, .95rem); }

/* The terminal is set in mono and reads as a readout, so it stays a notch
   under the body copy, but 13px was below what the rest of the page asks of
   anyone. */
.page-oi #story .term p,
.page-oi #story .term .q { font-size: clamp(.98rem, 1.1vw, 1.06rem); }

/* The file tabs above each section heading. 12.2px of letterspaced
   uppercase is the smallest type on the page and it is the first thing
   read in every section. */
.page-oi .tab { font-size: clamp(.92rem, 1.05vw, 1.02rem); }

/* ===== gallery.css ===== */
/* ==================================================================
   Press photo gallery  —  /press/laemmle-noho-7
   A denser, more utilitarian cousin of the .filmstrip in dossier.css.
   The filmstrip is a horizontal scroller built for browsing six stills;
   this is a wrapping grid built for a journalist scanning sixteen and
   taking two, so every tile carries its own download without opening.
   ================================================================== */

.pgal{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:clamp(12px,1.6vw,20px);
  margin-block:clamp(20px,3vw,34px);
}

/* The figure is the positioning context for the download overlay, and it is
   the frame — there is no caption row under the tile, so the border wraps the
   photograph directly. */
.pgal__c{
  position:relative;margin:0;
  background:var(--ink-1);border:1px solid var(--line-2);border-radius:var(--r);
  overflow:hidden;
}

/* The tile itself is the button, so the whole frame is the hit target.
   Aspect is fixed and the image covers it: the source set runs from 2560x1707
   landscape to 2560x3840 portrait, and letterboxing that range inside one grid
   left ragged columns of dead space. Cropping the tile keeps the grid honest;
   the lightbox and the download both still serve the uncropped frame. */
.pgal__open{
  position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  background:var(--ink-2);aspect-ratio:4/3;overflow:hidden;
}
.pgal__open img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease),filter .3s;
}
.pgal__open:hover img,
.pgal__open:focus-visible img{transform:scale(1.045);filter:brightness(1.06)}
.pgal__open:focus-visible{outline:2px solid var(--red);outline-offset:-3px}

.pgal__zoom{
  position:absolute;top:8px;right:8px;z-index:2;display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;color:#f0e4cf;
  background:rgba(10,7,6,.62);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;transform:scale(.9);transition:opacity .22s,transform .22s var(--ease);
}
.pgal__c:hover .pgal__zoom,
.pgal__open:focus-visible .pgal__zoom{opacity:1;transform:none}

/* The per-tile download, overlaid on the frame at the corner opposite the zoom
   affordance. Deliberately a real <a download> and not a button: it survives
   middle-click, "save link as", and JS being off. It sits above the button in
   the stack, so clicking it downloads rather than opening the lightbox. */
.pgal__dl{
  position:absolute;left:8px;bottom:8px;z-index:3;
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 9px;border-radius:var(--r);
  border:1px solid rgba(245,230,200,.28);
  background:rgba(10,7,6,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:#f0e4cf;text-decoration:none;
  opacity:0;transform:translateY(4px);
  transition:opacity .22s,transform .22s var(--ease),background .2s,border-color .2s;
}
.pgal__c:hover .pgal__dl,
.pgal__dl:focus-visible{opacity:1;transform:none}
.pgal__dl:hover{background:var(--red);border-color:var(--red);color:#fff}
.pgal__dl:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---------- credit line ---------- */
.credit{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:0 0 clamp(16px,2vw,24px);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  color:var(--muted-2);
}
.credit span{text-transform:uppercase;letter-spacing:.16em;font-size:.62rem}
.credit b{color:var(--paper);font-weight:700;letter-spacing:.04em;font-size:.86rem}
.credit a{color:var(--yellow);text-decoration:none;border-bottom:1px solid rgba(252,238,34,.35)}
.credit a:hover{border-bottom-color:var(--yellow)}
.credit i{font-style:normal;color:var(--muted-2);opacity:.8}

/* ---------- footer block ---------- */
.pgal__foot{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,40px);
  flex-wrap:wrap;
  margin-top:clamp(26px,4vw,44px);padding:clamp(20px,3vw,32px);
  border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--ink-1);
}
.pgal__foot .body{margin:8px 0 0;font-size:1.02rem}

.pgal__terms{
  margin-top:clamp(18px,2.5vw,26px);max-width:80ch;
  font-family:var(--mono);font-size:.72rem;line-height:1.75;color:var(--muted-2);
}
.pgal__terms b{color:var(--paper)}
.pgal__terms a{color:var(--yellow)}

/* Touch has no hover, so anything that only appears on hover would never
   appear at all. Both affordances go permanently visible on coarse pointers
   rather than at a width breakpoint — a stylus or a touchscreen laptop is not
   a narrow screen, and this is about the pointer, not the viewport. */
@media (hover:none),(pointer:coarse){
  .pgal__zoom{opacity:.9;transform:none}
  .pgal__dl{opacity:.95;transform:none}
}

@media (max-width:560px){
  .pgal{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .pgal__dl{padding:4px 7px;font-size:.5rem;left:6px;bottom:6px}
  .pgal__zoom{width:24px;height:24px;top:6px;right:6px}
}

@media (prefers-reduced-motion:reduce){
  .pgal__open img,.pgal__zoom,.pgal__dl{transition:none}
  .pgal__open:hover img,.pgal__open:focus-visible img{transform:none}
}

/* ==================================================================
   Lightbox additions — credit line and download button.
   The base .lb lives in dossier.css; these are the parts only the press
   gallery uses, so they sit here and load with it.
   ================================================================== */
.lb__cap span{min-width:0}
.lb__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lb__credit{
  font-style:normal;color:var(--muted-2);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
}
.lb__dl{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border:1px solid var(--line);border-radius:var(--r);
  background:rgba(26,18,16,.9);color:#f0e4cf;text-decoration:none;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s,border-color .2s;
}
.lb__dl:hover,
.lb__dl:focus-visible{background:var(--red);border-color:var(--red);color:#fff}
.lb__dl:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.lb__dl[hidden]{display:none}

@media (max-width:560px){
  .lb__cap{flex-direction:column;align-items:flex-start;gap:8px}
  .lb__meta{width:100%;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){
  .lb__dl{transition:none}
}

/* ===== reel.css ===== */
/* ============================================================
   49. TESTIMONY REEL — a slider, not a grid of boxes
   Full-bleed, one big statement at a time, scroll-snap track so a
   swipe works natively and it degrades to a scroller with no JS.
   ============================================================ */
.reel{position:relative;margin-top:clamp(8px,1.5vw,20px)}

/* break out of the page gutter so it reads as a stage,
not a card */
.reel__stage{
  position:relative;
  margin-inline:calc(-1 * var(--pad));
  padding-inline:calc(var(--pad) - 6px);
  display:flex;align-items:stretch;gap:10px;
}

.reel__track{
  display:flex;gap:clamp(14px,2vw,26px);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:8px 6px 10px;flex:1;
  outline:none;
}
.reel__track::-webkit-scrollbar{display:none}
.reel__track:focus-visible{outline:2px solid var(--yellow);outline-offset:4px;border-radius:2px}
@media (prefers-reduced-motion:reduce){ .reel__track{scroll-behavior:auto} }

/* ---------- the slide: a torn statement sheet ---------- */
.reel__slide{
  position:relative;flex:0 0 min(760px,86%);scroll-snap-align:center;
  display:flex;flex-direction:column;gap:16px;margin:0;
  padding:clamp(28px,3.4vw,52px) clamp(24px,3vw,48px);
  background:
    linear-gradient(#fffdf6,#f6ead2);
  color:#1a1109;
  box-shadow:0 24px 54px -24px rgba(0,0,0,.7),0 2px 0 rgba(36,26,18,.22);
  overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.reel__slide:nth-child(odd){rotate:-.35deg}
.reel__slide:nth-child(even){rotate:.3deg}

/* red typed margin rule */
.reel__slide::before{
  content:"";position:absolute;left:clamp(12px,1.4vw,20px);top:0;bottom:0;width:1px;
  background:rgba(239,23,20,.3);
}
/* faint ruled lines,
like a witness statement pad */
.reel__slide::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(to bottom,transparent 0 30px,rgba(36,26,18,.07) 30px 31px);
}
.reel__slide > *{position:relative;z-index:1}
.reel__q{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.42rem,2.85vw,2.35rem);
  line-height:1.26;letter-spacing:-.005em;color:#1a1109;
  margin:0;text-wrap:pretty;
}
.reel__slide:first-child .reel__q::first-letter,
.reel__slide .reel__q::first-letter{
  color:var(--red-deep);
}

/* giant watermark quote mark */
.reel__mark{
  position:absolute;right:-6px;bottom:-64px;z-index:0;
  font-family:Georgia,"Times New Roman",serif;font-size:16rem;line-height:1;
  color:var(--red);opacity:.07;pointer-events:none;
}

/* The quotation marks. Kept as spans rather than ::before/::after so they
   sit inside the blockquote's own text flow and wrap with it — a marked-up
   mark can never end up orphaned on a line of its own. */
.reel__mk{color:var(--red-deep);opacity:.75}

/* Attribution runs straight on from the closing quote mark, in the same
   type at the same size — it is the end of the sentence, not a footnote
   parked at the bottom of the card. Inline, so it wraps with the quote and
   sits tight against it however the lines break. */
.reel__by{color:var(--red-deep)}
.reel__dash{margin-inline:.1em}
.reel__who{font-weight:800;color:var(--red-deep)}

/* The outlet is the link, because the outlet is what published the review.
   Same size as everything around it — a source in small print reads like a
   disclaimer. */
.reel__src{color:var(--red-deep);font-weight:700}
a.reel__src--link{
  /* Keeps the arrow on the same line as the outlet; without it the glyph
     wraps onto a line of its own under the name. Outlet names are short
     enough that refusing to break inside one costs nothing. */
  white-space:nowrap;
  color:var(--red-deep);
  text-decoration:underline;text-decoration-color:rgba(143,13,11,.4);
  text-underline-offset:.16em;text-decoration-thickness:2px;
  transition:text-decoration-color .18s,color .18s;
}
a.reel__src--link:hover,a.reel__src--link:focus-visible{
  color:var(--red);text-decoration-color:var(--red);
}
.reel__out{display:inline-block;width:.5em;height:.5em;margin-left:.22em;vertical-align:.32em;opacity:.85}

/* The feature slide: wider, with a bigger quote. Everything else about it is
   the same card, so it reads as the lead rather than as a different object. */
.reel__slide--feature{
  flex-basis:min(880px,92%);
  box-shadow:0 28px 62px -22px rgba(0,0,0,.78),0 2px 0 var(--red);
}
.reel__slide--feature .reel__q{font-size:clamp(1.6rem,3.5vw,2.9rem)}

/* ---------- arrows ---------- */
.reel__nav{
  flex:none;align-self:center;width:46px;height:46px;display:none;place-items:center;
  border:1px solid var(--line);border-radius:50%;color:var(--txt);
  background:rgba(16,12,10,.55);backdrop-filter:blur(6px);
  transition:background .2s,border-color .2s,transform .2s var(--ease),opacity .2s;
  z-index:4;
}
.reel__nav svg{width:20px;height:20px}
.reel__nav:hover{background:var(--red);border-color:var(--red);color:#fff;transform:scale(1.07)}
.reel__nav[disabled]{opacity:.3;pointer-events:none}
.sec--paper .reel__nav{
  background:rgba(255,255,255,.7);border-color:rgba(36,26,18,.28);color:#241a12;
}
.sec--paper .reel__nav:hover{background:var(--red);border-color:var(--red);color:#fff}
@media (min-width:860px){ .reel__nav{display:grid} }

/* ---------- footer: tomato dots ---------- */
.reel__foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(14px,2vw,22px);
}
.reel__dots{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0;max-width:100%}
.reel__dot{
  width:12px;height:12px;box-sizing:content-box;border-radius:50%;
  padding:14px;background-clip:content-box;border:0;cursor:pointer;
  background-color:rgba(36,26,18,.22);transition:background-color .25s,transform .25s var(--ease);
}
.sec:not(.sec--paper) .reel__dot{background-color:rgba(245,230,200,.25)}
.reel__dot:hover{transform:scale(1.25)}
.reel__dot[aria-selected="true"]{
  background-image:radial-gradient(circle at 34% 28%,#ff6a5e,var(--red) 60%,#a30f0c);
  transform:scale(1.35);
}
@media (max-width:560px){ .reel__dot{padding:9px} }
.reel__hint{
  font-family:var(--mono);font-size:.69rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-on-paper-3);
}
.sec:not(.sec--paper) .reel__hint{color:var(--muted-2)}

/* ---------- small screens ---------- */
@media (max-width:640px){
  .reel__slide{flex-basis:88%;padding:24px 20px}
  .reel__mark{font-size:10rem;bottom:-42px}
  .reel__hint{display:none}
  .reel__foot{justify-content:center}
}

/* ============================================================
   51. MERCH CARDS — consistent containers
   ============================================================ */
.prod{
  border-radius:2px;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;
  background:var(--paper-card);border:1px solid var(--paper-line);
  box-shadow:0 2px 0 rgba(36,26,18,.08);
}
.sec--paper .prod{background:var(--paper-card);border-color:var(--paper-line)}
.prod:hover{border-color:var(--red);box-shadow:0 16px 32px -16px rgba(36,26,18,.45)}

/* one fixed image stage: white,
padded,
contain — so mixed product
   shots (flat tees, 3D vinyl, posters) all sit on the same baseline */
.prod__media{
  aspect-ratio:1;background:#fff;padding:14px;
  display:grid;place-items:center;border-bottom:1px solid var(--paper-line);
}
.prod__media img{
  width:100%;height:100%;object-fit:contain;
  mix-blend-mode:multiply;
}
.prod__flag{top:8px;left:8px;font-size:.72rem;letter-spacing:.16em}

.prod__body{
  padding:14px;display:flex;flex-direction:column;gap:7px;min-height:0;
}
.prod__type{font-size:.76rem;letter-spacing:.2em;color:var(--ink-on-paper-3)}
.prod__t{
  font-size:1.06rem;line-height:1.3;color:#1a1109;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.3em;
}
.prod__foot{
  margin-top:auto;padding-top:10px;border-top:1px dashed var(--paper-line);
  align-items:baseline;
}
.prod__price{font-size:1.12rem;color:var(--red-deep)}
.prod__cta{font-size:.67rem;letter-spacing:.16em;color:var(--red-deep)}
.sec:not(.sec--paper) .prod__t{color:#1a1109}
.sec:not(.sec--paper) .prod__price{color:var(--red-deep)}

/* one hero + three equal columns now that press cards have moved out */
.buzz__c--third{grid-column:span 4}
@media (max-width:900px){ .buzz__c--third{grid-column:span 6} }
@media (max-width:620px){ .buzz__c--third{grid-column:span 12} }

/* ============================================================
   54. LICENSING CTA — the action,
before anything to read past
   ============================================================ */
.licgo{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,44px);
  flex-wrap:wrap;
  background:linear-gradient(135deg,var(--red) 0%,#c11310 60%,#8f0d0b 100%);
  color:#fff;border-radius:2px;
  padding:clamp(22px,3vw,38px) clamp(22px,3vw,40px);
  box-shadow:0 22px 46px -22px rgba(143,13,11,.7);
  position:relative;overflow:hidden;
}
/* faint tomato-vine texture so the band is not a flat slab */
.licgo::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:
    radial-gradient(circle at 88% 18%,rgba(255,255,255,.5) 0 2px,transparent 3px),
    radial-gradient(circle at 94% 62%,rgba(255,255,255,.4) 0 3px,transparent 4px),
    radial-gradient(circle at 78% 88%,rgba(255,255,255,.35) 0 2px,transparent 3px),
    repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 2px,transparent 2px 22px);
}
.licgo__l{position:relative;z-index:1;display:flex;flex-direction:column;gap:7px;min-width:0;flex:1 1 320px}
.licgo__k{
  font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--yellow);
}
.licgo__h{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:.94;letter-spacing:-.01em;color:#fff;margin:0;
}
.licgo__p{font-size:.94rem;line-height:1.5;font-weight:500;color:rgba(255,255,255,.9);margin:0;max-width:38rem}

/* the button: yellow on red,
the highest-contrast pairing in the palette */
.licgo__btn{
  position:relative;z-index:1;flex:none;
  display:inline-flex;align-items:center;gap:.7em;
  background:var(--yellow);color:#1a1109;
  padding:1.15em 2.1em;border-radius:2px;
  font-family:var(--mono);font-size:.88rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 6px 0 #c9bd00,0 14px 26px -10px rgba(0,0,0,.5);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s;
}
.licgo__btn svg{width:1em;height:1em;flex:none}
.licgo__btn:hover{background:#fff64a;transform:translateY(-3px);box-shadow:0 9px 0 #c9bd00,0 20px 34px -12px rgba(0,0,0,.55)}
.licgo__btn:active{transform:translateY(2px);box-shadow:0 3px 0 #c9bd00,0 8px 18px -8px rgba(0,0,0,.5)}
.licgo__btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

.licgo__cats{
  display:block;margin:clamp(26px,3.4vw,40px) 0 14px;
  color:var(--ink-on-paper-3);
}

@media (max-width:720px){
  .licgo{flex-direction:column;align-items:stretch;text-align:left}
  .licgo__btn{width:100%;justify-content:center;padding:1.15em 1.4em}
}

/* ============================================================
   55. YOUTUBE FACADE — local poster until played,
then the real
   iframe with autoplay so the view registers on the channel.
   ============================================================ */
.yt{position:relative;margin:0;background:#000;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.sec--paper .yt{border-color:var(--paper-line)}
.yt__btn{
  display:block;position:relative;width:100%;padding:0;border:0;cursor:pointer;
  background:#000;aspect-ratio:16/9;overflow:hidden;
}
.yt__poster{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease),filter .3s;
  filter:saturate(.95) contrast(1.03);
}
.yt__btn:hover .yt__poster{transform:scale(1.03);filter:saturate(1.05)}
.yt__shade{
  position:absolute;inset:0;
  background:linear-gradient(transparent 40%,rgba(10,7,6,.82));
}
/* real YouTube play glyph so the affordance is unmistakable */
.yt__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:clamp(68px,7vw,92px);display:grid;place-items:center;
  transition:transform .22s var(--ease),filter .22s;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));
}
.yt__play svg{width:100%;height:auto;display:block}
.yt__pbg{fill:#212121;opacity:.86;transition:fill .22s,opacity .22s}
.yt__btn:hover .yt__play{transform:scale(1.09)}
.yt__btn:hover .yt__pbg{fill:#ff0033;opacity:1}
.yt__btn:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}

.yt__meta{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(14px,2vw,22px);display:flex;flex-direction:column;gap:5px;text-align:left;
}
.yt__meta b{
  font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:1.16;
  font-size:clamp(.94rem,1.5vw,1.18rem);color:#fff;
}
.yt__meta em{
  font-style:normal;font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
}
/* once loaded the iframe fills the frame */
.yt iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.yt.is-live .yt__btn{display:none}
@media (max-width:560px){ .yt__meta b{font-size:.88rem} .yt__meta em{font-size:.76rem} }

/* ============================================================
   56. NAVBAR LOGO — it was 30px in a 64px bar,
barely legible
   ============================================================ */
.nav__logo img{height:60px;width:auto;display:block}
/* shrink a little once scrolled so the bar stays out of the way */
.nav.is-stuck .nav__logo img{height:48px}
@media (max-width:960px){ .nav__logo img{height:50px} }
@media (max-width:420px){ .nav__logo img{height:42px} }

/* ---------- hero eyebrow (Webflow's "The Cult Classic Returns") ---------- */
.hero__kicker{
  font-family:var(--mono);font-size:.79rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--yellow);
}

/* ============================================================
   57. LICENSING CTA — the action, inside the tomato
   The old full-width red bar put small dark-red copy on red, which was
   the unreadable part. The tomato carries the same gradient, the copy
   sits in the fruit at a size that works, and it pairs with the section
   heading rather than spanning the whole column.
   ============================================================ */
.lictom{
  position:relative;display:grid;place-items:center;
  width:min(460px,100%);margin:clamp(18px,2.5vw,30px) 0 clamp(26px,3.4vw,40px);
  aspect-ratio:760/575;
}
.lictom__art{position:absolute;inset:0}
.lictom__art img{
  width:100%;height:100%;display:block;object-fit:contain;
  filter:drop-shadow(0 24px 42px rgba(143,13,11,.34));
}
.lictom__in{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;padding:0 17%;
  transform:translateY(14%);
}
.lictom__k{
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--yellow);
}
.sec--paper .lictom__h,
.lictom__h{
  margin:0;font-family:var(--display);font-weight:900;
  font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:.95;
  text-transform:uppercase;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.28);
}
.lictom__btn{
  display:inline-flex;align-items:center;gap:11px;margin-top:10px;
  padding:1.05em 2.1em;border-radius:50px;
  background:var(--yellow);color:#1a1206;
  font-family:"Oswald",var(--mono),sans-serif;
  font-size:.98rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 12px 30px rgba(0,0,0,.38),0 0 0 4px rgba(252,238,34,.18);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background-color .22s;
}
.lictom__btn svg{width:15px;height:15px}
.lictom__btn:hover{background:#fff45a;transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.36)}

/* the tomato sits beside the section heading on wide screens */
.lic__top{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3.5vw,52px);align-items:center}
.lic__top .sec__head{margin-bottom:0}
.lic__top .lictom{margin-block:0;justify-self:end}
@media (max-width:900px){
  .lic__top{grid-template-columns:minmax(0,1fr)}
  .lic__top .lictom{justify-self:center;margin-top:8px}
}

/* ============================================================
   58. PODCAST SHOW ART
   Sits between the description and the platform buttons, sized so it
   reads as cover art rather than a banner.
   ============================================================ */
.podart{
  margin:clamp(18px,2.4vw,26px) 0 0;
  width:min(240px,64%);
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 22px 44px -18px rgba(0,0,0,.85);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.podart img{width:100%;height:auto;display:block;aspect-ratio:1}
.podart:hover{transform:translateY(-4px);box-shadow:0 28px 54px -18px rgba(0,0,0,.95)}
@media (prefers-reduced-motion:reduce){ .podart{transition:none} }

/* File 004 — Transmissions.
   The left column (heading, copy, show art, platform buttons) is much taller
   than the episode list, which left a large void beneath the list. Centring
   the columns against each other balances the pair, and the art is a little
   smaller so the difference is less extreme to begin with. */
/* File 004 — Transmissions.
   The two columns hold different kinds of content and different amounts of it,
   so neither stretching nor top-aligning them looked right. Each column is a
   flex stack that centres its own contents against the row, which keeps the
   heading, the art and the episode list optically aligned without forcing
   either side to pad itself out. */
.pod .doss{align-items:center}
.pod .doss>*{display:flex;flex-direction:column;justify-content:center}
.pod .doss>*:first-child{gap:clamp(14px,1.7vw,20px)}
.pod .doss>*:last-child{gap:clamp(20px,2.6vw,30px)}
.pod .podart{width:min(210px,58%);margin:0}
.pod .podnote{margin:0;max-width:46rem}
/* the column is a flex parent, so the action would otherwise stretch to fill it */
.pod .doss>*:last-child .btn{align-self:flex-start}
@media (max-width:900px){
  .pod .doss>*:last-child{justify-content:flex-start}
  .pod .podart{margin-top:clamp(18px,2.4vw,26px)}
}

/* ===== countdown.css ===== */
/* =========================================================================
   countdown.css — the home-release block that replaces the theatrical
   locator on /organic-intelligence once the run has ended.

   Two pieces: a dark banner strip carrying the date and the clock, and below
   it the "legacy" proof strip on the cream section. The banner is the one
   dark object on a paper section, which is the point — it reads as a title
   card dropped onto the dossier rather than another sheet of paper.

   Loaded before mobile.css in the bundle so the phone overrides still win.
   ========================================================================= */

/* ------------------------------------------------------------- the headline */

/* "The Theatrical Invasion Is Complete." wants one line. .sec__head is capped
   at 46rem to hold the lede to a readable measure, and the headline was losing
   "Is Complete." over that edge by a few pixels. Lift the cap off the block and
   put it back on the lede, so the heading can use the full column and the
   paragraph under it still reads at the same width as every other section.

   No nowrap: below roughly 900px the line genuinely cannot fit at a heading
   size, and it should wrap on its own rather than overflow. */
#theaters .sec__head { max-width: none; }
/* Centred with the rest of the block, and held to a readable measure rather
   than running the full width of the band. */
#theaters .sec__head .lede { max-width: 46rem; margin-inline: auto; }

/* The button belongs to the sentence above it, not to a new idea. */
#theaters .cdn__cta { margin-top: clamp(20px, 2.6vw, 30px); }

/* Nothing follows in this band, so it does not need a full section's foot. */
#theaters { padding-bottom: clamp(38px, 5vw, 64px); }

/* ------------------------------------------------------------ the floating card */

/* The card hangs over the join between the hero and the section under it.
   Negative margins rather than absolute positioning: the card stays in the
   flow, so it can never overlap the heading below it however the page
   reflows, and the section simply closes up behind it.

   The lift is a fixed range, not half the card's height — the card is one row
   on a wide screen and a stacked block on a phone, so there is no single
   fraction that centres it at every width. A consistent overhang reads as
   deliberate; a computed half that drifts does not. */
.cdn-float {
  /* How far the card hangs above this wrapper. Named so the scroll offset
     below can track it instead of repeating the number. */
  --lift: clamp(26px, 4.4vw, 62px);
  position: relative;
  z-index: 4;
  /* The wrapper carries the section's own paper, starting exactly where the
     hero ends. That keeps hero and section touching on one clean line with no
     strip of bare page between them — the earlier version left a visible gap
     because the wrapper had layout height and no background of its own. */
  display: flow-root;
  background: var(--paper);
  padding-bottom: clamp(18px, 3vw, 38px);
  /* The watch-at-home anchor is on this wrapper, but the card sits --lift
     above it, so a jump to the anchor parked the card's top edge off screen and
     filled the viewport with the section underneath. html's scroll-padding only
     clears the fixed nav; this adds the overhang back plus a gap, so the whole
     card lands just below the nav. */
  scroll-margin-top: calc(var(--lift) + 24px);
}

/* Only the card is lifted, by a fixed range rather than half its own height:
   it is one row on a wide screen and a stacked block on a phone, so no single
   fraction overhangs sensibly at both. A steady overhang reads as deliberate. */
.cdn-float .cdn {
  margin-top: calc(-1 * var(--lift));
  /* The card's top half sits over the hero video, which is dark, busy and
     moving — a plain drop shadow disappeared into it. Four layers, outward:
     a cream hairline to hold the edge, a red ring, a red glow to separate the
     card from whatever the video is doing behind it, and the drop shadow that
     does the work over the paper half. */
  box-shadow:
    0 0 0 1px rgba(245, 230, 200, .16) inset,
    0 0 0 2px rgba(239, 23, 20, .55),
    0 0 40px -2px rgba(239, 23, 20, .45),
    0 26px 50px -24px rgba(16, 12, 10, .95);
}

/* The float already supplies the space under the card, so the section below it
   starts closer than it otherwise would. */
.cdn-float + .sec { padding-top: clamp(26px, 4vw, 52px); }

/* ---------------------------------------------------------------- the banner */

.cdn {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  margin-top: 30px;
  padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 34px);
  /* Room on the right for the puppet, which is cropped by the edge. */
  padding-right: clamp(120px, 20vw, 300px);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  box-shadow:
    0 0 0 1px rgba(245, 230, 200, .1) inset,
    0 18px 40px -22px rgba(16, 12, 10, .85);
  overflow: hidden;
}

.cdn__logo {
  flex: 0 0 auto;
  width: auto;
  height: clamp(54px, 7.6vw, 96px);
  object-fit: contain;
}

/* The hairline between the logo and the date, as in the reference strip. */
.cdn__rule {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  min-height: clamp(44px, 6vw, 78px);
  background: rgba(245, 230, 200, .3);
}

.cdn__when { flex: 0 0 auto; }

.cdn__kick {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1rem, 1.8vw, 1.6rem);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--txt);
}

/* The date is the loudest thing in the strip — it is the whole message. */
.cdn__date {
  margin: .18em 0 0;
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.9vw, 3.5rem);
  line-height: .94;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--txt);
}

/* ------------------------------------------------------------------ the pips */

.cdn__clock {
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 1.5vw, 20px);
  margin: 0 clamp(8px, 3vw, 46px) 0 auto;
  padding: 0;
  list-style: none;
}

.cdn__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Each value sits inside a tomato. The stem is a ::before so that the JS
   rewriting textContent every second cannot touch it, and the fruit is a
   lopsided border-radius rather than a circle — a perfect round reads as a
   button, which is what the earlier pass got wrong. */
.cdn__num {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(52px, 7vw, 86px);
  height: clamp(48px, 6.4vw, 78px);
  border-radius: 48% 52% 46% 54% / 54% 54% 46% 46%;
  background:
    radial-gradient(ellipse at 32% 28%, rgba(255, 255, 255, .22) 0 18%, transparent 55%),
    linear-gradient(170deg, var(--red-glow), var(--red) 42%, #c9120f);
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.5vw, 2.35rem);
  line-height: 1;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28);
}

.cdn__num::before {
  content: "";
  position: absolute;
  top: clamp(-13px, -1.5vw, -8px);
  left: 50%;
  translate: -50% 0;
  width: clamp(34px, 4.4vw, 54px);
  height: clamp(17px, 2.2vw, 27px);
  background: url('/img/tomato-stem.svg') center bottom / contain no-repeat;
  pointer-events: none;
}

/* Alternating tilt so a row of four looks picked rather than printed. */
.cdn__unit:nth-child(odd) .cdn__num { rotate: -3deg; }
.cdn__unit:nth-child(even) .cdn__num { rotate: 2.5deg; }

.cdn__lbl {
  font-family: var(--display);
  font-size: clamp(.58rem, .95vw, .78rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt);
}

/* ----------------------------------------------------------------- the puppet */

/* The artwork is already the upper half of the tomato — it ends on a flat
   cut. Anchoring it to the bottom of the strip with a small negative offset
   puts that cut just past the edge, where overflow:hidden takes it, so the
   face reads as rising out of the bar rather than as a cropped picture.
   Sized by height off the strip, and let wide: the tendrils spilling past the
   right edge are the point. */
.cdn__mascot {
  position: absolute;
  right: clamp(-58px, -5vw, -20px);
  bottom: -10px;
  width: auto;
  height: clamp(118px, 17vw, 218px);
  pointer-events: none;
  user-select: none;
}

/* ------------------------------------------------------------------- the cta */

.cdn__cta {
  margin: 22px 0 0;
  text-align: center;
}

/* The section this jumps to carries tabindex="-1" so focus follows the scroll
   — otherwise a keyboard user lands here visually and then tabs from the top
   of the page. It is a destination, not a control, so it must not paint a
   focus ring: the global :focus-visible rule is a 2px yellow outline, and on a
   section that is a yellow box drawn around half the page.

   Both states are suppressed. :focus alone is not enough — browsers apply
   :focus-visible to programmatically focused elements too, which is exactly
   how this element receives focus. Nothing is lost: focus still moves, so the
   next Tab continues from the form, and the ring appears on the first real
   control the visitor reaches. */
.sec[tabindex="-1"]:focus,
.sec[tabindex="-1"]:focus-visible { outline: none; }

/* ------------------------------------------------------------------ legacy */

/* The theatrical run demoted to proof. It is deliberately quieter than the
   countdown above it: one strip, one quote, no schedule. */
.legacy {
  margin-top: clamp(34px, 6vw, 58px);
  border-top: 1px solid rgba(36, 26, 18, .2);
  padding-top: clamp(24px, 4vw, 38px);
}

/* In its own section there is nothing above to rule off against. */
#opening-night .legacy {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.legacy__head { text-align: center; }

.legacy__h {
  font-family: var(--display);
  font-size: clamp(1.35rem, 4.2vw, 2.1rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: #241a12;
  margin: 0;
}

/* Four square-ish frames. Fixed columns rather than auto-fit: with auto-fit a
   fourth photo drops to its own row at some widths and reads as an orphan. */
.legacy__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.6vw, 14px);
  margin-top: 18px;
}

.legacy__shot {
  position: relative;
  display: block;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(36, 26, 18, .28);
  border-radius: var(--r);
  background: var(--paper-2);
}

.legacy__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.92) contrast(1.02);
  transition: transform .5s var(--ease);
}

.legacy__shot:hover img,
.legacy__shot:focus-visible img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .legacy__shot img { transition: none; }
  .legacy__shot:hover img { transform: none; }
}

.legacy__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 8px 6px;
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(16, 12, 10, .8), transparent);
}

.legacy__quote {
  margin: clamp(20px, 3.5vw, 30px) 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--red-deep);
}

.legacy__quote p {
  font-family: var(--display);
  font-size: clamp(1.15rem, 3.4vw, 1.7rem);
  line-height: 1.16;
  color: #241a12;
  margin: 0;
}

.legacy__quote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7a6547;
}

.legacy__more { margin-top: 20px; }

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

/* The strip is a row until it cannot be one. Below 1040px the clock drops to
   its own line under the logo and date; below 620px everything centres and
   the puppet moves to the bottom corner, where there is still a gap. */

@media (max-width: 1040px) {
  .cdn {
    flex-wrap: wrap;
    padding-right: clamp(18px, 2.6vw, 34px);
    padding-bottom: clamp(96px, 20vw, 150px);
  }
  .cdn__clock {
    order: 3;
    width: 100%;
    margin: clamp(16px, 3vw, 24px) 0 0;
    justify-content: flex-start;
  }
  .cdn__mascot { height: clamp(104px, 22vw, 168px); bottom: -14px; right: -14px; }
}

@media (max-width: 620px) {
  /* Phone layout for the card. It was a tall stack — full logo, date, a 2x2
     grid of pips and a lot of air — 469px on a 375px screen. Tightened to a
     label, the date and one row of four, which is what a countdown should
     look like. */
  .cdn {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 4px;
    padding: 18px 16px 20px;
  }

  /* The hero directly above is the logo, at full size. A second copy 40px
     below it is a stutter, and it was the tallest thing in the card. */
  .cdn__logo { display: none; }
  .cdn__rule { display: none; }

  .cdn__when { width: 100%; }
  .cdn__kick { font-size: .82rem; opacity: .85; }
  .cdn__date { font-size: clamp(2rem, 11vw, 2.9rem); margin-top: .1em; }

  /* One row of four rather than 2x2: four pips across 299px of inner width
     leaves 68px each, which still fits two digits in the display face. */
  .cdn__clock {
    width: 100%;
    margin: 12px 0 0;
    justify-content: center;
    gap: 7px;
  }
  .cdn__unit { flex: 0 1 auto; gap: 4px; }
  .cdn__num {
    width: clamp(56px, 17.5vw, 72px);
    height: clamp(50px, 15vw, 64px);
    font-size: clamp(1.25rem, 5.4vw, 1.65rem);
  }
  .cdn__num::before { width: clamp(30px, 10vw, 40px); height: clamp(15px, 5vw, 20px); top: -10px; }
  .cdn__lbl { font-size: .5rem; letter-spacing: .08em; }

  /* Tucked into the corner and kept clear of the pips by the card's own
     bottom padding, so it reads as leaning in rather than sitting on them. */
  .cdn { padding-bottom: 54px; }
  .cdn__mascot {
    height: clamp(56px, 17vw, 78px);
    right: -18px;
    bottom: -10px;
  }
}

@media (max-width: 720px) {
  /* Two up rather than four: at four across a 360px screen each frame is
     ~78px wide and the faces in them are unreadable. */
  .legacy__strip { grid-template-columns: repeat(2, 1fr); }
  .legacy__quote { padding-left: 14px; }
}

/* ============================================================
   COUNTDOWN AT THE TOP OF THE HERO
   ------------------------------------------------------------
   The strip used to hang off the bottom edge of the hero, which put the
   release date a full screen below the fold. It now sits under the nav as the
   first thing on the page.

   .hero is a flex column with justify-content:flex-end, so margin-bottom:auto
   on this element pushes everything after it to the foot of the screen: the
   strip pins to the top, the title block stays exactly where it was, and the
   gap between them absorbs the viewport height instead of either end moving.
   ============================================================ */
.cdn-top {
  position: relative;
  z-index: 4;
  width: 100%;
  /* margin-bottom:auto spreads the leftover height, but when the hero has no
     leftover height it collapses to nothing and the strip sits on top of the
     film logo. The padding is the floor under that: a gap the layout cannot
     take away, whatever the window is doing. */
  /* flex-shrink:0 as well: the hero is a flex column, and once its content
     overran the screen the strip was the item flexbox chose to compress, which
     quietly ate the gap this padding is here to guarantee. */
  flex: 0 0 auto;
  margin-bottom: auto;
  padding-bottom: clamp(26px, 2.7vw, 42px);
}

/* Shorter than the seam version. Up here it shares the screen with the logo,
   the headline, the quote and the buy card, so it has to earn its height. */
.cdn-top .cdn {
  margin-top: 0;
  padding-block: clamp(7px, 0.8vw, 10px);
  padding-right: clamp(96px, 15vw, 210px);
  /* Over video rather than over the paper seam: a translucent dark base lets
     the trailer show through, and the blur keeps the type legible while it
     moves underneath. The red ring is what separates the strip from the
     footage, so it stays. */
  background: linear-gradient(180deg, rgba(26, 19, 15, .82), rgba(16, 12, 10, .88));
  backdrop-filter: blur(5px);
  box-shadow:
    0 0 0 1px rgba(245, 230, 200, .14) inset,
    0 0 0 2px rgba(239, 23, 20, .5),
    0 0 36px -4px rgba(239, 23, 20, .35),
    0 18px 44px -26px rgba(16, 12, 10, .95);
}

.cdn-top .cdn__mascot {
  height: clamp(96px, 13vw, 168px);
  right: clamp(-14px, -1vw, -4px);
  bottom: -6px;
}

@media (max-width: 760px) {
  /* Stacked, the strip plus the puppet eats most of a phone screen before the
     film logo below it gets a look in. The puppet is decoration, so it goes
     first and the date and clock keep the full width. */
  .cdn-top .cdn { padding-right: clamp(18px, 4vw, 28px); }
  .cdn-top .cdn__mascot { display: none; }
}

/* ------------------------------------------------- spacing the strip out */

/* At the seam the strip was a logo, a date and a clock pushed to the right
   edge, and the logo filled the middle. Up here the logo is gone, so the clock
   stayed bunched on the right with 300px of nothing between it and the date.

   The clock now takes that space instead of sitting beside it: it grows to
   fill whatever is left and spreads its four units across it, so the tomatoes
   land at even intervals along the strip rather than huddling at one end. The
   units grow with it, since a wider strip with the same small pips would only
   move the emptiness around. */
.cdn-top .cdn__clock {
  flex: 1 1 auto;
  margin: 0 clamp(8px, 1.6vw, 26px) 0 clamp(14px, 2.4vw, 40px);
  /* The spread lives in the spacing, not in the fruit. space-evenly hands the
     leftover width to the gaps between the units and at the two ends, so the
     four tomatoes sit at even intervals along the strip while each one keeps
     the shape it is meant to have. */
  justify-content: space-evenly;
  gap: 0;
}

.cdn-top .cdn__unit { flex: 0 0 auto; }

/* The stem is an absolutely positioned ::before, so it contributes no
   height and the flex row centred the tomatoes as if the stems were not
   there. They came out level with the top of the strip. This reserves the
   overhang, so what gets centred is the whole tomato, leaves included. */
.cdn-top .cdn__clock { padding-top: clamp(13px, 1.2vw, 17px); }

/* A tomato is a little wider than it is tall, about 11:10. Letting these
   stretch to fill their share of the strip made them 118 by 78, which is not a
   tomato, it is an egg on its side. Width is tied to height here so the shape
   holds at every screen size. */
.cdn-top .cdn__num {
  width: clamp(68px, 6.6vw, 92px);
  height: clamp(62px, 6vw, 84px);
  font-size: clamp(1.6rem, 2.7vw, 2.6rem);
}

.cdn-top .cdn__num::before {
  top: clamp(-13px, -1.1vw, -9px);
  width: clamp(43px, 4.2vw, 58px);
  height: clamp(21px, 2.1vw, 29px);
}

.cdn-top .cdn__lbl { font-size: clamp(.78rem, .98vw, .88rem); }

/* The date holds its end of the strip against the bigger clock. */
.cdn-top .cdn__kick { font-size: clamp(1rem, 1.5vw, 1.35rem); }
.cdn-top .cdn__date { font-size: clamp(1.9rem, 3.4vw, 3.3rem); }

/* Short desktop windows. countdown.css is bundled after hero.css, so the
   strip has to be brought back in from here: the same rules written into
   the query in hero.css lost to the base .cdn-top rules above at equal
   specificity and silently did nothing. The clock keeps its spread, at a
   size that lets the whole hero close above the fold on a laptop. */
@media (min-width: 761px) and (max-height: 820px) {
  .cdn-top .cdn{padding-block:clamp(7px,1vw,11px)}
  .cdn-top{padding-bottom:clamp(12px,1.5vw,20px)}
  /* The stem clearance comes in with everything else here: on a 700px tall
     window the Watch Trailer button had 3px of room under it. */
  .cdn-top .cdn__clock{padding-top:clamp(9px,.85vw,12px)}
  .cdn-top .cdn__num{
    width:clamp(58px,5.2vw,72px);height:clamp(52px,4.7vw,65px);
    font-size:clamp(1.3rem,2.1vw,2rem);
  }
  .cdn-top .cdn__num::before{
    top:clamp(-13px,-1.5vw,-9px);
    width:clamp(34px,4vw,50px);height:clamp(17px,2vw,25px);
  }
  .cdn-top .cdn__lbl{font-size:clamp(.58rem,.9vw,.74rem)}
  .cdn-top .cdn__mascot{height:clamp(76px,8.6vw,118px)}
}

/* ===== pumpkin.css ===== */
/* ============================================================
   /pumpkin — The Pumpkin Menace contest page.

   Deliberately thin. paper.css states the site's rule: "Dark is
   for cinematic moments (hero, media, CTAs). Everything you
   actually READ sits on cream." So this page is one dark hero,
   five .sec--paper sections and the standard .sec--red closing
   band, and the steps, cards, stamps and forms are the site's
   own components rather than new ones. What is left here is the
   hero, and the handful of things this page has that no other
   page does: prize chips, the either/or evidence group, the
   upload control and the sighting grid.

   Mobile-first: nearly all traffic arrives from Instagram and
   Facebook on a phone, so the base rules are the 375px rules and
   the media queries only add width back.
   ============================================================ */

/* Reset the browser's 2px groove. The audit asserts this exists for as long as
   a <fieldset> is in the markup, because the default border rendered the
   evidence group as a box inside a box. */
fieldset{margin:0;padding:0;border:0;min-width:0}

/* ---------- hero: the page's one dark moment ---------- */
.pk-hero{
  position:relative;overflow:hidden;
  padding-top:calc(var(--nav-h) + 86px);padding-bottom:clamp(44px,8vw,80px);
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(239,23,20,.34),transparent 60%),
    var(--ink);
}
/* Halftone wash. A dot grid fading out down the page, so the red glow reads as
   cheap newsprint rather than a soft web gradient. Pure CSS: no image to load
   and nothing generated. */
/* Optional poster wash. A wide crop of the poster's sky and smoke, blurred
   past recognition, darkened and desaturated: the film's atmosphere without
   its content. Sits under the halftone and over the flat ink, masked so it
   fades out before the torn paper edge. Delete this rule and the layer is gone;
   nothing else depends on it. */
.pk-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:url("/img/pumpkin-wash.webp") center top / cover no-repeat;
  opacity:.5;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95),transparent 78%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.95),transparent 78%);
}
.pk-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:7px 7px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 72%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 72%);
  opacity:.5;z-index:1;
}

.pk-hero__band{
  position:absolute;top:var(--nav-h);left:0;right:0;z-index:1;
  display:flex;overflow:hidden;white-space:nowrap;
  padding:.55rem 0;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.42em;text-transform:uppercase;
}
.pk-hero__track{display:flex;gap:2.4rem;padding-right:2.4rem;flex:none;animation:pk-slide 26s linear infinite}
@media (prefers-reduced-motion:reduce){.pk-hero__track{animation:none}}
@keyframes pk-slide{from{transform:translateX(0)}to{transform:translateX(-100%)}}

.pk-hero__in{position:relative;z-index:2;max-width:min(100%,780px)}
.pk-hero__tags{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem}
/* The kicker rule draws a 26px rule before the label. The hero label reads as a
   department name here, not a caption, so the dash is dropped. Scoped to this
   block: .kicker keeps its rule everywhere else on the site. */
.pk-hero__tags .kicker::before{display:none}
.pk-hero__h{margin-top:1.1rem;font-size:clamp(2.7rem,12vw,6.4rem)}
/* One line, not two. At 34ch the sentence broke after "Halloween pumpkin",
   which split the struck word from the phrase replacing it and killed the
   joke. Wide enough for the whole sentence on a desktop; a phone still wraps
   it, and there is no width at which 55 characters fit on a 375px screen. */
.pk-hero__sub{margin-top:1rem;max-width:min(100%,58ch)}
/* The struck word in the subtitle. Red and thick enough to read as a deliberate
   correction rather than a rendering fault, and the word itself dimmed so the
   phrase it is replaced by carries the line. Kept legible on purpose: the joke
   only works if you can still read the word that was struck. */
.pk-strike{
  text-decoration-line:line-through;text-decoration-color:var(--red);
  text-decoration-thickness:2px;opacity:.82;
}

/* Prize chips. These were a clause in the middle of a paragraph, which is the
   worst place to put the only thing that answers "what do I get". */
.pk-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.5rem}
.pk-chip{
  padding:.5em .95em;border:1px solid rgba(252,238,34,.45);border-radius:999px;
  background:rgba(252,238,34,.08);color:var(--yellow);
  /* Larger than the page's other mono labels on purpose: at the site's .7rem
     the only copy that answers "what do I get" rendered at 11px. */
  font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
.pk-hero__act{margin-top:1.7rem}

/* ---------- how to enter ----------
   .card and .card--static carry the look; this only places them. */
.pk-steps{display:grid;gap:16px;margin-top:clamp(24px,4.5vw,40px)}
@media (min-width:820px){.pk-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
/* The numeral carries the card. It was a .72rem mono "STEP 01" label, which
   left an icon and one short line rattling around a 373x159 box. Set in the
   display face at the size of a heading it gives each card something to hold,
   and the eye can count the three steps without reading them. */
/* These three cards are the instructions, so they are sized to be read across
   a room rather than to match the site's other cards. The base .card__title is
   1.05rem uppercase, which reads as a label and not a heading, and .card__note
   is 1.08rem; at those sizes the three steps were the hardest thing on the page
   to take in. Everything here is scoped under .pk-step, so .card elsewhere on
   the site keeps its own scale. */
.pk-step{border-top:3px solid var(--red);padding:clamp(24px,3vw,34px);gap:14px}
.pk-step .card__title{font-size:clamp(1.55rem,4.2vw,1.95rem);line-height:1.12}
.pk-step .card__note{font-size:clamp(1.15rem,2.7vw,1.3rem);line-height:1.55}
.pk-step__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.pk-step__n{
  font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,5vw,3.4rem);
  line-height:.8;letter-spacing:-.02em;color:var(--red-deep);
}
.pk-step__i{width:34px;height:34px;flex:none;color:var(--red-deep);opacity:.65}

/* ---------- entry form ----------
   No columns. The assessment was a sidebar and before that its own band, and
   both pushed the form either sideways or down the page. It is a header now:
   claim across the top, facts as a row of stats under it, form full width
   below. Nothing competes for the space beside the form, and the preamble
   above it is short enough that the form is still the thing you land on. */
.pk-file__head{
  display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;
  max-width:var(--max-narrow);
}

/* Facts as a row rather than a stacked list: four short pairs read across in
   one glance and cost about 90px, where the same four stacked in a sidebar
   cost 260 and dragged the form down with them. */
.pk-facts{
  display:grid;gap:1px;
  /* Space below as well as above: the row sat flush against the top of the
     sheet, so the two read as one block instead of a summary and then a form. */
  margin:clamp(26px,4vw,40px) 0 clamp(22px,3vw,34px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--paper-line);
  border:1px solid var(--paper-line);border-radius:var(--r);overflow:hidden;
}
@media (min-width:760px){.pk-facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pk-facts__i{
  display:flex;flex-direction:column;gap:.3rem;
  padding:clamp(14px,2.2vw,18px);background:var(--paper);
}
/* Measured, not guessed. These labels were #7a6547 on #f5e6c8 = 4.51:1, a hair
   over the AA floor, set in small wide-tracked uppercase mono, which is the
   hardest combination on the page to read. The colour is the bigger half of the
   fix: --ink-on-paper-2 is 9.04:1. Tracking comes back from .2em to .06em,
   because letters pushed that far apart stop reading as words. */
.pk-facts dt{
  font-family:var(--mono);font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-on-paper-2);
}
.pk-facts dd{
  margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(1.2rem,2.6vw,1.4rem);
  line-height:1.35;color:#1a1109;
}

/* The sheet gets the middle of the page, not the whole width: a form at
   1280px wide is a worse form. */
.pk-file__sheet{max-width:820px;margin-inline:auto}
/* Inside the sheet now rather than the rail, so it carries the display face
   itself instead of borrowing .d2, and at a size that sits under the form
   header rather than competing with the assessment beside it. */
.pk-file__h{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.45rem,3vw,1.95rem);line-height:1.04;color:#1a1109;
}
/* ---------- readable type for the whole entry section ----------
   Everything below is scoped to #file-report, so the rest of the site keeps
   its own scale. This section had seven different sizes in it and five of them
   were between 10.6px and 13.6px: the fact labels at .66rem, the field labels
   at .72rem, the hints at .67rem, the inputs at .85rem. It is the one part of
   the page a visitor has to read carefully and type into, and it was the
   smallest type on the page.

   Cohesion comes from cutting the number of sizes, not just raising them:
   labels and hints now share one size, values and inputs share another. The
   mono tracking is pulled back from .2em to .12em, which is what actually made
   the uppercase labels hard to read rather than the size alone.

   The inputs sit at 1.05rem for a second reason: below 16px, iOS Safari zooms
   the page when a field takes focus, and the visitor then has to pinch back
   out to see the rest of the form. */
.pk-file__note{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.12rem,2.6vw,1.32rem);line-height:1.45;
  letter-spacing:0;text-transform:none;color:var(--ink-on-paper-2);
}
/* #8a755a on paper is 3.57:1, below the 4.5 AA floor: a real failure, not a
   preference. Scoped here rather than fixed site-wide, because every other
   .sec--paper form shares that colour and that is a bigger change than this
   page should make on its own. */
#file-report .field label{font-size:.95rem;letter-spacing:.06em;color:#4a3826}
#file-report .field input,
#file-report .field select,
#file-report .field textarea{font-size:1.05rem}
#file-report .field__h{font-size:.9rem;letter-spacing:.02em;color:#4a3826}
#file-report .form__note{font-size:.94rem;letter-spacing:.02em;line-height:1.6;color:#4a3826}
#file-report .check{font-size:1.02rem;line-height:1.5}
/* The sheet tab went from "Sighting report" to a 54-character department line,
   and .mono tracks at .16em, which at that length is several wrapped rows of
   very spaced capitals. Tracking back to .05em, size up a little. */
#file-report .doss__hdr .mono{font-size:.9rem;letter-spacing:.05em;line-height:1.5}

/* Evidence group. The "or" is a rule with the word sitting in a gap in it, so
   the two inputs read as alternatives rather than as a list of two things
   both owed. */
.pk-proof{
  margin:.4rem 0;padding:clamp(16px,3.5vw,20px);
  background:rgba(36,26,18,.05);border:1px dashed var(--paper-line);border-radius:var(--r);
  display:flex;flex-direction:column;gap:12px;
}
.pk-proof__lg{
  padding:0 .5em;margin-left:-.5em;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-on-paper-3);
}
.pk-proof__or{
  display:flex;align-items:center;gap:.9rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-on-paper-3);
}
.pk-proof__or::before,
.pk-proof__or::after{content:"";flex:1;height:1px;background:var(--paper-line)}
.pk-proof__need{color:var(--red-deep);font-size:.76rem;line-height:1.6;letter-spacing:.04em}

/* File input. Styled through the native control rather than a fake button,
   because the native one is what opens the camera roll on a phone. */
.pk-up input[type=file]{
  width:100%;padding:.7em .8em;font-family:var(--mono);font-size:.78rem;color:#241a12;
  background:rgba(255,255,255,.65);border:1px solid var(--paper-line);border-radius:var(--r);
}
.pk-up input[type=file]::file-selector-button{
  margin-right:.9em;padding:.5em 1em;border:0;border-radius:var(--r);
  background:var(--red);color:#fff;cursor:pointer;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
}
.pk-up__state{margin-top:.5rem;font-size:.76rem;letter-spacing:.04em}
.pk-up__state.err{color:var(--red-deep)}

/* ---------- consent checkboxes ----------
   .check sets these in mono at .8rem, which is right for an optional extra
   and wrong for two statements someone is legally agreeing to. Set in the
   reading face at a readable size, with a larger box to match. */
.pk-checks{display:flex;flex-direction:column;gap:11px;margin:.6rem 0}
.pk-check{font-family:var(--display);font-size:.88rem;line-height:1.55;gap:.75rem}
.pk-check input{width:20px;height:20px;margin-top:.16rem;cursor:pointer}


/* ---------- gallery ---------- */
.pk-gal{
  display:grid;gap:12px;margin-top:clamp(24px,4.5vw,40px);
  /* Cards size to their own embed rather than stretching to the tallest in
     the row. Instagram and TikTok return different heights, so stretching
     left 181px of empty card under the Instagram caption. A ragged bottom
     edge reads as a gallery; a block of blank cream reads as a bug. */
  align-items:start;
  /* 320 not 230: the cards hold platform embeds now, and Instagram will not
     render its post under about 320px. A single entry in an auto-fill grid
     also sits in one track, so the minimum is what the first entrant sees. */
  /* Tracks are capped at 549px, which is not arbitrary: Instagram's embed is
     its column width plus 208 and TikTok's is a flat 757, so the two are the
     same height when the column is 549 (757 - 208). At any narrower track the
     cards diverge, by 179px at 370. Capping the track is what makes the two
     platforms sit level beside each other without stretching or clipping
     either one.
     Centred, because auto-fill leaves the remainder at the end of the row. */
  grid-template-columns:repeat(auto-fill,minmax(300px,549px));
  justify-content:center;
}
.pk-gal__fig{
  margin:0;height:100%;overflow:hidden;
  background:var(--paper-card);border:1px solid var(--paper-line);border-radius:var(--r-lg);
}
.pk-gal__fig img{width:100%;aspect-ratio:1;object-fit:cover}
.pk-gal__cap{padding:14px 16px 16px}
.pk-gal__loc{display:block;margin-top:.2rem;font-size:.68rem;letter-spacing:.12em}
.pk-gal__note{margin-top:.5rem;color:var(--ink-on-paper-2);font-size:.88rem;line-height:1.55}
/* Empty evidence locker. Holds a puppet from the media kit while nothing has
   been cleared for release; the whole block is replaced by the grid the moment
   a sighting is added, so none of this survives into the live contest. */
.pk-gal__empty{
  margin-top:clamp(24px,4.5vw,40px);padding:clamp(30px,6vw,52px);text-align:center;
  border:1px dashed var(--paper-line);border-radius:var(--r-lg);
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
}
.pk-gal__empty img{
  width:min(100%,150px);height:auto;
  /* Tilted and softened: it is set dressing for an empty state, not evidence. */
  transform:rotate(-4deg);
  filter:drop-shadow(0 10px 14px rgba(36,26,18,.22));
}
.pk-gal__empty p{font-size:.78rem;letter-spacing:.1em;max-width:34ch}

/* The evidence error and the upload status are set here rather than carrying
   the .mono class, because `.doss__sheet .mono` is two classes and would beat
   a single-class colour: the error message rendered in muted brown ink
   instead of red, which is the one colour it has to be. */
.pk-proof__need,
.pk-up__state{font-family:var(--mono);letter-spacing:.04em}


/* ---------- hero artwork ----------
   Aileen's illustration, white knocked out. On a phone it sits under the copy
   so the headline and the prize still land first; from 900px it takes the
   right-hand column and the text keeps the left. */
.pk-hero__grid{display:grid;gap:clamp(20px,4vw,40px);align-items:center}
@media (min-width:900px){
  .pk-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,4vw,60px)}
  .pk-hero__in{max-width:none}
}
.pk-hero__art{margin:0;position:relative;z-index:2}
.pk-hero__art img{
  width:100%;height:auto;
  /* The art is a cut-out with no edge of its own, so it needs a shadow to sit
     on the page rather than float. Two drop-shadows: a tight dark one for
     contact and a wide red one for the glow the hero already has. */
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.55)) drop-shadow(0 0 60px rgba(239,23,20,.28));
}

/* ---------- closing band ---------- */
.pk-end{display:flex;flex-direction:column;align-items:center;gap:18px}
.pk-end__logo{width:min(100%,340px);height:auto}

/* On a phone the artwork leads. Almost everyone arrives from an Instagram or
   Facebook link, where a tomato climbing out of a jack-o-lantern says what the
   contest is faster than the headline can. Capped at a third of the viewport
   so the title, the prize and the button still sit near the fold rather than
   being pushed under a full-width illustration. */
@media (max-width:899px){
  .pk-hero__art{order:-1}
  /* Scoped through .pk-hero__grid to outrank the sway rule further down the
     file, which sets width:100%. Left to source order that rule would win and
     pin the width while max-height capped the height, squashing the drawing on
     a short viewport. width:auto lets the height cap drive both. */
  .pk-hero__grid .pk-hero__art img{max-width:100%;max-height:34vh;width:auto;margin-inline:auto}

  /* Buttons above the prize chips on a phone. With the artwork taking the top
     of the screen the chips pushed the only two tappable things in the hero
     down past the fold; the chips still land directly under them. Column flex
     only here, so the desktop hero keeps plain block flow. */
  .pk-hero__in{display:flex;flex-direction:column}
  .pk-hero__act{order:1}
  .pk-chips{order:2}
}

/* ---------- hero artwork: sway ----------
   The drawing stays whole and just breathes. Two other approaches were tried
   and both were worse: scaling the whole image squashed head, pumpkin, soil
   and vines together and read as bouncing rather than biting, and hinging the
   upper jaw as a separate layer looked bad in motion. A slow sway leaves the
   illustration exactly as drawn, which is the point of it being hand drawn.

   Long and gentle on purpose. It should read as the thing being alive in the
   corner of your eye, not as an animation playing. */
.pk-hero__art img{
  width:100%;height:auto;
  animation:pk-sway 11s ease-in-out infinite;
  transform-origin:50% 92%;
}
.pk-art__bob{
  /* Shadow on the wrapper so it is painted once rather than on every frame of
     the sway. */
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.55)) drop-shadow(0 0 60px rgba(239,23,20,.28));
}

@keyframes pk-sway{
  0%,100%{transform:rotate(-1.1deg) translateY(0)}
  50%{transform:rotate(1.1deg) translateY(-1.4%)}
}

/* Anyone who has asked for less motion gets the drawing, still. */
@media (prefers-reduced-motion:reduce){
  .pk-hero__art img{animation:none}
}

/* ---------- small print ----------
   Centred, untitled, at the foot of the page. No heading and no link out: it
   carries the terms itself rather than pointing somewhere else for them, and
   it keeps the id so the hero's prize disclosure can still jump here. */
.pk-fine{background:var(--ink-1);border-top:1px solid var(--line-2);text-align:center}
.pk-fine__p{
  /* Wide on purpose. This sat in .wrap--narrow at 70ch and broke into five
     short lines with empty page either side; the section is the full .wrap now
     and the measure is long enough to use it. Still capped, because a single
     unbroken line across a wide monitor is worse than a cramped one.
     text-wrap:balance evens the lines out rather than leaving a stub. */
  margin:1rem auto 0;color:var(--muted-2);
  font-size:.82rem;line-height:1.95;letter-spacing:.01em;
  /* Explicit width, not ch: the display face is narrow, so 112ch resolved to
     only 470px and the text still broke into short stacked lines with empty
     page either side. */
  max-width:min(100%,1020px);text-wrap:balance;
}
.pk-fine__p + .pk-fine__p{margin-top:1.5rem}

/* Inline "see more" link inside an FAQ answer. Underlined, as asked, with a
   little offset so the rule clears the descenders. */
.pk-more{
  color:var(--red-deep);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.pk-more:hover{color:#1a1109}

/* ---------- the Bureau Assessment, now the form's left column ----------
   It was its own band above the form. Beside the form it is the reason to fill
   the thing in, sitting next to it rather than being scrolled past. The
   two-column grid it used to need is gone: the rail is the column now. */
.pk-brief__pull{font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.05;text-wrap:balance}
.pk-file__head .stamp{margin-top:.3rem}

/* ---------- How to Enter ----------
   A different shade of paper rather than a different world: the hero is
   already the page's dark moment. Deeper cream here, standard cream on the
   form section below, step cards lighter again on top, so the three read as
   distinct without a single dark band or a torn seam between them.
   background-color only, so .sec--paper keeps its subtle radial tooth. */
.pk-how{background-color:var(--paper-2)}
.pk-how .card--paper{background:var(--paper-card)}

/* Tapping a step card turned it dark. .card--paper:hover lives in site.css and
   .card--static:hover sets --ink-2 in components.css, which loads later, so at
   equal specificity the dark one won. The system does patch this, but only as
   .sec--paper .card--static:hover, and these cards are not inside a paper
   section on every layout. Naming both modifiers outranks it properly. */
.card--paper.card--static:hover{
  background:var(--paper-card);border-color:rgba(36,26,18,.28);transform:none;
}


/* ---------- the prize, its own band ----------
   Dark, because a cut-out garment photograph reads as product photography on
   ink and as clutter on cream. Image first on a phone: it is the argument. */
.pk-prize__grid{display:grid;gap:clamp(24px,4vw,48px);align-items:center}
@media (min-width:900px){
  .pk-prize__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(40px,5vw,80px)}
}
/* Front, lining and back on a loop. The three are stacked, so the figure needs
   a height of its own: the first frame stays in flow and sets it, the other two
   are absolute on top. All three share one canvas, so nothing shifts. */
.pk-prize__shot{margin:0;position:relative;width:min(100%,420px);margin-inline:auto}
.pk-prize__f{
  width:100%;height:auto;
  /* Two shadows: a tight one for contact and a wide warm one so the garment
     sits in the band instead of floating on it. */
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.6)) drop-shadow(0 0 70px rgba(239,23,20,.2));
  /* One keyframe set for all three, offset by negative delays. Each frame holds
     for a third of the cycle with a short dissolve between, and writing it once
     means the three can never drift out of step. */
  animation:pk-jacket 7.5s ease-in-out infinite;
}
.pk-prize__f--2,
.pk-prize__f--3{position:absolute;inset:0}
/* The delays are DERIVED from the duration: for three frames they are 0,
   -2/3 and -1/3 of it. Change the 7.5s above and these two must change with
   it, or the frames bunch up.
   A negative delay starts the animation part-way in, and active time is
   currentTime minus delay, so lining takes the LARGER negative value to appear
   second. The intuitive pairing runs front, back, lining. */
.pk-prize__f--2{animation-delay:-5s}
.pk-prize__f--3{animation-delay:-2.5s}

@keyframes pk-jacket{
  0%{opacity:1}
  28%{opacity:1}
  33.333%{opacity:0}
  95%{opacity:0}
  100%{opacity:1}
}

/* Still on the front for anyone who has asked for less motion. */
@media (prefers-reduced-motion:reduce){
  .pk-prize__f{animation:none}
  .pk-prize__f--2,
  .pk-prize__f--3{opacity:0}
}
.pk-prize__say{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
/* The caption rendered at 11.84px in uppercase mono with 1.18px of tracking,
   the smallest copy left on the page after the rest of it was raised. Contrast
   was never the problem here: it measures 6.36:1 on the panel, comfortably past
   AA. Size and tracking were. The lede goes up with it so the prize block sits
   at the same scale as the steps and the entry section. */
.pk-prize__cap{font-size:1.02rem;letter-spacing:.04em;line-height:1.5;color:var(--muted)}
#prize .lede{font-size:clamp(1.2rem,2.6vw,1.4rem);line-height:1.5}
#prize .tab{font-size:.84rem;letter-spacing:.12em}
.pk-prize__cta{margin-top:.4rem}

/* How to Enter carries the premise now: the body sets the three steps up and
   the No-AI stamp is a rule about how you make the thing, which is what the
   steps describe. Moving both out of the form section cut the preamble above
   the form by roughly 240px. */
/* .sec__head caps at 736px, which is right for the lede and too narrow for a
   title-and-stamp row: at stamp--lg the two came to 807px and wrapped even on
   a 1440 screen. The head runs full width and the lede keeps its own measure
   instead. */
.pk-how__head{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;max-width:none}
.pk-how__head .lede{max-width:52ch}

.pk-how__top{display:flex;width:100%}
.pk-how__title{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}

/* Half tomato rising behind the steps. Anchored to the bottom of the header
   block, which is exactly the gap between the copy and the cards, and pushed
   a little past that edge so it reads as coming up from behind the row rather
   than sitting on a shelf. */
.pk-how__head{position:relative}
.pk-how__tomato{
  position:absolute;right:0;bottom:calc(-1 * clamp(30px,4vw,50px));
  /* Big, at the scale Aileen drew. It runs under the No-AI stamp, which is
     fine: the stamp sits at z-index 1 and stays legible over it, and the
     tomato reading as a whole shape matters more than clearing a label. */
  width:min(56%,620px);height:auto;pointer-events:none;z-index:0;
  filter:drop-shadow(0 12px 18px rgba(36,26,18,.22));
}
/* Everything else in the header sits above it, so a long line of copy or the
   stamp can overlap without being obscured. */
.pk-how__top,
.pk-how__head .lede{position:relative;z-index:1}

/* Below this there is no empty half to fill: the copy takes the full width and
   the tomato would only crowd it. */
@media (max-width:1000px){.pk-how__tomato{display:none}}

/* ---------- the No-AI ruling, stamped on step 01 ----------
   It belongs on the instruction it governs: "carve it, paint it, bead it,
   dress it, any physical method" is the moment somebody might wonder whether
   they could just generate one. It also breaks up three otherwise identical
   cards and pulls the eye to where reading should start.

   .card sets overflow:hidden, which would clip a stamp hung over the edge.
   Safe to release here because these cards carry no .card__media, which is
   the thing that relies on the clipping. */
.pk-step{overflow:visible}
.pk-step__stamp{
  position:absolute;z-index:2;
  top:-.85rem;right:-.6rem;
  /* Smaller than the page's other stamps: at full size it is 350px against a
     373px card and would read as a banner rather than a stamp. */
  font-size:clamp(.58rem,.75vw,.68rem);
  transform:rotate(-8deg);
  background:var(--paper-card);
}
@media (max-width:820px){
  /* Stacked cards are full width, so the stamp has room to sit further in
     rather than hanging off the corner of the viewport. */
  .pk-step__stamp{right:.5rem;top:-.7rem}
}

/* Closes the three steps. Centred under the row rather than hung on the left,
   so it reads as the end of the sequence rather than a fourth item. */
.pk-how__act{
  display:flex;justify-content:center;
  margin-top:clamp(24px,4vw,38px);
}
@media (max-width:820px){
  /* Stacked cards are full width, so a full-width button below them keeps the
     column and gives a thumb the whole row to hit. */
  .pk-how__act .btn{width:100%}
}

/* ---------- FAQ heading ----------
   "FVI FAQ" is two acronyms in a row, and .d2 tracks at -.015em because the
   display face is drawn to sit tight across long words. Over seven characters
   that negative tracking pulls FVI and FAQ into one block and loses the space
   between them. Positive tracking here, plus a little extra word spacing, so
   the two read as two. Scoped to this section; .d2 is unchanged everywhere. */
#rules .sec__head .d2{letter-spacing:.055em;word-spacing:.14em}

/* ---------- fine print, now inside the form ----------
   The substitution clause used to be its own dark band at the foot of the
   page, so .pk-fine__p was written for that: muted-2 on ink, centred, and
   capped at 1020px to stop one long line crossing a wide monitor. Inside the
   sheet it needs the paper palette, the sheet's own measure, and the left
   edge the rest of the form sits on. */
.pk-fine__p--form{
  /* Aligned to the sheet above it, which is capped at 820px and centred. */
  margin:1.1rem auto 0;max-width:820px;text-align:left;text-wrap:pretty;
  font-size:.9rem;line-height:1.6;letter-spacing:.01em;color:var(--ink-on-paper-3);
}

/* The one link inside the rules block. Blue and underlined, as asked. The
   ordinary link blue (#0d6efd) measures 4.12:1 on this band's #181210, under
   the AA floor for text this small, so it is lightened to #4ea3ff at 7.07:1. */
.pk-rules-link{
  color:#4ea3ff;text-decoration:underline;text-underline-offset:.18em;
}
.pk-rules-link:hover,
.pk-rules-link:focus-visible{color:#8ecbff}


/* The two documents are linked from the consent checkbox and nowhere else on
   this section now. They inherited the label colour with no underline, which
   made them read as plain text: the same 10.95:1 brown as the words around
   them. Underlined rather than recoloured, so they are obviously links while
   the sentence still reads as one sentence. */
.pk-check a{
  text-decoration:underline;text-underline-offset:.16em;
  text-decoration-thickness:1px;color:inherit;
}
.pk-check a:hover,
.pk-check a:focus-visible{color:var(--red-deep);text-decoration-thickness:2px}

/* ---------- official rules band: plain black and white ----------
   The rest of the page is warm: ink is #181210, the muted text #a5957e. This
   block steps out of that on purpose, so the terms read as a legal notice
   rather than as more of the set dressing. Contrast goes from 6.36:1 to the
   maximum 21:1, and the link inside sits at 8.01:1 on black. Scoped to the
   section, so .pk-fine__p keeps the paper styling where it appears under the
   entry form. */
#official-rules{background:#000;border-top-color:rgba(255,255,255,.18)}
#official-rules .pk-fine__p{color:#fff}

/* Entry embeds. The platform renders its own post inside the iframe, so the
   only job here is to give it a box with no dead space in it.

   Measured rather than guessed: Instagram's /embed is exactly its own width
   plus 208px at every width (320 -> 528, 369 -> 577, 420 -> 628, 500 -> 708).
   The square media area scales with the column and the chrome under it, the
   View-more link, the action row, the like count and the comment box, is a
   constant 208. A percentage padding-bottom resolves against the container's
   WIDTH, so calc(100% + 208px) is that formula expressed in CSS and stays
   correct at any column width. A fixed height cannot: 640px left 63px of
   white below the comment box in a 369px column.

   If a post ever renders taller than that, for instance a portrait photo
   Instagram does not letterbox, it will clip rather than scroll, because
   scrolling is off. Give that entry its own height rather than padding this
   one out for everybody. */
.pk-gal__media{position:relative;background:#fff}
/* Instagram scales with the column: its square media area follows the width
   and the chrome under it is a constant 208. */
.pk-gal__media--ig{padding-bottom:calc(100% + 208px)}
/* TikTok does not scale. Measured at 320, 369, 420 and 500px wide and it
   returned 757px every time: the player letterboxes the vertical video inside
   a fixed box rather than growing with the container, so a ratio would leave
   a gap at every width except one. */
.pk-gal__media--tt{height:757px}
/* Facebook's plugin is told its own width in the embed URL and renders to it.
   No entry uses it yet; both Facebook rows in the sheet are disqualified, so
   this is a sensible default to be measured properly when one arrives. */
.pk-gal__media--fb{height:640px}
.pk-gal__embed{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.pk-gal__who{
  display:block;margin-top:.25rem;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;color:var(--red-deep);text-decoration:underline;
  text-underline-offset:.16em;
}

/* ===== mobile.css ===== */
/* ============================================================
   MOBILE ERGONOMICS
   ============================================================
   Loaded last so it can correct earlier rules without editing them.

   Everything in this file lives inside a phone-width media query and
   changes how things are *touched*, not how they are laid out. The
   desktop composition is deliberately untouched: if a rule here alters
   what the site looks like above 940px, that is a bug in the rule.
   ============================================================ */


/* ---------- 1. Theater locator: stop the list trapping the scroll ----------
   .loc__list is a 620px box with overflow-y:auto. Beside the map on a
   desktop that is the whole point — it holds the list to the map's height.
   On a phone the map stacks above the list, so the box becomes a scroller
   inside a scroller: a thumb dragging down the page lands in the list, the
   list swallows the gesture, and the page stops moving. Worse, the only way
   to reach the Get Tickets button on a theater near the bottom is to find
   that inner scrollbar first.

   Six theaters is not a long list. Let it flow with the page. */
@media (max-width:940px){
  .loc__list{max-height:none;overflow:visible;padding-right:0}
}


/* ---------- 2. Text fields: 16px or Safari zooms the page ----------
   iOS Safari zooms the viewport whenever a focused field's text is under
   16px, and it does not zoom back out afterwards — the visitor is left
   pinching their way back to the layout. Every field on the site sits at
   .85rem (13.6px), so tapping the theater search was enough to trigger it.

   16px is the floor, not a design choice. The selectors mirror the ones
   that set the smaller size so specificity matches and source order wins. */
@media (max-width:640px){
  .field input,
  .field select,
  .field textarea,
  .slip__field input,
  .ft__news input{font-size:16px}
}


/* ---------- 3. Tap targets ----------
   44px is the smallest reliable touch target. Where the visible control is
   deliberately small, the hit area grows and the paint stays put. */
@media (max-width:640px){

  /* Testimony slider dots. The dot stays 12px; a transparent ::after gives
     it a 44px target. The gap is widened to exactly 44px pitch so adjacent
     targets sit edge to edge instead of overlapping — overlapping targets
     just move the mis-tap somewhere else. */
  .reel__dots{gap:32px}
  .reel__dot{position:relative}
  .reel__dot::after{
    content:"";position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%);
  }

  /* Press category filters — 35px tall as drawn. */
  .filters button{min-height:44px}

  /* Footer social icons — 38px as drawn. The svg inside is unchanged. */
  .ft__soc a{width:44px;height:44px}

  /* Nav controls. Both were a couple of pixels short. */
  .nav__burger{width:44px;height:44px}
  .nav__logo{min-height:44px}

  /* Footer newsletter field and its button share a row; the field was 43px. */
  .ft__news input,
  .ft__news .btn{min-height:44px}

  /* Checkboxes. Both live inside a <label> that wraps the text, so the row
     was already tappable — this is comfort, not a fix. */
  .check input[type="checkbox"],
  .slip__check input[type="checkbox"]{width:22px;height:22px}
}


/* ---------- 4. Organic Intelligence hero ----------
   Three separate symptoms, one cause.

   .hero is min-height:100svh, max-height:1100px, overflow:hidden, and
   .hero--oi adds justify-content:center. Above 1080px the copy and the
   intake slip sit side by side and the whole thing fits inside 1100px.
   Below that they stack, the content grows to ~1300px, and the box still
   refuses to pass 1100 — so centring splits the 200px of overflow evenly
   between the top and the bottom and overflow:hidden cuts both ends.

   That is why the logo sat behind the fixed navbar (it had been pushed to
   y=-48, under an 88px fixed header) and why the foot of the form collided
   with the ticker below it. Neither is a z-index or a spacing bug.

   On a phone this hero is a stack, not a viewport panel. Let it be as tall
   as its content and start at the top, and both ends stop being clipped. */
@media (max-width:1079px){
  .hero--oi{
    max-height:none;
    min-height:0;
    justify-content:flex-start;
  }
  .hero--oi .hero__in{padding-bottom:clamp(28px,5vw,48px)}
}

/* With the clipping gone, the remaining problem is that the slip started
   470px down. Tightening the four blocks above it lifts the form without
   changing what any of them are. */
@media (max-width:640px){
  .hero--oi .hero__logo{height:clamp(78px,11vh,104px)}
  .hero--oi .hero__quote{margin-top:12px}
  .hero--oi .hero__acts{margin-top:14px;gap:10px;width:100%;flex-wrap:nowrap}
  .hero--oi .hero__acts .btn{
    padding:12px 14px;
    font-size:.82rem;
    letter-spacing:1px;
  }
  /* Two stacked full-width pills cost 111px of the run-up to the form. Side
     by side they cost 50 and still clear 44px of height. hero.css sends them
     to width:100% below 560px, hence the override. */
  .hero--oi .hero__acts .btn--big{width:auto;flex:1 1 0;min-width:0}
}


/* ---------- 5. Buttons at phone width ----------
   .btn is white-space:nowrap with .13em tracking, so a long label cannot
   wrap and cannot shrink — it just pushes past the pill. Allowing a wrap
   costs nothing on desktop (this only applies below 640px) and is the
   difference between a button that fits and one that overflows its row. */
@media (max-width:640px){
  .btn{
    min-height:44px;
    white-space:normal;
    text-align:center;
    max-width:100%;
  }
}


/* ---------- 6. Ticket stubs: keep the perforation out of the address ----------
   .thr__row is drawn as a torn ticket: notches punched into both edges and a
   dashed perforation rule at left:74px. That 74 was measured against the
   desktop row — 18px padding + a 46px state badge + a 16px gutter. The phone
   row uses 14px padding and a 12px gutter, so the badge ends at 60 and the
   text column starts at 72, which puts the perforation 2px INSIDE the text
   and ran it straight through the theater address.

   66px is the middle of the phone row's actual gutter.

   The rule also has to stop before the button. It is absolutely positioned on
   the row at top:12px/bottom:12px, i.e. the row's full height — and on a phone
   the button becomes a full-width second grid row (grid-column:1/-1), so the
   perforation carried on straight down through it. That went unseen for as
   long as every theater had a ticket URL: a solid red Get Tickets button is
   opaque and painted over the line. The first venue without one renders the
   ghost button, which is transparent, and the rule showed through it.

   Anchoring the rule to the text block instead of the row fixes both cases at
   once — it spans the stub's content and ends where the content ends, whatever
   the button looks like. left:-6px puts it back in the middle of the 12px
   gutter, the same place the 66px was aiming for. */
@media (max-width:640px){
  .sec--paper .thr__row::before{display:none}
  .sec--paper .thr__row>div{position:relative}
  .sec--paper .thr__row>div::before{
    content:"";position:absolute;left:-6px;top:2px;bottom:2px;width:1px;
    background:repeating-linear-gradient(to bottom,rgba(36,26,18,.35) 0 4px,transparent 4px 9px);
  }
}


/* ---------- 7. Centred headings ----------
   Several headings hard-code a <br> to control where they break in the
   two-column desktop layout. Stacked on a phone that break is arbitrary and
   leaves a short ragged second line, so the <br> is marked .br-lg and only
   applies once there is a column to shape. */
.br-lg{display:none}
@media (min-width:641px){.br-lg{display:inline}}

@media (max-width:640px){
  /* Section heads centre; body copy stays left, because centred paragraphs
     are measurably harder to read at this width. */
  #demand>.wrap .doss>.rv:first-child>.tab,
  #demand>.wrap .doss>.rv:first-child>h2,
  #clearance>.wrap .doss>.rv:first-child>.kicker,
  #clearance>.wrap .doss>.rv:first-child>h2,
  #archive .watchband__l>.kicker,
  #archive .watchband__l>h2{
    display:block;text-align:center;margin-inline:auto;
  }

  /* "No Theater Near You?" — asked to be one line and larger. Kaneda Gothic is
     heavily condensed, so the whole string measures only 170px at the stock
     30.4px in a 335px column. 11vw takes it to ~41px and ~234px wide; at 320px
     the clamp floor holds it to 38.4px / ~218px, still one line. */
  #demand>.wrap .doss>.rv:first-child>h2{font-size:clamp(2.4rem,11vw,3rem)}

  /* File 004 — the artwork and its title sit centred over the episode list. */
  .pod .doss>.rv:first-child{align-items:center;text-align:center}
  .pod .podart{margin-inline:auto}
  .pod .podnote{text-align:left}
}


/* ---------- 8. OI hero: centre the identity block ----------
   Stacked on a phone the logo and the line read as a title card, so they
   centre, and the quote centres with them. .hero--oi .hero__quote is already
   border:0 and padding:0 in hero.css — it is a plain quote here, not the
   bordered pull-quote the generic .hero__quote draws — so there is nothing to
   re-hang and this only sets alignment. */
@media (max-width:640px){
  .hero--oi .hero__col{align-items:center;text-align:center}
  .hero--oi .hero__logo{margin-inline:auto}
  .hero--oi .hero__quote{margin-inline:auto}
  .hero--oi .hero__acts{justify-content:center}
  /* The intake slip keeps its own left-aligned form. */
  .hero--oi .slip{text-align:left}
}


/* ---------- 9. Text sizes on a phone ----------
   A pass over every run of prose at 375px turned up four places where real
   content — not a decorative micro-label — was set small enough to be work to
   read. Uppercase mono labels are left alone; they are meant to be small and
   the tracking carries them. */
@media (max-width:640px){
  /* The theater address is the whole point of the locator, and it was the
     smallest text in the section. Its showtime line goes with it. */
  .thr__a{font-size:.86rem}
  .thr__d{font-size:.78rem}

  /* Both consent labels — the sentence a visitor is agreeing to. */
  .check{font-size:.9rem}
  .slip__check span{font-size:.88rem}

  /* Footer trademark line. Still small, no longer squinting. */
  .ft__bot p{font-size:.8rem}
}


/* ---------- 10. "What Is Organic Intelligence?" ----------
   Two separate problems in the same block.

   Scoped to 900px rather than the usual 640px because .doss only becomes two
   columns at 901px. Everything below that is the same stacked, full-width
   arrangement, and both of these are consequences of that arrangement — 640
   would have left a tablet with the identical bugs. */
@media (max-width:900px){

  /* The ring around "USS Midway".
     .ringed::after bleeds a fixed 9px/14px past the words, giving an 86x40
     ellipse around a 58x22 phrase. Inside a 32px line box that is 4px of
     overlap onto the lines above and below, and 14px to the left is about two
     and a half characters at 18.4px, so it swallowed the "e" of the "the"
     before it and read as circling the wrong words.

     It cannot simply be made narrower. An ellipse is at its widest across the
     middle and pinches in at the top and bottom, so to clear the cap-height of
     a 58x22 box it needs a half-width of at least 29/sqrt(1-(11/b)^2). At the
     original half-height of 20 that works out to 43 — the 86px it already was.
     Shrink the width alone and the arcs start cutting through the "U" and the
     "y".

     So the height buys the width back instead: -6px/-11px gives an 80x34 ring
     that is 61px across at the text's cap-height (clears 58), while only
     reaching 1px past a 32px line box instead of 4px.

     nowrap because the containing block of an absolutely positioned child of
     an inline element spans from the first line fragment to the last — if
     "USS Midway" ever broke across two lines the ring would draw as one huge
     ellipse over both. Ten characters should never break anyway. */
  .ringed{white-space:nowrap}
  .ringed::after{inset:-6px -11px}

  /* The tagline.
     Asked to be bigger, and it has to stay on one line — that was the point
     of it being small in the first place. Two things were in the way.

     First, dossier.css already carries a max-width:520px override that raises
     it to 1.02rem, but this blockquote lives inside a .doss__sheet and the
     base rule is written `.doss__sheet .oi-tagline, .oi-tagline` to beat that
     sheet's colour. The media-query rule is only `.oi-tagline`, so inside the
     sheet it loses on specificity and never applied. Both selectors here.

     Second, a fixed size cannot stay on one line across 320–430px. The string
     measures 13.8x its font-size, and the column is roughly viewport minus
     105px once the wrap, sheet and rule padding come off, so the largest size
     that always fits is about (vw-105)/13.8 — a shade over 4.8vw. Trimming the
     rule padding to 12px buys the headroom that makes 4.8vw safe at 320px. */
  .doss__sheet .oi-tagline,
  .oi-tagline{
    font-size:clamp(.95rem,4.8vw,1.55rem);
    padding-left:12px;
  }
}

/* ---------- 9. Fan club: form before the perks once the columns stack ----------
   Two columns above 900px: intro + perk cards on the left, intake form on the
   right, both visible together. Below 900px .doss collapses to one column and
   the form drops under all three perk cards — so on a phone the paragraph ends
   and the ask is a scroll away. This puts the form directly under the intro and
   moves the perks below it, where they read as reassurance after the fact.

   Why display:contents rather than plain `order`: the perk grid is nested
   *inside* the intro block, while the form is that block's sibling. No order
   value on .doss's own children can interleave across that boundary. Dissolving
   the intro wrapper promotes its children to grid items of .doss, and then one
   ordering covers all five.

   Two knock-ons, both handled below:
   - .doss's row gap would now fall between every promoted child, including
     kicker/h2/paragraph, so the gap goes to 0 and the elements' own margins do
     the spacing again. The form is the one piece with no margin of its own.
   - a display:contents box is never painted, so the wrapper's .rv fade stops
     applying to the intro; it is simply visible on load. The perk cards and the
     form each carry their own .rv and still animate.

   .doss stays a grid — switching it to flex would turn its align-items:start
   into a cross-axis rule and shrink-wrap the form to its content width. */
@media (max-width:900px){
  #clearance>.wrap .doss{gap:0}
  #clearance>.wrap .doss>.rv:first-child{display:contents}
  #clearance>.wrap .doss>.rv:first-child>.kicker{order:1}
  #clearance>.wrap .doss>.rv:first-child>h2{order:2}
  #clearance>.wrap .doss>.rv:first-child>.body{order:3}
  #clearance>.wrap .doss>.doss__sheet{order:4;margin-top:clamp(22px,5vw,32px)}
  #clearance>.wrap .doss>.rv:first-child>.grid{order:5}
}

/* ==================================================================
   OI page — phone-only adjustments for the post-theatrical layout
   ================================================================== */

@media (max-width: 900px) {
  /* Form first. Stacked, the KT-2 sheet was landing under the intro copy AND
     the two stat tiles, so the thing people came to do was the last thing
     they reached. display:contents dissolves the text column so its children
     and the form become siblings of one flex column, which is the only way to
     reorder across that boundary without changing the desktop markup. */
  #demand .doss { display: flex; flex-direction: column; align-items: stretch; }
  #demand .doss > .rv:not(.doss__sheet) { display: contents; }
  #demand .doss__sheet { order: 1; }
  #demand .stats { order: 2; }
}

@media (max-width: 560px) {
  /* Two up. At one column each headshot was a 335px-wide card and the section
     ran to nearly 4000px on a phone — most of it face. */
  .cast { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cast__c { padding: 6px 6px 0; }
  .cast__b { padding: 8px 3px 10px; }
  .cast__n { font-size: .95rem; }
  .cast__r { font-size: .62rem; }
}


/* ---------- 12. The Pumpkin Infiltration (/pumpkin) ----------
   Nearly every entrant arrives from an Instagram or Facebook link on a phone,
   so this form is the one that most has to survive a thumb. Section 2 already
   raises .field input and .field select to 16px, which covers the text fields
   and the country select; the rules below cover the three controls this page
   adds that no other page has. */
@media (max-width:640px){
  /* The file control is a button, not a text field, so it is not an iOS zoom
     risk — but at .78rem it read as fine print next to its own label. */
  .pk-up input[type=file]{font-size:15px}
  .pk-up input[type=file]::file-selector-button{padding:.65em 1.1em}

  /* Matches .check / .slip__check above. The whole label is already tappable,
     so this is comfort rather than a fix. */
  .pk-check input[type=checkbox]{width:22px;height:22px}
}

/* The helper text under the evidence fields is load-bearing here in a way the
   site's other hints are not: it is what tells an entrant which link to paste
   and that a photo is an alternative to it. At the site's .67rem it renders
   at 10.7px, which is fine-print on a phone. Raised on this page only, so the
   rest of the site keeps one consistent hint size. */
@media (max-width:640px){
  .doss__sheet .field__h{font-size:13px}
  .pk-proof__need{font-size:13px}

  /* Inline link in the closing line. Visually 48x27; the transparent ::after
     grows the hit area to 44px without moving the underline off the text.
     Same technique as the slider dots in section 3. */
  .pk-tie__a{position:relative}
  .pk-tie__a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}