@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}
@media (max-width:960px){
  .nav__links{display:none}
  .nav__burger{display:flex}
}
@media (min-width:961px){.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}
.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)}
.sec--paper + .sec--paper:not(.is-torn)::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))}
@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
   ------------------------------------------------------------------ */
.lb{
  position:fixed;inset:0;z-index:1000;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} }

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

.reel__by{
  margin-top:auto;padding-top:16px;
  border-top:1px dashed rgba(36,26,18,.28);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.reel__by b{
  font-family:var(--display);font-weight:800;font-size:1.14rem;
  text-transform:uppercase;letter-spacing:.01em;color:#1a1109;
}
.reel__by span{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:#7a6547;padding:.34em .6em;border:1px solid rgba(36,26,18,.24);border-radius:2px;
}

/* ---------- 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;align-items:center;gap:9px}
.reel__dot{
  width:12px;height:12px;border-radius:50%;padding:0;border:0;cursor:pointer;
  background:rgba(36,26,18,.22);transition:background .25s,transform .25s var(--ease);
}
.sec:not(.sec--paper) .reel__dot{background:rgba(245,230,200,.25)}
.reel__dot:hover{transform:scale(1.25)}
.reel__dot[aria-selected="true"]{
  background:radial-gradient(circle at 34% 28%,#ff6a5e,var(--red) 60%,#a30f0c);
  transform:scale(1.35);
}
.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)}
}

/* ===== 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. */
@media (max-width:640px){
  .sec--paper .thr__row::before{left:66px}
}


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