/*
Theme Name: Street Smart
Theme URI: http://localhost:8130
Author: Built with Claude Code
Description: "The Case File" — a 3D noir book site for Street Smart Laws: Criminal Edition by Siddhant Pandey. One WebGL evidence room (three.js, vendored) under real HTML copy; zero plugins.
Version: 2.0.0
License: GPL-2.0-or-later
Text Domain: streetsmart
*/

/* ==========================================================================
   0. FONTS
   ========================================================================== */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/anton.woff2') format('woff2')}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/archivo-black.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/inter.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/instrument-serif.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/instrument-serif-italic.woff2') format('woff2')}

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  --void:#07070a;          /* page */
  --pit:#0b0b10;           /* alternating band */
  --ink:#101017;           /* raised panel */
  --ink-2:#16161f;
  --bone:#f4f0e8;          /* primary text */
  --ash:#9a9aa8;           /* secondary text */
  --ash-dim:#6a6a78;
  --blood:#e01b25;         /* the brand red, off the book cover */
  --blood-lo:#8e0f17;
  --blood-glow:rgba(224,27,37,.35);
  --brass:#c9a227;         /* legal seal gold, used sparingly */
  --line:rgba(244,240,232,.10);
  --line-hi:rgba(244,240,232,.20);

  --display:'Anton',Impact,sans-serif;
  --heavy:'Archivo Black',Inter,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;

  --wrap:1240px;
  --gut:clamp(20px,5vw,64px);
  --r:14px;                /* corner radius */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --header-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--void);color:var(--bone);
  font-family:var(--body);font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;overflow-x:clip;   /* clip: no scroll container, so sticky still works */
}
body.locked{overflow:hidden}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--blood);color:#fff}

/* ==========================================================================
   2. ATMOSPHERE — grain, vignette, scanline. Fixed, pointer-events:none.
   ========================================================================== */
.grain,.vignette,.scan{position:fixed;inset:0;pointer-events:none;z-index:9000}
.grain{
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 700ms steps(1) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(3%,3%)}
}
.vignette{background:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(0,0,0,.55) 100%);z-index:8999}
.scan{
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,transparent 1px 4px);
  opacity:.55;z-index:8998;
}
/* the slow red sweep that crosses the whole page every 14s */
.scan::after{
  content:'';position:absolute;left:0;right:0;height:34vh;
  background:linear-gradient(180deg,transparent,rgba(224,27,37,.05),transparent);
  animation:sweep 14s linear infinite;
}
@keyframes sweep{0%{top:-40vh}100%{top:120vh}}

/* ==========================================================================
   3. CURSOR — a reticle that locks on to interactive elements
   ========================================================================== */
.cursor{
  position:fixed;top:0;left:0;width:34px;height:34px;z-index:9500;pointer-events:none;
  translate:-50% -50%;opacity:0;transition:opacity .3s,width .3s var(--ease),height .3s var(--ease);
}
.cursor::before,.cursor::after{content:'';position:absolute;inset:0;border-radius:50%}
.cursor::before{border:1px solid rgba(244,240,232,.45);transition:border-color .3s,transform .3s var(--ease)}
.cursor::after{
  width:4px;height:4px;inset:auto;top:50%;left:50%;translate:-50% -50%;
  background:var(--blood);transition:width .3s var(--ease),height .3s var(--ease)
}
.cursor.on{opacity:1}
.cursor.lock{width:58px;height:58px}
.cursor.lock::before{border-color:var(--blood);border-width:1px;
  /* crosshair corners */
  clip-path:polygon(0 0,32% 0,32% 4%,4% 4%,4% 32%,0 32%, 0 68%,4% 68%,4% 96%,32% 96%,32% 100%,0 100%,
    100% 100%,68% 100%,68% 96%,96% 96%,96% 68%,100% 68%,100% 32%,96% 32%,96% 4%,68% 4%,68% 0,100% 0);
  border-radius:2px}
.cursor.lock::after{width:6px;height:6px}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ==========================================================================
   4. PRELOADER
   ========================================================================== */
/* The exit is a CSS animation on a timer, not a JS callback: a script error must never
   be able to leave a black curtain over the whole site. JS only fills the bar. */
.loader{
  position:fixed;inset:0;z-index:9800;background:var(--void);
  display:grid;place-items:center;
  animation:loaderOut .55s var(--ease) 1.95s forwards;
}
@keyframes loaderOut{to{opacity:0;visibility:hidden}}
.loader__inner{text-align:center;width:min(420px,80vw)}
.loader__mark{font-family:var(--display);font-size:clamp(28px,6vw,44px);letter-spacing:.06em;line-height:1;text-transform:uppercase}
.loader__mark span{color:var(--blood)}
.loader__bar{height:2px;background:var(--line);margin:22px 0 12px;overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--blood);box-shadow:0 0 14px var(--blood-glow)}
.loader__num{font-family:var(--mono);font-size:12px;letter-spacing:.28em;color:var(--ash)}
/* the two curtains that split away */
.loader__curtain{position:fixed;left:0;right:0;height:50.5vh;background:var(--void);z-index:9799;animation-duration:1s;animation-timing-function:var(--ease);animation-delay:1.95s;animation-fill-mode:forwards}
.loader__curtain.t{top:0;animation-name:curtainT}
.loader__curtain.b{bottom:0;animation-name:curtainB}
@keyframes curtainT{to{transform:translateY(-101%)}}
@keyframes curtainB{to{transform:translateY(101%)}}

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:8000;height:var(--header-h);
  display:flex;align-items:center;
  transition:height .4s var(--ease),background .4s,backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.hdr.scrolled{
  height:62px;background:rgba(7,7,10,.72);backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.hdr__in{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:28px}
.brand{font-family:var(--display);font-size:19px;letter-spacing:.05em;text-transform:uppercase;line-height:1;white-space:nowrap;display:flex;align-items:center;gap:9px}
.brand i{width:7px;height:7px;background:var(--blood);border-radius:50%;box-shadow:0 0 12px var(--blood);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}
.brand em{font-style:normal;color:var(--blood)}

.nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav a{
  font-size:13.5px;letter-spacing:.02em;color:var(--ash);position:relative;padding:6px 0;
  transition:color .3s;
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--blood);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.nav a:hover{color:var(--bone)}
.nav a:hover::after,.nav a.current::after{transform:scaleX(1);transform-origin:left}
.nav a.current{color:var(--bone)}

.hdr__cta{margin-left:4px}
.burger{display:none;margin-left:auto;width:40px;height:40px;position:relative;z-index:8600}
.burger span{position:absolute;left:9px;width:22px;height:1.5px;background:var(--bone);transition:.4s var(--ease)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.burger.open span:nth-child(1){top:21px;transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0;transform:translateX(12px)}
.burger.open span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* reading progress hairline */
.prog{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--blood-lo),var(--blood));z-index:8100;box-shadow:0 0 10px var(--blood-glow)}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:8500;background:var(--void);
  padding:calc(var(--header-h) + 30px) var(--gut) 40px;
  display:flex;flex-direction:column;gap:6px;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
}
.drawer.open{clip-path:inset(0 0 0 0)}
.drawer a{
  font-family:var(--display);font-size:clamp(30px,9vw,46px);text-transform:uppercase;letter-spacing:.02em;
  padding:10px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s;
}
.drawer.open a{opacity:1;transform:none;transition-delay:calc(.08s * var(--i,0) + .18s)}
.drawer a:hover{color:var(--blood)}
.drawer__foot{margin-top:auto;color:var(--ash);font-size:13px;font-family:var(--mono);letter-spacing:.1em}
@media (max-width:1000px){
  /* .hdr prefix is load-bearing: .btn sets display:inline-flex further down the file
     and would otherwise win over a bare .hdr__cta. */
  .hdr .nav,.hdr .hdr__cta{display:none}
  .burger{display:block}
}

/* ==========================================================================
   6. PRIMITIVES — wrap, eyebrow, headings, buttons
   ========================================================================== */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.wrap--wide{max-width:1480px}
section{position:relative}
.band{padding:clamp(70px,8.4vw,118px) 0}
.band--pit{background:var(--pit)}
.band--tight{padding:clamp(48px,5.4vw,74px) 0}
.hr{height:1px;background:var(--line);border:0;margin:0}

.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--blood);display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;
}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--blood)}
.eyebrow--ash{color:var(--ash)}
.eyebrow--ash::before{background:var(--ash-dim)}

h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.01em}
.h-xl{font-family:var(--display);font-size:clamp(44px,8.4vw,116px);line-height:.92;text-transform:uppercase;letter-spacing:.005em}
.h-lg{font-family:var(--display);font-size:clamp(34px,5.6vw,72px);line-height:.96;text-transform:uppercase}
.h-md{font-family:var(--heavy);font-size:clamp(22px,2.6vw,34px);line-height:1.12;letter-spacing:-.02em}
.h-sm{font-family:var(--heavy);font-size:clamp(17px,1.6vw,21px);line-height:1.25;letter-spacing:-.01em}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.7;color:var(--ash);max-width:60ch}
.muted{color:var(--ash)}
.red{color:var(--blood)}
/* outline display type — used for the ghost words behind sections */
.stroke{color:transparent;-webkit-text-stroke:1px var(--line-hi)}

/* buttons */
.btn{
  --bg:var(--blood);--fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:100px;background:var(--bg);color:var(--fg);
  font-size:14.5px;font-weight:600;letter-spacing:.01em;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s,color .3s;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px -12px var(--blood-glow)}
.btn::before{ /* sheen */
  content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transition:left .8s var(--ease);
}
.btn:hover::before{left:130%}
.btn--ghost{--bg:transparent;--fg:var(--bone);border:1px solid var(--line-hi)}
.btn--ghost:hover{--fg:#fff;border-color:var(--bone);box-shadow:none;background:rgba(244,240,232,.05)}
.btn--bone{--bg:var(--bone);--fg:#0a0a0e}
.btn--bone:hover{box-shadow:0 14px 40px -14px rgba(244,240,232,.4)}
.btn--sm{padding:11px 20px;font-size:13px}
.btn--full{width:100%}
.btn i{font-style:normal;transition:transform .4s var(--ease)}
.btn:hover i{transform:translateX(4px)}

.txtlink{
  font-size:14.5px;color:var(--ash);border-bottom:1px solid var(--line-hi);padding-bottom:3px;
  transition:color .3s,border-color .3s;
}
.txtlink:hover{color:var(--bone);border-color:var(--blood)}

/* ==========================================================================
   7. REVEAL SYSTEM (JS adds .in)
   ========================================================================== */
.reveal{opacity:0;transform:translateY(34px);filter:blur(6px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
  transition-delay:calc(70ms * var(--i,0));}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal--left{transform:translateX(-40px)}
.reveal--right{transform:translateX(40px)}
.reveal--scale{transform:scale(.94)}
/* Phones: a card parked 40px off the right edge before its reveal widened the layout
   viewport and the whole page zoomed out a notch. Rise instead of slide. */
@media (max-width:900px){.reveal--left,.reveal--right{transform:translateY(34px)}}
/* Clip wipe for images. The clip goes on the CHILD, never the observed element:
   IntersectionObserver factors clip-path in, so an element clipped to zero height can
   never intersect and would sit there hidden forever. */
.wipe > *{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease)}
.wipe.in > *{clip-path:inset(0 0 0 0)}
/* rules that draw themselves */
.rule{height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.rule.in{transform:scaleX(1)}
/* per-word headline rise */
.word{display:inline-block;overflow:hidden;vertical-align:bottom}
.word > span{display:inline-block;transform:translateY(105%);transition:transform .95s var(--ease);transition-delay:calc(55ms * var(--w,0))}
.in .word > span,.word.in > span{transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal,.wipe,.rule,.word>span{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  .grain,.scan::after{animation:none}
}

/* ==========================================================================
   8. HERO
   ========================================================================== */
.hero{min-height:100svh;display:flex;align-items:center;padding:calc(var(--header-h) + 40px) 0 60px;overflow:hidden}
/* the light that follows the pointer */
.hero__spot{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,40%),rgba(224,27,37,.16),transparent 62%);
  transition:background .2s linear;
}
.hero__grid{
  position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(90% 70% at 50% 45%,#000 20%,transparent 78%);
}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(24px,4vw,64px);align-items:center;width:100%}
/* smaller than .h-xl on purpose: this one shares its row with the book, and at full
   display size a five-line headline pushes the CTAs below the fold on a laptop. */
.hero h1{margin:0 0 26px;font-size:clamp(38px,5.3vw,78px)}
.hero__sub{max-width:44ch;margin:0 0 34px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero__pub{
  margin-top:38px;display:flex;align-items:center;gap:14px;color:var(--ash-dim);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.hero__pub img{width:30px;height:30px;opacity:.85;filter:grayscale(1) contrast(1.1)}

.scrollcue{
  position:absolute;left:50%;bottom:26px;translate:-50% 0;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ash-dim);
}
.scrollcue i{display:block;width:1px;height:46px;background:linear-gradient(var(--blood),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

@media (max-width:900px){
  .scrollcue{display:none}
  .hero{min-height:auto;padding-bottom:44px}
}

/* ==========================================================================
   9. MARQUEE
   ========================================================================== */
.marquee{
  overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:20px 0;background:var(--pit);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:slide 34s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{
  font-family:var(--display);font-size:clamp(22px,3.2vw,40px);text-transform:uppercase;letter-spacing:.02em;
  padding:0 26px;display:inline-flex;align-items:center;gap:26px;color:var(--bone);white-space:nowrap;
}
.marquee span::after{content:'';width:9px;height:9px;background:var(--blood);border-radius:50%;flex:none}
.marquee span:nth-child(even){color:transparent;-webkit-text-stroke:1px rgba(244,240,232,.35)}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee--rev .marquee__track{animation-direction:reverse;animation-duration:40s}

/* ==========================================================================
   10. STATS
   ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--void);padding:clamp(26px,4vw,44px);position:relative;overflow:hidden}
.stat::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--blood);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.stat:hover::after{transform:scaleX(1)}
.stat__n{font-family:var(--display);font-size:clamp(42px,6vw,80px);line-height:1;letter-spacing:-.01em}
.stat__n em{font-style:normal;color:var(--blood);font-size:.52em;letter-spacing:0}
.stat__l{margin-top:10px;font-size:14px;color:var(--ash);max-width:24ch}
@media (max-width:760px){.stats{grid-template-columns:1fr}}

/* ==========================================================================
   11. GENERIC SECTION HEAD + GHOST WORD
   ========================================================================== */
.shead{max-width:66ch;margin-bottom:clamp(34px,4vw,54px)}
.shead--center{margin-left:auto;margin-right:auto;text-align:center}
.shead--center .eyebrow{justify-content:center}

/* ==========================================================================
   12. REALITY (sticky split)
   ========================================================================== */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,88px);align-items:start}
.split__sticky{position:sticky;top:calc(var(--header-h) + 40px)}
.reality p:not(.eyebrow){font-size:clamp(19px,2vw,25px);line-height:1.55;color:var(--bone);margin:0 0 30px;max-width:34ch;font-family:var(--serif)}
.reality h2 + p{margin-top:30px!important}
.reality p.small{font-family:var(--body);font-size:17px;line-height:1.7;color:var(--ash);max-width:52ch}
.reality b{color:var(--blood);font-weight:400}
/* pull quote */
.pull{
  border-left:2px solid var(--blood);padding:6px 0 6px 26px;margin:0;
  font-family:var(--serif);font-style:italic;font-size:clamp(22px,3vw,38px);line-height:1.3;
}
.pull cite{display:block;margin-top:14px;font:400 12px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ash);font-style:normal}

/* ==========================================================================
   13. THE BOOK SECTION
   ========================================================================== */
.speclist{list-style:none;margin:30px 0 34px;padding:0;display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.speclist li{
  background:var(--void);padding:18px 4px 18px 0;display:flex;gap:18px;align-items:baseline;
  transition:background .4s,padding-left .4s var(--ease);
}
.speclist li:hover{background:var(--ink);padding-left:16px}
.speclist b{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--blood);font-weight:400;flex:none}
.speclist__t{display:block;font-family:var(--heavy);font-weight:400;margin-bottom:4px}
.speclist__d{font-size:15px}

/* ==========================================================================
   16. AUDIENCE CHIPS
   ========================================================================== */
.chips{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0;padding:0;list-style:none}
.chips li{
  border:1px solid var(--line);border-radius:100px;padding:11px 20px;font-size:14px;color:var(--ash);
  transition:border-color .4s,color .4s,transform .4s var(--ease),background .4s;
}
.chips li:hover{border-color:var(--blood);color:var(--bone);transform:translateY(-3px);background:rgba(224,27,37,.08)}
.notfor{margin-top:34px;padding:18px 22px;border:1px dashed rgba(224,27,37,.35);border-radius:var(--r);color:var(--ash);font-size:14.5px;background:rgba(224,27,37,.04)}
.notfor b{color:var(--blood);font-weight:600}

/* ==========================================================================
   16b. BEKHAUF — the campaign poster, given a section of its own
   ========================================================================== */
.bekhauf{background:radial-gradient(70% 90% at 12% 40%,rgba(224,27,37,.10),transparent 62%),var(--void)}
.bekhauf__in{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,76px);align-items:center}
.bekhauf__art{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);position:relative}
.bekhauf__art img{width:100%;filter:contrast(1.05) saturate(.95);transition:transform 1.2s var(--ease)}
.bekhauf__art:hover img{transform:scale(1.04)}
.bekhauf__art::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,7,10,.65));pointer-events:none}
@media (max-width:860px){.bekhauf__in{grid-template-columns:1fr}.bekhauf__art{max-width:420px}}

/* ==========================================================================
   17. REVIEWS
   ========================================================================== */
.revrail{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.revrail__track{display:flex;gap:22px;width:max-content;animation:slide 60s linear infinite}
.revrail:hover .revrail__track{animation-play-state:paused}
.rev{
  width:min(84vw,400px);flex:none;background:var(--ink);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px;transition:border-color .4s,transform .4s var(--ease);
  display:flex;flex-direction:column;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;
}
.rev:hover{border-color:var(--line-hi)}
.rev__s{color:var(--brass);letter-spacing:.22em;font-size:13px}
.rev__t{margin:14px 0 12px}
.rev__q{font-size:14.8px;line-height:1.65;color:var(--ash);margin:0}
.rev__m{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-dim)}
.rev__m b{color:var(--bone);font-weight:400}
.verified{color:#3ecf8e;display:inline-flex;align-items:center;gap:5px}
.verified::before{content:'✓'}

/* ==========================================================================
   18. AUTHOR
   ========================================================================== */
.author__stats{display:flex;gap:40px;margin:28px 0 30px;flex-wrap:wrap}
.author__stats div b{display:block;font-family:var(--display);font-size:clamp(34px,4vw,52px);line-height:1;color:var(--blood)}
.author__stats div > span{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash)}

/* ==========================================================================
   20. SERVICES
   ========================================================================== */
.svcs{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.svc{
  border:1px solid var(--line);border-radius:18px;padding:clamp(26px,3.2vw,40px);position:relative;overflow:hidden;
  background:var(--void);transition:border-color .5s,background .5s;
}
.svc::before{
  content:'';position:absolute;width:340px;height:340px;border-radius:50%;pointer-events:none;
  left:var(--mx,50%);top:var(--my,50%);translate:-50% -50%;
  background:radial-gradient(circle,rgba(224,27,37,.14),transparent 62%);opacity:0;transition:opacity .45s;
}
.svc:hover{border-color:var(--line-hi)}
.svc:hover::before{opacity:1}
.svc__p{font-family:var(--display);font-size:clamp(30px,3.6vw,46px);line-height:1;margin:22px 0 6px;position:relative}
.svc__p span{font-family:var(--body);font-size:14px;color:var(--ash);letter-spacing:0}
.svc ul{list-style:none;margin:20px 0 28px;padding:0;display:grid;gap:10px;position:relative}
.svc li{font-size:14.5px;color:var(--ash);padding-left:22px;position:relative}
.svc li::before{content:'';position:absolute;left:0;top:9px;width:9px;height:1px;background:var(--blood)}
.svc > *{position:relative}
.plan__k{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ash)}
@media (max-width:820px){.svcs{grid-template-columns:1fr}}

/* ==========================================================================
   21. FAQ
   ========================================================================== */
.faq{border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;align-items:flex-start;gap:20px;text-align:left;padding:24px 0;
  font-family:var(--heavy);font-size:clamp(16px,1.8vw,20px);letter-spacing:-.01em;transition:color .35s;
}
.faq__q:hover{color:var(--blood)}
.faq__q i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--blood);letter-spacing:.1em;padding-top:6px;flex:none}
.faq__q em{
  margin-left:auto;flex:none;width:26px;height:26px;border:1px solid var(--line-hi);border-radius:50%;position:relative;
  transition:border-color .35s,transform .5s var(--ease);
}
.faq__q em::before,.faq__q em::after{content:'';position:absolute;top:50%;left:50%;translate:-50% -50%;background:currentColor;transition:transform .45s var(--ease)}
.faq__q em::before{width:11px;height:1px}
.faq__q em::after{width:1px;height:11px}
.faq__i.open .faq__q em{transform:rotate(180deg);border-color:var(--blood)}
.faq__i.open .faq__q em::after{transform:translate(-50%,-50%) scaleY(0)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.faq__i.open .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{margin:0 0 24px;padding-right:clamp(0px,8vw,120px);padding-left:32px;color:var(--ash);font-size:15.5px;line-height:1.7}

/* ==========================================================================
   22. NEWSLETTER + FORMS
   ========================================================================== */
.news{text-align:center;position:relative}
.news__perks{display:flex;justify-content:center;gap:clamp(18px,4vw,48px);flex-wrap:wrap;margin:26px 0 34px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.news__perks span{display:inline-flex;align-items:center;gap:9px}
.news__perks span::before{content:'';width:6px;height:6px;background:var(--blood);border-radius:50%}
form.inline{display:flex;gap:10px;max-width:520px;margin:0 auto;flex-wrap:wrap}
.field{
  flex:1 1 240px;background:var(--ink);border:1px solid var(--line);border-radius:100px;padding:15px 22px;
  color:var(--bone);font:inherit;font-size:15px;transition:border-color .35s,background .35s;
}
.field::placeholder{color:var(--ash-dim)}
.field:focus{outline:none;border-color:var(--blood);background:var(--ink-2)}
textarea.field,input.field--sq,select.field{border-radius:12px}
textarea.field{resize:vertical;min-height:130px;flex:1 1 100%}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.formgrid .full{grid-column:1/-1}
@media (max-width:640px){.formgrid{grid-template-columns:1fr}}
.finetext{font-size:12.5px;color:var(--ash-dim);margin-top:16px}
.notice{border:1px solid rgba(62,207,142,.4);background:rgba(62,207,142,.07);color:#a9f0cf;border-radius:12px;padding:14px 18px;margin-bottom:22px;font-size:14.5px}

/* ==========================================================================
   23. FINAL CTA + FOOTER
   ========================================================================== */
.ftr{background:var(--void);border-top:1px solid var(--line);padding:clamp(56px,7vw,84px) 0 30px}
.ftr__top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(28px,5vw,64px)}
.ftr h4{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ash-dim);margin:0 0 18px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ftr ul a{font-size:14.5px;color:var(--ash);transition:color .3s,padding-left .3s var(--ease)}
.ftr ul a:hover{color:var(--bone);padding-left:7px}
.ftr__blurb{color:var(--ash);font-size:14.5px;max-width:38ch;margin:16px 0 22px}
.social{display:flex;gap:10px}
.social a{
  width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
  transition:border-color .35s,background .35s,transform .35s var(--ease);color:var(--ash)
}
.social a:hover{border-color:var(--blood);background:rgba(224,27,37,.1);color:var(--bone);transform:translateY(-3px)}
.social svg{width:17px;height:17px;fill:currentColor}
.ftr__bot{margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ash-dim)}
@media (max-width:820px){.ftr__top{grid-template-columns:1fr 1fr}.ftr__brand{grid-column:1/-1}}

/* cookie bar */
.cookie{
  position:fixed;left:var(--gut);right:var(--gut);bottom:20px;z-index:8200;max-width:640px;margin:0 auto;
  background:rgba(16,16,23,.92);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:14px;
  padding:16px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  transform:translateY(160%);transition:transform .7s var(--ease);font-size:13.5px;color:var(--ash)
}
.cookie.show{transform:none}
.cookie .btn{margin-left:auto}

/* ==========================================================================
   24. BLOG
   ========================================================================== */
.pagehead{padding:calc(var(--header-h) + clamp(60px,9vw,120px)) 0 clamp(40px,5vw,64px);position:relative;overflow:hidden}
.pagehead .hero__grid{opacity:.3}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
@media (max-width:980px){.posts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.posts{grid-template-columns:1fr}}
.card{position:relative;display:flex;flex-direction:column}
.card__img{
  aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--ink);position:relative;border:1px solid var(--line)
}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s;filter:grayscale(.35) contrast(1.05)}
.card:hover .card__img img{transform:scale(1.07);filter:none}
.card__img::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--blood);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.card:hover .card__img::after{transform:scaleX(1)}
.card__k{margin:16px 0 9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--blood)}
.card__t{transition:color .35s}
.card:hover .card__t{color:var(--blood)}
.card__x{color:var(--ash);font-size:14.5px;margin:10px 0 0;line-height:1.6}
.card__m{margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim)}
.card a.stretch::after{content:'';position:absolute;inset:0}

.article{max-width:720px;margin:0 auto}
.article p{font-size:17.5px;line-height:1.78;color:#ddd8d0;margin:0 0 24px}
.article h2{font-family:var(--heavy);font-size:clamp(22px,2.6vw,30px);margin:44px 0 16px;letter-spacing:-.02em}
.article h3{font-family:var(--heavy);font-size:20px;margin:34px 0 12px}
.article ul,.article ol{margin:0 0 24px;padding-left:22px;color:#ddd8d0}
.article li{margin-bottom:10px;line-height:1.7}
.article blockquote{margin:32px 0;border-left:2px solid var(--blood);padding-left:24px;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,27px);line-height:1.4;color:var(--bone)}
.article a{color:var(--blood);border-bottom:1px solid rgba(224,27,37,.4)}
.article img{border-radius:var(--r);margin:28px 0}
.article strong{color:var(--bone)}
.article hr{border:0;height:1px;background:var(--line);margin:40px 0}

.pager{display:flex;gap:12px;justify-content:center;margin-top:56px}
.pager a,.pager span{padding:10px 16px;border:1px solid var(--line);border-radius:8px;font-size:14px;color:var(--ash);transition:.3s}
.pager a:hover{border-color:var(--blood);color:var(--bone)}
.pager .current{background:var(--blood);border-color:var(--blood);color:#fff}

/* generic page content (legal pages) */
.prose{max-width:760px}
.prose h2{font-family:var(--heavy);font-size:clamp(20px,2.4vw,27px);margin:40px 0 14px}
.prose h3{font-family:var(--heavy);font-size:18px;margin:28px 0 10px}
.prose p,.prose li{color:var(--ash);line-height:1.75}
.prose p{margin:0 0 20px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 22px}
.prose li{margin-bottom:9px}
.prose a{color:var(--blood)}
.prose strong{color:var(--bone)}

/* ==========================================================================
   25. UTILITIES
   ========================================================================== */
.center{text-align:center}
.mt-s{margin-top:18px}.mt-m{margin-top:30px}.mt-l{margin-top:48px}
.flexrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.flexrow--center{justify-content:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--blood);color:#fff;padding:12px 20px}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--blood);outline-offset:3px}

/* ==========================================================================
   26. ACTS — every page section that is also a stage of the 3D room
   ========================================================================== */
/* Media queries own the LAYOUT; the tier class (.ss-3d / .ss-static) owns the ENGINE,
   so every rule in this section is also the tier-3 layout. */
.act{position:relative;z-index:2;padding:clamp(80px,10vw,140px) 0}
.act__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,88px);align-items:center}
.act__in:not(:has(.flat)){grid-template-columns:minmax(0,1fr)}
.act__in:not(:has(.flat)) .act__copy{max-width:760px}
.act--r .act__in:has(.flat){grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.act__copy{min-width:0}
.act--exhibit{min-height:100svh;display:grid;align-items:center;padding:calc(var(--header-h) + 24px) 0 56px}
/* The hero must show all three stores without scrolling, down to a 1280x720 laptop. */
.act--exhibit .lede{max-width:50ch;font-size:clamp(16px,1.25vw,18.5px);line-height:1.6}
.exhibit__t{margin:0;font-size:clamp(46px,5.6vw,84px)}
.exhibit__t small{display:block;margin-top:10px;font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:.4em;line-height:1;color:var(--bone)}
.act--exhibit .hero__pub{margin-top:24px}
.act--exhibit .stores{grid-template-columns:1.05fr 1.25fr .95fr;max-width:640px;margin-top:22px}
.act--exhibit .stores .store--lead{grid-column:auto}
.act--exhibit .store{padding:11px 14px 11px 16px;column-gap:10px}
.act--exhibit .store__s{letter-spacing:.1em}
@media (max-width:1180px){.act--exhibit .stores{grid-template-columns:1fr 1fr}.act--exhibit .stores .store--lead{grid-column:1/-1}}
@media (max-height:760px) and (min-width:901px){.act--exhibit .hero__pub{display:none}.exhibit__t{font-size:clamp(44px,5vw,70px)}}
.act--buy{min-height:90svh;display:grid;align-items:center}
/* A grid item with margin:auto shrinks to fit its content, and the copy's % width then
   resolved against that — the hero column rendered 380px wide. */
.act--exhibit > .wrap,.act--buy > .wrap{width:100%}
.act--buy .h-xl{margin-bottom:22px}

/* the chapter index on the evidence-board act */
.chapters{list-style:none;margin:30px 0 8px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.chapters li{background:var(--void);padding:13px 16px;display:flex;gap:12px;align-items:baseline;font-size:14.5px;line-height:1.35;transition:background .35s}
.chapters li:hover{background:var(--ink)}
.chapters b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--blood);font-weight:400;flex:none}
@media (max-width:560px){.chapters{grid-template-columns:1fr}}

.stats--act{grid-template-columns:repeat(3,1fr);margin-top:34px}
.stats--act .stat{padding:22px 18px}
.stats--act .stat__n{font-size:clamp(34px,4vw,54px)}
.stats--act .stat__l{font-size:13px}
@media (max-width:760px){.stats--act{grid-template-columns:1fr}}
.reality p:not(.eyebrow){max-width:40ch}

/* tier-3 stand-ins for what the room shows in 3D */
.flat{margin:0;position:relative;display:grid;place-items:center}
.flat--book img{max-width:min(380px,100%);filter:drop-shadow(0 50px 70px rgba(0,0,0,.85)) drop-shadow(0 0 60px rgba(224,27,37,.14))}
.flat--back img{max-width:min(340px,100%);border-radius:4px;box-shadow:0 40px 70px -20px rgba(0,0,0,.9)}
.flat--poster{border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.flat--portrait{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);max-width:460px;justify-self:center;
  box-shadow:0 50px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(224,27,37,.12)}
.flat--portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;filter:contrast(1.04) saturate(.92)}
.flat--portrait::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,7,10,.92));pointer-events:none}
.flat--portrait figcaption{position:absolute;left:22px;right:22px;bottom:20px;z-index:1;display:grid;gap:4px}
.flat--portrait figcaption b{font-family:var(--display);font-size:clamp(26px,3vw,36px);font-weight:400;text-transform:uppercase;line-height:1}
.flat--portrait figcaption span{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ash)}
@media (max-width:900px){
  .act__in,.act--r .act__in:has(.flat){grid-template-columns:minmax(0,1fr)}
  .act--r .flat,.act .flat--book{order:-1}
  .flat--book img{max-width:240px}
  .flat--portrait{max-width:340px}
  .act--exhibit{padding-top:calc(var(--header-h) + 30px)}
}

/* ==========================================================================
   27. STORES — the three places to buy the book
   ========================================================================== */
/* Kindle leads on its own row; the two paperback stores share the next. */
.stores{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:28px 0 0;max-width:520px}
.stores .store--lead{grid-column:1/-1}
.store{
  position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:18px;
  padding:13px 20px 13px 22px;border-radius:14px;border:1px solid var(--line-hi);background:rgba(11,11,16,.72);
  min-height:58px;transition:border-color .35s,background .35s,transform .35s var(--ease);
}
.store__l{font-weight:700;font-size:15px;line-height:1.2}
.store__s{grid-column:1;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.store i{grid-column:2;grid-row:1/3;font-style:normal;color:var(--ash);transition:transform .4s var(--ease),color .3s}
.store:hover{border-color:var(--bone);background:rgba(244,240,232,.06);transform:translateY(-2px)}
.store:hover i{transform:translate(3px,-3px);color:var(--bone)}
.store--lead{background:var(--blood);border-color:var(--blood);color:#fff;box-shadow:0 14px 40px -14px var(--blood-glow)}
.store--lead .store__s,.store--lead i{color:rgba(255,255,255,.78)}
.store--lead:hover{background:#f0212c;border-color:#f0212c}
.stores--big{max-width:600px}
.stores--big .store{min-height:74px;padding:16px 22px 16px 24px}
.stores--big .store__l{font-size:17px}
@media (max-width:420px){.stores{grid-template-columns:1fr}}

/* ==========================================================================
   28. THE CASE FILE — the WebGL room under the copy (tiers 1-2)
   ========================================================================== */
#ss-canvas{display:none}
.ss-3d #ss-canvas{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;display:block;pointer-events:none}
.ss-3d body{background:#050507}
html.ss-3d{scroll-behavior:auto}
.ss-3d .flat{display:none}
.ss-3d .act__in,.ss-3d .act--r .act__in:has(.flat){grid-template-columns:minmax(0,1fr)}
.ss-3d .act__copy{width:min(580px,46%);max-width:none}
.ss-3d .act--exhibit .act__copy{width:min(660px,50%)}
.ss-3d .act--r .act__copy{margin-left:auto}
/* The room is the atmosphere. Animated full-screen overlays over a live canvas are the
   most expensive thing on the page, so only the static vignette stays. */
.ss-3d .grain,.ss-3d .scan,.ss-3d .prog{display:none}

/* Registered and NOT inherited: world.js writes it on each act every scrolled frame, and
   an inherited custom property would re-style the act's whole subtree on each write. */
@property --v{syntax:'<number>';inherits:false;initial-value:1}
.ss-3d .act{opacity:var(--v)}
.act:focus-within{opacity:1}

/* Legibility over lit 3D: a dark wash across the copy's half of the screen, fading out
   before the subject. A soft pool behind the copy was tried first and failed over bright
   paper (chapter cards, review notes) — reading must never depend on what is behind. */
.ss-3d .act::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,5,7,.93) 0%,rgba(5,5,7,.86) 36%,rgba(5,5,7,.45) 52%,rgba(5,5,7,0) 64%);
}
.ss-3d .act--r::before{background:linear-gradient(270deg,rgba(5,5,7,.93) 0%,rgba(5,5,7,.86) 36%,rgba(5,5,7,.45) 52%,rgba(5,5,7,0) 64%)}
.ss-3d .act--wide::before{background:rgba(5,5,7,.5)}
.ss-3d .act h1,.ss-3d .act h2,.ss-3d .act .lede,.ss-3d .act .eyebrow{text-shadow:0 1px 16px rgba(5,5,7,.9)}

/* Opaque grounds from the flat theme would cover the canvas. */
.ss-3d .marquee{background:rgba(5,5,7,.62)}
.ss-3d .stat,.ss-3d .speclist li,.ss-3d .chapters li{background:rgba(9,9,13,.74)}
.ss-3d .speclist li:hover,.ss-3d .chapters li:hover{background:rgba(22,22,31,.9)}
.ss-3d .svc{background:rgba(9,9,13,.82)}
.ss-3d .rev{background:rgba(14,14,20,.97)}
.ss-3d .faq{background:rgba(5,5,7,.55);padding:0 18px;border-radius:12px}
.ss-3d .bekhauf{background:none}
.ss-3d .news{background:linear-gradient(180deg,transparent,var(--void) 70%)}
.ss-3d .pagehead,.ss-3d .band--tight{position:relative;z-index:2}
.ss-3d main > .band,.ss-3d main > .pagehead,.ss-3d main > .hero{position:relative;z-index:2}
.ss-3d .ftr{position:relative;z-index:2}

/* Preloader: on 3D tiers the curtain waits for the first rendered frame (world.js adds
   .ss-ready and drives --p). A failed engine adds .ss-static, which drops these rules
   and lets the tier-3 timer run — the curtain can never strand the page. */
.ss-3d .loader,.ss-3d .loader__curtain{animation-delay:.25s;animation-play-state:paused}
.ss-3d.ss-ready .loader,.ss-3d.ss-ready .loader__curtain{animation-play-state:running}
.ss-3d .loader__bar i{width:calc(var(--p,0) * 100%);transition:width .5s var(--ease)}

/* ==========================================================================
   29. PHONES — the room shows through a window above each act's copy
   ========================================================================== */
@media (max-width:900px){
  .ss-3d .act__copy,.ss-3d .act--r .act__copy,.ss-3d .act--exhibit .act__copy{width:auto;margin-left:0}
  .ss-3d .act{--win:44svh;padding-top:var(--win)}
  .ss-3d .act--exhibit{--win:calc(var(--header-h) + 30svh);min-height:0;padding-bottom:44px}
  .ss-3d .act--wide{--win:34svh}
  /* the window stays clear; everything below it reads on near-black */
  .ss-3d .act::before,.ss-3d .act--r::before,.ss-3d .act--wide::before{
    background:linear-gradient(180deg,transparent calc(var(--win) - 80px),rgba(5,5,7,.9) var(--win),rgba(5,5,7,.92));
  }
  /* phone hero: stores in view without scrolling (390x844 and 360x740) */
  .exhibit__t{font-size:clamp(40px,12vw,56px)}
  .act--exhibit .lede{font-size:15.5px;line-height:1.55}
  .act--exhibit .stores{margin-top:16px}
  .act--exhibit .store{min-height:52px}
  .flat--book img{max-width:160px}
  /* tap targets >= 44px */
  .txtlink{display:inline-flex;align-items:center;min-height:44px}
  .ftr ul a{display:inline-flex;align-items:center;min-height:44px}
  .social a{width:44px;height:44px}
  .brand{min-height:44px}
}
/* short phones (360x740 and below): a smaller window keeps the paperback stores on screen */
@media (max-width:900px) and (max-height:760px){
  .ss-3d .act--exhibit{--win:calc(var(--header-h) + 23svh)}
  .act--exhibit .eyebrow{margin-bottom:12px}
  .act--exhibit .lede{font-size:15px;line-height:1.5;margin-top:10px}
}

/* ==========================================================================
   30. BOOK CALL-OUT ON POSTS — every field note leads back to the book
   ========================================================================== */
.bookcta{display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:center;padding:26px;border:1px solid var(--line);border-radius:18px;background:rgba(16,16,23,.92)}
.bookcta img{border-radius:4px;box-shadow:0 24px 40px -16px rgba(0,0,0,.9)}
.bookcta .h-md{margin:0;font-size:clamp(19px,2vw,24px)}
.bookcta .h-md a{color:var(--bone);border-bottom:1px solid var(--blood)}
.bookcta .stores{margin-top:18px}
.ss-3d .card__img{background:rgba(16,16,23,.9)}
@media (max-width:620px){.bookcta{grid-template-columns:1fr}.bookcta img{max-width:120px}}