/* Passion 4 Purity: a bespoke series page.
   Art direction: the series' own sticker wall. Its airbrushed grounds (sky blue, navy, yellow, violet,
   orange, black-green) carry halftone grain sampled from the feed graphic, and its stickers (dove, flame,
   Bible, restroom-sign couple, magnet, tombstone, scorpion) are cut from that same graphic and slapped on
   at room scale, bleeding off the edges. Display voice: Titan One, the closest Google face to the
   chunky rounded airbrush lettering. Lime stays SMR's accent only (buy, focus, label tick).
   Signature motion: Lesson 2, the law of attraction. Your pointer, or your finger, is the magnet. */

@view-transition { navigation: auto; }

:root{
  --navy:#16237e;
  --navy2:#0d1450;
  --ink:#121752;
  --sky:#8ec3f2;
  --sky-hi:#cfe8ff;
  --sun:#f7d330;
  --sun-hi:#fff08a;
  --magenta:#ff3fc6;
  --pink:#ff7ad9;
  --violet:#4b17b8;
  --violet-d:#1d0a5a;
  --ember:#ff4d1d;
  --ember-d:#c4160a;
  --night:#050806;
  --acid:#3dff4a;
  --white:#fff;
  --lime:#b6ff00;
  --gutter:64px;
  --disp:'Titan One','Arial Rounded MT Bold',Impact,sans-serif;
  --cond:'Barlow Condensed',Impact,sans-serif;
  --body:Manrope,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--navy2)}
body.pp{margin:0;background:var(--navy2);color:var(--white);font-family:var(--body);overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.skip{position:absolute;left:16px;top:-80px;z-index:60;background:var(--lime);color:#000;padding:12px 18px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}

/* shared atoms */
.label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;margin:0;display:flex;align-items:center;gap:12px;color:var(--sky-hi)}
.label i{display:inline-block;width:10px;height:10px;background:var(--lime);flex:none}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:14px 26px;font:800 13px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-radius:999px;transition:transform .14s,background .15s,color .15s,border-color .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(1px)}
.btn.lime{background:var(--lime);color:#06080a;box-shadow:0 0 0 2px rgba(13,20,80,.9),0 10px 30px rgba(13,20,80,.35)}
.btn.lime:hover{background:#fff}
.btn.line{border:1px solid rgba(255,255,255,.55);color:var(--white)}.btn.line:hover{border-color:var(--lime);color:var(--lime)}
.btn.sm{min-height:44px;padding:10px 18px;font-size:11px}
.note{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--sky-hi)}
.note.ink{color:var(--ink)}
.part{margin:0;font:600 15px/1.2 var(--cond);letter-spacing:.14em;text-transform:uppercase;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.part b{font-weight:800;padding:3px 10px 2px;border-radius:999px;background:currentColor}
.part b{color:inherit}
.part.ink{color:var(--ink)}.part.ink b{background:var(--ink);color:var(--sun)}
.part.on-dark{color:#fff}.part.on-dark b{background:#fff;color:var(--violet-d)}
.wall{font-family:var(--disp);font-weight:400;letter-spacing:-.005em;line-height:.9;margin:0;text-wrap:balance}
.wall em{font-style:normal}

/* header */
.top{position:absolute;top:0;left:0;right:0;z-index:30;height:84px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:0 var(--gutter)}
.nav{display:flex;gap:32px;margin-left:auto}
.nav a{text-shadow:0 1px 10px rgba(13,20,80,.85);text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;color:var(--sky-hi);transition:color .15s;font-weight:800}
.nav a:hover,.nav a[aria-current]{color:#fff}
.nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--lime)}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:#fff}
.brand-mark{height:40px;width:40px;display:block;flex:none}
.brand-name{font-size:11px;font-weight:800;letter-spacing:.16em;line-height:1.3;text-transform:uppercase;white-space:nowrap}
.brand-lg{gap:14px}.brand-lg .brand-mark{height:52px;width:52px}.brand-lg .brand-name{font-size:12px}

/* grounds: airbrushed colour fields with the feed graphic's own halftone grain; each fades in from the one above */
.ground{position:relative;isolation:isolate;overflow:clip}
.ground + .ground{margin-top:-24vh;-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 11vh,#000 24vh);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 11vh,#000 24vh)}
.ground + .ground::before{content:'';display:block;height:24vh}
.ground::after{content:'';position:absolute;inset:0;background:url(/assets/series/passion-4-purity/grain.webp) repeat;background-size:385px;mix-blend-mode:overlay;opacity:.5;z-index:1;pointer-events:none}
.ground > *{position:relative;z-index:2}
.sky{background:
  linear-gradient(180deg,rgba(20,32,140,.9) 0,rgba(20,32,140,0) 24%),
  radial-gradient(55% 60% at 74% 46%,#d5ecff 0,rgba(213,236,255,0) 70%),
  radial-gradient(60% 70% at 0% 30%,#1a2a95 0,rgba(26,42,149,0) 72%),
  radial-gradient(50% 50% at 18% 100%,#2b45c4 0,rgba(43,69,196,0) 70%),
  linear-gradient(100deg,#22339f 0%,#4d78d8 40%,#8ec3f2 70%);}
.sun{--from:#7fb2ea;background:
  radial-gradient(45% 50% at 85% 20%,var(--sun-hi) 0,rgba(255,240,138,0) 70%),
  radial-gradient(50% 60% at 100% 100%,#ff9d2a 0,rgba(255,157,42,0) 70%),
  radial-gradient(40% 40% at 0% 80%,#d9e93a 0,rgba(217,233,58,0) 70%),
  var(--sun);}
.violet{--from:var(--sun);--fade:22vh;background:
  radial-gradient(45% 40% at 20% 25%,#ff3fc6 0,rgba(255,63,198,0) 70%),
  radial-gradient(50% 50% at 90% 80%,#2a0f7e 0,rgba(42,15,126,0) 70%),
  radial-gradient(40% 35% at 70% 30%,#8a2cff 0,rgba(138,44,255,0) 70%),
  var(--violet);}
.ember{--from:#3a1696;--fade:26vh;background:
  radial-gradient(45% 45% at 85% 15%,#ffb21f 0,rgba(255,178,31,0) 70%),
  radial-gradient(55% 50% at 10% 100%,var(--ember-d) 0,rgba(196,22,10,0) 70%),
  var(--ember);}
.night{--from:#d02a10;--fade:30vh;background:
  radial-gradient(40% 45% at 78% 40%,rgba(61,255,74,.34) 0,rgba(61,255,74,0) 70%),
  radial-gradient(40% 40% at 10% 90%,rgba(43,69,196,.35) 0,rgba(43,69,196,0) 70%),
  var(--night);}
.sky2{--from:var(--night);--fade:34vh;background:
  radial-gradient(50% 50% at 70% 40%,#e1f1ff 0,rgba(225,241,255,0) 70%),
  radial-gradient(50% 60% at 0% 100%,#3a5fd0 0,rgba(58,95,208,0) 70%),
  radial-gradient(45% 40% at 100% 0%,#5b6fe0 0,rgba(91,111,224,0) 70%),
  var(--sky);}
.sun2{--from:#9fcaf3;background:
  radial-gradient(45% 50% at 15% 15%,var(--sun-hi) 0,rgba(255,240,138,0) 70%),
  radial-gradient(40% 45% at 100% 90%,#ff7ad9 0,rgba(255,122,217,0) 70%),
  radial-gradient(40% 40% at 0% 100%,#ff9d2a 0,rgba(255,157,42,0) 70%),
  var(--sun);}

/* stickers: cut from the feed graphic, slapped on */
.stk{position:absolute;display:block;height:auto;pointer-events:none;user-select:none;filter:drop-shadow(0 18px 26px rgba(10,14,60,.28))}
.js .slap{opacity:0;transform:translate3d(0,0,0) scale(1.16) rotate(calc(var(--r,0deg) + 6deg));transition:opacity .35s ease,transform .55s cubic-bezier(.2,1.4,.4,1)}
.js .slap.in{opacity:1;transform:translate3d(var(--px,0),var(--py,0),0) scale(1) rotate(var(--r,0deg))}

/* 1 · hero */
.hero{min-height:max(760px,calc(100svh + 16vh));padding:120px var(--gutter) calc(110px + 16vh);display:flex;align-items:center}
.stickers{position:absolute;inset:0;z-index:2;pointer-events:none}
.h-dove{--r:-8deg;width:min(36vw,620px);left:34%;top:-4%;transform:rotate(var(--r))}
.h-fire{--r:10deg;width:min(19vw,330px);left:-4vw;bottom:-10vh;transform:rotate(var(--r))}
.h-neon{--r:-6deg;width:min(7vw,120px);left:50%;bottom:7vh;transform:rotate(var(--r));filter:drop-shadow(0 0 22px rgba(255,120,60,.6))}
.h-bible{--r:-12deg;width:min(25vw,430px);right:-3vw;bottom:-12vh;transform:rotate(var(--r))}
.hero-copy{position:relative;z-index:4;max-width:min(1000px,58vw)}
.crumbs ol{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--sky-hi)}
.crumbs li+li::before{content:'/';margin-right:10px;opacity:.6}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.crumbs a:hover{color:var(--lime)}
.crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px;color:#fff}
.title{margin:20px 0 0;font-family:var(--disp);font-weight:400;line-height:.86;font-size:clamp(76px,10.4vw,200px);letter-spacing:-.01em}
.title span{display:inline-block}
.t-passion{display:block !important;text-transform:uppercase;font-size:.9em;letter-spacing:.005em;color:#ffe04a;text-shadow:0 0 .015em #fff6c4,0 0 .06em rgba(255,220,46,.95),0 0 .16em rgba(255,196,0,.7),0 0 .42em rgba(255,170,0,.5),0 .05em 0 rgba(13,20,80,.35)}
.t-four{color:transparent;-webkit-text-stroke:.035em #4dff58;text-shadow:0 0 .03em rgba(220,255,220,.9),0 0 .1em rgba(61,255,74,.95),0 0 .26em rgba(61,255,74,.7),0 0 .5em rgba(61,255,74,.35);font-size:.86em;margin-right:.08em;transform:rotate(-6deg) translateY(.04em)}
.t-purity{color:#ff6ad9;text-shadow:0 0 .015em #ffd9f4,0 0 .06em rgba(255,95,214,.95),0 0 .17em rgba(255,63,198,.75),0 0 .44em rgba(138,44,255,.7),0 .05em 0 rgba(13,20,80,.3)}
.lede{margin:30px 0 0;max-width:520px;font:600 clamp(17px,1.4vw,21px)/1.5 var(--body);color:#fff}
.buyrow{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.follow{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)}
.follow:hover{color:var(--lime);border-color:var(--lime)}
.hero-cover{position:absolute;z-index:3;right:6vw;top:50%;width:clamp(280px,31vw,560px);transform:translateY(-44%);perspective:1600px}
.print{display:block;position:relative;transform:rotate(5deg) rotateY(-10deg);transform-origin:50% 50%;box-shadow:-30px 50px 80px rgba(13,20,80,.5),-6px 12px 20px rgba(13,20,80,.35);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.print::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.28) 0,rgba(255,255,255,0) 38%,rgba(0,0,0,0) 70%,rgba(13,20,80,.25) 100%)}
/* neon sign: the script bends each word into glass tube (an aria-hidden SVG traced over the real h1 text, glyph by glyph):
   unlit glass, then the lit tube (wall spill, wide halo, tight bloom, coloured tube, near-white hot core) with small
   breaks where a real tube would jump, and dark mounting clips. The words stutter on at load, the y comes in late,
   then the sign stays lit with a 1-2% hum and the odd single blip. Reduced motion: lit and steady from the start.
   Without the script the words keep the flat glow above. */
.title .late{display:inline}
.title .t-passion,.title .t-four,.title .t-purity{position:relative}
.js .title.pre .t-passion,.js .title.pre .t-four,.js .title.pre .t-purity{opacity:.16;text-shadow:none}
.title.neon .t-passion,.title.neon .t-four,.title.neon .t-purity,.title.neon .late{color:transparent;-webkit-text-stroke:0 transparent;text-shadow:none}
.neon-sign{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.neon-word{position:absolute}
.neon-sign .tube{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.neon-sign .tube.lit{will-change:opacity}
.neon-sign.on .lit-passion{animation:neon-on-a 1.25s .2s linear backwards,neon-hum 6.1s 1.6s linear infinite}
.neon-sign.on .lit-four{animation:neon-on-b .9s .6s linear backwards,neon-hum 7.4s 1.6s linear infinite}
.neon-sign.on .lit-purity{animation:neon-on-c 1.1s .4s linear backwards,neon-hum 5.3s 1.9s linear infinite}
.neon-sign.on .lit-late{animation:neon-late 1s 1.35s linear backwards,neon-blip 13s 6s linear infinite}
.neon-sign.on.steady .lit{animation:neon-hum 6.1s linear infinite}
.neon-sign.on.steady .lit-late{animation:neon-blip 13s 4s linear infinite}
.neon-sign.dark .lit{animation-play-state:paused}
@keyframes neon-on-a{0%,9%{opacity:0}10%,15%{opacity:1}16%,27%{opacity:.06}28%,33%{opacity:.8}34%,41%{opacity:.1}42%,100%{opacity:1}}
@keyframes neon-on-b{0%,19%{opacity:0}20%,26%{opacity:1}27%,48%{opacity:.08}49%,100%{opacity:1}}
@keyframes neon-on-c{0%,13%{opacity:0}14%,18%{opacity:.9}19%,36%{opacity:.05}37%,44%{opacity:1}45%,52%{opacity:.2}53%,100%{opacity:1}}
@keyframes neon-late{0%,24%{opacity:0}25%,30%{opacity:1}31%,58%{opacity:.05}59%,64%{opacity:.75}65%,72%{opacity:.1}73%,100%{opacity:1}}
@keyframes neon-hum{0%,100%{opacity:1}13%{opacity:.985}21%{opacity:1}37%{opacity:.99}44%{opacity:.978}47%{opacity:1}68%{opacity:.988}83%{opacity:1}91%{opacity:.982}}
@keyframes neon-blip{0%,71%{opacity:1}71.4%{opacity:.3}72.1%{opacity:1}72.6%{opacity:.55}73.1%,100%{opacity:1}}

.cover-img{display:block;width:100%;height:auto;view-transition-name:cover-passion-4-purity}

/* the flying dove: body + wings cut from the sticker's own pixels; the right wing in flight is the left wing mirrored */
.hero > .dove-layer{position:absolute;inset:0;z-index:4;pointer-events:none}
.dove-rig{position:absolute;width:min(36vw,620px);left:34%;top:-4%;aspect-ratio:900/503;transform:rotate(-8deg);will-change:transform;filter:drop-shadow(0 18px 26px rgba(10,14,60,.28));pointer-events:auto}
.dove-rig img{position:absolute;left:0;top:0;width:100%;height:auto;transform-origin:0 0;user-select:none;-webkit-user-drag:none}
.dove-rig .dv-w{will-change:transform}
.dove-rig .dv-m{opacity:0}
.dove-live .h-dove{visibility:hidden}

/* 2 · lesson 1 */
.l1{min-height:max(760px,108svh);padding:6vh var(--gutter) 26vh;color:var(--ink)}
.l1-people{--r:4deg;width:min(50vw,920px);right:-11vw;top:28vh;transform:rotate(var(--r));z-index:2;filter:drop-shadow(0 26px 40px rgba(120,70,0,.3))}
.l1-inner{max-width:min(860px,62vw);z-index:3}
.l1-wall{margin-top:26px}
.l1-wall .w-small{display:block;font-size:clamp(28px,3.3vw,56px);line-height:1.02}
.l1-wall s{text-decoration-thickness:.12em;text-decoration-color:var(--magenta);opacity:.7}
.l1-wall .w-huge{display:block;font-size:clamp(84px,12.6vw,240px);line-height:.82;color:#d0128f;margin:.06em 0 .02em -.04em;text-shadow:0 0 .12em rgba(255,255,255,.55)}
.l1-wall .w-end{text-align:left}
.l1-lines{margin-top:46px;display:grid;grid-template-columns:1fr 1fr;gap:26px 40px;max-width:760px}
.pull{grid-column:1/-1;margin:0;font:400 clamp(24px,2.4vw,38px)/1.12 var(--disp);color:var(--ink)}
.pair{margin:0;font:600 16px/1.6 var(--body)}
.pair strong{font-weight:800}
.refs{grid-column:1/-1;margin:0;font:600 14px/1.4 var(--cond);letter-spacing:.12em;text-transform:uppercase;opacity:.85}

/* 3 · lesson 2: the law of attraction (signature stage) */
.l2{color:#fff;padding-bottom:28vh}
.attract{position:relative;height:max(680px,100svh);overflow:hidden;touch-action:pan-y}
.field{position:absolute;inset:0}
.mi{position:absolute;left:0;top:0;height:auto;will-change:transform;filter:drop-shadow(0 16px 22px rgba(10,4,40,.45));user-select:none;-webkit-user-drag:none;pointer-events:none}
.magnet{position:absolute;left:0;top:0;width:clamp(170px,19vw,330px);height:auto;z-index:5;will-change:transform;filter:drop-shadow(0 22px 30px rgba(10,4,40,.55));user-select:none;-webkit-user-drag:none;cursor:grab;touch-action:none;
  -webkit-mask-image:linear-gradient(90deg,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,#000 78%,transparent 100%)}
.ring{position:absolute;left:0;top:0;width:100px;height:100px;overflow:visible;pointer-events:none;opacity:0;transition:opacity .4s}
.ring circle{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.75);stroke-width:.6;stroke-dasharray:2.2 2.2;vector-effect:non-scaling-stroke}
.attract.live .ring{opacity:1}
.ring circle{stroke-width:2}
.l2-copy{position:absolute;left:var(--gutter);bottom:9vh;z-index:6;max-width:min(760px,60vw);pointer-events:none}
.l2-copy a{pointer-events:auto}
.l2-wall{margin-top:20px;font-size:clamp(70px,10vw,190px);line-height:.86;text-shadow:0 0 .3em rgba(29,10,90,.8)}
.l2-wall em{color:#ffdc2e;text-shadow:0 0 .1em rgba(255,220,46,.7),0 0 .4em rgba(29,10,90,.8)}
.l2-say{margin:24px 0 0;max-width:560px;font:600 clamp(17px,1.4vw,21px)/1.5 var(--body);text-shadow:0 2px 14px rgba(29,10,90,.9)}
.hint{margin:18px 0 0;font:600 14px/1.3 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:#ffd6f3}
.hint-touch{display:none}
@media (hover:none),(pointer:coarse){.hint-fine{display:none}.hint-touch{display:inline}}
.touch .hint-fine{display:none}.touch .hint-touch{display:inline}
.no-motion .hint{display:none}
.l2-lines{padding:4vh var(--gutter) 0}
.l2-lead{margin:0;font:400 clamp(30px,3.6vw,60px)/1.04 var(--disp);max-width:16em}
.l2-lead span{color:#ffdc2e}
.ttt{list-style:none;margin:5vh 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 3vw}
.ttt li{position:relative;display:flex;flex-direction:column}
.ttt .n{font:800 16px/1 var(--cond);letter-spacing:.14em;color:#ffd6f3}
.ttt b{display:block;font:400 clamp(60px,8.4vw,168px)/.9 var(--disp);letter-spacing:-.01em;margin:.06em 0 .1em -.04em}
.ttt li:nth-child(1) b{color:#ffdc2e;text-shadow:0 0 .3em rgba(255,186,0,.45)}
.ttt li:nth-child(2) b{color:#ff7ad9;text-shadow:0 0 .3em rgba(255,63,198,.5)}
.ttt li:nth-child(3) b{color:#5dff6a;text-shadow:0 0 .3em rgba(61,255,74,.4)}
.ttt .d{font:600 16px/1.55 var(--body);max-width:24em}
.l2-verses{margin-top:9vh;display:grid;grid-template-columns:1fr 1.4fr;gap:30px 6vw;max-width:1200px}
.l2-verses blockquote,.l3-v,.l4-v{margin:0}
.l2-verses p,.l3-v p,.l4-v p{margin:0;font:400 clamp(22px,2vw,32px)/1.18 var(--disp)}
cite{display:block;margin-top:12px;font:800 13px/1.3 var(--cond);letter-spacing:.16em;text-transform:uppercase;font-style:normal;opacity:.85}

/* 4 · lesson 3 */
.l3{color:#140803;padding:4vh var(--gutter) 28vh}
.l3-tomb{--r:-7deg;width:min(40vw,700px);left:-8vw;top:20vh;transform:rotate(var(--r));filter:drop-shadow(0 30px 40px rgba(90,6,0,.4))}
.l3-inner{margin-left:min(38vw,640px);max-width:900px;z-index:3}
.strolls{list-style:none;margin:30px 0 0;padding:0;font:400 clamp(22px,2.4vw,40px)/1.08 var(--disp)}
.strolls li{opacity:.55}
.strolls li:nth-child(2){opacity:.7}.strolls li:nth-child(3){opacity:.85}
.l3-wall{margin-top:10px;font-size:clamp(100px,16vw,300px);line-height:.84;letter-spacing:-.02em}
.l3-wall em{color:#fff;text-shadow:0 0 .15em rgba(255,200,40,.5)}
.l3-say{margin:22px 0 0;font:600 clamp(18px,1.5vw,23px)/1.45 var(--body);max-width:30em}
.dash{margin-top:16vh;z-index:3}
.dash-say{margin:0 0 0 auto;max-width:620px;font:600 clamp(17px,1.4vw,21px)/1.55 var(--body)}
.dash-say strong{display:block;margin-top:10px;font:400 clamp(28px,3vw,48px)/1.04 var(--disp)}
.dash-bar{display:flex;align-items:center;gap:2vw;margin:7vh calc(-1 * var(--gutter)) 0;font:800 clamp(14px,1.3vw,20px)/1 var(--cond);letter-spacing:.2em;text-transform:uppercase}
.dash-bar span:first-child{padding-left:var(--gutter)}
.dash-bar span:last-child{padding-right:var(--gutter)}
.dash-bar i{flex:1;height:clamp(22px,3vw,52px);background:#140803;border-radius:6px;transform-origin:0 50%}
.l3-foot{margin-top:9vh;display:grid;grid-template-columns:1.5fr 1fr;gap:30px 6vw;align-items:end}
.eq{margin:0;font:400 clamp(44px,6vw,112px)/.9 var(--disp);grid-row:span 2}
.eq em{color:#fff}
.l3-q{margin:0;font:400 clamp(24px,2.2vw,36px)/1.1 var(--disp)}

/* the runner: an SVG sticker kid mid-sprint away from the tombstone (4-pose run cycle + speed lines) */
.runner{position:absolute;right:calc(100% + 1vw);bottom:-2.5vw;width:min(25vw,440px);aspect-ratio:1;pointer-events:none}
.runner-frame{position:absolute;inset:0;overflow:hidden}
.runner-frame img{display:block;width:400%;max-width:none;height:100%}
.speed{position:absolute;right:76%;top:30%;width:62%;height:46%}
.speed i{position:absolute;right:0;height:clamp(5px,.62vw,11px);border-radius:9px;background:#fff;box-shadow:0 0 0 2px rgba(20,8,3,.12);transform-origin:100% 50%}
.speed i:nth-child(1){top:4%;width:70%}
.speed i:nth-child(2){top:34%;width:100%;right:8%}
.speed i:nth-child(3){top:64%;width:56%}
.speed i:nth-child(4){top:92%;width:84%;right:14%;opacity:.7}
.runner.play{animation:drift 3.4s ease-in-out infinite alternate}
.runner.play .runner-frame img{animation:runcycle .46s steps(4) infinite}
.runner.play .speed i{animation:whoosh .62s linear infinite}
.runner.play .speed i:nth-child(2){animation-delay:-.2s}
.runner.play .speed i:nth-child(3){animation-delay:-.41s}
.runner.play .speed i:nth-child(4){animation-delay:-.1s}
@keyframes runcycle{to{transform:translateX(-100%)}}
@keyframes whoosh{0%{transform:translateX(18%) scaleX(.35);opacity:0}25%{opacity:1}100%{transform:translateX(-55%) scaleX(1);opacity:0}}
@keyframes drift{from{transform:translateX(-1.2vw)}to{transform:translateX(1.4vw)}}

/* the scorpion rig: its tail cut from its own pixels, pivoting at the first tail joint */
.scorp-rig{aspect-ratio:900/709;pointer-events:auto}
.scorp-rig img{position:absolute;left:0;top:0;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.scorp-body{position:relative !important;display:block}
.scorp-tail{position:absolute;inset:0;transform-origin:82.2% 44%;will-change:transform}
.scorp-flash{position:absolute;left:55%;top:25.1%;width:15%;aspect-ratio:1;margin:-7.5% 0 0 -7.5%;border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle,#fff 0 9%,rgba(220,255,200,.95) 13%,rgba(61,255,74,.7) 24%,rgba(61,255,74,0) 60%),
    repeating-conic-gradient(from 8deg,rgba(255,255,255,.95) 0 5deg,rgba(255,255,255,0) 5deg 30deg);
  -webkit-mask-image:radial-gradient(circle,#000 38%,transparent 70%);mask-image:radial-gradient(circle,#000 38%,transparent 70%)}

/* the close: a living halftone, drawn on canvas (motion only) */
.close > canvas.dots{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none}
.close.alive::after{opacity:.28}

/* 5 · lesson 4 */
.l4{color:#fff;padding:4vh var(--gutter) 28vh}
.l4-scorpion{--r:-10deg;width:min(64vw,1200px);right:-14vw;top:30vh;transform:rotate(var(--r));filter:drop-shadow(0 0 60px rgba(61,255,74,.35)) drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.l4-inner{max-width:min(780px,56vw);z-index:3}
.l4-wall{margin-top:26px;font-size:clamp(76px,10.6vw,204px);line-height:.86}
.l4-wall span{display:block}
.l4-wall em{display:block;color:var(--acid);text-shadow:0 0 .2em rgba(61,255,74,.5)}
.l4-v{margin-top:34px !important;max-width:640px}
.l4-say{margin:28px 0 0;max-width:30em;font:600 clamp(17px,1.4vw,21px)/1.5 var(--body);color:#dcffe0}
.l4-phone{margin-top:20vh;z-index:3}
.l4-lead{margin:0;max-width:620px;font:600 clamp(18px,1.5vw,23px)/1.5 var(--body)}
.asks{list-style:none;margin:4vh 0 0;padding:0;counter-reset:a}
.asks li{counter-increment:a;font:400 clamp(44px,7vw,136px)/.95 var(--disp);letter-spacing:-.01em;padding:.06em 0;display:flex;align-items:baseline;gap:.3em}
.asks li::before{content:counter(a);font:800 clamp(14px,1.2vw,18px)/1 var(--cond);letter-spacing:.14em;color:var(--acid);transform:translateY(-1.4em)}
.asks li:nth-child(2){color:var(--acid);padding-left:6vw}
.asks li:nth-child(3){padding-left:12vw}
.l4-end{margin:6vh 0 0 auto;max-width:520px;font:600 17px/1.55 var(--body);color:#dcffe0}
.l4-end strong{display:block;font:400 clamp(28px,2.8vw,46px)/1.04 var(--disp);color:#fff;margin-bottom:8px}

/* 6 · kit */
.kit{color:var(--ink);padding:6vh var(--gutter) 28vh;min-height:100svh}
.kit-screen{position:absolute !important;z-index:2 !important;right:-16vw;top:30vh;width:min(70vw,1400px);perspective:2000px}
.kit-screen img{display:block;width:100%;height:auto;transform:rotateY(-16deg) rotateZ(2deg);transform-origin:100% 50%;box-shadow:-40px 60px 90px rgba(13,20,80,.45),0 0 0 10px #0d1450;border-radius:6px}
.kit-inner{max-width:min(520px,36vw);z-index:3}
.kit-wall{margin-top:24px;font-size:clamp(54px,5.8vw,112px);line-height:.88}
.kit-wall em{color:#d0128f}
.kit-list{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:20px}
.kit-list li{display:grid;gap:4px}
.kit-list b{font:400 clamp(22px,1.8vw,30px)/1 var(--disp)}
.kit-list span{font:600 16px/1.5 var(--body)}
.kit-objects{margin-top:12vh;display:grid;grid-template-columns:.62fr 2fr 1fr;gap:4vw;align-items:end;z-index:3}
.ko{margin:0}
.ko img{display:block;width:100%;height:auto;box-shadow:-18px 30px 50px rgba(13,20,80,.4)}
.ko-story img{transform:rotate(-5deg);border-radius:14px}
.ko-feed img{transform:rotate(6deg)}
.ko figcaption,.ko-cap{margin:22px 0 0;font:800 13px/1 var(--cond);letter-spacing:.18em;text-transform:uppercase}
.ko-papers{position:relative;aspect-ratio:900/695;width:100%;margin-bottom:35px}
.pa{position:absolute;left:0;top:0;width:86%;height:auto;background:#fff;box-shadow:-14px 24px 40px rgba(13,20,80,.35);transform-origin:20% 90%}
.pa1{transform:translate(4%,6%) rotate(-9deg)}
.pa3{transform:translate(9%,2%) rotate(-3deg)}
.pa4{transform:translate(14%,-2%) rotate(3deg)}
.pa2{transform:translate(18%,-6%) rotate(8deg)}
.ko-cap{position:absolute;left:0;bottom:-35px}

/* 7 · close */
.close{color:var(--ink);padding:8vh var(--gutter) 16vh;min-height:100svh;text-align:center}
.c-dove{--r:10deg;width:min(52vw,960px);right:-12vw;top:14vh;transform:rotate(var(--r))}
.c-fire{--r:-12deg;width:min(25vw,440px);left:-6vw;bottom:-8vh;transform:rotate(var(--r))}
.close-inner{max-width:1240px;margin:0 auto;z-index:3}
.close-wall{font-size:clamp(66px,9.6vw,184px);line-height:.88;text-shadow:0 0 .3em rgba(255,240,138,.8)}
.close-wall em{display:block;color:#d0128f}
.close-src{margin:20px 0 0;font:800 13px/1.3 var(--cond);letter-spacing:.18em;text-transform:uppercase}
.close-buy{margin-top:7vh;display:flex;flex-direction:column;align-items:center}
.price{margin:0 0 18px;display:flex;align-items:baseline;gap:12px}
.price strong{font:400 clamp(64px,6vw,104px)/1 var(--disp)}
.price span{font:800 13px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase}
.more{margin:7vh 0 0;display:flex;justify-content:center;flex-wrap:wrap;gap:10px 34px}
.more a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(18,23,82,.5)}
.more a:hover{border-color:var(--ink)}

/* footer */
.foot{position:relative;z-index:2;padding:30px var(--gutter) 40px;background:var(--navy2);color:#fff}
.foot::before{content:'';position:absolute;left:0;right:0;top:-18vh;height:18vh;background:linear-gradient(180deg,rgba(13,20,80,0),var(--navy2));pointer-events:none}
.fgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:40px;align-items:start}
.fbrand{grid-column:1/5}.fbrand p{margin:20px 0 0;font-size:13px;line-height:1.7;color:var(--sky-hi);max-width:300px}
.fnav{display:flex;flex-direction:column;gap:4px}
.fnav:nth-of-type(1){grid-column:7/10}.fnav:nth-of-type(2){grid-column:10/13}
.fnav a{text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;color:var(--sky-hi)}
.fnav a:hover{color:#fff}
.fline{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-top:48px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sky-hi)}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  :root{--gutter:40px}
  .nav{gap:20px}
  .hero-copy{max-width:60vw}
  .l3-inner{margin-left:34vw}
}
@media (max-width:900px){
  .nav{display:none}
  .top .btn{margin-left:auto}
  .hero{flex-direction:column;align-items:flex-start;padding-top:112px;padding-bottom:0}
  .hero-copy{max-width:none}
  .hero{padding-bottom:22vh}
  .hero-cover{position:relative;right:auto;top:auto;transform:none;width:min(70vw,460px);margin:48px 0 0 auto;z-index:5}
  .l1{padding-top:26vh}
  .l1-people{width:min(78vw,620px);right:-14vw;top:18vh;bottom:auto}
  .l1-inner{max-width:none}
  .l3{padding-top:46vh}
  .l3-tomb{width:min(62vw,480px);left:-10vw;top:20vh}
  .l3-inner{margin-left:0}
  .runner{right:2vw;bottom:calc(100% + 3vh);width:min(36vw,250px)}
  .l4{padding-top:30vh}
  .l4-scorpion{width:110vw;right:-30vw;top:20vh}
  .l4-inner{max-width:none}
  .kit-screen{position:relative !important;right:auto;top:auto;width:130vw;margin:0 0 6vh -10vw}
  .kit-screen img{transform:rotateY(-12deg) rotateZ(2deg)}
  .kit{padding-top:4vh}
  .kit-inner{max-width:none}
  .kit-objects{grid-template-columns:.6fr 1.4fr}
  .ko-feed{display:none}
}

/* ---------- phone ---------- */
@media (max-width:700px){
  :root{--gutter:20px}
  .top{height:72px}
  .brand-name{font-size:10px}
  .hero{min-height:auto;padding-bottom:22vh}
  .title{font-size:clamp(60px,19vw,104px)}
  .lede{font-size:16px}
  .h-dove,.dove-rig{width:72vw;left:-26vw;top:auto;bottom:14vh}
  .h-fire{width:34vw;left:-12vw;bottom:auto;top:62%}
  .h-neon{display:none}
  .h-bible{width:52vw;right:-16vw;bottom:-6vh}
  .hero-cover{width:76vw;margin:40px -2vw 0 auto}
  .sky{background:linear-gradient(180deg,#1a2a95 0,#2b45c4 52%,#6ea4e8 74%,#a9d3f7 100%)}
  .l1{padding:30vh var(--gutter) 26vh}
  .l1-people{width:96vw;right:-34vw;top:16vh}
  .l1-wall .w-small{font-size:clamp(24px,7.2vw,34px)}
  .l1-wall .w-huge{font-size:clamp(52px,16.4vw,110px)}
  .l1-lines{grid-template-columns:1fr;gap:20px}
  .attract{height:max(640px,100svh)}
  .magnet{width:40vw}
  .l2-copy{left:var(--gutter);right:var(--gutter);bottom:5vh;max-width:none}
  .l2-wall{font-size:clamp(56px,17vw,96px)}
  .ttt{grid-template-columns:1fr;gap:4vh}
  .ttt b{font-size:clamp(76px,26vw,140px)}
  .ttt li:nth-child(2){padding-left:10vw}.ttt li:nth-child(3){padding-left:20vw}
  .l2-verses{grid-template-columns:1fr}
  .l3{padding:30vh var(--gutter) 26vh}
  .l3-tomb{width:64vw;left:-16vw;top:18vh}
  .l3-wall{font-size:clamp(84px,27vw,150px)}
  .dash{margin-top:10vh}
  .l3-foot{grid-template-columns:1fr}
  .eq{grid-row:auto}
  .l4{padding:28vh var(--gutter) 26vh}
  .l4-scorpion{width:124vw;right:-46vw;top:18vh}
  .l4-wall{font-size:clamp(58px,17vw,100px)}
  .asks li{font-size:clamp(34px,11vw,60px)}
  .asks li:nth-child(2){padding-left:5vw}.asks li:nth-child(3){padding-left:10vw}
  .kit-screen{width:150vw;margin-left:-6vw}
  .kit-objects{grid-template-columns:1fr 1.6fr;gap:6vw}
  .close{padding:26vh var(--gutter) 14vh}
  .c-dove{width:90vw;right:-30vw;top:16vh}
  .c-fire{width:44vw;left:-14vw;bottom:-4vh}
  .close-wall{font-size:clamp(50px,15vw,90px)}
  .fgrid{grid-template-columns:1fr 1fr;row-gap:28px}
  .fbrand{grid-column:1/-1}
  .fnav:nth-of-type(1){grid-column:1/2}.fnav:nth-of-type(2){grid-column:2/3}
}
@media (max-width:360px){
  .btn{padding:14px 18px;gap:10px;font-size:12px}
  .top .btn{display:none}
}

@media (prefers-reduced-motion:reduce){
  @view-transition { navigation: none; }
  *,*::before,*::after{transition:none !important;animation:none !important}
  .js .slap{opacity:1;transform:rotate(var(--r,0deg))}
}

/* attraction stage: static positions (no JS, reduced motion) and the engine's starting state */
.mi:nth-of-type(1){--x:10%;--y:18%;--w:15%;--rot:-12deg}
.mi:nth-of-type(2){--x:39%;--y:11%;--w:17%;--rot:-6deg}
.mi:nth-of-type(3){--x:63%;--y:24%;--w:7.5%;--rot:8deg}
.mi:nth-of-type(4){--x:87%;--y:13%;--w:5.5%;--rot:-4deg}
.mi:nth-of-type(5){--x:76%;--y:62%;--w:11%;--rot:5deg}
.mi:nth-of-type(6){--x:51%;--y:47%;--w:7.5%;--rot:-8deg}
.mi:nth-of-type(7){--x:91%;--y:84%;--w:13%;--rot:-14deg}
.mi{left:var(--x);top:var(--y);width:var(--w);transform:translate(-50%,-50%) rotate(var(--rot))}
.magnet{left:auto;right:3%;top:26%;transform:rotate(-8deg)}
.engine .mi{left:0;top:0}
.engine .magnet{left:0;top:0;right:auto}
@media (max-width:700px){
  .mi:nth-of-type(1){--x:16%;--y:12%;--w:30%}
  .mi:nth-of-type(2){--x:62%;--y:8%;--w:36%}
  .mi:nth-of-type(3){--x:90%;--y:24%;--w:14%}
  .mi:nth-of-type(4){--x:10%;--y:29%;--w:10%}
  .mi:nth-of-type(5){--x:44%;--y:26%;--w:24%}
  .mi:nth-of-type(6){--x:54%;--y:41%;--w:12%}
  .mi:nth-of-type(7){--x:30%;--y:42%;--w:28%}
  .magnet{right:-6%;top:30%}
}