/* ================= PUNK COMMANDO: landing page =================
   Punk zine meets military dossier, in the game's own colours: hot pink and yellow ransom-note
   letters, hazard stripes and olive drab, over the dark night city. Fonts are self-hosted (OFL). */

@font-face{font-family:'Luckiest Guy';src:url(../fonts/luckiestguy.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Black Ops One';src:url(../fonts/blackopsone.woff2) format('woff2');font-display:swap}

:root{
  --ink:#0b0d18;--night:#141a33;--deep:#1d1338;--line:#14151c;
  --pink:#ff3d8b;--yellow:#ffd23f;--orange:#ffa94d;--orange-d:#b4581a;--red:#ff3d3d;
  --olive:#55652e;--khaki:#efe6c2;--paper:#f3e6c4;--text:#e9ecf3;--muted:#a8b0c4;
  --display:'Luckiest Guy','Arial Black',Impact,system-ui,sans-serif;
  --stencil:'Black Ops One','Arial Black',system-ui,sans-serif;
  --body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --gutter:clamp(16px,4vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font:500 17px/1.55 var(--body);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--yellow)}
button{font:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--yellow);color:var(--ink);padding:8px 14px;border-radius:8px;font-weight:800}
.skip:focus{left:8px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

/* the cartoon outline used on all display type: a thick dark stroke under the fill, then a hard drop shadow */
.cartoon,.h2,.btn,.tile,.ribbon span,.burst span,.panel figcaption b,.poster-name{
  -webkit-text-stroke:.14em var(--line);paint-order:stroke fill;
}

/* ================= BUTTONS ================= */
.btn{
  --base:var(--orange-d);
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  font:400 clamp(20px,2.2vw,26px)/1 var(--display);letter-spacing:.02em;text-transform:uppercase;color:#fff;text-decoration:none;
  background:linear-gradient(#ffc17a 0 42%,var(--orange) 42%);border:3px solid var(--line);border-radius:14px;
  padding:.62em 1.1em .5em;cursor:pointer;
  box-shadow:0 6px 0 var(--base),0 6px 0 3px var(--line),0 12px 20px rgba(0,0,0,.45);
  transform:translateY(0);transition:transform .08s,box-shadow .08s,filter .15s;
}
.btn:hover{filter:brightness(1.07);transform:translateY(-2px);box-shadow:0 8px 0 var(--base),0 8px 0 3px var(--line),0 16px 24px rgba(0,0,0,.45)}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--base),0 1px 0 3px var(--line),0 4px 8px rgba(0,0,0,.4)}
.btn-sm{font-size:16px;padding:.55em .9em .45em;border-radius:11px;box-shadow:0 4px 0 var(--base),0 4px 0 3px var(--line)}
.btn-sm:hover{box-shadow:0 5px 0 var(--base),0 5px 0 3px var(--line)}
.btn-big{font-size:clamp(24px,3vw,32px)}

/* ================= NAV ================= */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:10px var(--gutter);padding-top:max(10px,env(safe-area-inset-top));transition:background .25s,box-shadow .25s,transform .3s}
.nav.solid{background:rgba(11,13,24,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 0 rgba(255,255,255,.06)}
.nav.hidden{transform:translateY(-110%)}
.nav-logo{display:inline-flex;align-items:center;gap:2px;text-decoration:none;font:400 20px/1 var(--display)}
.mini-tile{display:inline-grid;place-items:center;width:1.15em;height:1.25em;border:2px solid var(--line);color:#fff;-webkit-text-stroke:.12em var(--line);paint-order:stroke fill;padding-top:.12em}
.m1{background:var(--pink);color:var(--yellow);transform:rotate(-6deg)}
.m2{background:var(--yellow);color:var(--pink);transform:rotate(5deg) translateY(-2px)}
.m3{background:#fff;color:var(--pink);transform:rotate(-3deg)}
.m4{background:var(--pink);color:#fff;transform:rotate(7deg)}
.mini-cmd{margin-left:8px;font:400 13px/1 var(--stencil);letter-spacing:.18em;color:var(--khaki);background:var(--olive);border:2px solid var(--line);padding:5px 7px 4px;transform:rotate(-3deg)}

/* ================= HERO ================= */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate;
  padding:calc(78px + env(safe-area-inset-top)) var(--gutter) 90px}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;filter:saturate(1.15) contrast(1.05)}
.hero-shade{position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.6px) 0 0/6px 6px,
    radial-gradient(ellipse at 50% 42%,rgba(11,13,24,.35) 0,rgba(11,13,24,.78) 62%,rgba(11,13,24,.97) 100%),
    linear-gradient(rgba(11,13,24,.25),rgba(11,13,24,0) 30%,rgba(11,13,24,.4) 75%,var(--ink));}
.hero-searchlight{position:absolute;z-index:-1;left:50%;top:-30%;width:180vmax;height:180vmax;margin-left:-90vmax;pointer-events:none;
  background:conic-gradient(from 180deg at 50% 0,transparent 0 172deg,rgba(255,250,225,.11) 176deg,rgba(255,250,225,.16) 180deg,rgba(255,250,225,.11) 184deg,transparent 188deg 360deg);
  transform-origin:50% 0;animation:sweep 9s ease-in-out infinite alternate}
@keyframes sweep{from{transform:rotate(-26deg)}to{transform:rotate(26deg)}}
.hero-rook,.hero-jugg{position:absolute;bottom:0;z-index:-1;pointer-events:none;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6));display:none}
.hero-rook{left:max(10px,4vw);width:clamp(200px,20vw,330px);animation:slideL 1s 1.4s both cubic-bezier(.2,1.4,.4,1)}
.hero-jugg{right:max(10px,3vw);width:clamp(240px,24vw,400px);animation:slideR 1s 1.6s both cubic-bezier(.2,1.4,.4,1)}
@keyframes slideL{from{transform:translateX(-120%)}to{transform:none}}
@keyframes slideR{from{transform:translateX(120%)}to{transform:none}}
@media (min-width:1180px){.hero-rook,.hero-jugg{display:block}}
.hero-inner{width:min(760px,100%);text-align:center;display:flex;flex-direction:column;align-items:center}

/* ---- the logo: ransom-note PUNK over a stencilled COMMANDO label ---- */
.logo{margin:0;display:flex;flex-direction:column;align-items:center;font-weight:400}
.logo-punk{position:relative;display:flex;gap:clamp(4px,.8vw,10px);font:400 clamp(70px,15vw,170px)/1 var(--display)}
.tile{position:relative;z-index:1;display:inline-grid;place-items:center;width:1.02em;height:1.12em;padding-top:.16em;
  border:.055em solid var(--line);color:var(--c);background:var(--bg);
  box-shadow:.06em .07em 0 rgba(10,10,18,.6);
  transform:rotate(var(--r)) translateY(var(--y));
  clip-path:polygon(var(--clip));
  animation:slam .5s calc(.15s + var(--i)*.13s) both cubic-bezier(.3,1.6,.5,1),bob 3.2s calc(1.2s + var(--i)*.4s) ease-in-out infinite;}
.t1{--i:0;--c:var(--yellow);--bg:var(--pink);--r:-7deg;--y:2px;--clip:0 3%,96% 0,100% 97%,3% 100%}
.t2{--i:1;--c:var(--pink);--bg:var(--yellow);--r:5deg;--y:-6px;--clip:2% 0,100% 4%,97% 100%,0 96%}
.t3{--i:2;--c:var(--pink);--bg:#fff;--r:-3deg;--y:4px;--clip:0 0,98% 3%,100% 100%,2% 97%}
.t4{--i:3;--c:#fff;--bg:var(--pink);--r:8deg;--y:-3px;--clip:3% 2%,100% 0,97% 98%,0 100%}
@keyframes slam{0%{opacity:0;transform:rotate(calc(var(--r)*-3)) scale(2.6)}60%{opacity:1;transform:rotate(var(--r)) scale(.92)}100%{opacity:1;transform:rotate(var(--r)) translateY(var(--y)) scale(1)}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -.035em}}
.logo-peek{position:absolute;z-index:0;left:31%;top:0;width:.62em;height:auto;transform:translateY(40%);animation:peek 4.2s 2s ease-in-out infinite}
@keyframes peek{0%,8%{transform:translateY(40%) rotate(0)}14%{transform:translateY(-62%) rotate(0)}24%{transform:translateY(-62%) rotate(-9deg)}36%{transform:translateY(-62%) rotate(8deg)}44%{transform:translateY(-62%) rotate(0)}50%,100%{transform:translateY(40%) rotate(0)}}
.logo-cmd{position:relative;z-index:2;margin-top:-.14em;font:400 clamp(24px,5vw,54px)/1 var(--stencil);letter-spacing:.18em;color:var(--khaki);
  background:var(--olive);border:.09em solid var(--line);padding:.18em 1.6em .14em 1.7em;box-shadow:.08em .1em 0 rgba(10,10,18,.6);
  transform:rotate(-3deg);animation:label .45s .8s both cubic-bezier(.3,1.7,.5,1);text-shadow:0 .05em 0 var(--line)}
.logo-cmd::before,.logo-cmd::after{content:"";position:absolute;top:0;bottom:0;width:1.15em;background:repeating-linear-gradient(-55deg,var(--yellow) 0 .22em,var(--line) .22em .44em)}
.logo-cmd::before{left:0;border-right:.07em solid var(--line)}
.logo-cmd::after{right:0;border-left:.07em solid var(--line)}
@keyframes label{from{opacity:0;transform:rotate(-14deg) scale(1.8)}to{opacity:1;transform:rotate(-3deg) scale(1)}}

.ribbon{margin:1.1em 0 0;display:inline-flex;gap:.55em;font:400 clamp(20px,3vw,30px)/1 var(--display);color:#fff;
  background:#1d2236;border:3px solid var(--line);padding:.42em 1.3em .3em;transform:rotate(-2deg) skewX(-10deg);
  box-shadow:0 0 0 0 var(--line),5px 6px 0 rgba(10,10,18,.6);border-top:5px solid var(--orange);border-bottom:5px solid var(--orange);animation:fadeUp .5s 1.1s both}
.ribbon span{display:inline-block;transform:skewX(10deg)}
.ribbon .pow{color:var(--red);animation:jolt 3.2s 2s infinite}
@keyframes jolt{0%,86%,100%{transform:skewX(10deg) scale(1) rotate(0)}89%{transform:skewX(10deg) scale(1.35) rotate(-8deg)}93%{transform:skewX(10deg) scale(1.15) rotate(6deg)}}
.pitch{max-width:560px;margin:1.2em auto 0;font-size:clamp(17px,2vw,20px);font-weight:600;color:#f1f3f8;text-shadow:0 2px 8px rgba(0,0,0,.8);animation:fadeUp .5s 1.25s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.stamp{margin:1.1em 0 0;display:inline-flex;flex-direction:column;align-items:center;font:400 16px/1 var(--stencil);letter-spacing:.16em;color:var(--red);
  border:4px solid var(--red);border-radius:10px;padding:.5em 1em .4em;transform:rotate(-5deg);background:rgba(255,61,61,.08);
  -webkit-mask:radial-gradient(circle at 30% 40%,#000 60%,rgba(0,0,0,.75) 61%) ;animation:stamp .4s 1.45s both cubic-bezier(.3,1.6,.5,1)}
.stamp b{font:400 26px/1 var(--stencil);letter-spacing:.12em;color:#fff;-webkit-text-stroke:0}
@keyframes stamp{from{opacity:0;transform:rotate(-20deg) scale(2.4)}to{opacity:1;transform:rotate(-5deg) scale(1)}}

/* ---- signup ---- */
.signup{margin:1.4em 0 0;width:min(560px,100%);display:grid;grid-template-columns:1fr auto;gap:12px;animation:fadeUp .5s 1.55s both}
.signup input[type=email]{min-width:0;font:600 18px/1 var(--body);color:var(--ink);background:#fff;border:3px solid var(--line);border-radius:14px;padding:0 16px;height:60px;
  box-shadow:inset 0 3px 0 rgba(0,0,0,.08),0 6px 0 rgba(10,10,18,.5)}
.signup input[type=email]::placeholder{color:#8a90a2}
.signup .btn{height:60px}
.signup .fine{grid-column:1/-1;margin:2px 0 0;font-size:13.5px;color:var(--muted)}
.signup .fine a{color:var(--muted)}
.form-msg{grid-column:1/-1;margin:0;min-height:0;font:400 20px/1.2 var(--display);letter-spacing:.02em}
.form-msg.err{color:#ff8a8a;font:700 15px/1.4 var(--body)}
.signup.done{grid-template-columns:1fr}
.signup.done input,.signup.done .btn,.signup.done .fine{display:none}
.signup.done .form-msg{font-size:clamp(22px,3vw,30px);color:var(--yellow);-webkit-text-stroke:.12em var(--line);paint-order:stroke fill;animation:slam .5s both cubic-bezier(.3,1.6,.5,1);--r:-2deg;--y:0px}
@media (max-width:560px){.signup{grid-template-columns:1fr}.signup .btn{width:100%}}

.scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;
  font:400 12px/1 var(--stencil);letter-spacing:.2em;color:var(--muted);text-decoration:none;animation:fadeUp .5s 2s both}
.scroll-cue span{font-size:16px;color:var(--yellow);animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(5px)}}

/* ================= TICKER ================= */
.ticker{position:relative;z-index:2;overflow:hidden;background:var(--yellow);border-block:5px solid var(--line);transform:rotate(-1.6deg) scale(1.03);margin:-10px 0 0;
  box-shadow:0 8px 0 rgba(0,0,0,.35)}
.ticker::before,.ticker::after{content:"";position:absolute;left:0;right:0;height:9px;background:repeating-linear-gradient(-55deg,var(--line) 0 12px,var(--yellow) 12px 24px)}
.ticker::before{top:0}.ticker::after{bottom:0}
.ticker-track{display:flex;width:max-content;align-items:center;gap:22px;padding:17px 0 15px;font:400 clamp(20px,2.6vw,30px)/1 var(--display);color:var(--line);white-space:nowrap;animation:marquee 30s linear infinite}
.ticker-track i{font-style:normal;color:var(--pink);-webkit-text-stroke:.1em var(--line);paint-order:stroke fill}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ================= SECTIONS ================= */
.sec{position:relative;padding:clamp(80px,11vw,140px) var(--gutter);max-width:1240px;margin:0 auto}
.kicker{margin:0 0 .5em;font:400 14px/1 var(--stencil);letter-spacing:.22em;color:var(--orange)}
.h2{margin:0;font:400 clamp(40px,6.2vw,76px)/1.02 var(--display);color:#fff;text-shadow:.05em .06em 0 rgba(10,10,18,.7);letter-spacing:.01em}
.h2 em{font-style:normal;color:var(--yellow)}
.h2.big{font-size:clamp(48px,8vw,104px)}
.lede{max-width:620px;margin:.8em 0 0;font-size:clamp(17px,1.8vw,20px);color:var(--muted)}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(34px) rotate(var(--rr,0deg));transition:opacity .6s ease,transform .7s cubic-bezier(.2,1.2,.4,1)}
.reveal.in{opacity:1;transform:translateY(0) rotate(var(--rr,0deg))}

/* ---- comic panels ---- */
.manual{text-align:center}
.manual .lede{margin-inline:auto}
.panels{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,36px);align-items:stretch}
.panel{position:relative;margin:0;border:5px solid var(--line);border-radius:6px;box-shadow:10px 10px 0 var(--line);overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;padding:58px 0 0;text-align:left}
.panel::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(0,0,0,.18) 1.4px,transparent 1.8px) 0 0/9px 9px;pointer-events:none}
.p-duck{background:linear-gradient(160deg,#5ec8ff,#2f6fd6);--rr:-1.5deg}
.p-peek{background:linear-gradient(160deg,#ffe266,#ff9d2e);--rr:1.2deg;transition-delay:.12s}
.p-pow{background:linear-gradient(160deg,#ff6aa6,#e0215f);--rr:-1deg;transition-delay:.24s}
.panel-num{position:absolute;top:12px;left:12px;z-index:4;display:grid;place-items:center;width:42px;height:42px;font:400 24px/1 var(--display);color:var(--line);
  background:#fff;border:3px solid var(--line);border-radius:50%;padding-top:4px}
/* every layer is drawn on the same 720x408 stage (ground at 91%), so they line up exactly; only the right ones move */
.stage{position:relative;z-index:1;aspect-ratio:720/408;margin:0 -2%;overflow:hidden}
.stage .ly{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(5px 6px 0 rgba(10,10,18,.28))}
.stage .ly.front{z-index:2}.stage .ly.muzzle{z-index:3;filter:none}
.breathe{animation:breathe 2.4s ease-in-out infinite;transform-origin:50% 91%}
@keyframes breathe{50%{transform:translateY(-1.2%) scaleY(1.015)}}
/* PEEK: crouched behind the crate, then up and firing, then back down */
.p-peek .down{animation:pk-down 3s infinite}
.p-peek .up{animation:pk-up 3s infinite}
.p-peek .muzzle{animation:pk-flash 3s infinite}
@keyframes pk-down{0%,30%{opacity:1}31%,79%{opacity:0}80%,100%{opacity:1}}
@keyframes pk-up{0%,30%{opacity:0;transform:translateY(6%)}31%{opacity:1;transform:translateY(6%)}36%,74%{opacity:1;transform:translateY(0)}79%{opacity:1;transform:translateY(5%)}80%,100%{opacity:0}}
@keyframes pk-flash{0%,41%{opacity:0}42%,45%{opacity:1;transform:scale(1)}46%,51%{opacity:0}52%,55%{opacity:1;transform:scale(1.04)}56%,61%{opacity:0}62%,65%{opacity:1}66%,100%{opacity:0}}
.p-peek .up,.p-peek .muzzle{transform-origin:72% 23%}
/* POW: a tracer zips in, he flashes white and gets knocked back, the burst pops */
.knock{position:absolute;inset:0;transform-origin:50% 91%;animation:knock 2.6s infinite}
.knock .hitflash{animation:hitflash 2.6s infinite}
@keyframes knock{0%,18%{transform:none}24%{transform:rotate(13deg) translateX(5%)}34%{transform:rotate(9deg) translateX(4%)}60%,100%{transform:none}}
@keyframes hitflash{0%,17%{opacity:0}18%,27%{opacity:1}28%,100%{opacity:0}}
.tracer{position:absolute;z-index:2;left:-10%;top:30%;width:22%;height:2.2%;border-radius:4px;background:linear-gradient(90deg,transparent,#ffe9a8 60%,#fff);animation:tracer 2.6s infinite;opacity:0}
@keyframes tracer{0%,6%{opacity:0;transform:translateX(0)}8%{opacity:1}17%{opacity:1;transform:translateX(200%)}18%,100%{opacity:0;transform:translateX(200%)}}
.burst{position:absolute;z-index:3;top:4%;right:4%;width:34%;aspect-ratio:150/130;display:grid;place-items:center;
  background:var(--yellow);clip-path:polygon(50% 0,61% 22%,86% 6%,78% 33%,100% 40%,79% 56%,95% 80%,67% 72%,58% 100%,45% 76%,20% 96%,24% 68%,0 62%,19% 46%,4% 22%,32% 26%);
  transform:rotate(-8deg) scale(0);animation:burst 2.6s infinite}
@keyframes burst{0%,18%{transform:rotate(-8deg) scale(0)}24%{transform:rotate(-8deg) scale(1.15)}30%,70%{transform:rotate(-8deg) scale(1)}78%,100%{transform:rotate(-8deg) scale(0)}}
.burst span{font:400 clamp(22px,2.6vw,36px)/1 var(--display);color:var(--red);-webkit-text-stroke:.1em var(--line);paint-order:stroke fill}
.panel figcaption{position:relative;z-index:2;margin:14px 0 0;background:#fff;color:var(--line);border-top:5px solid var(--line);padding:16px 20px 18px;font-weight:700;font-size:16.5px;line-height:1.45;flex:1}
.panel figcaption b{display:block;font:400 30px/1 var(--display);color:var(--pink);-webkit-text-stroke:.1em var(--line);paint-order:stroke fill;margin-bottom:4px}
@media (max-width:860px){.panels{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}

/* ---- features + tv ---- */
.feat-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.tv{--rr:-1.5deg}
.tv-frame{position:relative;border:6px solid var(--line);border-radius:16px;overflow:hidden;background:#000;
  box-shadow:0 0 0 8px #2a3148,0 0 0 13px var(--line),14px 16px 0 13px rgba(0,0,0,.5)}
.tv-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 4px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.45))}
.tv video{display:block;width:100%;aspect-ratio:1280/576;object-fit:cover}
.tv-rec{position:absolute;top:10px;left:14px;font:400 14px/1 var(--stencil);letter-spacing:.14em;color:#ff4d4d;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.tv-caption{margin:30px 0 0;text-align:center;font:400 14px/1 var(--stencil);letter-spacing:.16em;color:var(--muted)}
.feats{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:18px}
.feats li{display:grid;grid-template-columns:58px 1fr;gap:16px;align-items:start;color:var(--muted);font-size:16.5px}
.feats li:nth-child(2){transition-delay:.08s}.feats li:nth-child(3){transition-delay:.16s}.feats li:nth-child(4){transition-delay:.24s}.feats li:nth-child(5){transition-delay:.32s}
.feats b{display:block;color:#fff;font-size:19px;margin-bottom:2px}
.ico{display:grid;place-items:center;width:58px;height:58px;font:400 24px/1 var(--display);color:var(--line);background:var(--yellow);border:3px solid var(--line);border-radius:14px;
  box-shadow:4px 5px 0 var(--line);transform:rotate(-4deg);padding-top:3px}
.feats li:nth-child(even) .ico{background:var(--pink);transform:rotate(4deg)}
@media (max-width:900px){.feat-grid{grid-template-columns:1fr}}

/* ---- wanted posters ---- */
.wanted{text-align:center}
.wanted .lede{margin-inline:auto}
.posters{margin-top:56px;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2.4vw,30px)}
.poster{position:relative;background:var(--paper);color:#2b2112;padding:18px 16px 20px;display:flex;flex-direction:column;align-items:center;
  background-image:radial-gradient(ellipse at 20% 10%,rgba(160,110,40,.18),transparent 55%),radial-gradient(ellipse at 90% 90%,rgba(120,80,30,.22),transparent 55%);
  clip-path:polygon(0 2%,6% 0,14% 1.5%,25% 0,38% 1%,52% 0,66% 1.6%,80% 0,92% 1.2%,100% 0,99% 30%,100% 62%,99% 100%,86% 98.5%,70% 100%,55% 98.7%,40% 100%,24% 98.6%,10% 100%,0 99%,1% 60%);
  filter:drop-shadow(8px 10px 0 rgba(0,0,0,.5));transition:transform .25s cubic-bezier(.2,1.4,.4,1)}
.poster:nth-child(1){--rr:-3deg}.poster:nth-child(2){--rr:2deg;transition-delay:.08s}.poster:nth-child(3){--rr:-1.5deg;transition-delay:.16s}.poster:nth-child(4){--rr:3deg;transition-delay:.24s}.poster:nth-child(5){--rr:-2deg;transition-delay:.32s}
.poster-x .poster-art{position:relative}.poster-x .poster-art img{filter:brightness(0) drop-shadow(3px 4px 0 rgba(40,25,5,.35));opacity:.85}
.qmark{position:absolute;inset:0;display:grid;place-items:center;font:400 clamp(70px,8vw,110px)/1 var(--display);color:var(--yellow);-webkit-text-stroke:.08em var(--line);paint-order:stroke fill;animation:pulse 1.6s ease-in-out infinite}
.poster.in:hover{transform:translateY(-8px) rotate(0) scale(1.03)}
.poster::before{content:"";position:absolute;top:8px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff8a8a,#b31d1d);box-shadow:1px 2px 0 rgba(0,0,0,.4)}
.poster-head{margin:12px 0 6px;font:400 clamp(30px,3vw,40px)/1 var(--stencil);letter-spacing:.08em;color:#8f1d1d}
.poster-art{width:100%;aspect-ratio:1;display:grid;place-items:center;background:rgba(80,50,15,.12);border:3px solid #3a2a14;padding:10px}
.poster-art img{max-height:100%;object-fit:contain;filter:drop-shadow(3px 4px 0 rgba(40,25,5,.35));transition:transform .3s}
.poster:hover .poster-art img{animation:shake .4s linear 2}
@keyframes shake{25%{transform:translate(-3px,1px) rotate(-1deg)}50%{transform:translate(3px,-1px) rotate(1deg)}75%{transform:translate(-2px,0)}}
.poster-name{margin:14px 0 4px;font:400 clamp(22px,2.2vw,28px)/1.05 var(--display);color:var(--orange);-webkit-text-stroke:.12em #2b2112}
.poster-note{margin:0;font-size:14.5px;line-height:1.4;font-weight:600;color:#4a3a20;min-height:3.9em}
.poster-threat{margin:12px 0 0;font:400 13px/1 var(--stencil);letter-spacing:.16em;color:#2b2112}
.poster-threat span{font-size:17px;letter-spacing:.05em;color:#8f1d1d;margin-left:6px}
.poster-threat .off{color:rgba(43,33,18,.22);margin-left:0}
@media (max-width:1180px){.posters{grid-template-columns:repeat(3,1fr);max-width:860px;margin-inline:auto}}
@media (max-width:1000px){.posters{grid-template-columns:repeat(2,1fr);max-width:640px}}
@media (max-width:560px){.posters{gap:12px}.poster{padding:12px 9px 14px}.poster-head{font-size:22px;margin-top:10px}.poster-name{font-size:18px}.poster-note{font-size:12.5px;min-height:0}.poster-threat{font-size:10px}.poster-threat span{font-size:13px}}
.lineup{margin:80px auto 0;max-width:900px}
.lineup-title{display:inline-block;margin:0;font:400 15px/1 var(--stencil);letter-spacing:.2em;color:var(--khaki);background:var(--olive);border:3px solid var(--line);padding:9px 14px 7px;transform:rotate(-2deg)}
.lineup ul{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  background:repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.08) 38px 40px);border-bottom:4px solid rgba(255,255,255,.15)}
.lineup li{display:flex;flex-direction:column;align-items:center;gap:8px}
.lineup img{height:clamp(120px,18vw,210px);width:auto;filter:drop-shadow(4px 6px 0 rgba(0,0,0,.4));transition:transform .2s}
.lineup li:hover img{transform:translateY(-6px) scale(1.04)}
.lineup span{font:400 13px/1 var(--stencil);letter-spacing:.16em;color:var(--muted);background:var(--ink);border:2px solid #2a3148;padding:6px 9px 4px;margin-bottom:-14px}

/* ---- classified dossier ---- */
.folder{position:relative;max-width:900px;margin:0 auto;background:#c99a52;border-radius:6px 14px 14px 14px;padding:22px clamp(14px,3vw,30px) clamp(18px,3vw,30px);
  box-shadow:14px 16px 0 rgba(0,0,0,.45),inset 0 0 60px rgba(90,55,10,.35);--rr:-1deg}
.folder-tab{position:absolute;top:-34px;left:0;font:400 14px/1 var(--stencil);letter-spacing:.16em;color:#3a2a10;background:#c99a52;padding:12px 22px 10px;border-radius:12px 12px 0 0}
.paper{position:relative;background:#fbf7ec;color:#22201b;padding:clamp(24px,4vw,46px) clamp(20px,4vw,48px);border-radius:3px;
  background-image:repeating-linear-gradient(0deg,transparent 0 31px,rgba(60,90,160,.13) 31px 32px);
  font:500 17px/32px ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;box-shadow:0 3px 0 rgba(0,0,0,.15);transform:rotate(.6deg)}
.paper p{margin:0 0 32px;max-width:560px}
.paper b{background:linear-gradient(transparent 55%,rgba(255,210,63,.55) 55%)}
.paper-head{font-size:13px;letter-spacing:.12em;color:#8f1d1d;margin-bottom:8px!important}
.paper-title{margin:0 0 20px;font:400 clamp(34px,4.5vw,52px)/1 var(--stencil);color:#22201b;letter-spacing:.02em}
.classified{position:absolute;top:28px;right:clamp(12px,4vw,40px);font:400 clamp(22px,3vw,34px)/1 var(--stencil);letter-spacing:.12em;color:rgba(200,30,30,.82);
  border:4px solid rgba(200,30,30,.82);border-radius:8px;padding:8px 12px 6px;transform:rotate(9deg);-webkit-mask:radial-gradient(circle at 70% 30%,#000 55%,rgba(0,0,0,.65) 56%)}
.redact{all:unset;cursor:pointer;background:#16140f;color:transparent;border-radius:2px;padding:0 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background .3s,color .3s}
.redact:hover,.redact.open{background:rgba(255,61,61,.16);color:#8f1d1d}
.redact:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.paper-hint{font-size:13px;color:#7a7466;margin-top:-20px!important}
.route{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:640px}
.route li{display:flex;flex-direction:column;align-items:flex-start;gap:3px;border:2px dashed #8f8a7c;padding:10px 10px 8px;line-height:1.15;background:rgba(255,255,255,.5)}
.route b{font:400 22px/1 var(--stencil);color:#8f1d1d}
.route span{font-weight:800;font-size:13.5px}
.route small{font-size:12px;color:#6d675a}
.route .finale{border-color:#8f1d1d;background:rgba(255,61,61,.08)}
.paper-photo{position:absolute;right:clamp(10px,4vw,40px);bottom:clamp(110px,14vw,150px);width:clamp(120px,17vw,190px);background:#fff;padding:10px 10px 30px;
  box-shadow:4px 6px 0 rgba(0,0,0,.25);transform:rotate(6deg)}
.clip{position:absolute;right:clamp(46px,8vw,90px);bottom:clamp(250px,32vw,330px);width:22px;height:60px;border:4px solid #9aa3b2;border-radius:12px;transform:rotate(6deg)}
@media (max-width:820px){.route{grid-template-columns:repeat(2,1fr)}.paper-photo,.clip{display:none}}

/* ---- gallery ---- */
.gallery{text-align:center}
.shots{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
.shot{all:unset;cursor:zoom-in;position:relative;background:#fff;padding:10px 10px 12px;box-shadow:8px 10px 0 rgba(0,0,0,.45);transition:transform .25s cubic-bezier(.2,1.4,.4,1)}
.shot:nth-child(3n+1){--rr:-2deg}.shot:nth-child(3n+2){--rr:1.5deg;transition-delay:.08s}.shot:nth-child(3n){--rr:-1deg;transition-delay:.16s}
.shot::before{content:"";position:absolute;z-index:2;top:-12px;left:50%;width:86px;height:26px;margin-left:-43px;background:rgba(255,226,102,.75);transform:rotate(-4deg);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.shot.in:hover{transform:scale(1.04) rotate(0)}
.shot:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.shot img{aspect-ratio:1280/576;object-fit:cover;width:100%}
@media (max-width:900px){.shots{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.shots{grid-template-columns:1fr}}
.lightbox{max-width:min(1280px,96vw);padding:0;border:5px solid var(--line);border-radius:8px;background:#000;box-shadow:0 20px 80px rgba(0,0,0,.8)}
.lightbox::backdrop{background:rgba(5,6,12,.88)}
.lightbox img{width:100%}
.lb-close{position:absolute;top:8px;right:8px;width:44px;height:44px;border-radius:50%;border:3px solid var(--line);background:var(--yellow);font:700 20px/1 var(--body);cursor:pointer}

/* ---- final CTA ---- */
.enlist{max-width:none;text-align:center;overflow:hidden;isolation:isolate;padding-block:clamp(110px,14vw,180px)}
.rays{position:absolute;z-index:-2;left:50%;top:50%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;
  background:repeating-conic-gradient(from 0deg,#3a1450 0 7deg,#250d36 7deg 14deg);animation:spin 70s linear infinite}
.enlist::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 50%,rgba(255,61,139,.32),transparent 55%),linear-gradient(var(--ink),transparent 18%,transparent 82%,var(--ink))}
@keyframes spin{to{transform:rotate(360deg)}}
.enlist-inner{max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.enlist .lede{margin-inline:auto;color:#d9dcea}
.enlist .signup{animation:none}
.enlist-heli{position:absolute;z-index:-1;top:9%;width:clamp(220px,26vw,380px);animation:fly 16s linear infinite;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5));opacity:.95}
@keyframes fly{0%{transform:translateX(110vw) translateY(0)}50%{transform:translateX(30vw) translateY(14px)}100%{transform:translateX(-40vw) translateY(0)}}

/* ---- footer ---- */
.foot{border-top:3px solid #1c2238;padding:40px var(--gutter) calc(40px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--muted);font-size:14px}
.foot p{margin:0}
.foot a{color:var(--muted)}

/* ---- bullet holes: click empty space to shoot the page (pointer devices) ---- */
.hole{position:absolute;z-index:40;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#05060a 0 30%,#2b2f3a 31% 45%,rgba(200,205,220,.35) 46% 52%,transparent 53%);animation:holefade 5s forwards}
.hole::after{content:"";position:absolute;inset:-14px;background:radial-gradient(circle,rgba(255,220,120,.95) 0 10%,rgba(255,140,40,.6) 25%,transparent 55%);border-radius:50%;animation:flash .18s forwards}
@keyframes holefade{0%,70%{opacity:1}100%{opacity:0}}
@keyframes flash{to{opacity:0;transform:scale(1.6)}}
.spark{position:absolute;z-index:41;width:4px;height:4px;border-radius:2px;background:var(--yellow);pointer-events:none;animation:spark .45s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy));opacity:0}}
@media (hover:hover) and (pointer:fine){
  body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg fill='none' stroke='%2314151c' stroke-width='5'%3E%3Ccircle cx='16' cy='16' r='9'/%3E%3Cpath d='M16 2v8M16 22v8M2 16h8M22 16h8'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffd23f' stroke-width='2.5'%3E%3Ccircle cx='16' cy='16' r='9'/%3E%3Cpath d='M16 2v8M16 22v8M2 16h8M22 16h8'/%3E%3C/g%3E%3C/svg%3E") 16 16,crosshair}
  a,button,.btn,.shot,.redact,input{cursor:pointer}
  input[type=email]{cursor:text}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hero-searchlight,.rays{animation:none}
  .burst{animation:none;transform:rotate(-8deg)}
}

/* phones: the stamp sits above the file header instead of over it */
@media (max-width:600px){.classified{position:static;display:inline-block;margin:0 0 14px;font-size:20px;transform:rotate(-4deg)}}