@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}
.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__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. Measured: the row
   needs ~1000px to stay on one line — below that "Organic Intelligence" and
   "Fan Club" both wrap and the header grows to two ragged lines. 1024 keeps a
   margin over that. The cost is that 961-1024px (tablet landscape, small
   laptops) now gets the burger, which carries the same links. Both halves of
   the pair have to 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;
}

/* ===== 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);
}
.hero--oi .hero__quote{
  margin:22px 0 0;padding:0;border:0;max-width:34rem;
}
.hero--oi .hero__quote p{
  font-family:var(--display);font-weight:400;font-style:normal;
  font-size:clamp(1.02rem,1.25vw,1.16rem);line-height:1.62;color:#f2e7d2;
}
.hero--oi .hero__quote cite{
  display:block;margin-top:8px;font-style:normal;
  font-family:"Oswald",var(--mono),sans-serif;
  font-size:.72rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted-2);
}

/* 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}

/* ===== 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} }

/* ===== 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 {
  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);
}

/* 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 * clamp(26px, 4.4vw, 62px));
  /* 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; }
}

/* ===== 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; }
}