/* Prevailing Truth · site styles
   World: storm slate, ash, one ember red, pale dawn light. */

:root{
  --canvas:#0d0f13;
  --panel:#15181e;
  --panel-2:#1c2028;
  --accent:#d2402c;
  --accent-hover:#e8573f;
  --accent-muted:rgba(210,64,44,.32);
  --dawn:#efe3c8;
  --text-primary:#ece8e1;
  --text-secondary:#a3a9b2;
  --rule:rgba(236,240,248,.13);        /* translucent so rules read on every shade of the dark-to-blue arc */
  --rule-strong:rgba(236,240,248,.36);

  --f-display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --f-body:"Newsreader",Georgia,serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --nav-h:78px;
  --gutter:clamp(18px,5vw,72px);
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;background:var(--canvas)}
body{
  margin:0;overflow-x:hidden;overflow-x:clip;
  background:var(--canvas);color:var(--text-primary);
  font-family:var(--f-body);font-size:clamp(17px,1.05vw + 10px,20px);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  animation:pageIn .9s var(--ease-out) both;
}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--accent);color:#fff;padding:10px 16px;font-family:var(--f-mono);font-size:14px;text-decoration:none;transition:top .3s var(--ease-out)}
.skip:focus{top:12px}

/* ---------- The environment layer (fixed, behind everything) ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none}
.env canvas{position:absolute;inset:0;width:100%;height:100%}
.env::before{ /* slow storm glow drift */
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(40% 35% at 20% 30%,rgba(60,72,96,.22),transparent 70%),
    radial-gradient(35% 30% at 80% 70%,rgba(210,64,44,.07),transparent 70%);
  animation:envDrift 80s var(--ease-io) infinite alternate;animation-delay:-23s;
}
@keyframes envDrift{to{transform:translate3d(6%,-4%,0) scale(1.08)}}
.grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);
  display:flex;align-items:center;gap:28px;padding:0 var(--gutter);
  background:linear-gradient(to bottom,rgba(10,12,16,.82),rgba(10,12,16,0));
  transition:background .5s var(--ease-out),backdrop-filter .5s var(--ease-out);
}
.nav.solid{background:rgba(12,14,18,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--rule)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
/* the full Prevailing Truth logo, large and bright, with the tagline beside it */
.brand img{height:58px;width:auto;display:block;filter:drop-shadow(0 0 14px rgba(239,227,200,.28)) drop-shadow(0 2px 6px rgba(0,0,0,.6));transition:filter .4s var(--ease-out),transform .4s var(--ease-out)}
.brand:hover img{transform:scale(1.03);filter:drop-shadow(0 0 20px rgba(239,227,200,.45)) drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.brand-tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;line-height:1.5;color:var(--text-secondary);font-weight:500;
  padding-left:14px;border-left:1px solid var(--rule-strong)}
.nav ul{display:flex;gap:26px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--text-secondary);transition:color .3s var(--ease-out);position:relative;padding:6px 0}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.nav ul a:hover{color:var(--text-primary)}
.nav ul a:hover::after{transform:scaleX(1)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--rule-strong);color:var(--text-primary);font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;padding:9px 14px;cursor:pointer;transition:border-color .3s var(--ease-out)}
.menu-btn:hover{border-color:var(--text-primary)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-mono);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 24px;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color .35s var(--ease-out),border-color .35s var(--ease-out),color .35s var(--ease-out),transform .35s var(--ease-out);
  text-shadow:none;
}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-ghost{background:rgba(12,14,18,.35);border-color:rgba(236,232,225,.55);color:var(--text-primary);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--text-primary);background:rgba(236,232,225,.08)}
.btn-sm{padding:11px 16px;font-size:12px}
.btn .arrow{transition:transform .35s var(--ease-out)}
.btn:hover .arrow{transform:translateX(4px)}
@media (pointer:coarse){.btn{min-height:44px}}

/* ---------- Shared type ---------- */
.kicker{font-family:var(--f-mono);font-weight:500;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-secondary);display:flex;align-items:center;gap:14px}
.kicker .tick{width:8px;height:8px;background:var(--accent);flex:none}
.h-display{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:.92;margin:0}
.h2{font-size:clamp(44px,6.2vw,96px);max-width:16ch}
.h2.h2-lines{max-width:none;font-size:clamp(34px,5.6vw,96px)}   /* set line breaks: each line stays whole */
.lede{font-size:clamp(19px,1.3vw + 8px,23px);color:var(--text-secondary);max-width:46ch;margin:18px 0 0}
.verse{font-style:italic;color:var(--dawn)}
.ref{font-family:var(--f-mono);font-style:normal;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary)}

.section{position:relative;z-index:2;padding:clamp(96px,13vw,180px) var(--gutter)}
.section-head{display:grid;gap:18px;margin-bottom:clamp(40px,5vw,72px)}
.rule-draw{height:2px;background:linear-gradient(90deg,var(--rule-strong) 0%,var(--rule-strong) 92%,var(--accent) 100%);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.7,0,.2,1)}
.in .rule-draw,.rule-draw.drawn{transform:scaleX(1)}

/* reveal choreography (stagger retired after entrance) */
.reveal .rv{opacity:0;transform:translateY(40px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--i,0) * 65ms)}
.reveal.in .rv{opacity:1;transform:none}
.reveal.in.settled .rv{transition-delay:0s}

/* =====================================================================
   HERO · the scroll-scrubbed descent
   ===================================================================== */
.hero{position:relative;z-index:3;height:1300vh;background:var(--canvas)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.poster,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
.stage video{opacity:0;transition:opacity 1.2s var(--ease-out);will-change:transform;transform:translateZ(0)}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse 120% 90% at 50% 45%,rgba(8,10,16,0) 35%,rgba(8,10,16,.62) 100%),
  linear-gradient(to bottom,rgba(8,10,16,.55),rgba(8,10,16,0) 22%,rgba(8,10,16,0) 70%,rgba(8,10,16,.7))}

/* loading ring */
.ring{position:absolute;right:var(--gutter);bottom:96px;width:44px;height:44px;color:var(--text-primary);opacity:.8;transition:opacity .8s var(--ease-out)}
.ring circle.track{stroke:rgba(236,232,225,.15)}
.ring circle.bar{transform:rotate(-90deg);transform-origin:24px 24px;transition:stroke-dashoffset .2s linear}
.stage.video-ready .ring{opacity:0}
.cue{position:absolute;right:var(--gutter);bottom:100px;font-family:var(--f-mono);font-size:11px;letter-spacing:.24em;color:var(--text-secondary);display:flex;flex-direction:column;align-items:center;gap:10px;text-shadow:var(--tshadow)}
.cue i{display:block;width:1px;height:42px;background:linear-gradient(var(--text-secondary),transparent);animation:cue 2.6s var(--ease-io) infinite;animation-delay:-.8s;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* caption bands */
.band{position:absolute;opacity:0;text-shadow:var(--tshadow);pointer-events:none;will-change:opacity}
.band.live{pointer-events:auto}
.band::before{content:"";position:absolute;inset:-28% -22%;z-index:-1;pointer-events:none;
  opacity:calc(.25 + .75 * var(--k,1));
  background:radial-gradient(ellipse 70% 62% at 42% 50%,rgba(5,6,10,var(--sa,.66)) 0%,rgba(5,6,10,calc(var(--sa,.66) * .66)) 46%,rgba(5,6,10,0) 76%)}
.band .kicker{color:var(--text-primary);margin-bottom:20px}
.band h1,.band h2{font-family:var(--f-display);font-weight:800;text-transform:uppercase;line-height:.9;margin:0;letter-spacing:.005em}
.band .sub{font-size:clamp(19px,1.2vw + 9px,25px);line-height:1.45;margin:22px 0 0;max-width:34ch;color:var(--text-primary);
  opacity:clamp(0,(var(--k,0) - .45) * 2.4,1);transform:translateY(calc((1 - clamp(0,(var(--k,0) - .45) * 2.4,1)) * 12px))}

.band-low{left:var(--gutter);bottom:clamp(120px,19vh,210px);max-width:min(760px,62vw)}
.band-low h1,.band-low h2{font-size:clamp(56px,7.4vw,128px)}
.band-low h1{max-width:9ch}
.band-low h2{max-width:13ch}

/* band 5: two-sided, center lane clear */
.band-split{inset:0}
.band-split::before{display:none}
.band-split .half{position:absolute;top:50%;max-width:min(560px,36vw)}
.band-split .half::before{content:"";position:absolute;inset:-40% -30%;z-index:-1;opacity:calc(.25 + .75 * var(--k,1));
  background:radial-gradient(ellipse 66% 58% at 50% 50%,rgba(5,6,10,.7) 0%,rgba(5,6,10,.46) 46%,rgba(5,6,10,0) 76%)}
.band-split .half-l{left:var(--gutter);transform:translateY(-70%)}
.band-split .half-r{right:var(--gutter);text-align:right;transform:translateY(-10%)}
.band-split h2{font-size:clamp(52px,6.6vw,116px)}

/* band 6: settle, upper-left over the dark storm sky */
.band-settle{left:var(--gutter);top:calc(var(--nav-h) + clamp(24px,7vh,90px));max-width:min(680px,46vw)}
.band-settle::before{background:radial-gradient(ellipse 72% 66% at 40% 46%,rgba(5,6,10,.62) 0%,rgba(5,6,10,.4) 48%,rgba(5,6,10,0) 76%)}
.band-settle .mark{width:clamp(70px,6vw,96px);margin:0 0 14px -6px;opacity:clamp(0,var(--k,0) * 3,1);filter:drop-shadow(0 4px 18px rgba(5,5,10,.8))}
.band-settle h1{font-size:clamp(64px,8vw,138px)}
.band-settle .sub{max-width:30ch;--ks:clamp(0,(var(--k,0) - .62) * 4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks)) * 14px))}
.band-settle .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;--kb:clamp(0,(var(--k,0) - .78) * 5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb)) * 14px))}

/* split text: word and character spans */
.split .w{display:inline-block;white-space:nowrap}
.split .c{display:inline-block}

/* (d) word-punch with overshoot: lightning strikes */
.fx-punch .w{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1)) * var(--ss,3.2),1);
  opacity:var(--kc);transform:scale(calc(.6 + (.4 + var(--ov,.12)) * var(--kc) - var(--ov,.12) * var(--ks)));transform-origin:50% 80%}
.fx-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}

/* (b) grid snap-align: riders crossing */
.fx-snap .c{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.6,1);opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)))}

/* (c) blur-to-sharp: cloud clearing */
.fx-blur .stack{display:grid}
.fx-blur .stack > *{grid-area:1/1}
.fx-blur .soft{filter:blur(10px);opacity:calc(1 - var(--k,0));transform:scale(1.04)}
.fx-blur .sharp{opacity:var(--k,0)}

/* (f) drift-down: ash falling */
.fx-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * -26px))}

/* (h) halves parting: pages opening */
.fx-part .half-l h2{--kc:clamp(0,var(--k,0) * 2.2,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc)) * 70px))}
.fx-part .half-r h2{--kc:clamp(0,(var(--k,0) - .38) * 2.2,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc)) * -70px))}
.fx-part .half-r h2 em{font-style:normal;color:var(--dawn)}

/* (e) word-by-word rise into a staged settle */
.fx-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * 30px))}

/* ---------- The signature: headline-to-verse chyron ---------- */
.chyron{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:stretch;height:56px;
  background:rgba(10,12,16,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--rule)}
.chyron .bug{flex:none;display:flex;align-items:center;gap:10px;padding:0 20px;background:var(--accent);color:#fff;font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:.12em}
.chyron .bug i{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 2.4s var(--ease-io) infinite;animation-delay:-.6s}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.chyron .clock{flex:none;display:flex;align-items:center;padding:0 18px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.14em;color:var(--text-secondary);border-right:1px solid var(--rule)}
.chyron .slot{position:relative;flex:1;perspective:700px;overflow:hidden}
.chyron .face{position:absolute;inset:0;display:flex;align-items:center;padding:0 22px;gap:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  backface-visibility:hidden;transition:transform .9s var(--ease-out),opacity .9s var(--ease-out);transform-origin:50% 50% -28px}
.chyron .topic{font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:.08em;text-transform:uppercase}
.chyron .topic small{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.2em;color:var(--text-secondary);margin-right:14px}
.chyron .verse-face{font-family:var(--f-body);font-style:italic;font-size:18px;color:var(--dawn)}
.chyron .verse-face .ref{margin-right:14px;color:var(--text-secondary)}
.chyron .face.topic-face{transform:rotateX(0);opacity:1}
.chyron .face.verse-face{transform:rotateX(-90deg);opacity:0}
.chyron.flipped .face.topic-face{transform:rotateX(90deg);opacity:0}
.chyron.flipped .face.verse-face{transform:rotateX(0);opacity:1}
.chyron.swap .face{transition:none}

/* static hero copy (phones, reduced motion) */
.static-copy{display:none}

/* =====================================================================
   S1 · This week's briefing
   ===================================================================== */
.briefing{background:none;padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(40px,5vw,80px)}   /* canvas shows through, so the blue blend starts right as the story leaves the opening film */
.watch.section{padding-top:clamp(56px,7vw,110px)}
.mag{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(20px,2.4vw,36px)}
.story{position:relative;display:block;text-decoration:none;background:var(--panel);overflow:hidden;isolation:isolate}
.story .img{position:relative;overflow:hidden;aspect-ratio:16/10}
.story .img img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.4s var(--ease-out),opacity .6s}
.story:hover .img img{transform:scale(1.07)}
.story .img::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 0 46%,rgba(236,232,225,.07) 50%,transparent 54%);transform:translateY(-100%);transition:transform 1.2s var(--ease-out)}
.story:hover .img::after{transform:translateY(100%)}
.story .body{padding:22px 24px 26px}
.story .meta{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary);display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
.story .meta > *{white-space:nowrap}
.story .meta b{color:var(--accent);font-weight:500}
.story h3{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,2.2vw,36px);line-height:1;text-transform:uppercase;margin:12px 0 10px;letter-spacing:.01em;transition:color .3s var(--ease-out)}
.story:hover h3{color:var(--dawn)}
.story p{margin:0;color:var(--text-secondary);font-size:17px;line-height:1.55}
.story.lead .img{aspect-ratio:16/9}
.story.lead h3{font-size:clamp(38px,3.6vw,60px)}
.story.lead p{font-size:19px;max-width:52ch}
.mag .side{display:grid;gap:clamp(20px,2.4vw,36px)}
.mag .side .story{display:grid;grid-template-columns:42% 1fr}
.mag .side .story .img{aspect-ratio:auto;height:100%}
.mag .side .story .body{padding:18px 20px}
.mag .side .story h3{font-size:clamp(22px,1.6vw,28px)}
.mag .side .story p{font-size:15.5px}
.more{display:inline-flex;margin-top:40px;font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--text-primary);gap:10px;border-bottom:1px solid var(--accent-muted);padding-bottom:6px;transition:border-color .3s var(--ease-out)}
.more:hover{border-color:var(--accent)}

/* =====================================================================
   S2 · The Four Horsemen (sticky horizontal)
   ===================================================================== */
.riders{position:relative;z-index:2;height:520vh}
.riders .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column}
.riders .intro{position:relative;z-index:3;padding:0 var(--gutter);max-width:720px}
.riders .intro h2{font-size:clamp(72px,9vw,150px)}
.riders .intro p{color:var(--text-secondary);margin:18px 0 0;max-width:36ch;font-size:clamp(19px,1.3vw + 6px,24px)}
.riders .intro .go{font-family:var(--f-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin-top:34px;color:var(--text-primary)}
.riders .intro .go span{display:inline-block;color:var(--accent);animation:nudge 2.4s var(--ease-io) infinite;animation-delay:-.4s}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
.panel.p-intro{align-items:center}
.panel .num{max-width:none;white-space:nowrap}
.track{display:flex;height:100%;will-change:transform}
.panel{position:relative;flex:none;width:100vw;height:100%;overflow:hidden;display:flex;align-items:flex-end}
.panel:first-child{width:62vw}
.panel .bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.08)}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,14,.86) 0%,rgba(8,10,14,.45) 48%,rgba(8,10,14,.1) 100%),linear-gradient(to top,rgba(8,10,14,.85),transparent 50%)}
.panel .copy{position:relative;z-index:2;padding:0 var(--gutter) clamp(70px,13vh,130px);max-width:720px;text-shadow:var(--tshadow)}
.panel .num{font-family:var(--f-mono);font-size:12px;letter-spacing:.24em;color:var(--text-secondary);display:flex;gap:14px;align-items:center}
.panel .num i{display:block;width:34px;height:3px;background:var(--hue,var(--accent))}
.panel h3{font-family:var(--f-display);font-weight:800;font-size:clamp(84px,12vw,200px);line-height:.85;text-transform:uppercase;margin:16px 0 18px;letter-spacing:-.005em}
.panel p{margin:0;font-size:clamp(19px,1.3vw + 6px,24px);max-width:30ch}
.panel .ref{display:block;margin-top:18px}
.panel.p-white{--hue:#e9e6df}
.panel.p-red{--hue:#d2402c}
.panel.p-black{--hue:#55595f}
.panel.p-pale{--hue:#9bab9c}
.panel.p-dawn{--hue:var(--dawn)}
.panel.p-black{justify-content:flex-end}
.panel.p-black .copy{text-align:right}
.panel.p-black .copy p{margin-left:auto}
.panel.p-black .num{justify-content:flex-end}
.panel.p-black::after{background:linear-gradient(270deg,rgba(8,10,14,.86) 0%,rgba(8,10,14,.45) 48%,rgba(8,10,14,.1) 100%),linear-gradient(to top,rgba(8,10,14,.85),transparent 50%)}
.panel.p-dawn::after{background:linear-gradient(90deg,rgba(8,10,14,.82),rgba(8,10,14,.25) 60%,rgba(8,10,14,0)),linear-gradient(to top,rgba(8,10,14,.75),transparent 55%)}
.panel.p-dawn h3{font-size:clamp(60px,7.4vw,124px);color:var(--dawn)}
.panel.p-dawn blockquote{margin:0;font-size:clamp(22px,1.6vw + 6px,30px);line-height:1.4;font-style:italic;max-width:30ch}
.panel.p-dawn .more{margin-top:28px}
.panel.p-intro{background:radial-gradient(70% 70% at 30% 60%,rgba(28,32,40,.9),var(--canvas))}
.panel.p-intro::after{display:none}
.riders .progress{position:absolute;left:var(--gutter);right:var(--gutter);bottom:34px;height:2px;background:var(--rule);z-index:4}
.riders .progress i{position:absolute;inset:0;background:var(--text-primary);transform:scaleX(0);transform-origin:left}

/* =====================================================================
   S3 · Watch (video rails)
   ===================================================================== */
.watch .rail{margin-top:clamp(36px,4vw,56px)}
.rail-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:18px}
.rail-head h3{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,2vw,32px);text-transform:uppercase;margin:0;letter-spacing:.03em}
.rail-head span{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;color:var(--text-secondary);text-transform:uppercase}
.cards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
.vcard{scroll-snap-align:start;background:none;border:0;padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer;display:block}
.vcard .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--panel)}
.vcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out),filter .6s var(--ease-out);filter:saturate(.85)}
.vcard:hover .thumb img{transform:scale(1.06);filter:saturate(1)}
.vcard .play{position:absolute;left:16px;bottom:16px;width:52px;height:52px;border-radius:50%;background:rgba(10,12,16,.7);border:1px solid rgba(236,232,225,.5);display:grid;place-items:center;transition:background-color .35s var(--ease-out),transform .35s var(--ease-out)}
.vcard:hover .play{background:var(--accent);transform:scale(1.06)}
.vcard .play::before{content:"";margin-left:4px;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.vcard .len{position:absolute;right:12px;bottom:12px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;background:rgba(10,12,16,.82);padding:4px 8px}
.vcard .soon{position:absolute;top:12px;left:12px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;background:rgba(10,12,16,.82);padding:5px 8px;color:var(--text-secondary)}
.vcard h4{font-family:var(--f-display);font-weight:700;font-size:23px;text-transform:uppercase;line-height:1.02;margin:14px 0 6px;letter-spacing:.02em;transition:color .3s var(--ease-out)}
.vcard:hover h4{color:var(--dawn)}
.vcard .tag{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.vcard iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* =====================================================================
   S4 · Open the Book (the interactive moment)
   ===================================================================== */
.open{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate}
.open .film{position:absolute;inset:0;z-index:-2;overflow:hidden}
.open{place-items:start center;padding-top:calc(var(--nav-h) + clamp(40px,8vh,90px))}
.open .inner > .kicker,.open .inner > h2{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.open.done .inner > .kicker,.open.done .inner > h2{opacity:0;transform:translateY(-16px)}
.open .result{position:absolute;left:50%;top:0;width:min(30ch,90vw);margin-left:calc(min(30ch,90vw) / -2);pointer-events:none}
.open.done .result{pointer-events:auto}
.open.done .book-btn,.open.done .hint{opacity:0;pointer-events:none;transition:opacity .8s var(--ease-out)}
.open .film video{object-position:50% 90%}
.open .film video{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.12 - var(--p,0) * .1));filter:brightness(calc(.42 + var(--p,0) * .5)) saturate(calc(.6 + var(--p,0) * .5));transition:filter .2s linear}
.open .film-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(var(--canvas),transparent 24%,transparent 76%,var(--canvas)),
  linear-gradient(rgba(5,8,30,.55),rgba(5,8,30,.2) 30%,rgba(5,8,30,.15) 55%,rgba(5,8,30,.6)),
  radial-gradient(70% 60% at 50% 50%,transparent,rgba(5,8,30,calc(.6 - var(--p,0) * .45)))}
.open .noise{position:absolute;inset:0;pointer-events:none;overflow:hidden}
@media (max-width:900px){.open .noise span{font-size:16px!important}}
.open .noise span{position:absolute;font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);
  opacity:calc((1 - var(--p,0)) * var(--o,.3));white-space:nowrap;animation:flicker var(--d,5s) steps(2) infinite;animation-delay:var(--dl,-1s)}
@keyframes flicker{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
.open .inner{position:relative;z-index:2;display:grid;justify-items:center;gap:18px;max-width:900px;text-shadow:var(--tshadow)}
.open h2{font-size:clamp(52px,7vw,112px)}
.open .hint{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-primary)}
.book-btn{position:relative;margin:clamp(14px,3vh,34px) 0 4px;width:132px;height:132px;border-radius:50%;background:rgba(13,15,19,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:0;padding:0;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform .5s var(--ease-out),background-color .5s var(--ease-out)}
.book-btn::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(239,227,200,.35);animation:pulse 2.8s var(--ease-out) infinite;animation-delay:-.7s}
@keyframes pulse{0%{transform:scale(.86);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.book-btn:active{transform:scale(.95)}
.book-btn svg{width:100%;height:100%;overflow:visible}
.book-btn .ring-bg{fill:none;stroke:rgba(236,232,225,.22);stroke-width:2}
.book-btn .ring-fg{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:calc(339.3 - 339.3 * var(--p,0));transform:rotate(-90deg);transform-origin:60px 60px}
.open.done .book-btn .ring-fg{stroke:var(--dawn)}
.open.done .book-btn::before{animation:none;opacity:0}
.book-btn .mini{transform-origin:60px 70px;transform:scale(calc(1 + var(--p,0) * .12))}
.open .result{max-width:30ch;opacity:0;transform:translateY(18px);transition:opacity 1.2s var(--ease-out),transform 1.2s var(--ease-out)}
.open .result blockquote{margin:0;font-size:clamp(26px,2.2vw + 8px,40px);line-height:1.3;font-style:italic;color:var(--dawn)}
.open .result .ref{display:block;margin-top:16px}
.open .result .more{opacity:0;transition:opacity 1s var(--ease-out) .6s}
.open.done .result,.open.done .result .more{opacity:1;transform:none}
.open.done .hint{opacity:0}
.open .hint{transition:opacity .6s var(--ease-out)}

/* =====================================================================
   S5 · How we handle prophecy
   ===================================================================== */
.approach{border-top:1px solid var(--rule)}
.approach .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule-strong)}
.approach .pt{padding:34px 28px 10px 0;border-right:1px solid var(--rule)}
.approach .pt + .pt{padding-left:28px}
.approach .pt:last-child{border-right:0}
.approach .pt b{display:block;font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.2em;color:var(--accent)}
.approach .pt h3{font-family:var(--f-display);font-weight:800;font-size:clamp(34px,2.8vw,46px);line-height:.95;text-transform:uppercase;margin:16px 0 14px}
.approach .pt p{margin:0;color:var(--text-secondary);max-width:32ch}
/* the two logos, big and centered, over one bold line */
.approach .who{margin-top:clamp(64px,8vw,110px);display:grid;justify-items:center;gap:clamp(22px,3vw,40px);text-align:center}
.who-logos{display:flex;align-items:center;justify-content:center;gap:clamp(22px,5vw,72px)}
.who-logos img{display:block;width:clamp(120px,17vw,240px);height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,20,.45))}
.who-logos img.pt{width:clamp(140px,21vw,300px)}   /* the wide wordmark, sized to carry the same weight as the round emblem */
.who-logos a{display:block;border-radius:50%;transition:transform .5s var(--ease-out)}
.who-logos a:hover{transform:scale(1.04)}
.who-divider{width:1px;height:clamp(90px,12vw,180px);background:linear-gradient(transparent,var(--rule-strong),transparent)}
.who-line{margin:0;font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;line-height:1.1;
  white-space:nowrap;font-size:min(32px,2.75vw);color:var(--text-primary)}
@media (max-width:720px){.who-line{letter-spacing:0;font-size:3.05vw}}   /* tighter tracking buys a little size so it still fits one line */

/* =====================================================================
   S6 · Viewer Mail
   ===================================================================== */
.mail{background:none}
.mail .qa{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.qcard{background:var(--panel);padding:30px 28px;position:relative;border-top:3px solid var(--rule-strong);transition:border-color .4s var(--ease-out),transform .5s var(--ease-out)}
.qcard:hover{border-color:var(--accent);transform:translateY(-3px)}
.qcard .from{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary)}
.qcard h3{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,2.1vw,34px);line-height:1;text-transform:uppercase;margin:14px 0 14px}
.qcard p{margin:0;color:var(--text-secondary);font-size:17px}
.comments{margin-top:56px;background:rgba(0,0,0,.16);border:1px solid var(--rule);padding:clamp(24px,3vw,40px)}
.comments h3{font-family:var(--f-display);font-weight:700;font-size:30px;text-transform:uppercase;margin:0 0 6px}
.comments p{margin:0 0 22px;color:var(--text-secondary)}
.comment-shell{display:grid;gap:12px}
.comment-shell .fake{height:54px;border:1px solid var(--rule);background:var(--panel);display:flex;align-items:center;padding:0 18px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;color:var(--text-secondary)}

/* =====================================================================
   S7 · FAQ
   ===================================================================== */
.faq .list{border-top:1px solid var(--rule-strong);max-width:980px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:26px 0;font-family:var(--f-display);font-weight:700;font-size:clamp(26px,2.2vw,36px);text-transform:uppercase;line-height:1.05;transition:color .3s var(--ease-out)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--dawn)}
.faq summary i{flex:none;position:relative;width:16px;height:16px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--accent);transition:transform .45s var(--ease-out)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq .ans{overflow:hidden}
.faq .ans p{margin:0 0 28px;color:var(--text-secondary);max-width:62ch}

/* =====================================================================
   S8 · Subscribe
   ===================================================================== */
.subscribe{min-height:92vh;display:grid;align-items:center;overflow:hidden}
.subscribe .bg{position:absolute;inset:0;background-size:cover;background-position:center 60%;opacity:.55}
.subscribe .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--canvas) 0%,rgba(13,15,19,.86) 45%,rgba(13,15,19,.35) 100%),linear-gradient(var(--canvas),transparent 25%,transparent 75%,var(--canvas))}
.subscribe .inner{position:relative;z-index:2;max-width:640px}
.subscribe h2{font-size:clamp(56px,7.4vw,120px)}
.form{margin-top:36px;display:grid;gap:14px;max-width:560px}
.form .row{display:grid;grid-template-columns:1fr 1.3fr;gap:12px}
.field{display:grid;gap:8px}
.field label{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
.field input{background:rgba(13,15,19,.75);border:1px solid var(--rule-strong);color:var(--text-primary);font:inherit;font-size:18px;padding:14px 16px;transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out);border-radius:0}
.field input::placeholder{color:#727985}
.field input:focus{outline:none;border-color:var(--dawn);background:rgba(13,15,19,.95)}
.form .btn{justify-self:start;margin-top:6px}
.form .micro{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;color:var(--text-secondary);margin:4px 0 0}
.form .err{color:#ff8a78;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.06em;min-height:1.2em;margin:0}
.success{display:none;margin-top:36px;padding:26px 28px;border-left:3px solid var(--dawn);background:rgba(13,15,19,.75);max-width:560px}
.success h3{font-family:var(--f-display);font-weight:800;font-size:40px;text-transform:uppercase;margin:0 0 6px;color:var(--dawn)}
.success p{margin:0;color:var(--text-secondary)}
.subscribe.sent .form{display:none}
.subscribe.sent .success{display:block;animation:rise .9s var(--ease-out) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* =====================================================================
   Footer
   ===================================================================== */
.foot{position:relative;z-index:2;padding:70px var(--gutter) 40px;border-top:1px solid var(--rule);background:#0b0d10}
.foot .top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;align-items:start}
.foot .logo{width:120px}
.foot .tag{margin:12px 0 0;color:var(--text-secondary);font-style:italic}
.foot h4{font-family:var(--f-mono);font-weight:500;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot ul a{text-decoration:none;color:var(--text-primary);transition:color .3s var(--ease-out)}
.foot ul a:hover{color:var(--dawn)}
.foot .base{margin-top:56px;padding-top:22px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;color:var(--text-secondary)}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:1100px){
  .nav ul{display:none}
  .menu-btn{display:inline-flex}
  /* "menu-open", not "open": the Open the Book section already owns .open */
  .nav.menu-open ul{display:grid;position:absolute;top:var(--nav-h);left:0;right:0;gap:0;padding:8px var(--gutter) 20px;background:rgba(12,14,18,.97);border-bottom:1px solid var(--rule)}
  .nav.menu-open ul a{display:block;padding:14px 0;font-size:14px}
  .nav .btn-nav{display:none}
  .mag{grid-template-columns:1fr}
  .mail .qa{grid-template-columns:1fr}
  .approach .grid{grid-template-columns:1fr}
  .approach .pt,.approach .pt + .pt{padding:30px 0;border-right:0;border-bottom:1px solid var(--rule)}
  .foot .top{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .open .noise span:nth-child(2n){display:none}
  .open .noise span{--o:.14!important}
}
/* Phones and upright tablets: the same scroll-driven film, with the captions laid out for a tall screen */
@media (max-width:720px), (orientation: portrait) and (max-width:1100px){
  .band-low{left:var(--gutter);right:var(--gutter);bottom:clamp(110px,16vh,190px);max-width:none}
  .band-low h1,.band-low h2{font-size:clamp(40px,11.5vw,104px)}
  .band-low h1{max-width:9ch}
  .band-low h2{max-width:12ch}
  .band .sub{font-size:clamp(17px,2.6vw,24px);max-width:30ch}
  .band-split .half{max-width:none;left:var(--gutter);right:var(--gutter)}
  .band-split .half-l{top:26%;transform:none}
  .band-split .half-r{top:auto;bottom:24%;transform:none;text-align:right}
  .band-split h2{font-size:clamp(40px,11vw,96px)}
  .band-settle{left:var(--gutter);right:var(--gutter);max-width:none;top:calc(var(--nav-h) + 16px)}
  .band-settle h1{font-size:clamp(48px,14vw,120px)}
  .band-settle .sub{max-width:28ch}
  /* .kingdom prefix: these must outrank the desktop Kingdom rules that come later in this file */
  .kingdom .kband{max-width:none;right:var(--gutter)}
  .kingdom .kband.settle{margin-left:0;padding:22px 22px 24px}
  .kingdom .kband blockquote{max-width:none}
  .kingdom .k-poster{background-image:url("../img/kingdom-poster-m.jpg")}
}
/* Very short screens (a phone held sideways): a slimmer top bar and compact captions so nothing runs off */
@media (orientation: landscape) and (max-height:560px){
  :root{--nav-h:60px}
  .brand img{height:42px}
  .band-low{bottom:clamp(64px,14vh,90px)}
  .band-low h1,.band-low h2{font-size:clamp(34px,11vh,60px)}
  .band .sub{font-size:15px;margin-top:10px}
  .band-split h2{font-size:clamp(32px,10vh,56px)}
  .band-settle{top:calc(var(--nav-h) + 8px)}
  .band-settle .mark{display:none}
  .band-settle h1{font-size:clamp(34px,12vh,64px)}
  .band-settle .sub{font-size:14px;margin-top:8px}
  .band-settle .ctas{margin-top:12px}
  .band-settle .ctas .btn{padding:10px 14px;font-size:11.5px}
  .chyron{height:44px}
  .kingdom .kband{top:calc(var(--nav-h) + 8px)}
  .kingdom .kband h2{font-size:clamp(34px,11vh,60px)}
  .kingdom .kband blockquote{font-size:clamp(18px,5vh,26px)}
  .kingdom .kband .sub{font-size:14px;margin-top:8px}
}
@media (max-width:720px){
  .band-settle .ctas .btn{padding:13px 16px}
  .panel:not(.p-intro){display:block;min-height:0!important}
  .panel .bg{position:relative!important;aspect-ratio:4/3;transform:none}
  .panel .bg::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(rgba(13,15,19,0),var(--canvas))}
  .panel::after{display:none}
  .panel .copy{padding:0 var(--gutter) 64px;margin-top:-36px}
  .panel h3{margin:10px 0 12px}
  .panel.p-black{justify-content:flex-start}
  .panel.p-black .copy{text-align:left}
  .panel.p-black .copy p{margin-left:0}
  .panel.p-black .num{justify-content:flex-start}
  .panel.p-white .bg{background-position:66% 50%}
  .panel.p-red .bg{background-position:80% 50%}
  .panel.p-black .bg{background-position:34% 50%}
  .panel.p-pale .bg{background-position:84% 50%}
  .panel.p-dawn .bg{background-position:50% 50%}
  .panel .copy{padding-bottom:60px}
  .story .meta{flex-wrap:wrap;gap:4px 14px}
  .story .meta > *{white-space:nowrap}
  .mag .side .story{grid-template-columns:1fr}
  .mag .side .story .img{aspect-ratio:16/9;height:auto}
  .form .row{grid-template-columns:1fr}
  .foot .top{grid-template-columns:1fr}
  .chyron .clock{display:none}
  .chyron .topic{font-size:19px}
  .chyron .verse-face{font-size:15px}
  .brand-tag{display:none}
}
@media (max-height:560px){.cue,.ring{display:none}}

/* =====================================================================
   The small-screen gates (must match the GATES list in site.js exactly).
   The scroll films now run everywhere; these gates only stack the Horsemen panels vertically.
   ===================================================================== */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  .riders{height:auto}
  .riders .pin{position:relative;height:auto;overflow:visible}
  .track{display:block;transform:none!important}
  .panel,.panel:first-child{width:100%;height:auto;min-height:88vh}
  .panel.p-intro{min-height:auto;padding:110px 0 40px}
  .riders .intro .go{display:none}
  .riders .progress{display:none}
  .panel .big{display:none}
}

/* =====================================================================
   MOTION LAYER · the whole site moves
   ===================================================================== */
.loop{display:block;width:100%;height:100%;object-fit:cover}
.poster .loop-hero{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 72%}

/* Ken Burns on stills */
@keyframes kb{0%{transform:scale(1.04) translate3d(0,0,0)}100%{transform:scale(1.16) translate3d(-2.5%,-1.5%,0)}}
.kb-img{animation:kb 22s var(--ease-io) infinite alternate;animation-delay:-6s}

/* briefing media: footage, clip reveal, pointer depth */
.story .img video,.story .img img{width:100%;height:100%;object-fit:cover;transform:translate3d(var(--mx,0),var(--my,0),0) scale(1.08);transition:transform .9s var(--ease-out)}
.story .img img.kb-img{transition:none}
.reveal .story .img{clip-path:inset(0 0 100% 0);transition:clip-path 1.5s var(--ease-out);transition-delay:calc(var(--i,0) * 110ms + 200ms)}
.reveal.in .story .img{clip-path:inset(0 0 0 0)}
.reveal.in.settled .story .img{transition-delay:0s}

/* Horsemen: camera push, weather, depth */
.panel .bg{overflow:hidden}
.panel .bg .kb{position:absolute;inset:-6%;background-size:cover;background-position:center;animation:kb 12s var(--ease-io) infinite alternate}
.panel.p-red .bg .kb{animation-delay:-9s}
.panel.p-black .bg .kb{animation-delay:-15s;animation-direction:alternate-reverse}
.panel.p-pale .bg .kb{animation-delay:-4s}
.panel .bg video{position:absolute;inset:0}
.panel.p-intro .bg{position:absolute;inset:0;transform:none}
.panel.p-intro .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--canvas) 0%,var(--canvas) 22%,transparent 72%),linear-gradient(90deg,rgba(5,8,30,.5),rgba(5,8,30,.15)),linear-gradient(to top,var(--canvas),transparent 35%),linear-gradient(var(--canvas),transparent 25%)}
.panel.p-intro{background:var(--canvas)}
.panel .bg,.panel .copy,.panel .big{will-change:transform}
.fx{position:absolute;inset:0;pointer-events:none;z-index:1}
.fx-rain{opacity:.35;background-image:repeating-linear-gradient(103deg,transparent 0 22px,rgba(220,228,240,.55) 22px 23px,transparent 23px 61px);background-size:200px 400px;animation:rain .32s linear infinite;mix-blend-mode:screen}
@keyframes rain{to{background-position:-90px 400px}}
.fx-flash{background:radial-gradient(60% 50% at 62% 30%,rgba(210,225,255,.55),transparent 70%);opacity:0;animation:flash 3.7s linear infinite;animation-delay:-2s;mix-blend-mode:screen}
@keyframes flash{0%,61%,63.5%,66%,100%{opacity:0}62%{opacity:.9}64.5%{opacity:.6}}
.fx-embers{background-image:
  radial-gradient(2px 2px at 12% 80%,rgba(255,140,80,.95),transparent),radial-gradient(2px 2px at 28% 60%,rgba(255,170,90,.8),transparent),
  radial-gradient(1.5px 1.5px at 44% 90%,rgba(255,120,60,.9),transparent),radial-gradient(2.5px 2.5px at 63% 70%,rgba(255,150,70,.85),transparent),
  radial-gradient(1.5px 1.5px at 77% 85%,rgba(255,190,110,.9),transparent),radial-gradient(2px 2px at 90% 65%,rgba(255,130,70,.8),transparent);
  background-size:520px 520px;animation:embers 9s linear infinite;mix-blend-mode:screen}
.fx-embers-2{background-size:340px 340px;animation-duration:6s;animation-delay:-3s;opacity:.7}
@keyframes embers{from{background-position:0 0}to{background-position:120px -520px}}
.fx-dust{background:radial-gradient(40% 30% at 30% 60%,rgba(170,160,140,.35),transparent 70%),radial-gradient(50% 35% at 75% 45%,rgba(150,145,130,.28),transparent 70%);animation:dust 16s var(--ease-io) infinite alternate;animation-delay:-5s;filter:blur(6px)}
@keyframes dust{from{transform:translate3d(-8%,0,0)}to{transform:translate3d(10%,-3%,0)}}
.fx-mist{background:radial-gradient(60% 25% at 30% 85%,rgba(150,180,160,.35),transparent 70%),radial-gradient(45% 22% at 80% 80%,rgba(140,170,150,.3),transparent 70%);animation:mist 20s var(--ease-io) infinite alternate;animation-delay:-8s;filter:blur(10px)}
.fx-mist-2{animation-duration:28s;animation-direction:alternate-reverse;opacity:.7}
@keyframes mist{from{transform:translate3d(-12%,2%,0) scale(1)}to{transform:translate3d(12%,-2%,0) scale(1.15)}}
.panel .big{position:absolute;z-index:1;right:4vw;top:50%;margin-top:-.55em;font-family:var(--f-display);font-weight:800;font-size:clamp(220px,34vw,560px);line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(236,232,225,.16);pointer-events:none;letter-spacing:-.02em}
.panel.p-black .big{right:auto;left:4vw}
.panel .copy{z-index:2}

/* kinetic headlines: words rise out of a mask */
.kin .wm{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .06em .14em;margin:-.04em -.06em -.14em}
.kin .wi{display:inline-block;transform:translate3d(0,110%,0) rotate(6deg);transform-origin:0 100%;transition:transform .55s cubic-bezier(.2,1.4,.4,1);transition-delay:calc(var(--wi,0) * 40ms + 60ms)}
.kin.in .wi{transform:none}
.reveal .rv.kin{transform:none;opacity:1}
[data-par]{will-change:transform}

/* scroll-driven marquee */
.scroll-marquee{margin:0 calc(var(--gutter) * -1) clamp(48px,6vw,80px);overflow:hidden;display:grid;gap:6px}
.scroll-marquee .row{display:flex;align-items:center;gap:36px;white-space:nowrap;width:max-content;will-change:transform}
.scroll-marquee span{font-family:var(--f-display);font-weight:800;font-size:clamp(64px,10vw,170px);line-height:1;text-transform:uppercase;letter-spacing:.005em}
.scroll-marquee .row:first-child span:nth-of-type(3n+1){color:var(--dawn)}   /* red on royal blue vibrates; dawn cream reads cleanly */
.scroll-marquee i{width:22px;height:22px;background:var(--dawn);transform:rotate(45deg);flex:none}
.scroll-marquee .ghost span{color:transparent;-webkit-text-stroke:1.5px rgba(236,232,225,.3);font-size:clamp(48px,7vw,120px)}
.scroll-marquee .ghost i{background:var(--rule-strong);width:14px;height:14px}

/* viewer mail cards tilt in */
.reveal .qcard.rv{transform:translateY(46px) rotate(-1.4deg)}
.reveal.in .qcard.rv{transform:none}
.reveal.in .qcard.rv:hover{transform:translateY(-4px)}

/* video card hover preview */
.vcard .thumb video.pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease-out)}
.vcard.playing .thumb video.pv{opacity:1}
.cards .vcard{opacity:0;transform:translateX(60px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--ci,0) * 90ms)}
.reveal.in .cards .vcard{opacity:1;transform:none}
.reveal.in.settled .cards .vcard{transition-delay:0s}

/* subscribe film breathes */
.subscribe .bg video{position:absolute;inset:0}
.subscribe .bg{overflow:hidden}

/* FAQ answers glide open */
.faq .ans{will-change:height}

/* =====================================================================
   IMPACT · camera shake, lightning flash, and motion skew
   ===================================================================== */
.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake{
  10%,90%{transform:translate3d(calc(var(--sh,1) * -2px),calc(var(--sh,1) * 1px),0)}
  20%,80%{transform:translate3d(calc(var(--sh,1) * 4px),calc(var(--sh,1) * -2px),0)}
  30%,50%,70%{transform:translate3d(calc(var(--sh,1) * -7px),calc(var(--sh,1) * 3px),0)}
  40%,60%{transform:translate3d(calc(var(--sh,1) * 7px),calc(var(--sh,1) * -3px),0)}}
.flash{position:fixed;inset:0;z-index:58;pointer-events:none;opacity:0;
  background:radial-gradient(80% 70% at 60% 25%,rgba(225,235,255,.95),rgba(170,190,255,.45) 50%,rgba(140,160,255,.15) 100%);mix-blend-mode:screen}
.flash.go{animation:strike .7s linear both}
@keyframes strike{0%{opacity:0}6%{opacity:.75}14%{opacity:.08}22%{opacity:.5}34%{opacity:0}46%{opacity:.18}60%,100%{opacity:0}}
@property --skew{syntax:'<angle>';inherits:false;initial-value:0deg}
.track{transform:translate3d(var(--tx,0px),0,0) skewX(var(--skew));transition:--skew .45s var(--ease-out)}

/* =====================================================================
   SOUND · entry screen and the always-visible sound button
   ===================================================================== */
.gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;text-align:center;padding:24px;
  background:radial-gradient(70% 60% at 50% 45%,rgba(20,26,60,.55),rgba(5,7,14,.96) 70%),rgba(5,7,14,.86);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:opacity 1.1s var(--ease-out),visibility 0s linear 1.1s}
.gate.gone{opacity:0;visibility:hidden;pointer-events:none}
.gate-inner{display:grid;justify-items:center;gap:16px;max-width:560px;animation:rise 1.2s var(--ease-out) both}
.gate img{width:96px;filter:drop-shadow(0 6px 24px rgba(0,0,0,.6))}
.gate h2{font-size:clamp(54px,9vw,104px)}
.gate p{margin:0;color:var(--text-secondary);font-size:clamp(18px,1.2vw + 10px,22px)}
.gate-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:14px}
.gate .btn{gap:12px}
.gate-note{font-family:var(--f-mono);font-size:11.5px!important;letter-spacing:.14em;text-transform:uppercase;margin-top:8px!important}
body.gated{overflow:hidden}

.sound-btn{display:inline-flex;align-items:center;gap:10px;flex:none;height:38px;padding:0 14px;cursor:pointer;
  background:rgba(12,14,18,.4);border:1px solid var(--rule-strong);color:var(--text-primary);
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
.sound-btn:hover{border-color:var(--text-primary)}
.sound-btn[aria-pressed="true"]{border-color:var(--accent);background:rgba(210,64,44,.16)}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px;width:16px}
.eq i{display:block;width:2px;height:3px;background:currentColor;transform-origin:bottom}
.eq.on i,.sound-btn[aria-pressed="true"] .eq i{height:14px;animation:eq 1s var(--ease-io) infinite}
.eq.on i:nth-child(2),.sound-btn[aria-pressed="true"] .eq i:nth-child(2){animation-delay:-.35s;animation-duration:.8s}
.eq.on i:nth-child(3),.sound-btn[aria-pressed="true"] .eq i:nth-child(3){animation-delay:-.6s;animation-duration:1.1s}
.eq.on i:nth-child(4),.sound-btn[aria-pressed="true"] .eq i:nth-child(4){animation-delay:-.15s;animation-duration:.9s}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.sound-btn[aria-pressed="false"] .eq i{opacity:.55}
.sound-btn[aria-pressed="false"] .eq::after{content:"";position:absolute}
@media (max-width:1100px){.sound-btn{margin-left:auto}.sound-btn + .btn-nav + .menu-btn,.sound-btn ~ .menu-btn{margin-left:10px}}
@media (max-width:480px){
  .sound-btn .sound-label{display:none}
  .sound-btn{padding:0 11px}
  .nav{gap:10px}
  .brand{gap:8px;min-width:0}
  .brand img{height:46px}
  .menu-btn{padding:9px 10px}
}
@media (pointer:coarse){.sound-btn{min-height:44px}}

/* =====================================================================
   THE LIGHT ARC · darkness of this world to the brightness of the Kingdom
   ===================================================================== */
/* the blue's gradient blend: lighter blue glows, deep navy pockets and darker edges, drifting slowly.
   --blue (0..1, set by JS) brings it in as the page turns blue, so the dark opening stays untouched */
.env .blend{position:absolute;inset:-12%;opacity:var(--blue,0);will-change:transform;
  background:
    radial-gradient(55% 45% at 14% 18%,rgba(60,95,255,.38),transparent 70%),
    radial-gradient(50% 42% at 88% 78%,rgba(35,70,240,.32),transparent 70%),
    radial-gradient(65% 55% at 62% 42%,rgba(0,0,55,.5),transparent 75%),
    radial-gradient(40% 35% at 30% 85%,rgba(0,0,45,.45),transparent 72%),
    linear-gradient(168deg,rgba(0,2,38,.6) 0%,transparent 38%,transparent 62%,rgba(0,2,38,.55) 100%);
  animation:blendDrift 46s var(--ease-io) infinite alternate;animation-delay:-14s}
@keyframes blendDrift{0%{transform:translate3d(0,0,0) rotate(0) scale(1)}100%{transform:translate3d(-5%,4%,0) rotate(4deg) scale(1.08)}}
.env canvas{z-index:1}
.env.front .blend,.env.front::before,.env.front::after{opacity:0}   /* only the rising light comes forward over the bright sections */

/* Watch: a darker pocket of deep navy, blended in and out */
.watch{background:linear-gradient(to bottom,rgba(0,3,28,0) 0%,rgba(0,3,28,.72) 14%,rgba(0,4,34,.86) 50%,rgba(0,3,28,.72) 86%,rgba(0,3,28,0) 100%)}
.watch::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(60% 40% at 80% 30%,rgba(40,70,230,.18),transparent 70%),radial-gradient(50% 35% at 10% 75%,rgba(20,40,180,.14),transparent 70%)}
.watch{isolation:isolate}

/* The deep stretch: Approach, Viewer Mail and FAQ share one continuous dark gradient wash,
   deepening toward the last question and handing off to the sky band */
.deep{position:relative;z-index:2;isolation:isolate}
.deep::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(50% 18% at 85% 22%,rgba(30,60,220,.16),transparent 70%),
    radial-gradient(45% 16% at 12% 58%,rgba(20,45,200,.12),transparent 70%),
    linear-gradient(to bottom,rgba(0,3,28,0) 0%,rgba(0,3,28,.45) 10%,rgba(0,3,26,.6) 45%,rgba(0,2,22,.72) 82%,rgba(0,2,22,0) 100%)}

/* a dawn glow behind the whole page, rising as the story turns (--glow set by JS, 0..1) */
.env::after{content:"";position:absolute;inset:0;opacity:var(--glow,0);
  background:radial-gradient(90% 60% at 50% 115%,rgba(170,205,250,.28),rgba(110,160,230,.12) 45%,transparent 75%)}

/* the sky: bright blue opening to pale sky and then white, with a sun that rises as you scroll */
.kingdom{position:relative;z-index:2}
.sunrise{position:relative;height:140vh;overflow:hidden;
  background:linear-gradient(to bottom,var(--canvas) 0%,#0014ab 22%,#3f56d4 40%,#8d9ae2 58%,#cdd5f5 78%,#f7f9fc 100%)}
.sunrise .sun{position:absolute;left:50%;bottom:0;width:70vmin;height:70vmin;margin-left:-35vmin;border-radius:50%;
  background:radial-gradient(circle,#fff8e8 0%,#ffe2a8 26%,rgba(255,200,120,.55) 46%,rgba(255,180,100,0) 70%);
  transform:translate3d(0,calc((1 - var(--sp,0)) * 60vh),0) scale(calc(.7 + var(--sp,0) * .6));will-change:transform}
.sunrise .rays{position:absolute;left:50%;bottom:-40vmin;width:220vmax;height:220vmax;margin-left:-110vmax;margin-bottom:-110vmax;
  background:repeating-conic-gradient(from 0deg,rgba(255,236,196,.16) 0deg 4deg,transparent 4deg 13deg);
  -webkit-mask:radial-gradient(circle,#000 0%,transparent 55%);mask:radial-gradient(circle,#000 0%,transparent 55%);
  opacity:calc(var(--sp,0) * 1.1);animation:spin 120s linear infinite;animation-delay:-30s}
@keyframes spin{to{transform:rotate(360deg)}}

/* the Kingdom film, scroll-driven like the opening descent */
.k-scrub{position:relative;height:420vh;background:#f7f9fc}
.k-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.k-poster,.k-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:url("../img/kingdom-poster.jpg") center/cover}
.k-stage video{opacity:0;transition:opacity 1.2s var(--ease-out);will-change:transform;transform:translateZ(0)}
.k-stage.video-ready video{opacity:1}
.k-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(247,249,252,.75),rgba(247,249,252,0) 26%),radial-gradient(ellipse 120% 90% at 50% 45%,rgba(255,255,255,0) 50%,rgba(247,249,252,.35) 100%)}
.kband{position:absolute;left:var(--gutter);top:calc(var(--nav-h) + clamp(30px,8vh,90px));max-width:min(720px,52vw);opacity:0;color:#16181d;pointer-events:none;
  text-shadow:0 1px 2px rgba(255,250,240,.9),0 4px 24px rgba(255,248,232,.9)}
.kband.live{pointer-events:auto}
.kband::before{content:"";position:absolute;inset:-30% -24%;z-index:-1;opacity:calc(.3 + .7 * var(--k,1));
  background:radial-gradient(ellipse 72% 66% at 42% 50%,rgba(255,255,255,.9) 0%,rgba(250,252,255,.7) 46%,rgba(250,252,255,0) 78%)}
.kband.settle{padding:30px 34px 32px;margin-left:-34px;background:rgba(255,255,255,calc(.8 * var(--k,1)));
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);border-left:3px solid var(--accent);box-shadow:0 30px 80px rgba(60,40,10,.18)}
.kband.settle::before{display:none}
.kband .kicker{color:#3d3f46}
.kband h2{font-size:clamp(60px,7.6vw,132px);line-height:.9;margin:0;
  opacity:clamp(0,var(--k,0) * 2,1);transform:translate3d(0,calc((1 - clamp(0,var(--k,0) * 1.6,1)) * 40px),0)}
.kband .sub{font-size:clamp(19px,1.2vw + 9px,25px);line-height:1.45;margin:20px 0 0;max-width:34ch;color:#23252b;
  opacity:clamp(0,(var(--k,0) - .4) * 2.4,1)}
.kband blockquote{margin:0;font-family:var(--f-body);font-style:italic;font-size:clamp(30px,2.6vw + 8px,52px);line-height:1.22;max-width:22ch;
  opacity:clamp(0,var(--k,0) * 2,1);transform:translate3d(0,calc((1 - clamp(0,var(--k,0) * 1.6,1)) * 30px),0)}
.kband .ref{display:block;margin-top:16px;color:#4a4d55;opacity:clamp(0,(var(--k,0) - .3) * 2.4,1)}
.kband .ctas{margin-top:28px;opacity:clamp(0,(var(--k,0) - .7) * 4,1)}

/* the light theme: everything after the sunrise */
.light{--canvas:#f7f9fc;--panel:#e9eef5;--text-primary:#141821;--text-secondary:#4a5262;--rule:#d6deea;--rule-strong:#8792a3;
  background:var(--canvas);color:var(--text-primary)}
.light .kicker{color:var(--text-secondary)}
.light .lede{color:var(--text-secondary)}
.subscribe.light .bg{opacity:1}
.subscribe.light .bg .kb{position:absolute;inset:-6%;background-size:cover;background-position:center;animation:kb 30s var(--ease-io) infinite alternate}
.subscribe.light .bg::after{background:linear-gradient(90deg,var(--canvas) 0%,rgba(247,249,252,.9) 42%,rgba(247,249,252,.2) 100%),linear-gradient(var(--canvas),transparent 22%,transparent 80%,var(--canvas))}
.light .field input{background:#fff;border-color:#9aa4b4;color:var(--text-primary)}
.light .field input::placeholder{color:#7d8696}
.light .field input:focus{border-color:var(--accent);background:#fff}
.light .success{background:rgba(255,255,255,.9);border-left-color:var(--accent)}
.light .success h3{color:var(--text-primary)}
.light .form .err{color:#b3261e}
.foot.light{background:#eef2f7;border-top-color:var(--rule)}
.foot.light ul a{color:var(--text-primary)}
.foot.light ul a:hover{color:var(--accent)}
.foot.light .base{border-top-color:var(--rule)}

@media (max-width:720px){
  .panel.p-intro{display:block!important;padding:0 0 40px!important}
  .panel.p-intro .bg{position:relative!important;aspect-ratio:4/3}
  .panel.p-intro .bg::after{background:linear-gradient(rgba(13,15,19,0) 40%,var(--canvas))}
  .panel.p-intro .intro{margin-top:-40px}
  .scroll-marquee span{font-size:56px}
}

/* golden light rises in front of the bright sections */
.env.front{z-index:55}

@media (max-width:720px){.sunrise{height:100vh}}