/* The hero above the binder: David's pick B, "Night splash" (2026-11-09: "go with the comic pokemon vibe, just make it
   cleaner and cooler, higher skill in the execution", then "Go with B"). Reference: launches/pokeverse/refs/2026-11-09-comic-b-approved/.
   With Victor's asks of 2026-11-10: the page opens on the closed binder (a Pokéball zip binder, his photo in
   launches/pokeverse/intake/2026-11-10-victor/) that swings open on a click, the coin as the headline, our own Pokéball.
   Since 2026-11-11 the closed binder is the way in (.gate, below) and the hero's binder lies open, full of pulls.
   One vibe with the binder below: its navy, coin yellow, sticker orange and cream tape, Archivo heavy condensed, marker
   only on tape. Print craft: one ink colour, hard ink shadows (never blurred), and the light comes off the pull as a true
   halftone (public/img/burst.webp) with ink-thin speed lines (public/img/rays.svg), both from tools/comic_assets.py. */
.hero{
  --k:#0b0d14;--navy:#0c1d4a;--navy-2:#081434;
  --yellow:#ffd21f;--orange:#ff6a13;--cream:#f5efe0;--tapec:#e9d9a8;
  --h-pad:clamp(20px,3.9vw,56px);
  position:relative;isolation:isolate;min-height:min(100svh,980px);display:flex;flex-direction:column;overflow:hidden;
  background:radial-gradient(80vw 70vh at 72% 45%,#10285f 0%,var(--navy) 55%,#0a1840 100%);
  color:#fff;font-family:Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased
}
.hero .wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--h-pad)}

/* ---- nav: the binder's own labels ---- */
.hero .nav{position:absolute;left:0;right:0;top:0;z-index:5}
.hero .nav .wrap{display:flex;align-items:center;gap:34px;height:92px}
.hero .brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.hero .brand .pokeball{flex:none;filter:drop-shadow(2px 2px 0 var(--k))}
.hero .mark{font-family:"Permanent Marker","Marker Felt",cursive;font-size:25px;line-height:1;color:#141414;white-space:nowrap;
  background:var(--tapec);background-image:linear-gradient(90deg,rgba(255,255,255,.3),transparent 22%,rgba(120,90,20,.1) 70%,rgba(255,255,255,.2));
  padding:9px 18px 6px;transform:rotate(-1.6deg);filter:drop-shadow(0 2px 0 rgba(0,0,0,.25));
  clip-path:polygon(0 8%,1.6% 0,3% 6%,100% 2%,98.6% 24%,99.6% 40%,98.6% 62%,100% 80%,98.8% 100%,1.4% 95%,.2% 76%,1.4% 55%,0 34%)}
.hero .links{display:flex;gap:30px;margin-left:auto;font-size:16px;font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:.07em}
.hero .links a{text-decoration:none;color:#fff}
.hero .links a:hover{color:var(--yellow)}
.hero .ca-pill{display:inline-flex;align-items:center;height:38px;padding:0 14px;border:0;border-radius:4px;background:#111;color:#fff;white-space:nowrap;
  font-family:Archivo,system-ui,sans-serif;font-weight:800;font-stretch:72%;font-size:14px;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 0 rgba(0,0,0,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.6),0 3px 0 var(--k);transition:background .15s}
.hero .ca-pill:hover{background:#000}
.hero .ca-pill.done{background:#1d5c35}

/* ---- the splash: halftone light and speed lines coming off the slab ---- */
.hero-grid{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:24px}
/* on a laptop the copy and slab centre in the space under the absolute nav, as in the approved frame; check.py measures
   the gap to the nav and that the row stays above the fold */
.hero .hero-grid{padding-top:0;padding-bottom:16px}
/* the rays are centred on the slab inside a grid capped at 1440px, so on a wider screen they must outgrow the screen
   itself or their edge shows (a seam at x=77 on 1920, verifier 2026-11-09): at least the screen plus 720px, kept 8:5 */
.hero-grid::after{content:"";position:absolute;z-index:-2;pointer-events:none;left:var(--rays-x,72%);top:var(--rays-y,46%);width:max(2400px,calc(100vw + 720px));aspect-ratio:8/5;transform:translate(-50%,-50%);
  background:url(/img/rays.svg) center/100% 100% no-repeat}
.hero .stage{position:relative;height:min(calc(100svh - 200px),640px);min-height:400px;display:grid;place-items:center}
.hero .stage::after{content:"";position:absolute;left:50%;top:50%;width:1600px;height:1000px;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:url(/img/burst.webp) center/1600px 1000px no-repeat}

/* ---- the caption box (comic narration) ---- */
/* the words stay in front: the binder's lid swings behind them as it opens */
.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
.hero .eyebrow{display:inline-flex;align-items:center;gap:10px;background:var(--cream);color:var(--k);border:2px solid var(--k);box-shadow:4px 4px 0 var(--k);
  padding:8px 13px 7px;font-size:14px;font-weight:800;font-stretch:72%;letter-spacing:.09em;text-transform:uppercase;transform:rotate(-1deg)}
.hero .eyebrow .dot{width:9px;height:9px;border-radius:50%;background:#e5322d;box-shadow:0 0 0 2px var(--k);flex:none}

/* ---- lettering: heavy condensed caps, ink outline outside the fill, hard ink drop ---- */
.hero h1{font-weight:900;font-stretch:62%;text-transform:uppercase;font-size:150px;line-height:.84;letter-spacing:-.005em;margin-top:26px;
  color:#fff;-webkit-text-stroke:5px var(--k);paint-order:stroke fill;text-shadow:7px 7px 0 var(--k);transform:skewX(-6deg);transform-origin:0 100%;overflow-wrap:break-word}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero .fact{margin-top:26px;max-width:520px;font-size:18px;line-height:1.5;color:rgba(255,255,255,.84);text-wrap:pretty}
.hero .fact b{color:#fff;font-weight:800}

/* ---- buttons: chunky, inked, hard shadow; they press ---- */
.hero .cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.hero .btn{display:inline-flex;align-items:center;justify-content:center;height:60px;padding:0 28px;border:3px solid var(--k);border-radius:12px;white-space:nowrap;text-decoration:none;
  font-weight:900;font-stretch:72%;font-size:21px;text-transform:uppercase;letter-spacing:.05em;color:var(--k);box-shadow:5px 5px 0 var(--k);transition:transform .12s,box-shadow .12s,background .12s}
.hero .btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--k)}
.hero .btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--k)}
.hero .btn.primary{background:var(--yellow)}
.hero .btn.primary:hover{background:#ffdc45}
.hero .btn.ghost{background:var(--cream)}

/* ---- the closed binder: a Pokéball zip binder in ink. The lid hinges on the spine: hover lifts it, a click swings it open ---- */
.tome{position:relative;height:86%;aspect-ratio:4/5;border:0;padding:0;background:none;cursor:pointer;perspective:3400px;transform:rotate(-4deg);
  transition:transform .25s cubic-bezier(.2,.8,.2,1);-webkit-tap-highlight-color:transparent}
.tome:hover{transform:rotate(-4deg) translateY(-6px)}
.tome:focus-visible{outline:4px solid var(--yellow);outline-offset:10px;border-radius:30px}
.tome-inside{position:absolute;inset:0;border:5px solid var(--k);border-radius:26px;background:linear-gradient(180deg,#14306f,#0f2559);box-shadow:12px 12px 0 var(--k);padding:10% 8% 8% 13%}
.tome-page{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4%;height:100%}
.tome-page i{border-radius:6px;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 45%,rgba(255,255,255,.09));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2)}
.tome-lid{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:0 50%;transition:transform .72s cubic-bezier(.55,.05,.25,1)}
.tome:hover .tome-lid{transform:rotateY(-16deg)}
.tome.is-open .tome-lid{transform:rotateY(-118deg)}
.lid-front,.lid-back{position:absolute;inset:0;border:5px solid var(--k);border-radius:26px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* red over white, split by the black band, like the binder Victor sent */
.lid-front{background:linear-gradient(180deg,#e5322d 0,#e5322d 46.5%,var(--k) 46.5%,var(--k) 53.5%,#f5efe0 53.5%)}
/* comic shading: darker red dots gathering toward the red half's lower corner, under the band */
.lid-front::before{content:"";position:absolute;left:8%;right:0;top:0;height:46.5%;pointer-events:none;
  background:radial-gradient(circle,#b51d19 0 2.3px,transparent 2.7px) 0 0/9px 9px;
  -webkit-mask-image:linear-gradient(205deg,transparent 45%,#000 100%);mask-image:linear-gradient(205deg,transparent 45%,#000 100%)}
/* the spine: a darker strip with its stitching */
.lid-front::after{content:"";position:absolute;left:0;top:0;bottom:0;width:8%;background:rgba(11,13,20,.16);border-right:3px solid rgba(11,13,20,.55);
  box-shadow:inset -8px 0 0 -5px rgba(255,255,255,.35)}
.tome-zip{position:absolute;inset:4.5% 4.5% 4.5% 11%;border:3px dashed rgba(11,13,20,.5);border-left:0;border-radius:0 18px 18px 0}
.tome-zip::after{content:"";position:absolute;right:-10px;top:12%;width:14px;height:42px;background:#cfd3da;border:3px solid var(--k);border-radius:7px}
.tome-gloss{position:absolute;left:17%;top:7%;width:46%;height:22%;border-top:8px solid rgba(255,255,255,.5);border-radius:50% 50% 0 0/100% 100% 0 0;transform:rotate(-8deg)}
.tome-ball{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#f5efe0;border:clamp(8px,1.5vw,14px) solid var(--k);box-shadow:0 0 0 4px #f5efe0 inset}
.tome-ball::after{content:"";position:absolute;inset:24%;border-radius:50%;background:#fff;border:4px solid var(--k)}
.tome-tag{position:absolute;right:9%;bottom:8%;font-family:"Permanent Marker","Marker Felt",cursive;font-size:clamp(15px,1.5vw,22px);line-height:1;color:#141414;background:var(--tapec);
  padding:7px 13px 4px;transform:rotate(-3deg);clip-path:polygon(0 8%,2% 0,100% 4%,98.6% 50%,100% 94%,2% 100%,0 70%)}
.lid-back{transform:rotateY(180deg);background:linear-gradient(90deg,#0b1a40,#14306f)}
.tome-hint{position:absolute;left:-7%;bottom:12%;z-index:3;background:var(--cream);color:var(--k);border:2px solid var(--k);box-shadow:4px 4px 0 var(--k);
  padding:7px 12px 6px;font-weight:800;font-stretch:72%;font-size:14px;letter-spacing:.09em;text-transform:uppercase;transform:rotate(4deg);transition:opacity .2s}
.tome.is-open .tome-hint{opacity:0}

/* ---- the hero's binder lies open with the biggest pulls in its pockets (David, 2026-11-11: "put the cards in the binder
   in the hero, make them clickable as well"). The binder's own pocket and card pieces (binder.css), sized to this page:
   a card's design pixel is a 620th of the page's width ---- */
.tome.in-hero{cursor:default}
.tome.in-hero:hover{transform:rotate(-4deg)}
.tome.in-hero .tome-page{container-type:inline-size;--c:calc(100cqw / 620)}
.tome.in-hero .pocket{border-radius:6px}
.tome.in-hero .card{cursor:pointer}
/* coming in through the gate, the pulls are dealt into the pockets as the site appears */
html.gate-on .tome.deal:not(.dealt) .pocket>*{visibility:hidden}
.tome.deal.dealt .card{animation:deal .42s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(.08s + var(--i,0) * 45ms)}
/* each price goes on just after its card lands */
.tome.deal.dealt .sticker{animation:stick .2s ease-out backwards;animation-delay:calc(.42s + var(--i,0) * 45ms)}
@keyframes deal{from{opacity:0;transform:translateY(-16%) rotate(-7deg) scale(1.1)}}
@keyframes stick{from{opacity:0}}

/* ---- the way in (Victor, 2026-11-11: "when they open the web it's the book"): the closed binder fills the screen on the
   splash's ground until it's tapped, then opens into the film of pulls (js/gate.js). Hidden unless js/gate-on.js has run ---- */
.gate{--k:#0b0d14;--navy:#0c1d4a;--yellow:#ffd21f;--cream:#f5efe0;--tapec:#e9d9a8;
  position:fixed;inset:0;z-index:1000;display:none;place-items:center;overflow:hidden;isolation:isolate;color:#fff;font-family:Archivo,system-ui,sans-serif;
  background:radial-gradient(80vw 70vh at 50% 50%,#10285f 0%,var(--navy) 55%,#0a1840 100%)}
html.gate-on .gate{display:grid}
html.gate-on,html.gate-on body{overflow:hidden}
.gate::before{content:"";position:absolute;left:50%;top:50%;z-index:-2;width:max(2400px,calc(100vw + 720px),calc((100vh + 720px) * 1.6));aspect-ratio:8/5;transform:translate(-50%,-50%);pointer-events:none;
  background:url(/img/rays.svg) center/100% 100% no-repeat}
.gate::after{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:1600px;height:1000px;transform:translate(-50%,-50%);pointer-events:none;
  background:url(/img/burst.webp) center/1600px 1000px no-repeat}
.gate-stage{position:relative;transition:transform .4s cubic-bezier(.6,0,.9,.45),opacity .14s .24s}
.gate .tome{height:auto;width:min(76vw,calc(min(68svh,660px) * .8))}
.gate .tome-page i{position:relative;overflow:hidden}
.gate .tome-page i img{position:absolute;display:block;max-width:none}
.gate .tome-hint{font-size:16px;padding:8px 14px 7px}
.gate.is-ready .tome-hint{animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:rotate(4deg) translateY(-6px)}}
/* the photos loading: a small inked bar under the binder, gone once they're in */
.gate-load{position:absolute;left:50%;top:calc(100% + clamp(20px,4svh,36px));width:min(220px,46vw);height:12px;transform:translateX(-50%);
  border:2.5px solid var(--k);border-radius:8px;background:var(--cream);box-shadow:3px 3px 0 var(--k);overflow:hidden;transition:opacity .3s}
.gate-load i{display:block;width:0;height:100%;background:var(--yellow);transition:width .3s}
.gate.is-ready .gate-load,.gate.is-opening .gate-load{opacity:0}
/* opened before the site behind has drawn (a slow line), or the gate's own script is late: the bar comes back and runs
   until the site is there */
/* tapped before js/gate.js arrived: the lid swings straight away and the bar runs (js/gate-on.js) */
html.gate-tapped .gate-book .tome-lid{transform:rotateY(-118deg)}
html.gate-tapped .gate-book .tome-hint{opacity:0}
.gate.is-waiting .gate-load,html.gate-stalled .gate-load,html.gate-tapped .gate-load{opacity:1}
.gate.is-waiting .gate-load i,html.gate-stalled .gate-load i,html.gate-tapped .gate-load i{width:38%!important;animation:loading 1.1s ease-in-out infinite alternate}
@keyframes loading{from{transform:translateX(-20%)}to{transform:translateX(180%)}}
.gate-skip{position:absolute;right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));z-index:3;height:40px;padding:0 16px;cursor:pointer;
  border:2.5px solid var(--k);border-radius:10px;background:var(--cream);color:var(--k);box-shadow:3px 3px 0 var(--k);
  font-family:Archivo,system-ui,sans-serif;font-weight:900;font-stretch:72%;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.gate-skip[hidden]{display:none}
.gate-film{position:absolute;inset:0;z-index:2;width:100%;height:100%;opacity:0;pointer-events:none;cursor:pointer;transition:opacity .16s}
/* open: the lid swings, then the camera dives into the page as the film cuts in */
.gate.is-opening .tome-lid{transition-duration:.6s}
.gate.is-diving .gate-stage{transform:scale(3.2);opacity:0}
.gate.is-film .gate-film{opacity:1;pointer-events:auto}
/* going in: the lettering has punched out past the camera (gate.js); the ground lifts off the site */
/* it still takes taps while it fades, so a second tap on Skip can't land on what's under it (verifier, 2026-11-11) */
.gate.is-leaving{opacity:0;transform:scale(1.04);transition:opacity .36s ease,transform .36s ease-in}
@media (prefers-reduced-motion:reduce){
  .gate-stage,.gate-film,.gate.is-leaving{transition:none;transform:none}
  .gate.is-ready .tome-hint,.tome.deal.dealt .card,.tome.deal.dealt .sticker{animation:none}
  .gate.is-waiting .gate-load i,html.gate-stalled .gate-load i,html.gate-tapped .gate-load i{animation:none;width:100%!important;opacity:.55}
}

/* ---- the row: the coin's live numbers on the binder's stickers; an ink rule closes the splash ---- */
.hero .strip{position:relative;padding:20px 0 30px;background:linear-gradient(180deg,rgba(8,20,52,0),rgba(8,20,52,.6))}
.hero .strip::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--k)}
.hero .strip .wrap{display:flex;align-items:center;gap:30px;flex-wrap:wrap;row-gap:12px}
.hero .strip .lead{font-family:"Permanent Marker","Marker Felt",cursive;font-weight:400;font-size:19px;line-height:1;color:#141414;background:var(--tapec);padding:7px 14px 4px;transform:rotate(-1.2deg);white-space:nowrap;
  clip-path:polygon(0 10%,2% 0,100% 4%,98.6% 50%,100% 92%,2% 100%,0 70%)}
.hero .stat-chip{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-weight:800;font-stretch:72%;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.hero .stat-chip b{display:inline-block;background:var(--orange);color:var(--k);font-weight:900;font-size:18px;letter-spacing:.01em;padding:4px 11px 3px;border-radius:14px;transform:rotate(-3deg);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.hero .stat-chip b.ink-up{background:#54d17a}
.hero .stat-chip b.ink-down{background:#ff5a4a}

@media (max-width:1180px){ .hero h1{font-size:120px} }
@media (max-width:900px){
  .hero .links{display:none}
  .hero .nav .wrap{height:76px;gap:12px;justify-content:space-between}
  /* minmax(0,…): a bare 1fr grows to the headline's widest word, and the headline is fitted to that grown column */
  .hero .hero-grid{grid-template-columns:minmax(0,1fr);padding-top:100px;gap:8px}
  /* on a phone the slab sits low in a tall grid: the rays grow so their top edge stays above the grid (a seam at y=45 on 390) */
  .hero-grid::after{--rays-x:50%;--rays-y:76%;width:max(3400px,calc(100vw + 720px))}
  .hero .stage{height:min(62svh,560px);min-height:360px}
  .hero .stage::after{width:1100px;height:688px;background-size:1100px 688px}
  .hero h1{text-shadow:5px 5px 0 var(--k);-webkit-text-stroke:4px var(--k)}
  .hero .strip .wrap{gap:12px 20px}
  .hero .strip .lead{flex-basis:auto}
}
@media (max-width:640px){
  .hero .mark{font-size:20px;padding:8px 13px 5px}
  .hero .ca-pill{height:34px;font-size:12.5px;padding:0 11px}
  .hero .eyebrow{font-size:12px;padding:7px 10px 6px}
  .hero h1{font-size:76px;margin-top:20px}
  .hero .fact{font-size:16.5px;margin-top:20px}
  .hero .cta{margin-top:24px;gap:12px;width:100%}
  .hero .btn{height:56px;font-size:19px;padding:0 18px;flex:1}
  .hero .stage{height:min(58svh,470px);min-height:340px}
  .tome-hint{font-size:12.5px;left:-3%}
  /* a pocket here is about 70px across: the price waits on the pulled-out card */
  .tome.in-hero .sticker{display:none}
  .hero .stat-chip{font-size:12.5px;gap:7px}
  .hero .stat-chip b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){ .hero .btn,.tome,.tome-lid{transition:none} }

/* ---- the site's footer, under the binder ---- */
.foot{background:var(--navy-2,#081434);color:#fff;font-family:Archivo,system-ui,sans-serif;padding:46px 0 52px}
.foot .wrap{max-width:1440px;margin:0 auto;padding:0 clamp(20px,3.9vw,56px);display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center}
.foot .mark{display:inline-block;font-family:"Permanent Marker","Marker Felt",cursive;font-size:24px;line-height:1;color:#141414;background:#e9d9a8;padding:8px 16px 5px;transform:rotate(-1.6deg);text-decoration:none;
  clip-path:polygon(0 8%,1.6% 0,3% 6%,100% 2%,98.6% 24%,99.6% 40%,98.6% 62%,100% 80%,98.8% 100%,1.4% 95%,.2% 76%,1.4% 55%,0 34%)}
.foot nav{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:center;align-items:center;font-weight:800;font-stretch:72%;font-size:15px;text-transform:uppercase;letter-spacing:.07em}
.foot nav a{text-decoration:none;color:#fff}
.foot nav a:hover{color:#ffd21f}
.foot nav a.x{background:#ffd21f;color:#0b0d14;border:3px solid #0b0d14;border-radius:10px;padding:9px 16px;box-shadow:4px 4px 0 #0b0d14}
.foot nav a.x:hover{color:#0b0d14;transform:translate(-1px,-1px);box-shadow:5px 5px 0 #0b0d14}
.foot small{display:block;max-width:440px;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.6);text-align:right}
@media (max-width:900px){
  .foot .wrap{grid-template-columns:1fr;gap:22px;justify-items:start}
  .foot nav{justify-content:flex-start}
  .foot small{text-align:left}
}