:root{
  --bg:#0a0a0a; --bg2:#131311; --ink:#f4efe2; --dim:#99937f; --gold:#f2dc8f;
  --paper:#e8dcbc; --paper-ink:#1d1a14; --red:#ff2d3d; --blue:#2d6bff; --line:rgba(242,220,143,.16);
  --disp:"Anton",Impact,sans-serif; --mono:"Geist Mono",ui-monospace,monospace; --sans:"Geist",system-ui,sans-serif; --hand:"Permanent Marker",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--gold);color:#000}



/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:12px 28px;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
nav.solid{background:rgba(10,10,10,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:var(--line)}
nav .brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-size:20px;letter-spacing:.03em;text-decoration:none}
nav .brand img{width:30px;height:30px;border-radius:50%}
nav .links{display:flex;gap:24px;font-size:14px}
nav .links a{text-decoration:none;color:var(--dim);transition:color .2s}
nav .links a:hover{color:var(--ink)}
nav .sub{font-size:14px;font-weight:600;background:var(--red);color:#fff;text-decoration:none;padding:9px 16px;border-radius:999px;transition:transform .2s}
nav .sub:hover{transform:scale(1.05)}

/* hero */
.hero{height:100svh;min-height:640px;position:relative;overflow:hidden;display:grid;place-items:center}
.hero .stack{position:relative;z-index:3;text-align:center;width:100%}
.hero h1{font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.8;font-size:clamp(90px,19vw,330px);letter-spacing:-.01em;display:flex;flex-direction:column;align-items:center}
.hero h1 .w{display:flex}
.hero h1 .w2{color:var(--gold)}
.hero h1 .L{display:inline-block;will-change:transform}
.hero .joey{position:absolute;z-index:4;left:50%;bottom:0;width:min(46vh,430px);transform:translateX(-50%);pointer-events:none}
.hero .joey img{width:100%;filter:drop-shadow(0 30px 50px rgba(0,0,0,.9))}
.hero .tag{position:absolute;z-index:5;left:28px;bottom:32px;max-width:300px;font-size:17px;line-height:1.45;color:var(--ink)}
.hero .tag b{color:var(--gold)}
.hero .cta{position:absolute;z-index:5;right:28px;bottom:32px;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.note{font-family:var(--hand);color:var(--gold);font-size:22px;line-height:1.1;position:absolute;z-index:6;pointer-events:none}
.hero .note{left:calc(50% + 17vw);bottom:30%;transform:rotate(-8deg);width:190px;z-index:8}
.hero .note svg{transform:none!important;width:160px!important;margin:4px 0 0 -150px!important}
.hero .note svg{display:block;width:90px;margin-top:6px;margin-left:-30px;transform:scaleX(-1) rotate(-10deg)}
.tape{position:absolute;left:-10%;width:120%;height:46px;background:var(--gold);color:#000;display:flex;align-items:center;overflow:hidden;font-family:var(--disp);font-size:24px;letter-spacing:.06em;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.6);z-index:2}
.tape span{display:inline-block;padding-right:40px}
.tape .run{display:flex;animation:run 22s linear infinite}
.tape.b .run{animation-direction:reverse;animation-duration:28s}
@keyframes run{to{transform:translateX(-50%)}}
.hero .tape.a{top:18%;transform:rotate(-7deg)}
.hero .tape.b{bottom:22%;transform:rotate(5deg);z-index:3;opacity:.97}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;padding:14px 22px;border-radius:999px;text-decoration:none;border:1px solid rgba(244,239,226,.25);color:var(--ink);background:rgba(10,10,10,.5);cursor:pointer;transition:background .2s,color .2s,transform .2s;font-family:var(--sans)}
.btn:hover{background:var(--ink);color:#000}
.btn.gold{background:var(--gold);color:#000;border-color:var(--gold)}
.btn.gold:hover{background:#fff}

/* statement */
.statement{padding:22vh 8vw;max-width:1500px;margin:0 auto}
.statement p{font-family:var(--disp);text-transform:uppercase;font-size:clamp(38px,5.6vw,92px);line-height:1.02}
.statement .wd{opacity:.13;display:inline-block}
.statement .hl{color:var(--gold)}
.statement .src{display:inline-block;margin-top:28px;color:var(--dim);text-decoration:none;font-size:16px;border-bottom:1px solid var(--line);padding-bottom:4px}
.statement .src:hover{color:var(--gold)}

/* headings */
.sec{padding:120px 6vw;position:relative}
.hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:56px}
.hd h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(64px,10vw,170px);line-height:.85}
.hd .note{position:relative;text-decoration:none;font-size:24px;transform:rotate(-3deg);max-width:340px}

/* wanted */
.wanted{display:grid;grid-template-columns:minmax(300px,460px) 1fr;gap:70px;align-items:start}
.poster-wrap{perspective:900px;position:relative;padding-top:20px}
.nail{position:absolute;top:8px;left:50%;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#bbb,#333);transform:translateX(-50%);z-index:3;box-shadow:0 2px 3px #000}
.poster{background:var(--paper);color:var(--paper-ink);padding:30px 30px 34px;text-align:center;transform-origin:50% 0;position:relative;
  box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 0 80px rgba(120,90,30,.35);
  clip-path:polygon(0 1%,4% 0,30% 1%,62% 0,96% 1%,100% 0,99% 30%,100% 64%,99% 98%,94% 100%,60% 99%,28% 100%,2% 99%,0 70%,1% 36%)}
.poster::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .15 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}
.poster .w1{font-family:var(--disp);font-size:clamp(70px,9vw,124px);line-height:.85;letter-spacing:.02em}
.poster .w2{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;border-block:2px solid var(--paper-ink);padding:6px 0;margin:10px 0 18px}
.poster .mug{background:#cbbd98;border:3px solid var(--paper-ink);aspect-ratio:1;display:grid;place-items:end center;overflow:hidden}
.poster .mug img{width:92%;filter:grayscale(1) sepia(.5) contrast(1.2)}
.poster .nm{font-family:var(--disp);font-size:58px;line-height:1;margin-top:16px}
.poster .aka{font-family:var(--mono);font-size:13px;margin-top:4px}
.poster .rw{font-family:var(--disp);font-size:30px;margin-top:16px;line-height:1}
.poster .rw small{display:block;font-family:var(--hand);font-size:20px;color:#8a1b12;margin-top:6px}
.stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.stat{padding:26px 0;border-bottom:1px solid var(--line)}
.stat:nth-child(odd){padding-right:20px;border-right:1px solid var(--line)}
.stat:nth-child(even){padding-left:26px}
.stat .v{font-family:var(--disp);font-size:clamp(48px,5.4vw,84px);line-height:1;color:var(--gold)}
.stat .k{color:var(--dim);margin-top:8px;font-size:15px}
.charges{margin-top:42px}
.charges h3{font-family:var(--mono);font-size:13px;color:var(--dim);letter-spacing:.14em;text-transform:uppercase;font-weight:400;margin-bottom:12px}
.charges li{list-style:none;font-family:var(--hand);font-size:clamp(22px,2.2vw,30px);color:var(--ink);padding:6px 0;display:flex;gap:16px;align-items:baseline}
.charges li a{color:inherit;text-decoration:none;border-bottom:2px solid transparent}
.charges li a:hover{border-color:var(--gold)}
.charges li i{font-style:normal;font-family:var(--mono);font-size:13px;color:var(--red);white-space:nowrap}

/* evidence wall */
.wall{position:relative;overflow:hidden;padding:110px 0 120px}
.wall .hd{padding:0 6vw}
.track{display:flex;gap:56px;padding:30px 6vw 40px;width:max-content}
.polaroid{display:block;text-decoration:none;width:380px;flex:none;background:#f3efe6;padding:14px 14px 0;color:#1a1a1a;position:relative;cursor:pointer;border:0;text-align:left;font:inherit;transform:rotate(var(--r));box-shadow:0 25px 50px rgba(0,0,0,.55);transition:transform .35s cubic-bezier(.2,1.4,.4,1)}
.polaroid:hover{transform:rotate(0) scale(1.04);z-index:2}
.polaroid .ph{aspect-ratio:16/10;overflow:hidden;background:#000;position:relative}
.polaroid .ph img{width:100%;height:100%;object-fit:cover}
.polaroid .cap{font-family:var(--hand);font-size:21px;line-height:1.2;padding:14px 4px 18px}
.polaroid .cap small{display:block;font-family:var(--sans);font-size:14px;color:#555;margin-top:6px;line-height:1.35}
.polaroid .tp{position:absolute;top:-14px;left:50%;width:110px;height:30px;background:rgba(242,220,143,.75);transform:translateX(-50%) rotate(-4deg);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.polaroid .stamp{position:absolute;top:30px;right:20px;font-family:var(--disp);font-size:34px;color:var(--red);border:4px solid var(--red);padding:0 12px;transform:rotate(14deg);letter-spacing:.04em;background:rgba(255,255,255,.08);mix-blend-mode:normal}
.polaroid .play{position:absolute;left:14px;bottom:12px;width:44px;height:44px;border-radius:50%;background:var(--red);display:grid;place-items:center;opacity:0;transform:scale(.6);transition:.25s}
.polaroid:hover .play{opacity:1;transform:none}
.wall .more{padding:0 6vw}

/* truck jump */
.jump{height:340vh;position:relative}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#0d0d0c}
.stage svg{position:absolute;inset:0;width:100%;height:100%}
.step{position:absolute;left:6vw;top:16vh;font-family:var(--disp);font-size:clamp(36px,4.6vw,76px);text-transform:uppercase;line-height:.95;opacity:0;max-width:16ch}
.step small{display:block;font-family:var(--hand);font-size:clamp(20px,2vw,28px);text-transform:none;color:var(--gold);margin-top:12px}
.slam{position:absolute;left:50%;top:50%;font-family:var(--disp);font-size:clamp(90px,18vw,300px);color:var(--red);border:.06em solid var(--red);padding:0 .15em;line-height:1;transform:translate(-50%,-50%) rotate(-12deg);opacity:0;white-space:nowrap;background:rgba(0,0,0,.25)}

/* team */
.team{display:grid;gap:44px}
.tgroup h3{font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:16px;display:flex;gap:10px;align-items:center}
.tgroup h3 b{color:var(--gold);font-weight:600}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tcard{display:flex;align-items:center;gap:16px;padding:16px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s}
.tcard:hover{border-color:var(--gold);transform:translateY(-3px)}
.tcard img{width:64px;height:64px;border-radius:50%;flex:none;background:#1f1d19}
.tcard .tn{font-weight:600;font-size:17px;line-height:1.2}
.tcard .tr{font-size:14px;color:var(--dim);margin-top:4px}
.tcard .tr b{color:var(--gold);font-weight:600}

/* off duty */
.off{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}
.card{background:var(--bg2);padding:40px;position:relative;overflow:hidden;border-radius:6px;border:1px solid var(--line)}
.card h3{font-family:var(--disp);font-weight:400;font-size:clamp(48px,5vw,72px);text-transform:uppercase;line-height:.9}
.card .lede{color:var(--dim);margin:14px 0 26px;max-width:40ch;line-height:1.55;font-size:17px}
.card ul{list-style:none}
.card li a{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--line);text-decoration:none;font-size:16px;transition:padding .25s,color .2s}
.card li a:hover{color:var(--gold);padding-left:10px}
.card li a span{color:var(--dim)}
.card.king{background:var(--gold);color:#111;border-color:var(--gold)}
.card.king .lede{color:#3a3523}
.card.king li a{border-color:rgba(0,0,0,.15)}
.card.king li a span{color:#3a3523}
.card.king li a:hover{color:#000}

/* footer */
footer{padding:56px 6vw 40px;border-top:1px solid var(--line)}
footer .frow{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer .brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-size:22px;text-decoration:none}
footer .brand img{width:34px;height:34px;border-radius:50%}
footer .flinks{display:flex;gap:24px;flex-wrap:wrap}
footer .flinks a{text-decoration:none;color:var(--dim);font-size:15px}
footer .flinks a:hover{color:var(--ink)}
footer .fsmall{margin-top:28px;color:var(--dim);font-size:14px}

/* skeletons: shimmer until the real thing arrives */
.sk{position:relative;overflow:hidden;background-color:#1f1d19}
.sk::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(242,220,143,.10) 50%,transparent 70%);transform:translateX(-100%);animation:sk 1.3s ease-in-out infinite}
.sk.ok::after{display:none}
.poster .mug.sk{background-color:#bfb18c}
.poster .mug.sk::after{background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%)}
@keyframes sk{to{transform:translateX(100%)}}
img.fade{opacity:0;transition:opacity .6s ease}
img.fade.ok{opacity:1}
html.anim #title{visibility:hidden}



@media (max-width:900px){
  nav{padding:12px 16px}
  nav .links{display:none}
  .hero .joey{width:62vw;bottom:14%}
  .hero h1{margin-top:-30vh}
  .hero .tag{left:16px;right:16px;bottom:96px;max-width:none;font-size:15px}
  .hero .cta{left:16px;right:auto;bottom:24px;flex-direction:row}
  .hero .note{display:none}
  .hero .tape{height:36px;font-size:18px}
  .statement{padding:14vh 16px}
  .sec{padding:80px 16px}
  .wanted{grid-template-columns:1fr;gap:50px}
  .wall .hd,.wall .more{padding:0 16px}
  .track{flex-direction:column;width:auto;padding:20px 16px;gap:40px}
  .polaroid{width:100%}
  .step{left:16px;top:12vh}
  .off{grid-template-columns:1fr}
  .card{padding:28px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
  .statement .wd{opacity:1}
}
.teampage{padding-top:140px;min-height:80vh}
.thead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:48px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.thead h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(64px,10vw,170px);line-height:.85}
.thead p{color:var(--dim);font-size:18px;margin-top:16px}
.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pcard{display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .3s cubic-bezier(.2,.9,.2,1),border-color .2s;animation:tin .6s cubic-bezier(.2,.9,.2,1) both}
.pcard:hover{transform:translateY(-6px);border-color:var(--gold)}
.pcard .pimg{aspect-ratio:1;overflow:hidden;background:#1f1d19}
.pcard .pimg img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.9,.2,1)}
.pcard:hover .pimg img{transform:scale(1.06)}
.pcard.owner{border-color:rgba(242,220,143,.5)}
.pcard.owner .pimg{background:var(--gold)}
.pcard.owner .pimg img{object-fit:contain;object-position:50% 100%}
.pcard .pbody{padding:18px 20px 22px}
.pcard .prole{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.pcard .pname{font-family:var(--disp);font-size:34px;line-height:1;text-transform:uppercase;margin-top:8px;word-break:break-word}
.pcard .pnote{color:var(--dim);font-size:15px;margin-top:8px}
.pcard:nth-child(2){animation-delay:.06s}.pcard:nth-child(3){animation-delay:.12s}.pcard:nth-child(4){animation-delay:.18s}.pcard:nth-child(5){animation-delay:.24s}.pcard:nth-child(6){animation-delay:.3s}.pcard:nth-child(7){animation-delay:.36s}
@keyframes tin{from{opacity:0;transform:translateY(24px)}}
@media (max-width:900px){.teampage{padding-top:100px}.roster{grid-template-columns:1fr 1fr;gap:12px}.pcard .pname{font-size:24px}.pcard .pbody{padding:12px 14px 16px}}

/* ramp game */
.glede{font-family:var(--hand);color:var(--gold);font-size:24px;transform:rotate(-3deg)}
.gwrap{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0a0a0a;user-select:none;-webkit-user-select:none}
#game{display:block;width:100%;aspect-ratio:16/9;max-height:78vh;touch-action:none;cursor:pointer}
.gwrap:fullscreen{border-radius:0;border:0}
.gwrap:fullscreen #game{height:100vh;max-height:none;aspect-ratio:auto}
.ghud{position:absolute;top:0;left:0;right:0;display:flex;gap:28px;align-items:flex-start;padding:16px 20px;pointer-events:none}
.ghud span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ghud b{font-family:var(--disp);font-weight:400;font-size:32px;line-height:1.1;color:var(--ink)}
.gwarn p{display:flex;gap:6px;margin-top:8px}
.gwarn i{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,45,61,.5)}
.gwarn i.on{background:var(--red);border-color:var(--red)}
.gfs{margin-left:auto;pointer-events:auto;background:rgba(0,0,0,.5);border:1px solid var(--line);color:var(--ink);width:36px;height:36px;border-radius:8px;font-size:18px;cursor:pointer}
.gmsg{position:absolute;left:0;right:0;top:22%;text-align:center;pointer-events:none;opacity:0}
.gmsg b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(44px,8vw,110px);line-height:.9;text-transform:uppercase;color:var(--gold);text-shadow:5px 5px 0 #000}
.gmsg.bad b{color:var(--red)}
.gmsg small{display:block;margin-top:12px;font-size:16px;color:var(--ink);text-shadow:0 2px 0 #000}
.gmsg.show{animation:gpop 1.7s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes gpop{0%{opacity:0;transform:scale(.6) rotate(-6deg)}14%{opacity:1;transform:scale(1.04) rotate(-3deg)}24%{transform:scale(1) rotate(-3deg)}80%{opacity:1}100%{opacity:0;transform:translateY(-14px) rotate(-3deg)}}
.gpanel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px;background:rgba(10,10,10,.84);backdrop-filter:blur(3px)}
.gpanel[hidden]{display:none}
.gpanel h3{font-family:var(--disp);font-weight:400;font-size:clamp(40px,6vw,84px);line-height:.9;text-transform:uppercase}
.gpanel ul{list-style:none;color:var(--dim);font-size:16px;line-height:2}
.gpanel kbd{border:1px solid var(--line);border-radius:5px;padding:1px 7px;color:var(--gold);font-family:var(--mono);font-size:12px}
.gtouch{display:none;color:var(--dim);font-size:14px;max-width:34ch}
.gstamp{font-family:var(--disp);font-size:clamp(60px,12vw,150px);color:var(--red);border:.07em solid var(--red);padding:0 .15em;line-height:1;transform:rotate(-8deg);animation:stamp .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes stamp{from{transform:rotate(-8deg) scale(2.6);opacity:0}}
.gq{color:var(--ink);font-size:18px}
.gfinal{display:flex;gap:40px}
.gfinal span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.gfinal b{font-family:var(--disp);font-weight:400;font-size:48px;color:var(--gold)}
@media (hover:none){.gtouch{display:block}.gpanel ul li:nth-child(-n+3){display:none}}
@media (max-width:900px){.ghud{gap:16px;padding:10px 12px}.ghud b{font-size:22px}.gpanel ul{font-size:14px;line-height:1.8}}

/* motto */
.motto{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:100px 6vw 110px}
.motto img{width:min(260px,60vw);height:auto;border-radius:16px;transform:rotate(-3deg);box-shadow:0 30px 60px rgba(0,0,0,.6);transition:transform .4s cubic-bezier(.2,1.4,.4,1)}
.motto img:hover{transform:rotate(2deg) scale(1.04)}
.motto p{font-family:var(--disp);text-transform:uppercase;font-size:clamp(30px,4.4vw,64px);line-height:1;max-width:18ch;margin-top:12px}
.motto span{color:var(--dim);font-size:14px}