/* =========================================================
   COMIC ART MASTERY #1 · a full-color issue
   Process inks: cyan, magenta, yellow, black on newsprint.
   ========================================================= */
:root{
  --ink:#141216;
  --paper:#FFFBF1;
  --news:#F5EAD0;
  --c:#19B3F0;
  --c2:#0A86CC;
  --m:#EC1E8C;
  --y:#FFD21F;
  --y2:#FFE97A;
  --r:#E92A2A;
  --b:#2343C8;
  --o:#FF8B1F;
  --navH:58px;
  --gut:14px;
  --bw:4px;
  --fd:'Bangers','Impact','Arial Narrow Bold',sans-serif;
  --fb:'Shantell Sans','Trebuchet MS',system-ui,sans-serif;
  --dots:radial-gradient(circle,rgba(20,18,22,.15) 27%,transparent 30%);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--navH) + 10px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:500 1.0625rem/1.55 var(--fb);overflow-x:clip;padding-top:var(--navH)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:999;background:var(--y);padding:10px 14px;border:3px solid var(--ink);font-weight:800}
.skip:focus{left:10px;top:10px}
:focus-visible{outline:3px solid var(--m);outline-offset:3px}
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}
.i{width:1em;height:1em;flex:none}

/* ---------- lettering primitives ---------- */
.caption{display:inline-block;background:var(--y);border:3px solid var(--ink);padding:.42em .75em .36em;font:800 .8rem/1.2 var(--fb);letter-spacing:.07em;text-transform:uppercase;transform:rotate(-1deg)}
.h2{font:400 clamp(2.5rem,5.4vw,4.9rem)/.92 var(--fd);letter-spacing:.012em;margin-top:.35em;text-shadow:.05em .05em 0 var(--c)}
.hl-y,.hl-m,.hl-c{padding:0 .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hl-y{background:var(--y)}
.hl-m{background:var(--m);color:#fff;text-shadow:.05em .05em 0 var(--ink)}
.hl-c{background:var(--c);text-shadow:.05em .05em 0 #fff}
.sfx{display:inline-block;font:400 clamp(2rem,4vw,3.4rem)/.9 var(--fd);letter-spacing:.03em;text-transform:uppercase;color:var(--y);-webkit-text-stroke:.11em var(--ink);paint-order:stroke fill;text-shadow:.07em .08em 0 var(--ink);transform:rotate(var(--sr,-8deg));white-space:nowrap;pointer-events:none}
.sfx-w{color:#fff}.sfx-m{color:var(--m)}.sfx-c{color:var(--c)}.sfx-y{color:var(--y)}
.balloon{position:relative;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:46px;padding:1.1em 1.5em;font:700 1.05rem/1.4 var(--fb);text-transform:uppercase;letter-spacing:.02em}
.balloon::before,.balloon::after{content:"";position:absolute;left:var(--tl,18%);bottom:-26px;width:34px;height:28px;clip-path:polygon(0 0,100% 0,8% 100%)}
.balloon::before{background:var(--ink);left:calc(var(--tl,18%) - 4px);bottom:-31px;width:42px;height:33px}
.balloon::after{background:#fff;bottom:-22px}
.tiny{font-size:.82rem;opacity:.75;margin-top:.6em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font:400 1.35rem/1 var(--fd);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:#fff;background:var(--r);border:3px solid var(--ink);padding:.72em 1.15em .64em;box-shadow:5px 5px 0 var(--ink);text-shadow:2px 2px 0 var(--ink);transform:rotate(-1deg);transition:transform .14s ease,box-shadow .14s ease,background .2s;cursor:pointer;white-space:nowrap}
.btn:hover{transform:rotate(-1deg) translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:rotate(-1deg) translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn-lg{font-size:clamp(1.35rem,2vw,1.7rem)}
.btn-sm{font-size:1.05rem;padding:.55em .9em .5em;box-shadow:3px 3px 0 var(--ink)}
.btn-sm:hover{box-shadow:5px 5px 0 var(--ink)}
.btn-y{background:var(--y);color:var(--ink);text-shadow:none}
.btn-ghost{background:#fff;color:var(--ink);text-shadow:none}
.btn-ghost[aria-pressed="true"]{background:var(--ink);color:var(--y)}
.btn-block{width:100%}
.btn-text{font:800 .95rem/1 var(--fb);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;border-bottom:3px solid var(--ink);padding-bottom:3px}
.btn-text:hover{color:#fff}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;height:var(--navH);z-index:60;display:flex;align-items:center;gap:20px;padding:0 18px;background:var(--ink);color:#fff}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand-burst{position:relative;width:46px;height:46px;display:grid;place-items:center;flex:none}
.brand-burst svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--y);stroke:var(--ink);stroke-width:4}
.brand-burst b{position:relative;font:400 .95rem/1 var(--fd);color:var(--r);letter-spacing:.02em;transform:rotate(-8deg)}
.brand-name{font:400 1.3rem/1 var(--fd);letter-spacing:.06em;text-transform:uppercase}
.brand-name i{font-style:normal;color:var(--y)}
.nav-links{display:flex;gap:22px;margin-left:auto}
.nav-links a{font:700 .82rem/1 var(--fb);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;opacity:.85}
.nav-links a:hover{opacity:1;color:var(--y)}
.nav-right{display:flex;align-items:center;gap:16px;margin-left:22px}
.pg-count{font:400 1rem/1 var(--fd);letter-spacing:.1em;background:#fff;color:var(--ink);padding:.35em .55em .3em;transform:rotate(-2deg)}
.pg-count b{font-weight:400;color:var(--r)}
.nav-login{font:700 .8rem/1 var(--fb);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;opacity:.85}
.nav-login:hover{color:var(--y);opacity:1}
.nav .btn-sm{box-shadow:3px 3px 0 var(--c)}
.read-bar{position:absolute;left:0;right:0;bottom:-5px;height:5px;background:rgba(20,18,22,.25)}
.read-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,var(--ink) 75%);background-size:var(--bw-full,100vw) 100%}

/* =========================================================
   PG 1 · COVER
   ========================================================= */
.hero{position:relative;background:var(--c)}
.hero-sticky{position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);align-items:center;gap:3vw;padding:3vh max(4vw,24px) 4vh;min-height:calc(100svh - var(--navH));overflow:clip}
html.can-open .hero{height:calc(210svh - var(--navH))}
html.can-open .hero-sticky{position:sticky;top:var(--navH);height:calc(100svh - var(--navH));min-height:0}
.hero-bg{position:absolute;inset:0;background:
  repeating-conic-gradient(from 0deg at 74% 52%,rgba(255,255,255,.17) 0deg 2.6deg,transparent 2.6deg 10deg),
  radial-gradient(circle,rgba(8,60,140,.2) 26%,transparent 29%) 0 0/15px 15px,
  var(--c)}
.hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 74% 52%,rgba(255,255,255,.3),transparent 70%)}
.hero-copy{position:relative;z-index:2;max-width:660px;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,2vh,20px);will-change:opacity,transform}
.on-sale{display:inline-flex;align-items:center;gap:10px;font:800 .78rem/1 var(--fb);text-transform:uppercase;letter-spacing:.1em;background:var(--ink);color:#fff;padding:6px 14px 6px 6px;transform:rotate(-2deg)}
.on-sale span{background:var(--r);color:#fff;font:400 1.05rem/1 var(--fd);letter-spacing:.06em;padding:5px 9px 3px}
.solicit{font:700 .78rem/1.2 var(--fb);text-transform:uppercase;letter-spacing:.12em;opacity:.8}
.h1{font:400 clamp(2.9rem,min(6.6vw,10vh),6.6rem)/.86 var(--fd);letter-spacing:.012em;text-transform:uppercase;text-shadow:.045em .05em 0 #fff,.09em .1em 0 var(--ink)}
.h1 mark{background:none;color:var(--y);-webkit-text-stroke:.07em var(--ink);paint-order:stroke fill}
.caption.lead{display:block;transform:rotate(-.6deg);background:#fff;font:500 clamp(.95rem,1.1vw,1.06rem)/1.5 var(--fb);text-transform:none;letter-spacing:0;padding:.85em 1.05em;max-width:560px}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.hero-proof{display:flex;flex-wrap:wrap;gap:8px 22px}
.hero-proof li{display:flex;align-items:baseline;gap:7px}
.hero-proof b{font:400 1.75rem/1 var(--fd);letter-spacing:.03em}
.hero-proof span{font:700 .78rem/1 var(--fb);text-transform:uppercase;letter-spacing:.06em}
.hero-proof .noai b{color:var(--r);-webkit-text-stroke:.04em var(--ink);paint-order:stroke fill}
.hero-rob{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 12px;max-width:520px}
.hero-rob img{grid-row:span 2;width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 30%;border:3px solid var(--ink);background:var(--y)}
.hero-rob blockquote{font:700 .92rem/1.35 var(--fb)}
.hero-rob figcaption{font:600 .75rem/1.2 var(--fb);text-transform:uppercase;letter-spacing:.08em}
@media (max-height:820px) and (min-width:1000px){.hero-rob{display:none}}
@media (max-height:700px) and (min-width:1000px){.solicit{display:none}}

/* ---------- the comic book (3D) ---------- */
.book-wrap{--cw:min(34vw,calc((100svh - var(--navH) - 120px) / 1.545),500px);position:relative;z-index:3;justify-self:center;width:var(--cw);height:calc(var(--cw) * 1.545);perspective:2400px;perspective-origin:50% 40%}
.book{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-16deg) rotateX(5deg) rotateZ(-1.5deg);will-change:transform}
.book::before{content:"";position:absolute;inset:0;background:#2a2730;transform:translateZ(-9px)}
.book-shadow{position:absolute;left:4%;right:-6%;bottom:-6%;height:12%;background:radial-gradient(closest-side,rgba(10,30,70,.55),transparent);filter:blur(6px);transform-origin:0 50%;will-change:transform}
.edge{position:absolute;background:repeating-linear-gradient(90deg,#fffaf0 0 1px,#d9d1bf 1px 2px)}
.edge-r{top:0;right:0;width:9px;height:100%;transform-origin:right center;transform:rotateY(-90deg)}
.edge-b{left:0;bottom:0;height:9px;width:100%;transform-origin:center bottom;transform:rotateX(90deg);background:repeating-linear-gradient(0deg,#fffaf0 0 1px,#d9d1bf 1px 2px)}
.page1{position:absolute;inset:0;background:var(--paper);transform:translateZ(0);overflow:hidden;container-type:inline-size;padding:4.5% 4.5% 7%}
.cover{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:left center;transform:translateZ(1px);will-change:transform}
.cover-front,.cover-back{position:absolute;inset:0;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;container-type:inline-size}
.cover-front{background:var(--y);border-radius:0 3px 3px 0;box-shadow:inset 3px 0 0 rgba(0,0,0,.18)}
.cover-back{transform:rotateY(180deg);background:var(--paper)}
.cv-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.25));opacity:0;pointer-events:none}
.book-hint{position:absolute;left:0;right:0;bottom:-46px;text-align:center;font:400 1.15rem/1 var(--fd);letter-spacing:.12em;color:var(--ink);display:none}
html.can-open .book-hint{display:block}

/* cover: background */
.cv-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse 55% 45% at 58% 62%,rgba(255,255,255,.75),rgba(255,255,255,0) 70%),
  repeating-conic-gradient(from 3deg at 58% 58%,#FFD21F 0deg 5deg,#FFC21A 5deg 11deg),
  var(--y)}
.cv-dots{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,var(--m) 34%,transparent 37%) 0 0/2.6cqw 2.6cqw;
  -webkit-mask:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 14%,transparent 34%);
  mask:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 14%,transparent 34%);mix-blend-mode:multiply;opacity:.85}
.cv-dots::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,var(--c) 34%,transparent 37%) 1.3cqw 1.3cqw/2.6cqw 2.6cqw;
  -webkit-mask:radial-gradient(ellipse 60% 42% at 100% 0%,#000,transparent 70%);mask:radial-gradient(ellipse 60% 42% at 100% 0%,#000,transparent 70%)}
/* cover: the art, as three printing plates */
.cv-art{position:absolute;left:0;right:0;bottom:0;height:125.9cqw;isolation:isolate}
.plate{position:absolute;inset:0;-webkit-mask:url(assets/hero-lines.webp) center/100% 100% no-repeat;mask:url(assets/hero-lines.webp) center/100% 100% no-repeat;will-change:transform}
.plate.pk{background:var(--ink)}
.plate.pc{background:var(--c);mix-blend-mode:multiply;opacity:.9}
.plate.pm{background:var(--m);mix-blend-mode:multiply;opacity:.85}
html.js .plate{opacity:0}
html.js .cv-art.go .plate{transition:opacity .5s ease}
html.js .cv-art.go .plate.pk{opacity:1}
html.js .cv-art.go .plate.pc{opacity:.9}
html.js .cv-art.go .plate.pm{opacity:.85}
/* cover: trade dress */
.cv-strip{position:absolute;top:0;left:0;right:0;height:5.6cqw;background:var(--ink);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 2.6cqw;font:400 2.9cqw/1 var(--fd);letter-spacing:.12em;text-transform:uppercase}
.cv-strip span:last-child{color:var(--y)}
.cv-corner{position:absolute;top:8cqw;left:3cqw;width:19cqw;background:#fff;border:.7cqw solid var(--ink);text-align:center;font-family:var(--fd);text-transform:uppercase;line-height:1;transform:rotate(-1.5deg)}
.cv-mug{display:block;height:14cqw;background:url(assets/mike-workshop.webp) 57% 6%/135% auto no-repeat;filter:grayscale(1) contrast(1.15);border-bottom:.6cqw solid var(--ink)}
.cv-corner b{display:block;font-weight:400;font-size:3.6cqw;padding-top:.9cqw}
.cv-corner b em{font-style:normal;font-size:7.4cqw;color:var(--r);margin-left:.4cqw}
.cv-price{display:block;background:var(--y);font-size:4.6cqw;padding:.6cqw 0 .3cqw;border-top:.5cqw solid var(--ink)}
.cv-corner i{display:block;font-style:normal;font-size:2.8cqw;padding:.7cqw 0 .5cqw;background:var(--ink);color:#fff;letter-spacing:.08em}
.cv-mast{position:absolute;top:7.5cqw;left:24.5cqw;right:2cqw;display:flex;flex-direction:column;align-items:flex-start;font-family:var(--fd);text-transform:uppercase;line-height:.8;transform:rotate(-4deg);transform-origin:0 0}
.cv-the{font-size:4.6cqw;background:var(--ink);color:#fff;padding:.9cqw 1.8cqw .5cqw;margin:0 0 .8cqw 1cqw;transform:rotate(-4deg);letter-spacing:.1em}
.cv-l1{font-size:11.8cqw;color:#fff;-webkit-text-stroke:1.5cqw var(--ink);paint-order:stroke fill;text-shadow:.6cqw .6cqw 0 var(--ink),1.2cqw 1.2cqw 0 var(--ink);letter-spacing:.02em}
.cv-l2{font-size:19.5cqw;color:var(--r);-webkit-text-stroke:1.9cqw var(--ink);paint-order:stroke fill;text-shadow:.5cqw .5cqw 0 var(--ink),1cqw 1cqw 0 var(--ink),1.5cqw 1.5cqw 0 var(--ink),2cqw 2cqw 0 var(--ink);letter-spacing:.01em;margin-top:-.6cqw}
.cv-burst{position:absolute;left:1cqw;top:40cqw;width:27cqw;height:27cqw;display:grid;place-items:center;transform:rotate(-10deg)}
.cv-burst svg{position:absolute;inset:0;width:100%;height:100%;fill:#fff;stroke:var(--ink);stroke-width:3}
.cv-burst span{position:relative;font:400 4.5cqw/.9 var(--fd);color:var(--r);text-align:center;text-transform:uppercase;letter-spacing:.02em}
.cv-feat{position:absolute;left:2.5cqw;top:96cqw;display:flex;flex-direction:column;gap:1.1cqw}
.cv-feat li{font:400 4.4cqw/1 var(--fd);letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:#fff;padding:1cqw 1.8cqw .6cqw;transform:rotate(-5deg);width:max-content}
.cv-feat li:nth-child(2){background:var(--m);margin-left:2cqw}
.cv-feat li:nth-child(3){background:var(--c);color:var(--ink);margin-left:4cqw}
.cv-feat li:nth-child(4){background:var(--r);margin-left:6cqw}
.cv-guest{position:absolute;right:2.5cqw;bottom:11cqw;display:flex;align-items:center;gap:1.4cqw;transform:rotate(-3deg)}
.cv-rob{width:15cqw;height:15cqw;border-radius:50%;border:.7cqw solid var(--ink);background:var(--y) url(assets/rob-portrait.webp) 50% 30%/cover;flex:none}
.cv-guest>span:last-child{background:#fff;border:.5cqw solid var(--ink);padding:1cqw 1.6cqw .7cqw;font:400 3.2cqw/1 var(--fd);letter-spacing:.06em;text-transform:uppercase}
.cv-guest b{font-weight:400;color:var(--r);font-size:4.2cqw}
.cv-code{position:absolute;left:3cqw;bottom:3cqw;width:21cqw;background:#fff;border:.4cqw solid var(--ink);padding:1.2cqw 1.4cqw .8cqw;text-align:center}
.cv-code svg{width:100%;height:7cqw;fill:var(--ink)}
.cv-code span{display:block;font:700 1.75cqw/1.1 var(--fb);text-transform:uppercase;letter-spacing:.04em;margin-top:.6cqw}
.cv-credit{position:absolute;right:3cqw;bottom:3.2cqw;font:400 2.8cqw/1 var(--fd);letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:#fff;padding:.9cqw 1.6cqw .6cqw}
.cv-gloss{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.55),rgba(255,255,255,0) 45%),linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,.12) 100%);mix-blend-mode:soft-light}
.cover-front::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3.4cqw;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.25) 40%,rgba(0,0,0,.12) 60%,transparent);pointer-events:none}

/* inside front cover */
.ifc{position:absolute;inset:0;padding:8cqw 7cqw;display:flex;flex-direction:column;gap:3.4cqw}
.ifc-kicker{font:800 2.4cqw/1 var(--fb);text-transform:uppercase;letter-spacing:.2em;color:var(--m)}
.ifc-title{font:400 9.5cqw/.9 var(--fd);text-transform:uppercase;letter-spacing:.02em}
.ifc-title b{font-weight:400;color:var(--r)}
.ifc-sub{font:700 3.4cqw/1.2 var(--fb);font-style:italic}
.ifc-credits{display:grid;gap:1.6cqw;border-top:.6cqw solid var(--ink);border-bottom:.6cqw solid var(--ink);padding:3cqw 0}
.ifc-credits div{display:flex;justify-content:space-between;gap:2cqw;align-items:baseline}
.ifc-credits dt{font:800 2.5cqw/1 var(--fb);text-transform:uppercase;letter-spacing:.12em;opacity:.7}
.ifc-credits dd{font:400 5.2cqw/1 var(--fd);letter-spacing:.05em;text-transform:uppercase}
.ifc-credits div:last-child dd{color:var(--r)}
.ifc-prev{background:var(--y);border:.6cqw solid var(--ink);padding:2.6cqw 3cqw;font:700 3.2cqw/1.35 var(--fb);text-transform:uppercase}
.ifc-prev b{display:block;font:400 4.6cqw/1 var(--fd);letter-spacing:.06em;margin-bottom:1cqw}
.ifc-ind{margin-top:auto;font:500 2.15cqw/1.45 var(--fb);opacity:.7}
.folio{position:absolute;bottom:2.6cqw;font:400 3.2cqw/1 var(--fd);letter-spacing:.1em}
.folio.r{right:4.5cqw}.folio.l{left:7cqw}

/* page 1 (right-hand page once the cover opens) */
.p1-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.35fr 1fr .8fr;gap:2.6cqw;height:100%}
.p1-panel{position:relative;border:.8cqw solid var(--ink);overflow:hidden;display:grid;place-items:center;padding:2cqw}
.p1-a{grid-column:1/3;background:#02122F;padding:0}
.p1-a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.p1-a .cap{position:absolute;left:2cqw;top:2cqw;z-index:1}
.page1 .cap{background:var(--y);border:.5cqw solid var(--ink);font:800 2.7cqw/1.15 var(--fb);text-transform:uppercase;padding:1.2cqw 1.8cqw;letter-spacing:.04em}
.p1-b{background:var(--m) radial-gradient(circle,rgba(255,255,255,.28) 30%,transparent 33%) 0 0/2.4cqw 2.4cqw}
.p1-b .sfx{font-size:7cqw;--sr:-10deg;white-space:normal;text-align:center}
.p1-c{background:var(--c)}
.thought{background:#fff;border:.6cqw solid var(--ink);border-radius:50%;padding:4.5cqw 4cqw;font:800 3.1cqw/1.2 var(--fb);text-transform:uppercase;text-align:center}
.thought i{color:var(--r)}
.p1-d{grid-column:1/3;background:var(--y);text-align:center;align-content:center;gap:1.4cqw}
.p1-d .cap-w{background:#fff}
.p1-d b{font:400 7.6cqw/.9 var(--fd);text-transform:uppercase;letter-spacing:.02em}
.p1-more{font:800 2.3cqw/1 var(--fb);text-transform:uppercase;letter-spacing:.14em}

/* =========================================================
   Comic pages (sections)
   ========================================================= */
.pg{position:relative;margin:var(--gut);border:var(--bw) solid var(--ink);overflow:clip;padding:clamp(64px,9vw,120px) 0}
.pg-tag{position:absolute;top:0;right:0;z-index:5;background:var(--ink);color:#fff;font:400 1rem/1 var(--fd);letter-spacing:.14em;text-transform:uppercase;padding:.45em .8em .35em}

/* reveal system */
html.js .rv{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .75s cubic-bezier(.2,.9,.3,1.15);transition-delay:var(--d,0s)}
html.js .rv.in{opacity:1;transform:none}
html.js .panel.rv{transform:scale(1.07);clip-path:inset(9% 9% 9% 9%);transition:opacity .45s ease,transform .8s cubic-bezier(.2,.9,.25,1),clip-path .8s cubic-bezier(.2,.9,.25,1);transition-delay:var(--d,0s)}
html.js .panel.rv.in{transform:none;clip-path:inset(0)}
html.js .panel .sfx{transform:rotate(-40deg) scale(0);transition:transform .55s cubic-bezier(.3,1.9,.5,1);transition-delay:calc(var(--d,0s) + .4s)}
html.js .panel.in .sfx{transform:rotate(var(--sr,-8deg)) scale(1)}

/* ---------- PG 2 · problem ---------- */
.problem{background:var(--paper)}
.problem-head{max-width:900px;margin-bottom:44px}
.grid-panels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.panel{position:relative;border:var(--bw) solid var(--ink);overflow:hidden;min-height:250px;padding:16px}
.panel .cap{position:relative;z-index:2;display:inline-block;background:var(--y);border:3px solid var(--ink);padding:.4em .7em .35em;font:800 .82rem/1.2 var(--fb);text-transform:uppercase;letter-spacing:.05em}
.panel .prop{position:absolute;inset:auto 0 0;margin:auto;height:72%;width:100%}
.pn1{grid-column:span 4;background:var(--c) radial-gradient(circle,rgba(255,255,255,.35) 26%,transparent 29%) 0 0/13px 13px}
.pn2{grid-column:span 2;background:var(--m) radial-gradient(circle,rgba(0,0,0,.18) 26%,transparent 29%) 0 0/12px 12px}
.pn3{grid-column:span 2;background:var(--y) radial-gradient(circle,rgba(233,42,42,.35) 26%,transparent 29%) 0 0/12px 12px}
.pn4{grid-column:span 4;background:#fff radial-gradient(circle,rgba(25,179,240,.4) 26%,transparent 29%) 0 0/13px 13px}
.pn5{grid-column:span 6;background:var(--ink);color:#fff;min-height:0;padding:clamp(26px,4vw,48px);display:grid;gap:14px}
.pn5 .big{font:400 clamp(1.9rem,3.6vw,3rem)/1 var(--fd);letter-spacing:.02em;text-transform:uppercase;color:var(--y);max-width:24ch}
.pn5 p:not(.big){max-width:62ch;font-size:1.1rem}
.pn5 b{color:var(--y)}
.panel .sfx{position:absolute;z-index:3}
.s1{right:5%;top:12%;--sr:9deg;font-size:clamp(2.6rem,5vw,4.4rem)}
.s2{left:10%;bottom:8%;--sr:-12deg}
.s3{right:8%;top:22%;--sr:10deg}
.s4{right:4%;top:16%;--sr:-6deg;font-size:clamp(2.2rem,4vw,3.6rem)}
.s5{right:4%;bottom:12%;--sr:-10deg;font-size:clamp(2.6rem,5vw,4.4rem)}
.pn1 .prop{height:80%;left:-10%}
.pn4 .prop{left:-14%}

/* ---------- PG 3 · system ---------- */
.system{background:var(--b) radial-gradient(circle,rgba(255,255,255,.12) 26%,transparent 29%) 0 0/16px 16px;color:#fff;padding:0}
.system .h2{text-shadow:.05em .05em 0 var(--ink)}
.system .hl-y{color:var(--ink);text-shadow:none}
.sys-sticky{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:3vw;padding:clamp(56px,8vw,100px) max(4vw,24px)}
.sys-steps{margin-top:28px;display:grid;gap:10px;counter-reset:s}
.sys-steps li{border-left:5px solid rgba(255,255,255,.3);padding:6px 0 6px 16px;transition:opacity .35s,border-color .35s,transform .35s}
.sys-steps b{display:block;font:400 1.55rem/1 var(--fd);letter-spacing:.06em;text-transform:uppercase}
.sys-steps span{display:block;font-size:.98rem;line-height:1.45;opacity:.9;margin-top:4px}
.sys-stage{position:relative;display:grid;place-items:center;perspective:1700px;perspective-origin:50% 45%}
.sys-cam{--sw:min(250px,22vw);position:relative;width:var(--sw);height:calc(var(--sw) * 2.4);transform-style:preserve-3d}
.sheet{position:absolute;inset:0;margin:0;background:rgba(255,255,255,var(--a,.8));border:3px solid var(--ink);box-shadow:0 0 0 0 var(--y);transition:border-color .3s,box-shadow .3s;will-change:transform,opacity}
.sheet img{width:100%;height:100%;object-fit:contain;padding:6% 4% 4%}
.sheet[data-i="3"] img{filter:contrast(1.45) brightness(.96)}
.sys-burst{position:absolute;left:50%;top:50%;width:min(620px,92%);aspect-ratio:1;transform:translate(-50%,-50%) rotate(-8deg) scale(0);transition:transform .7s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
.sys-burst svg{width:100%;height:100%;fill:var(--y);stroke:var(--ink);stroke-width:2}
.sys-burst.pop{transform:translate(-50%,-50%) rotate(-8deg) scale(1)}
.sheet figcaption{position:absolute;left:-3px;top:-34px;background:var(--ink);color:#fff;font:400 1.05rem/1 var(--fd);letter-spacing:.1em;text-transform:uppercase;padding:.5em .8em .35em;white-space:nowrap}
.sheet.on{border-color:var(--y);box-shadow:0 0 0 4px var(--y),10px 14px 0 rgba(0,0,0,.35)}
.sheet.on figcaption{background:var(--y);color:var(--ink)}
.sys-sfx{position:absolute;right:4%;top:8%;font-size:clamp(2.6rem,5vw,4.6rem);transform:rotate(-12deg) scale(0);transition:transform .5s cubic-bezier(.3,1.9,.5,1);z-index:4}
.sys-sfx.pop{transform:rotate(-12deg) scale(1)}
.sys-hint{position:absolute;bottom:-6px;left:0;right:0;text-align:center;font:700 .8rem/1 var(--fb);text-transform:uppercase;letter-spacing:.14em;opacity:.75;transition:opacity .3s}
/* 3D scroll mode */
html.sys-3d .system{height:calc(330svh - var(--navH))}
html.sys-3d .sys-sticky{position:sticky;top:var(--navH);height:calc(100svh - var(--navH) - var(--gut) * 2);padding-block:24px}
html.sys-3d .sys-steps li{opacity:.42}
html.sys-3d .sys-steps li.on{opacity:1;border-color:var(--y);transform:translateX(6px)}
html.sys-3d .sys-stage{height:100%}
/* static fallback: a four-panel strip */
html:not(.sys-3d) .sys-cam{width:100%;height:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;transform:none !important}
html:not(.sys-3d) .sheet{position:relative;aspect-ratio:300/720;margin-top:34px;--a:1}
html:not(.sys-3d) .sys-hint,html:not(.sys-3d) .sys-sfx{display:none}

/* ---------- PG 4 · gesture splash ---------- */
.gesture{background:var(--m);color:#fff;min-height:min(86svh,820px);display:grid;align-items:center;padding:clamp(56px,7vw,90px) 0}
.gest-art{position:absolute;inset:0;overflow:hidden}
.gest-art img{position:absolute;top:50%;left:0;width:118%;max-width:none;height:auto;min-height:100%;object-fit:cover;transform:translate3d(calc(var(--gq,.5) * -15.25%),-50%,0);mix-blend-mode:screen;opacity:.95;will-change:transform}
.gesture::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(236,30,140,.92) 0%,rgba(236,30,140,.55) 38%,rgba(236,30,140,0) 62%)}
.speed{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.55;pointer-events:none}
.speed path{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1s ease}
.gesture.in-view .speed path{stroke-dashoffset:0}
.gest-copy{position:relative;z-index:2;margin-left:max(4vw,24px);max-width:min(560px,88vw);background:var(--ink);border:var(--bw) solid var(--ink);padding:clamp(22px,3vw,36px);box-shadow:10px 10px 0 var(--y)}
.gest-copy .h2{text-shadow:.05em .05em 0 var(--m)}
.gest-copy .hl-y{color:var(--ink);text-shadow:none}
.gest-copy p:last-child{margin-top:16px}
.gest-sfx{position:absolute;right:6%;bottom:10%;z-index:2;font-size:clamp(3rem,7vw,6.4rem);--sr:-9deg}

/* ---------- PG 5 · faces / trading cards ---------- */
.faces{background:var(--y) var(--dots) 0 0/14px 14px}
.faces-inner{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:clamp(28px,4vw,64px);align-items:center}
.faces-copy p:not(.caption):not(.tiny){margin-top:18px;max-width:42ch}
.faces-copy .btn{margin-top:24px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.tcard{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;perspective:1000px;transform:translateY(var(--ly,0)) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .25s ease;-webkit-tap-highlight-color:transparent}
.tc-in{display:block;position:relative;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.35,1.35,.45,1)}
.tcard[aria-pressed="true"] .tc-in{transform:rotateY(180deg)}
.tc-f{display:flex;flex-direction:column;gap:6px;background:var(--k);border:3px solid var(--ink);border-radius:10px;padding:7%;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;box-shadow:4px 5px 0 var(--ink)}
.tc-front{position:relative}
.tc-back{position:absolute;inset:0;transform:rotateY(180deg)}
.tc-art{display:block;aspect-ratio:301/360;border:3px solid var(--ink);border-radius:4px;background:#fffdf6 url(assets/faces-construction.webp) var(--x) var(--y)/300% 200% no-repeat}
.tc-art.fin{background-image:url(assets/faces-final.webp);background-color:#fff}
.tc-name{display:flex;align-items:center;gap:6px;background:var(--ink);color:#fff;font:400 clamp(.82rem,1.15vw,1.08rem)/1 var(--fd);letter-spacing:.06em;text-transform:uppercase;padding:.5em .55em .4em;border-radius:3px;white-space:nowrap;overflow:hidden}
.tc-name b{font-weight:400;color:var(--y)}
.tc-tag{position:absolute;top:10%;right:-2px;background:#fff;border:2px solid var(--ink);font:800 .58rem/1 var(--fb);text-transform:uppercase;letter-spacing:.08em;padding:.35em .5em;transform:rotate(4deg)}
.tc-back .tc-tag{background:var(--y)}
.tc-holo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 22%,rgba(255,40,190,.55) 36%,rgba(30,230,255,.55) 46%,rgba(255,240,60,.55) 56%,transparent 70%);background-size:260% 260%;background-position:var(--hx,40%) var(--hy,40%);mix-blend-mode:color-dodge;opacity:.5;transition:background-position .15s}
.tcard:hover{--ly:-6px}

/* ---------- PG 6 · courses ---------- */
.courses{background:var(--paper)}
.courses-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:end}
.nemesis{background:#fff;border:var(--bw) solid var(--ink);padding:20px;position:relative}
.nemesis::before{content:"";position:absolute;inset:-4px;transform:translate(8px,8px);background:var(--m);border:var(--bw) solid var(--ink);z-index:-1}
.nem-q{font:400 1.6rem/1 var(--fd);letter-spacing:.06em;text-transform:uppercase}
.nem-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.nem-btns button{text-align:left;background:var(--paper);border:3px solid var(--ink);padding:9px 12px;cursor:pointer;transition:transform .15s,background .2s,box-shadow .15s}
.nem-btns button b{display:block;font:400 1.15rem/1 var(--fd);letter-spacing:.05em;text-transform:uppercase}
.nem-btns button span{display:block;font-size:.8rem;line-height:1.3;opacity:.8;margin-top:3px}
.nem-btns button:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)}
.nem-btns button[aria-pressed="true"]{background:var(--ink);color:#fff}
.nem-btns button[aria-pressed="true"] b{color:var(--y)}
.nem-a{margin-top:14px;font-weight:700;font-size:.95rem;min-height:2.9em}
.nem-a b{background:var(--y);padding:0 .2em}
.issues{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:110px}
.issue{position:relative;display:flex;flex-direction:column;background:#fff;border:var(--bw) solid var(--ink);padding:0 18px 18px;transition:transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.is-art{order:-1;margin:-92px auto 10px;width:80%;transform:rotate(-4deg);transition:transform .45s cubic-bezier(.3,1.6,.5,1);filter:drop-shadow(6px 8px 0 rgba(20,18,22,.22))}
.issue:nth-child(even) .is-art{transform:rotate(3deg)}
.issue:hover .is-art{transform:rotate(1deg) scale(1.07) translateY(-8px)}
.is-top{display:flex;align-items:center;gap:8px;margin:0 -18px 14px;background:var(--k);border-block:var(--bw) solid var(--ink);padding:9px 14px 7px;font-family:var(--fd);text-transform:uppercase;letter-spacing:.06em}
.is-top b{font-weight:400;font-size:1.9rem;line-height:.8;color:#fff;-webkit-text-stroke:.08em var(--ink);paint-order:stroke fill}
.is-top span{font-size:1rem}
.is-top em{margin-left:auto;font-style:normal;font-size:.95rem;background:#fff;border:2px solid var(--ink);padding:.25em .45em .15em}
.issue h3{font:400 1.6rem/1 var(--fd);letter-spacing:.03em;text-transform:uppercase}
.quip{font-size:.93rem;line-height:1.45;margin-top:8px}
.ticks{display:grid;gap:7px;margin:14px 0 16px}
.ticks li{display:grid;grid-template-columns:20px 1fr;gap:8px;font-size:.88rem;line-height:1.35}
.ticks svg{width:20px;height:20px;color:var(--r);margin-top:1px}
.is-link{margin-top:auto;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font:800 .78rem/1 var(--fb);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:3px}
.is-link:hover{color:var(--r)}
.is-start{position:absolute;top:-20px;right:-14px;z-index:3;background:var(--y);border:3px solid var(--ink);font:400 1.1rem/1 var(--fd);letter-spacing:.08em;text-transform:uppercase;padding:.45em .7em .35em;transform:rotate(8deg) scale(0);transition:transform .45s cubic-bezier(.3,1.9,.5,1)}
.issue.pick{transform:translateY(-10px) rotate(-1deg);box-shadow:10px 12px 0 var(--ink);z-index:2}
.issue.pick .is-start{transform:rotate(8deg) scale(1)}
.issues.picking .issue:not(.pick){opacity:.55;transition:opacity .3s,transform .3s}
.courses-cta{margin-top:46px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 26px;text-align:center}
.courses-cta p{font-size:1.1rem}

/* ---------- PG 7 · variant covers wall ---------- */
.gallery{color:#fff;background:#3b342d radial-gradient(circle,#17130f 2.6px,transparent 3.2px) 0 0/26px 26px;padding-bottom:clamp(50px,7vw,90px)}
.gal-head{max-width:760px}
.gal-head p:not(.caption){margin-top:16px;opacity:.92}
.gallery .h2{text-shadow:.05em .05em 0 var(--m)}
.gallery .hl-y{color:var(--ink);text-shadow:none}
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:46px 30px;width:min(1180px,100% - 48px);margin:56px auto 0;perspective:1400px}
.variant{position:relative;display:block;aspect-ratio:2/3;padding:0;border:3px solid var(--ink);background:#fff;cursor:zoom-in;transform:rotate(var(--rot,0deg)) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(var(--ly,0));transition:transform .3s cubic-bezier(.3,1.4,.5,1),box-shadow .3s;box-shadow:0 16px 26px rgba(0,0,0,.5);overflow:visible}
.variant::before{content:"";position:absolute;left:50%;top:-24px;width:14px;height:22px;margin-left:-7px;border:3px solid #9a9086;border-bottom:0;border-radius:8px 8px 0 0}
.variant::after{content:"";position:absolute;inset:-7px -7px -5px;border:1px solid rgba(255,255,255,.45);border-radius:2px;background:linear-gradient(120deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 58%,rgba(255,255,255,.12) 72%,rgba(255,255,255,0) 86%);pointer-events:none}
.variant:hover,.variant:focus-visible{--ly:-10px;box-shadow:0 26px 36px rgba(0,0,0,.55);z-index:2}
.variant img{position:absolute;left:0;right:0;top:15%;height:73%;width:100%;object-fit:cover;object-position:var(--op,50% 50%)}
.vr-top{position:absolute;top:0;left:0;right:0;height:15%;background:var(--y);border-bottom:3px solid var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 8%;font-family:var(--fd);text-transform:uppercase;color:var(--ink)}
.vr-top b{font-weight:400;font-size:clamp(1.3rem,2.1vw,1.9rem);color:var(--r);-webkit-text-stroke:.06em var(--ink);paint-order:stroke fill;letter-spacing:.04em}
.vr-top i{font-style:normal;font-size:1.1rem}
.variant:nth-child(3n+2) .vr-top{background:var(--c)}
.variant:nth-child(3n) .vr-top{background:var(--m)}
.variant:nth-child(3n) .vr-top i{color:#fff}
.vr-lbl{position:absolute;left:0;right:0;bottom:0;height:12%;display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;font:400 clamp(.85rem,1.2vw,1.05rem)/1 var(--fd);letter-spacing:.08em;text-transform:uppercase}
.vr-ratio{position:absolute;right:-16px;top:12%;z-index:2;background:var(--r);color:#fff;border:3px solid var(--ink);font:400 1rem/1 var(--fd);letter-spacing:.08em;text-transform:uppercase;padding:.4em .6em .3em;transform:rotate(12deg)}
.variant.foil img{filter:contrast(1.05)}
.variant.foil .vr-top{background:linear-gradient(100deg,#d9d9e8,#fff 30%,#b9c1d6 55%,#fff 80%,#cfd4e6)}
.variant.foil::after{background:linear-gradient(115deg,transparent 20%,rgba(255,60,200,.35) 34%,rgba(40,230,255,.35) 46%,rgba(255,240,80,.35) 58%,transparent 72%);background-size:300% 300%;background-position:var(--hx,30%) var(--hy,30%);mix-blend-mode:color-dodge;animation:foil 6s ease-in-out infinite alternate}
@keyframes foil{to{background-position:100% 100%}}

.lightbox{border:var(--bw) solid var(--ink);padding:14px 14px 10px;background:#fff;max-width:min(92vw,1100px);max-height:92svh;box-shadow:12px 12px 0 var(--y)}
.lightbox::backdrop{background:rgba(20,18,22,.85)}
.lightbox img{max-width:100%;max-height:calc(92svh - 110px);margin:0 auto;object-fit:contain}
.lightbox p{font:400 1.2rem/1.2 var(--fd);letter-spacing:.06em;text-transform:uppercase;margin-top:10px;text-align:center}
.lb-x{position:absolute;top:-4px;right:-4px;width:44px;height:44px;border:var(--bw) solid var(--ink);background:var(--r);color:#fff;font:400 1.9rem/1 var(--fd);cursor:pointer}

.wall-hint{display:none;text-align:center;font:400 1.1rem/1 var(--fd);letter-spacing:.14em;text-transform:uppercase;opacity:.8;margin-top:4px}
/* ---------- PG 8 · student flip pad ---------- */
.students{background:var(--paper) radial-gradient(circle,rgba(25,179,240,.18) 26%,transparent 29%) 0 0/14px 14px}
.stu-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.stu-copy>p:not(.caption){margin-top:18px;max-width:44ch}
.stu-tabs{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.stu-tabs button{background:#fff;border:3px solid var(--ink);padding:8px 14px 6px;cursor:pointer;font:400 1.3rem/1 var(--fd);letter-spacing:.06em;text-transform:uppercase;text-align:left;transition:transform .15s,background .2s}
.stu-tabs button small{display:block;font:800 .6rem/1 var(--fb);letter-spacing:.12em;opacity:.65;margin-bottom:3px}
.stu-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--y);transform:rotate(-2deg)}
.first-app{position:relative;margin-top:34px;width:min(230px,58%);background:#fff;border:3px solid var(--ink);padding:10px 10px 8px;transform:rotate(-3deg);box-shadow:6px 6px 0 var(--ink)}
.first-app img{aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;width:100%;filter:sepia(.25)}
.first-app figcaption{font:400 1rem/1 var(--fd);letter-spacing:.08em;text-transform:uppercase;margin-top:8px}
.fa-tag{position:absolute;top:-16px;left:-12px;z-index:1;background:var(--r);color:#fff;border:3px solid var(--ink);font:400 .95rem/1 var(--fd);letter-spacing:.08em;text-transform:uppercase;padding:.4em .6em .3em;transform:rotate(-6deg)}
.stu-stage{position:relative}
.pad{position:relative;width:min(430px,100%);aspect-ratio:720/1112;margin:58px auto 0;perspective:2000px;perspective-origin:50% -10%;transform-style:preserve-3d}
.pad::before{content:"";position:absolute;inset:10px -10px -10px 10px;background:var(--ink)}
.rings{position:absolute;left:6%;right:6%;top:-22px;height:40px;z-index:10;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='40'%3E%3Crect x='9' y='2' width='8' height='34' rx='4' fill='%23E8E4DA' stroke='%23141216' stroke-width='2.5'/%3E%3Cellipse cx='13' cy='31' rx='4' ry='2.4' fill='%23141216'/%3E%3C/svg%3E") 0 0/26px 40px repeat-x}
.board{position:absolute;inset:0;margin:0;background:#fff;border:var(--bw) solid var(--ink);transform-origin:50% 0;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.55,0,.2,1),opacity .4s ease .6s}
.board img{width:100%;height:100%;object-fit:cover;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.board figcaption{position:absolute;left:10px;bottom:10px;background:var(--y);border:3px solid var(--ink);font:400 1.15rem/1 var(--fd);letter-spacing:.08em;text-transform:uppercase;padding:.4em .7em .3em;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.b-color figcaption{background:var(--m);color:#fff}
.b-inks figcaption{background:#fff}
.board-back{position:absolute;inset:0;background:#efe9db radial-gradient(circle,rgba(0,0,0,.08) 26%,transparent 29%) 0 0/10px 10px;transform:rotateX(180deg) translateZ(1px);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.board.up{transform:rotateX(-104deg)}
.board.up.gone{opacity:0}
.pad-sfx{position:absolute;right:-18px;top:16%;z-index:12;font-size:clamp(2.2rem,4vw,3.4rem);transform:rotate(12deg) scale(0);transition:transform .45s cubic-bezier(.3,1.9,.5,1)}
.pad-sfx.pop{transform:rotate(12deg) scale(1)}
.fine{font-size:.8rem;opacity:.75;margin-top:22px;text-align:center}

/* ---------- PG 9 · letters ---------- */
.letters{background:var(--news) radial-gradient(circle,rgba(120,90,40,.12) 26%,transparent 29%) 0 0/12px 12px}
.let-mast{text-align:center;border-block:6px double var(--ink);padding:18px 0 14px;max-width:880px;margin:0 auto}
.let-title{font:400 clamp(3rem,9vw,7rem)/.85 var(--fd);letter-spacing:.03em;text-transform:uppercase;color:var(--r);-webkit-text-stroke:.05em var(--ink);paint-order:stroke fill;text-shadow:.05em .05em 0 var(--ink);transform:rotate(-2deg)}
.let-mast p{margin-top:10px;font:700 .9rem/1.3 var(--fb);text-transform:uppercase;letter-spacing:.1em}
.let-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);margin-top:56px;max-width:1000px;margin-inline:auto}
.letter{position:relative;isolation:isolate;padding:clamp(44px,5vw,64px) clamp(46px,5.6vw,74px) calc(clamp(44px,5vw,64px) + 50px);text-align:center;display:grid;gap:12px;justify-items:center;align-content:center}
.letter::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(closest-side,#fff calc(100% - 1.5px),rgba(255,255,255,0)) 0 0/100% calc(100% - 50px) no-repeat,
    linear-gradient(to bottom right,#fff calc(50% - .6px),rgba(255,255,255,0) calc(50% + .6px)) 26% 100%/58px 86px no-repeat;
  filter:drop-shadow(0 3.5px 0 var(--ink)) drop-shadow(0 -3.5px 0 var(--ink)) drop-shadow(3.5px 0 0 var(--ink)) drop-shadow(-3.5px 0 0 var(--ink))}
.letter.l2{transform:rotate(1.5deg)}
.letter.l2::before{background:radial-gradient(closest-side,#fff calc(100% - 1.5px),rgba(255,255,255,0)) 0 0/100% calc(100% - 50px) no-repeat,
    linear-gradient(to bottom left,#fff calc(50% - .6px),rgba(255,255,255,0) calc(50% + .6px)) 74% 100%/58px 86px no-repeat}
.letter blockquote{font:700 clamp(1rem,1.5vw,1.2rem)/1.4 var(--fb);text-transform:uppercase;letter-spacing:.01em}
.letter figcaption{font:400 1.4rem/1 var(--fd);letter-spacing:.08em;text-transform:uppercase;color:var(--r)}
.stars{display:flex;gap:3px}
.stars svg{width:22px;height:22px;fill:var(--y);stroke:var(--ink);stroke-width:1.6}

/* ---------- PG 10 · Rob ---------- */
.rob{background:var(--r) radial-gradient(circle,rgba(120,0,0,.32) 27%,transparent 30%) 0 0/14px 14px;color:#fff}
.rob-banner{text-align:center}
.rob-banner span{display:inline-block;background:var(--y);color:var(--ink);border:var(--bw) solid var(--ink);font:400 clamp(1.5rem,3.4vw,2.6rem)/1 var(--fd);letter-spacing:.06em;text-transform:uppercase;padding:.35em .9em .25em;transform:rotate(-2deg);box-shadow:6px 6px 0 var(--ink)}
.rob-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(30px,5vw,70px);align-items:center;margin-top:48px}
.rob-panel{position:relative;border:5px solid var(--ink);background:var(--y);overflow:hidden;aspect-ratio:4/5;transform:rotate(-1.5deg);box-shadow:10px 10px 0 var(--ink)}
.rob-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:grayscale(1) contrast(1.3) brightness(1.08);mix-blend-mode:multiply}
.rob-panel::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(233,42,42,.55) 28%,transparent 31%) 0 0/9px 9px;-webkit-mask:linear-gradient(200deg,#000,transparent 55%);mask:linear-gradient(200deg,#000,transparent 55%);mix-blend-mode:multiply}
.rob-panel figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;background:var(--ink);padding:12px 14px 10px}
.rob-panel figcaption b{display:block;font:400 1.8rem/1 var(--fd);letter-spacing:.06em;text-transform:uppercase;color:var(--y)}
.rob-panel figcaption span{display:block;font:700 .72rem/1.3 var(--fb);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.rob-talk{display:grid;gap:56px}
.rob-talk .balloon{--tl:8%;font-size:clamp(1rem,1.6vw,1.25rem);border-width:4px}
.rob-talk .balloon::before,.rob-talk .balloon::after{clip-path:polygon(38% 0,100% 0,0 100%);width:70px;height:40px;bottom:-36px}
.rob-talk .balloon::before{width:82px;height:47px;bottom:-44px;left:calc(var(--tl) - 7px)}
.rob-talk .balloon.big{font-size:clamp(1.15rem,2.1vw,1.6rem);border-radius:60px;padding:1.2em 1.6em}
.rob-talk .balloon em{font-style:normal;background:var(--y);padding:0 .15em}
.rob-talk .balloon:last-child{justify-self:end;max-width:560px;transform:rotate(1deg)}
html.js .balloon.rv{transform:scale(.6) rotate(-4deg);transform-origin:10% 100%;transition:opacity .3s,transform .55s cubic-bezier(.3,1.7,.5,1);transition-delay:var(--d,0s)}
html.js .balloon.rv.in{transform:none}
html.js .rob-talk .balloon:last-child.rv.in{transform:rotate(1deg)}

/* ---------- PG 11 · origin ---------- */
.origin{background:var(--paper)}
.origin-head{margin-bottom:40px}
.origin-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.origin .o2,.origin .o4,.origin .o5,.origin .o6{min-height:0}
.o1{grid-column:1/4;grid-row:1/3;padding:0;background:var(--c);min-height:560px}
.o1 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%;filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply}
.o1 .cap{position:absolute;left:14px;top:14px}
.thought-bal{position:absolute;left:14px;right:28%;bottom:18px;background:#fff;border:3px solid var(--ink);border-radius:36px;padding:16px 20px;font:700 .92rem/1.4 var(--fb);text-transform:uppercase}
.thought-bal::before,.thought-bal::after{content:"";position:absolute;background:#fff;border:3px solid var(--ink);border-radius:50%}
.thought-bal::before{width:22px;height:22px;right:-26px;top:-14px}
.thought-bal::after{width:13px;height:13px;right:-42px;top:-34px}
.o2{grid-column:4/7;background:var(--y) var(--dots) 0 0/12px 12px;display:grid;align-content:center;gap:10px;padding:26px}
.o2 .sfx{position:static;justify-self:start;font-size:clamp(2.8rem,5vw,4.2rem)}
.o2 p{font-size:1.05rem;max-width:44ch}
.o3{grid-column:4/7;padding:0;background:#ddd;min-height:300px}
.o3 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.o3 .cap{position:absolute;left:12px;bottom:12px;max-width:80%}
.o4{grid-column:1/3;background:#fff;display:grid;align-content:center;gap:14px;padding:24px}
.o4 .influ{font-size:.9rem;border-top:3px solid var(--ink);padding-top:12px}
.o5{grid-column:3/5;background:var(--m) radial-gradient(circle,rgba(255,255,255,.2) 26%,transparent 29%) 0 0/12px 12px;display:grid;align-content:center;gap:34px;padding:26px 22px 22px}
.o5 .balloon{font-size:.95rem;--tl:72%}
.sig{justify-self:end;font:400 1.9rem/1 var(--fd);letter-spacing:.06em;text-transform:uppercase;color:#fff;-webkit-text-stroke:.06em var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink);transform:rotate(-4deg)}
.o6{grid-column:5/7;background:var(--ink);color:#fff;padding:22px}
.pg-title{font:400 1.7rem/1 var(--fd);letter-spacing:.08em;text-transform:uppercase;color:var(--y);border-bottom:3px solid var(--y);padding-bottom:8px;margin-bottom:12px}
.power{display:grid;gap:12px}
.power li{display:grid;grid-template-columns:1fr auto;grid-template-areas:"l v" "b v";gap:6px 14px;align-items:center}
.power li>span{grid-area:l}.power li>i{grid-area:b}.power li>b{grid-area:v}
.power span{font:700 .78rem/1.2 var(--fb);text-transform:uppercase;letter-spacing:.06em}
.power b{font:400 1.7rem/1 var(--fd);letter-spacing:.04em;color:var(--y);align-self:end;min-width:4.4ch;text-align:right}
.power i{display:block;height:14px;border:2px solid #fff;background:repeating-linear-gradient(90deg,transparent 0 calc(14.28% - 2px),rgba(255,255,255,.55) calc(14.28% - 2px) 14.28%)}
.power em{display:block;height:100%;background:var(--c);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.9,.3,1)}
.power li:nth-child(2) em{background:var(--m);transition-delay:.15s}
.power li:nth-child(3) em{background:var(--y);transition-delay:.3s}
.o6.in .power em,html:not(.js) .power em{transform:scaleX(var(--v))}
.power .zero b{color:var(--r)}

/* ---------- PG 12 · back-cover offer ---------- */
.offer{background:var(--y);padding-top:clamp(60px,8vw,100px)}
.offer::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% -10%,rgba(255,255,255,.35) 0deg 4deg,transparent 4deg 12deg);pointer-events:none}
.offer>.wrap{position:relative}
.offer-head{text-align:center;max-width:900px;margin:0 auto}
.ad-kicker{display:inline-block;background:var(--ink);color:var(--y);font:400 1.15rem/1 var(--fd);letter-spacing:.14em;text-transform:uppercase;padding:.45em .9em .35em;transform:rotate(-2deg)}
.ad-h{font:400 clamp(3rem,8.4vw,7.4rem)/.85 var(--fd);letter-spacing:.02em;text-transform:uppercase;color:var(--r);-webkit-text-stroke:.05em var(--ink);paint-order:stroke fill;text-shadow:.03em .03em 0 var(--ink),.06em .06em 0 var(--ink),.09em .09em 0 var(--ink);margin-top:16px}
.ad-h span{color:#fff}
.ad-sub{font:800 clamp(.95rem,1.4vw,1.15rem)/1.3 var(--fb);text-transform:uppercase;letter-spacing:.06em;margin-top:16px}
.offer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(28px,4vw,60px);align-items:center;margin-top:50px}
.ad-art{position:relative}
.boxes{position:relative;height:clamp(300px,34vw,440px);perspective:1200px}
.bx{position:absolute;width:52%;height:auto;bottom:0;filter:drop-shadow(8px 10px 0 rgba(20,18,22,.25));transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.bx0{left:0;transform:rotate(-10deg) translateY(-6%)}
.bx1{left:16%;transform:rotate(-3deg) translateY(-14%)}
.bx2{left:32%;transform:rotate(4deg) translateY(-8%)}
.bx3{left:48%;transform:rotate(10deg)}
.boxes:hover .bx0{transform:rotate(-16deg) translate(-8%,-10%)}
.boxes:hover .bx1{transform:rotate(-6deg) translate(-3%,-22%)}
.boxes:hover .bx2{transform:rotate(6deg) translate(3%,-16%)}
.boxes:hover .bx3{transform:rotate(15deg) translate(8%,-4%)}
.ad-burst{position:absolute;right:-2%;top:-4%;width:clamp(120px,13vw,170px);aspect-ratio:1;display:grid;place-items:center;transform:rotate(12deg);animation:wobble 2.4s ease-in-out infinite}
.ad-burst svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--r);stroke:var(--ink);stroke-width:3}
.ad-burst span{position:relative;font:400 1.2rem/.9 var(--fd);letter-spacing:.06em;text-transform:uppercase;color:#fff;text-align:center}
.ad-burst b{font-weight:400;font-size:2.6rem;color:var(--y);-webkit-text-stroke:.05em var(--ink);paint-order:stroke fill}
@keyframes wobble{50%{transform:rotate(4deg) scale(1.06)}}
.ad-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.ad-facts li{background:#fff;border:3px solid var(--ink);padding:10px 12px 8px;font:800 .82rem/1.1 var(--fb);text-transform:uppercase;letter-spacing:.05em}
.ad-facts b{font:400 1.7rem/1 var(--fd);color:var(--r);margin-right:4px}
.coupon{position:relative;background:#fff;border:4px dashed var(--ink);padding:clamp(22px,3vw,34px);box-shadow:0 0 0 10px #fff,0 0 0 13px var(--ink)}
.snip{position:absolute;top:-25px;left:-24px;z-index:3;width:56px;height:36px;color:var(--ink);background:var(--y);border-radius:50%;transition:left 2.2s cubic-bezier(.45,0,.3,1);transition-delay:.4s}
.snip svg{width:100%;height:100%}
.coupon.in .snip{left:calc(100% - 30px)}
.cp-yes{font:400 clamp(1.5rem,2.4vw,2rem)/1 var(--fd);letter-spacing:.04em;text-transform:uppercase}
.cp-list{display:grid;gap:9px;margin:18px 0 20px}
.cp-list li{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;font-weight:700;font-size:.95rem;line-height:1.3}
.cp-list em{font-style:normal;font:400 1.1rem/1 var(--fd);letter-spacing:.04em;opacity:.55;text-decoration:line-through}
.cp-list .box{width:24px;height:24px;border:3px solid var(--ink);display:grid;place-items:center;background:#fff}
.cp-list .box svg{width:22px;height:22px;color:var(--r);transform:scale(0) rotate(-20deg);transition:transform .35s cubic-bezier(.3,1.9,.5,1)}
.coupon.in .cp-list li .box svg,html:not(.js) .cp-list .box svg{transform:none}
.coupon.in .cp-list li:nth-child(1) svg{transition-delay:.5s}.coupon.in .cp-list li:nth-child(2) svg{transition-delay:.65s}.coupon.in .cp-list li:nth-child(3) svg{transition-delay:.8s}.coupon.in .cp-list li:nth-child(4) svg{transition-delay:.95s}.coupon.in .cp-list li:nth-child(5) svg{transition-delay:1.1s}.coupon.in .cp-list li:nth-child(6) svg{transition-delay:1.25s}
.cp-list .free{background:var(--y2);margin:0 -8px;padding:6px 8px;grid-template-columns:26px 1fr}
.cp-price{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:4px 16px;border-top:3px solid var(--ink);padding-top:14px;margin-bottom:18px}
.cp-was{grid-column:1/3;font:800 .82rem/1 var(--fb);text-transform:uppercase;letter-spacing:.08em}
.cp-was s{font:400 1.3rem/1 var(--fd);color:var(--r);text-decoration-thickness:3px}
.cp-now{display:flex;align-items:flex-end;gap:12px}
.cp-now span{font:800 .8rem/1.1 var(--fb);text-transform:uppercase;letter-spacing:.08em;max-width:5ch;padding-bottom:12px}
.cp-now b{font:400 clamp(4.6rem,8vw,6.4rem)/.8 var(--fd);color:var(--r);-webkit-text-stroke:.04em var(--ink);paint-order:stroke fill;text-shadow:.04em .04em 0 var(--ink),.08em .08em 0 var(--ink)}
.cp-now sup{font-size:.45em;vertical-align:top;position:relative;top:.1em}
.cp-terms{font:700 .78rem/1.35 var(--fb);text-transform:uppercase;letter-spacing:.05em;align-self:center}
.cp-secure{font-size:.78rem;opacity:.75;margin-top:12px;text-align:center}
.cp-guar{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;margin-top:18px;border-top:3px solid var(--ink);padding-top:16px}
.stamp{color:var(--r);transform:rotate(-12deg)}
.stamp svg{width:92px;height:92px;display:block}
.cp-guar p{font-size:.9rem;line-height:1.45}

/* ---------- FAQ ---------- */
.faq{background:#fff}
.faq-inner{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,70px);align-items:start}
.faq-note{margin-top:14px;font-weight:700;opacity:.75}
.qs{display:grid;gap:18px}
.qs summary{list-style:none;cursor:pointer;position:relative;display:inline-block;background:#fff;border:3px solid var(--ink);border-radius:40px;padding:.85em 1.4em;font:800 1rem/1.3 var(--fb);text-transform:uppercase;letter-spacing:.02em;transition:background .2s,transform .2s}
.qs summary::-webkit-details-marker{display:none}
.qs summary::before,.qs summary::after{content:"";position:absolute;left:34px;width:24px;height:20px;clip-path:polygon(0 0,100% 0,0 100%)}
.qs summary::before{background:var(--ink);bottom:-21px;left:31px;width:30px;height:24px}
.qs summary::after{background:#fff;bottom:-15px;transition:background .2s}
.qs summary:hover,.qs details[open] summary{background:var(--c)}
.qs summary:hover::after,.qs details[open] summary::after{background:var(--c)}
.qs details p{margin:22px 0 4px 26px;background:var(--y);border:3px solid var(--ink);padding:14px 18px;font-size:.98rem;line-height:1.5;transform:rotate(-.4deg);animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.92) rotate(-2deg);opacity:0}}

/* ---------- NEXT ISSUE ---------- */
.next{background:var(--ink);color:#fff;text-align:center;padding:clamp(80px,11vw,150px) 0;margin-bottom:var(--gut)}
.next-rays{position:absolute;left:50%;top:50%;width:230vmax;height:230vmax;background:repeating-conic-gradient(from 0deg at 50% 50%,var(--m) 0deg 7deg,#a80f60 7deg 14deg);opacity:.9;transform:translate(-50%,-50%);animation:spin 90s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.next-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;opacity:.35}
.next::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(20,18,22,.85) 0%,rgba(20,18,22,.55) 45%,rgba(20,18,22,0) 80%);pointer-events:none}
.next-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:20px}
.next-kicker{font:400 clamp(1.4rem,2.6vw,2rem)/1 var(--fd);letter-spacing:.14em;text-transform:uppercase;background:var(--y);color:var(--ink);padding:.4em .9em .3em;transform:rotate(-3deg);border:3px solid var(--ink)}
.next-h{font:400 clamp(3.4rem,11vw,9.6rem)/.84 var(--fd);letter-spacing:.02em;text-transform:uppercase;color:#fff;-webkit-text-stroke:.04em var(--ink);paint-order:stroke fill;text-shadow:.04em .04em 0 var(--c),.08em .08em 0 var(--ink)}
.next-sub{font-size:clamp(1rem,1.5vw,1.2rem);font-weight:700;max-width:40ch}
.next-fine{font:700 .78rem/1 var(--fb);text-transform:uppercase;letter-spacing:.1em;opacity:.85}
.tbc{position:absolute;right:max(4vw,16px);bottom:-60px;background:var(--y);color:var(--ink);border:3px solid var(--ink);font:800 .85rem/1 var(--fb);text-transform:uppercase;letter-spacing:.08em;padding:.6em .9em;transform:rotate(-2deg)}
@media (max-width:999px){.tbc{position:static;margin-top:26px}}

/* ---------- indicia (footer) ---------- */
.indicia{padding:20px 0 40px}
.ind-inner{display:grid;grid-template-columns:auto 1fr;gap:18px 34px;align-items:center}
.ind-brand{display:flex;align-items:center;gap:16px}
.ind-code{width:96px;height:40px;fill:var(--ink)}
.ind-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.ind-links a{font:700 .8rem/1 var(--fb);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;border-bottom:2px solid transparent}
.ind-links a:hover{border-color:var(--m)}
.ind-text{grid-column:1/3;font-size:.72rem;line-height:1.55;opacity:.72;text-transform:uppercase;letter-spacing:.03em;max-width:110ch}

/* ---------- mobile sticky CTA ---------- */
.m-cta{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:70;display:none;align-items:center;gap:10px;background:var(--ink);color:#fff;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--y);padding:6px 6px 6px 6px;text-decoration:none;transform:translateY(150%);transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.m-cta.show{transform:none}
.m-box{display:grid;background:#fff;color:var(--ink);text-align:center;font-family:var(--fd);line-height:1;padding:4px 7px 3px;border:2px solid #fff}
.m-box i{font-style:normal;font-size:.72rem;letter-spacing:.06em}
.m-box b{font-weight:400;font-size:1.35rem;color:var(--r)}
.m-txt{font:400 1.15rem/1 var(--fd);letter-spacing:.06em;text-transform:uppercase}
.m-txt small{display:block;font:700 .62rem/1.2 var(--fb);letter-spacing:.08em;opacity:.75;margin-top:2px}
.m-go{margin-left:auto;background:var(--r);border:2px solid #fff;font:400 1.15rem/1 var(--fd);letter-spacing:.06em;text-transform:uppercase;padding:.6em .9em .5em;text-shadow:2px 2px 0 var(--ink)}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1180px){
  .nav-links{display:none}
  .nav-right{margin-left:auto}
}
@media (max-width:999px){
  :root{--gut:8px;--bw:3px;--navH:54px}
  .hero-sticky{display:flex;flex-direction:column;align-items:stretch;gap:26px;padding:34px 16px 48px}
  .book-wrap{--cw:min(70vw,380px);order:-1;align-self:center;margin:6px 0 18px}
  .hero-copy{max-width:none}
  .h1{font-size:clamp(2.7rem,12vw,4.4rem)}
  .sys-sticky{grid-template-columns:1fr;gap:10px;align-content:start}
  html.sys-3d .sys-sticky{padding:20px 16px 10px;grid-template-rows:auto 1fr}
  html.sys-3d .sys-steps{margin-top:10px}
  html.sys-3d .sys-steps li{display:none}
  html.sys-3d .sys-steps li.on{display:block;transform:none}
  html.sys-3d .system .h2{font-size:clamp(2rem,8.4vw,3rem)}
  html.sys-3d .system .caption{font-size:.7rem}
  .sys-cam{--sw:min(150px,31vw,calc((100svh - 330px) / 2.4))}
  html:not(.sys-3d) .sys-cam{grid-template-columns:repeat(2,1fr)}
  .sheet figcaption{font-size:.85rem;top:-30px;transition:opacity .3s}
  html.sys-3d .sheet:not(.on) figcaption{opacity:0}
  .faces-inner,.stu-inner,.faq-inner,.rob-grid{grid-template-columns:1fr}
  .courses-head{grid-template-columns:1fr}
  .issues{grid-template-columns:repeat(2,minmax(0,1fr));gap:100px 16px}
  .wall{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:22px;width:auto;margin:40px 0 0;padding:34px 16px 30px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .wall::-webkit-scrollbar{display:none}
  .variant{flex:0 0 min(62vw,280px);scroll-snap-align:center}
  .offer-grid{grid-template-columns:1fr}
  .ad-art{max-width:560px;margin:0 auto;width:100%}
  .origin-grid{grid-template-columns:1fr 1fr}
  .o1{grid-column:1/3;grid-row:auto;min-height:520px}
  .o2,.o3{grid-column:1/3}
  .o4,.o5,.o6{grid-column:1/3}
  .rob-panel{max-width:340px;margin:0 auto;width:100%;order:2}
  .stu-inner{display:flex;flex-direction:column;align-items:flex-start;gap:0}
  .stu-copy{display:contents}
  .stu-stage{order:5;width:100%}
  .first-app{order:6;margin:56px auto 0}
  .wall-hint{display:block}
  .let-grid{grid-template-columns:1fr;gap:70px}
  .m-cta{display:flex}
  .nav-login,.pg-count{display:none}
  .ind-inner{grid-template-columns:1fr}
  .ind-text{grid-column:auto}
  .indicia{padding-bottom:100px}
  .gesture::after{background:linear-gradient(0deg,rgba(236,30,140,.9) 0%,rgba(236,30,140,.4) 55%,rgba(236,30,140,0) 80%)}
  .gesture{align-items:end;min-height:0;padding-top:64vw}
  .gest-copy{margin:0 16px}
  .gest-sfx{top:12%;bottom:auto;right:8%}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 32px)}
  .brand-name{font-size:1.05rem}
  .nav{gap:10px;padding:0 10px}
  .brand-burst{width:40px;height:40px}
  .grid-panels{grid-template-columns:1fr 1fr;gap:10px}
  .pn1,.pn4,.pn5{grid-column:span 2}
  .pn2,.pn3{grid-column:span 1;min-height:220px}
  .panel{min-height:210px;padding:12px}
  .panel .cap{font-size:.72rem}
  .s2,.s3{font-size:1.9rem}
  .issues{grid-template-columns:1fr;gap:100px}
  .is-art{width:64%}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nem-btns{grid-template-columns:1fr}
  .letter{padding:50px 42px 104px}
  .cp-list li{font-size:.86rem}
  .cp-guar{grid-template-columns:72px 1fr}
  .stamp svg{width:72px;height:72px}
  .ad-burst{right:0;top:-8%}
  .thought-bal{right:14px;font-size:.84rem}
  .thought-bal::before,.thought-bal::after{display:none}
  .o1{min-height:600px}
  .hero-proof b{font-size:1.5rem}
  .btn-lg{font-size:1.3rem}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important;transition-delay:0s !important}
  html.js .rv,html.js .panel.rv,html.js .balloon.rv{opacity:1;transform:none;clip-path:none}
  html.js .panel .sfx{transform:rotate(var(--sr,-8deg))}
  html.js .plate{opacity:1}
  .speed path{stroke-dashoffset:0}
}