/* Dept. of Dogs: collage skin. Palette from the brand bible. */
@font-face{font-family:"Anton";src:url(/assets/fonts/anton.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Marker";src:url(/assets/fonts/permanent-marker.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Fredoka";src:url(/assets/fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Space Mono";src:url(/assets/fonts/space-mono-bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --torn-mask:url(/assets/img/torn-top.svg) top/100% 12px no-repeat,url(/assets/img/torn-bot.svg) bottom/100% 12px no-repeat,url(/assets/img/torn-left.svg) left/8px 100% no-repeat,url(/assets/img/torn-right.svg) right/8px 100% no-repeat,linear-gradient(#000,#000) center/calc(100% - 14px) calc(100% - 22px) no-repeat;
  --coat:#E8771C;--coat-dk:#A54C17;--cream:#FFE3BC;--paper:#FFF0DA;--tomato:#FF4F38;--butter:#F2C14E;--butter-hi:#FFD23F;
  --cobalt:#2443C4;--cobalt-dk:#101C6E;--deep:#1B2560;--ink:#17110F;--white:#fff;
  --spring:cubic-bezier(.34,1.56,.64,1);--snap:cubic-bezier(.2,.9,.25,1.25);
  --display:"Anton",Impact,"Arial Narrow Bold",sans-serif;--marker:"Marker","Comic Sans MS",cursive;--body:"Fredoka",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Space Mono",ui-monospace,monospace;
  --radius:22px;--shadow:0 6px 0 rgba(10,14,40,.35);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html{background:var(--cobalt-dk);overflow-x:clip}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.5;color:var(--white);overflow-x:clip;min-height:100vh;
  background:radial-gradient(circle,rgba(255,255,255,.13) 1.6px,transparent 2.2px) 0 0/20px 20px,linear-gradient(175deg,var(--cobalt) 0,#1d35a8 900px,#16288a 2400px,var(--cobalt-dk) 100%);}
img{max-width:100%;height:auto;display:block}
a{color:var(--butter-hi)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:4px solid var(--butter-hi);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--butter-hi);color:var(--ink);padding:8px 14px;border-radius:10px;z-index:100;font-weight:700}
.skip:focus{left:8px}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:1.02;margin:0 0 .3em;text-transform:uppercase}
h1{font-size:clamp(40px,11vw,86px)} h2{font-size:clamp(32px,8vw,58px)} h3{font-size:clamp(22px,5.5vw,30px)}
p{margin:0 0 1em}
.mono{font-family:var(--mono);font-weight:700;letter-spacing:.02em;text-transform:uppercase;font-size:13px}
.marker{font-family:var(--marker)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;padding:10px 0;background:linear-gradient(var(--cobalt-dk),rgba(16,28,110,.0));}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.logo-img{width:44px;height:44px;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 0 rgba(0,0,0,.35);transition:transform .4s var(--spring)}
.logo:hover .logo-img{transform:rotate(-14deg) scale(1.1)}
.logo-word{font-family:var(--display);font-size:21px;line-height:1;background:var(--paper);padding:8px 12px 7px;transform:rotate(-2deg);
  -webkit-mask:var(--torn-mask);mask:var(--torn-mask)}
.logo-word b{color:var(--tomato);font-weight:400}
.nav-toggle{appearance:none;border:3px solid var(--ink);background:var(--butter-hi);color:var(--ink);font-family:var(--display);font-size:18px;padding:6px 14px;border-radius:999px;box-shadow:0 4px 0 var(--ink);cursor:pointer;transition:transform .15s}
.nav-toggle:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.nav{position:fixed;inset:0;background:var(--tomato);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;z-index:60;
  clip-path:circle(0 at calc(100% - 44px) 34px);transition:clip-path .55s cubic-bezier(.7,0,.2,1);visibility:hidden}
.nav.open{clip-path:circle(150% at calc(100% - 44px) 34px);visibility:visible}
.nav a{font-family:var(--display);font-size:clamp(38px,10vw,64px);color:var(--paper);text-decoration:none;text-transform:uppercase;transform:translateY(30px) rotate(-3deg);opacity:0;transition:transform .5s var(--spring),opacity .3s}
.nav.open a{transform:none;opacity:1}
.nav.open a:nth-child(2){transition-delay:.05s}.nav.open a:nth-child(3){transition-delay:.1s}.nav.open a:nth-child(4){transition-delay:.15s}.nav.open a:nth-child(5){transition-delay:.2s}.nav.open a:nth-child(6){transition-delay:.25s}
.nav a:hover{color:var(--butter-hi);transform:rotate(2deg) scale(1.06)}
.nav .nav-close{position:absolute;top:14px;right:16px}
@media (min-width:900px){
  .nav-toggle,.nav .nav-close{display:none}
  .nav{position:static;clip-path:none;visibility:visible;flex-direction:row;background:none;gap:4px}
  .nav a{font-size:20px;opacity:1;transform:none;padding:6px 12px;border-radius:999px;color:#fff}
  .nav a:hover{background:var(--butter-hi);color:var(--ink);transform:rotate(-3deg)}
}

/* ---------- torn paper title cards ---------- */
.torn{position:relative;background:var(--paper);color:var(--ink);padding:22px 22px 20px;
  -webkit-mask:var(--torn-mask);mask:var(--torn-mask);
  background-image:linear-gradient(115deg,rgba(255,255,255,.55),rgba(255,255,255,0) 40%),radial-gradient(rgba(165,76,23,.07) 1px,transparent 1.4px);background-size:auto,5px 5px}
.torn-wrap{filter:drop-shadow(0 7px 0 rgba(8,12,50,.45));display:block}
.tilt-l{transform:rotate(-2.5deg)}.tilt-r{transform:rotate(2deg)}
.hl{color:var(--tomato)} .hl-cobalt{color:var(--cobalt)}
.tape{position:absolute;width:110px;height:30px;background:rgba(255,210,63,.85);top:-10px;left:50%;transform:translateX(-50%) rotate(-4deg);
  -webkit-mask:url(/assets/img/tape.svg) center/100% 100%;mask:url(/assets/img/tape.svg) center/100% 100%;z-index:2}
.chip{display:inline-block;background:var(--tomato);color:#fff;font-family:var(--display);font-size:18px;padding:4px 12px;transform:rotate(-4deg);text-transform:uppercase;box-shadow:3px 3px 0 var(--ink)}
.chip.butter{background:var(--butter-hi);color:var(--ink)} .chip.cobalt{background:var(--cobalt)} .chip.deep{background:var(--deep)}

/* ---------- numbered badges ---------- */
.badge{--bg:var(--tomato);display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--bg);color:var(--paper);
  border:4px solid var(--ink);font-family:var(--display);font-size:32px;line-height:1;box-shadow:3px 4px 0 var(--ink);flex:none}
.badge.butter{--bg:var(--butter-hi);color:var(--ink)}.badge.cobalt{--bg:var(--cobalt)}.badge.coat{--bg:var(--coat)}.badge.deep{--bg:var(--deep)}

/* ---------- buttons ---------- */
.btn{--c:var(--butter-hi);--t:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:10px;appearance:none;border:4px solid var(--ink);background:var(--c);color:var(--t);
  font-family:var(--display);font-size:22px;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;padding:12px 22px;border-radius:999px;box-shadow:0 6px 0 var(--ink);
  cursor:pointer;transition:transform .18s var(--spring),box-shadow .18s;user-select:none;-webkit-tap-highlight-color:transparent}
.btn:hover{transform:translateY(-3px) rotate(-1.5deg)}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.btn.tomato{--c:var(--tomato);--t:#fff}.btn.cream{--c:var(--paper)}.btn.cobalt{--c:var(--cobalt);--t:#fff}
.btn[disabled],.btn.soon{--c:#d9d2c6;--t:#5b5249;cursor:not-allowed;box-shadow:0 4px 0 #5b5249;border-color:#5b5249;font-size:18px}
.btn.soon:hover,.btn[disabled]:hover{transform:none}
.btn-tiktok{position:relative;--c:var(--ink);--t:#fff;font-size:clamp(22px,6.4vw,30px);padding:16px 26px;border-color:#fff;box-shadow:0 7px 0 var(--tomato),0 7px 0 3px #fff;animation:tk-bounce 3.6s var(--spring) infinite 2.2s}
.btn-tiktok .tk-txt{text-shadow:-2px -1px 0 #25F4EE,2px 1px 0 #FE2C55}
.btn-tiktok svg{width:30px;height:30px;flex:none;filter:drop-shadow(-2px -1px 0 #25F4EE) drop-shadow(2px 1px 0 #FE2C55)}
.btn-tiktok:hover{box-shadow:0 10px 0 var(--tomato),0 10px 0 3px #fff}
@keyframes tk-bounce{0%,78%,100%{transform:none}84%{transform:translateY(-10px) rotate(-3deg) scale(1.04)}90%{transform:translateY(0) rotate(2deg)}95%{transform:translateY(-3px) rotate(-1deg)}}

/* ---------- hero ---------- */
.hero{position:relative;padding:6px 0 34px;overflow:hidden;min-height:min(880px,100svh)}
.hero.shake{animation:shake .18s linear}
@keyframes shake{25%{transform:translate(2px,-1px)}50%{transform:translate(-2px,1px)}75%{transform:translate(1px,2px)}}
.hero-title{position:relative;z-index:4;max-width:560px;margin:8px auto 0;text-align:center}
.hero-title .torn{padding:18px 18px 16px}
.hero-title h1{margin:0;font-size:clamp(42px,12.5vw,84px)}
.hero-title h1 .line2{display:block;color:var(--tomato)}
.hero-title .sub{font-family:var(--marker);font-size:clamp(17px,4.6vw,22px);color:var(--cobalt);margin:4px 0 0;transform:rotate(-1.5deg)}
.stage{position:relative;width:min(420px,84vw);margin:-6px auto 0;aspect-ratio:440/600;z-index:3;touch-action:pan-y}
.stage-glow{position:absolute;inset:16% 4% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(255,210,63,.55),rgba(255,210,63,0));animation:glow 4s ease-in-out infinite}
@keyframes glow{50%{transform:scale(1.08);opacity:.8}}
.burst{position:absolute;inset:6% -20% -10%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.09) 0 8deg,transparent 8deg 20deg);border-radius:50%;
  -webkit-mask:radial-gradient(closest-side,#000 40%,transparent);mask:radial-gradient(closest-side,#000 40%,transparent);animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.host{position:absolute;inset:0;transform-origin:50% 92%;will-change:transform;transition:transform .5s var(--spring);cursor:pointer}
.host canvas,.host img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;-webkit-mask:linear-gradient(#000 84%,transparent 98%);mask:linear-gradient(#000 84%,transparent 98%)}
.host .breath{position:absolute;inset:0;transform-origin:50% 100%;animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.012,.988)}}
.host.sway .breath{animation:wave-sway 1.1s ease-in-out 2,breathe 3.2s ease-in-out infinite 2.2s}
@keyframes wave-sway{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
.host.hop .breath{animation:hop .55s var(--snap)}
@keyframes hop{30%{transform:translateY(-16px) scale(.97,1.04)}60%{transform:translateY(0) scale(1.05,.95)}100%{transform:none}}
.host-floor{position:absolute;left:12%;right:12%;bottom:-3%;height:9%;background:radial-gradient(closest-side,rgba(5,8,40,.55),transparent);z-index:-1}
.bubble{position:absolute;z-index:6;left:2%;top:4%;max-width:200px;background:#fff;color:var(--ink);border:4px solid var(--ink);border-radius:26px;padding:10px 14px;
  font-family:var(--display);font-size:22px;line-height:1.05;text-transform:uppercase;box-shadow:4px 5px 0 var(--ink);transform-origin:80% 110%;
  transition:transform .45s var(--spring),opacity .2s}
.bubble::after{content:"";position:absolute;right:26px;bottom:-20px;border:12px solid transparent;border-top:16px solid var(--ink);border-bottom:0}
.bubble::before{content:"";position:absolute;right:30px;bottom:-11px;border:8px solid transparent;border-top:11px solid #fff;border-bottom:0;z-index:1}
.bubble.pop{animation:bubble-pop .5s var(--spring)}
@keyframes bubble-pop{0%{transform:scale(.3) rotate(-12deg);opacity:0}100%{transform:none;opacity:1}}
.bubble .paw-wave{display:inline-block;width:26px;height:26px;vertical-align:-4px;transform-origin:70% 90%;animation:paw-wave 1s ease-in-out infinite}
@keyframes paw-wave{0%,100%{transform:rotate(0)}30%{transform:rotate(22deg)}60%{transform:rotate(-14deg)}}
.qmark{position:absolute;z-index:5;font-family:var(--display);font-size:56px;color:var(--butter-hi);-webkit-text-stroke:3px var(--ink);paint-order:stroke;pointer-events:none;animation:qpop 1s var(--spring) forwards}
@keyframes qpop{0%{transform:scale(0) rotate(-30deg);opacity:0}30%{transform:scale(1.2) rotate(10deg);opacity:1}100%{transform:translateY(-50px) scale(.9) rotate(-6deg);opacity:0}}
.hero-cta{position:relative;z-index:6;display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:-36px}
.hero-cta .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.disc-tag{position:absolute;z-index:6;right:8px;top:40%;transform:rotate(90deg);transform-origin:100% 0;font-size:10px;opacity:.75}

/* ---------- stickers ---------- */
.stickers{position:absolute;inset:0;z-index:5;pointer-events:none}
.sticker{--r:0deg;--s:1;position:absolute;appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;width:var(--w,110px);pointer-events:auto;cursor:grab;transform:rotate(var(--r)) scale(var(--s));
  filter:drop-shadow(0 5px 0 rgba(8,12,50,.4));transition:transform .35s var(--spring),filter .35s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sticker .sk{position:relative;display:block;transition:clip-path .35s var(--spring);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 100%)}
.sticker .sk img{width:100%;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}
.sticker .peel{position:absolute;right:0;bottom:0;width:0;height:0;background:linear-gradient(135deg,#fff 0%,#e9e4dc 45%,#bdb6aa 50%,transparent 50.5%);
  transition:width .35s var(--spring),height .35s var(--spring);border-radius:0 0 0 0;filter:drop-shadow(-2px -2px 2px rgba(0,0,0,.25))}
.sticker:hover,.sticker.lift{--s:1.07;filter:drop-shadow(0 14px 6px rgba(8,12,50,.45));z-index:5}
.sticker:hover .sk,.sticker.lift .sk{clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%)}
.sticker:hover .peel,.sticker.lift .peel{width:28%;height:28%}
.sticker.slap{animation:slap .62s var(--snap) both}
@keyframes slap{0%{transform:rotate(calc(var(--r) + 35deg)) scale(2.6);opacity:0;filter:drop-shadow(0 40px 16px rgba(8,12,50,.3))}
  55%{transform:rotate(var(--r)) scale(.9);opacity:1}75%{transform:rotate(var(--r)) scale(1.05)}100%{transform:rotate(var(--r)) scale(1)}}
.sticker.peeloff{animation:peeloff .55s cubic-bezier(.5,0,.75,0) forwards;pointer-events:none}
@keyframes peeloff{0%{transform:rotate(var(--r)) scale(1.07)}30%{transform:rotate(calc(var(--r) - 12deg)) scale(1.12) translateY(-12px)}100%{transform:rotate(calc(var(--r) - 70deg)) scale(.4) translate(60px,-260px);opacity:0}}

/* ---------- Hype button ---------- */
.hype-btn{position:relative;appearance:none;border:0;background:none;padding:0;cursor:pointer;width:118px;height:118px;border-radius:50%;-webkit-tap-highlight-color:transparent}
.hype-btn img{width:100%;height:100%;border-radius:50%;border:6px solid #fff;box-shadow:0 6px 0 rgba(8,12,50,.5);transition:transform .3s var(--spring)}
.hype-btn:hover img{transform:rotate(-8deg) scale(1.06)}
.hype-btn.boop img{animation:boop .45s var(--snap)}
@keyframes boop{30%{transform:scale(.8,.86) rotate(6deg)}65%{transform:scale(1.14) rotate(-6deg)}100%{transform:none}}
.hype-btn .hype-label{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%) rotate(-5deg);white-space:nowrap}
.hype-count{position:absolute;right:-8px;top:-6px;background:var(--tomato);color:#fff;font-family:var(--display);font-size:16px;min-width:32px;height:32px;padding:0 6px;display:grid;place-items:center;border-radius:999px;border:3px solid #fff;transform:scale(0);transition:transform .3s var(--spring)}
.hype-count.on{transform:scale(1)}
.fx{position:fixed;inset:0;pointer-events:none;z-index:80;width:100vw;height:100vh}
.paw-trail{position:fixed;z-index:70;width:18px;height:18px;pointer-events:none;opacity:.9;animation:trail 1s ease-out forwards}
@keyframes trail{to{opacity:0;transform:scale(.4) rotate(var(--r,0deg))}}

/* ---------- marquee ---------- */
.mq-box{overflow:hidden;padding:18px 0;margin:4px 0}
.marquee{position:relative;z-index:5;width:110%;margin-left:-5%!important;background:var(--butter-hi);color:var(--ink);border-block:4px solid var(--ink);transform:rotate(-2.2deg);margin:0;overflow:hidden;white-space:nowrap}
.marquee.alt{background:var(--tomato);color:#fff;transform:rotate(1.8deg)}
.marquee-track{display:inline-flex;gap:28px;padding:8px 0;font-family:var(--display);font-size:26px;text-transform:uppercase;animation:marq 22s linear infinite}
.marquee.alt .marquee-track{animation-direction:reverse;animation-duration:26s}
.marquee-track span::after{content:"✸";margin-left:28px;color:var(--tomato)}
.marquee.alt .marquee-track span::after{color:var(--butter-hi)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- sections & cards ---------- */
section{position:relative}
.sec{padding:40px 0}
.sec-head{text-align:center;margin-bottom:26px}
.sec-head .torn-wrap{display:inline-block;max-width:600px}
.sec-head .torn{padding:16px 26px}
.sec-head h2{margin:0}
.grid{display:grid;gap:22px}
@media (min-width:700px){.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}}
.dept-card{position:relative;display:block;text-decoration:none;color:var(--ink);transition:transform .4s var(--spring)}
.dept-card:nth-child(odd){transform:rotate(-1.6deg)} .dept-card:nth-child(even){transform:rotate(1.4deg)}
.dept-card:hover{transform:rotate(0) translateY(-6px) scale(1.02)}
.dept-card .torn{display:flex;gap:14px;align-items:center;min-height:132px;padding:20px 18px}
.dept-card .ph{width:96px;flex:none;aspect-ratio:4/5;border:4px solid #fff;box-shadow:0 4px 0 rgba(0,0,0,.25);transform:rotate(3deg);overflow:hidden;background:var(--cream)}
.dept-card .ph img{width:100%;height:100%;object-fit:cover}
.dept-card h3{margin:2px 0 4px}
.dept-card p{margin:0;font-size:15px;line-height:1.35}
.dept-card .badge{position:absolute;top:-16px;left:-8px;width:50px;height:50px;font-size:26px;z-index:3}
.dept-card .go{font-family:var(--display);color:var(--tomato);font-size:18px;display:inline-block;margin-top:6px;transition:transform .3s var(--spring)}
.dept-card:hover .go{transform:translateX(8px)}

/* pet / wag section */
.pet{display:grid;gap:18px;align-items:center}
@media (min-width:800px){.pet{grid-template-columns:1fr 1fr}}
.wag-stage{position:relative;width:min(330px,80vw);aspect-ratio:380/520;margin:0 auto;cursor:pointer;touch-action:manipulation}
.wag-stage canvas,.wag-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.wag-stage::before{content:"";position:absolute;inset:auto 8% 2% 8%;height:10%;background:radial-gradient(closest-side,rgba(5,8,40,.55),transparent)}
.heart{position:absolute;pointer-events:none;width:34px;height:34px;animation:heart 1.2s ease-out forwards;z-index:4}
@keyframes heart{0%{transform:translateY(0) scale(.2);opacity:0}20%{opacity:1;transform:translateY(-10px) scale(1.1)}100%{transform:translate(var(--dx,0),-150px) scale(.8) rotate(var(--rot,0));opacity:0}}
.meter{background:var(--deep);border:4px solid var(--ink);border-radius:999px;height:28px;overflow:hidden;box-shadow:0 4px 0 var(--ink)}
.meter i{display:block;height:100%;width:var(--v,10%);background:repeating-linear-gradient(-45deg,var(--butter-hi) 0 14px,var(--coat) 14px 28px);transition:width .3s var(--spring);animation:stripes 1s linear infinite}
@keyframes stripes{to{background-position:40px 0}}

/* dog club */
.club .torn{padding:26px 22px 24px;text-align:center}
.club form{display:flex;flex-direction:column;gap:10px;max-width:440px;margin:14px auto 6px}
.club input{font:inherit;font-size:18px;padding:13px 16px;border-radius:14px;border:4px solid var(--ink);background:#eee8de;color:#6a6156}
.stamp{display:inline-block;font-family:var(--display);font-size:22px;color:var(--tomato);border:4px solid var(--tomato);padding:4px 12px;border-radius:10px;transform:rotate(-8deg);text-transform:uppercase;letter-spacing:.04em;
  animation:stamp 4s var(--snap) infinite}
@keyframes stamp{0%,70%,100%{transform:rotate(-8deg) scale(1)}76%{transform:rotate(-8deg) scale(1.35)}82%{transform:rotate(-8deg) scale(.95)}}

/* ---------- RANK IT ---------- */
.page-hero{padding:16px 0 10px;text-align:center}
.page-hero .torn-wrap{display:inline-block;max-width:720px}
.page-hero .torn{padding:22px 24px}
.page-hero h1{font-size:clamp(36px,9.5vw,70px);margin:6px 0 0}
.page-hero .host-mini{width:120px;margin:-12px auto 0;position:relative;z-index:3;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(2deg)}}
.lede{max-width:680px;margin:18px auto 0;font-size:18px;background:rgba(16,28,110,.55);border-radius:16px;padding:14px 16px;border:2px dashed rgba(255,255,255,.35)}
.rank-list{list-style:none;padding:0;margin:30px auto 0;display:grid;gap:34px;max-width:760px}
.rank-card{position:relative}
.rank-card .torn{display:grid;grid-template-columns:116px 1fr;gap:14px;align-items:center;padding:24px 18px 22px}
@media (min-width:640px){.rank-card .torn{grid-template-columns:170px 1fr;padding:28px 28px}}
.rank-card:nth-child(odd) .torn-wrap{transform:rotate(-1.4deg)} .rank-card:nth-child(even) .torn-wrap{transform:rotate(1.2deg)}
.rank-card .badge{position:absolute;z-index:4;left:-6px;top:-18px;width:64px;height:64px;font-size:36px}
.rank-card.top .badge{width:76px;height:76px;font-size:44px;--bg:var(--butter-hi);color:var(--ink)}
.rank-card .art{position:relative;filter:drop-shadow(0 5px 0 rgba(8,12,50,.35));transition:transform .4s var(--spring)}
.rank-card .art:hover{transform:rotate(-6deg) scale(1.08)}
.rank-card h2{font-size:clamp(28px,7vw,42px);margin:0 0 4px}
.rank-card .line{margin:0 0 10px;font-size:16px}
.pick{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;border-top:3px dashed rgba(23,17,15,.25);padding-top:10px}
.pick .pick-name{font-weight:600;font-size:15px;line-height:1.25;flex:1 1 140px}
.pick .pick-name small{display:block;font-family:var(--mono);font-size:11px;color:var(--coat-dk);letter-spacing:.04em}
.pick .btn{font-size:17px;padding:8px 16px;box-shadow:0 4px 0 var(--ink)}
.pick .btn.soon{font-size:15px;box-shadow:0 3px 0 #5b5249}
.icon-sticker{display:block;aspect-ratio:1;background:var(--paper);border-radius:50%;border:7px solid #fff;padding:12%;box-shadow:inset 0 0 0 3px rgba(23,17,15,.08)}
.icon-sticker svg{width:100%;height:100%;overflow:visible}
.reveal{opacity:0;transform:translateY(40px) rotate(-3deg) scale(.96)}
.reveal.in{opacity:1;transform:none;transition:opacity .5s,transform .7s var(--spring)}
.src-box{max-width:760px;margin:36px auto 0;background:var(--deep);border:3px solid rgba(255,255,255,.25);border-radius:18px;padding:16px 18px;font-size:15px}
.src-box h3{font-size:22px;color:var(--butter-hi)}
.src-box li{margin-bottom:6px}
.disclose-strip{max-width:760px;margin:14px auto 0;font-size:13px;opacity:.9;text-align:center}
.tilt-poll{display:flex;gap:14px;justify-content:center;margin-top:14px}
.tilt-poll .btn{min-width:130px}
.tilt-poll .btn.picked{animation:boop .5s var(--snap);--c:var(--butter-hi)}
.poll-msg{text-align:center;font-family:var(--marker);font-size:20px;min-height:1.6em;margin-top:8px}

/* rank index */
.ep-card .torn{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;padding:22px 18px}

/* ---------- quiz ---------- */
.quiz{max-width:640px;margin:0 auto}
.quiz-card .torn{padding:24px 18px 22px;min-height:420px}
.progress{display:flex;gap:6px;justify-content:center;margin-bottom:14px}
.progress i{width:28px;height:10px;border-radius:999px;background:rgba(23,17,15,.15);transition:background .3s,transform .3s var(--spring)}
.progress i.done{background:var(--tomato)} .progress i.now{background:var(--cobalt);transform:scaleX(1.3)}
.q-title{font-size:clamp(28px,7.4vw,40px);text-align:center;color:var(--ink)}
.answers{display:grid;gap:12px;margin-top:16px}
.answer{appearance:none;text-align:left;font:inherit;font-size:18px;font-weight:600;color:var(--ink);background:#fff;border:4px solid var(--ink);border-radius:18px;padding:14px 16px;box-shadow:0 5px 0 var(--ink);cursor:pointer;
  transition:transform .25s var(--spring),background .2s;display:flex;align-items:center;gap:12px}
.answer .k{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--butter-hi);border:3px solid var(--ink);font-family:var(--display);font-size:18px}
.answer:hover{transform:translateY(-3px) rotate(-1deg);background:var(--cream)}
.answer.chosen{background:var(--butter-hi);transform:scale(1.04) rotate(1deg)}
.q-enter{animation:q-in .5s var(--spring)}
@keyframes q-in{0%{transform:translateX(60px) rotate(4deg);opacity:0}100%{transform:none;opacity:1}}
.q-leave{animation:q-out .28s ease-in forwards}
@keyframes q-out{to{transform:translateX(-80px) rotate(-6deg);opacity:0}}
.quiz-host{width:110px;margin:-18px auto -6px;position:relative;z-index:3}
.result{text-align:center;color:var(--ink)}
.result .stamp{margin:4px 0 10px}
.result-card{perspective:1000px}
.result-inner{animation:flip-in 1s var(--spring) both}
@keyframes flip-in{0%{transform:rotateY(-100deg) scale(.6);opacity:0}100%{transform:none;opacity:1}}
.result .r-photo{width:min(250px,70%);margin:6px auto 8px;border:8px solid #fff;box-shadow:0 6px 0 rgba(0,0,0,.25);transform:rotate(-3deg);aspect-ratio:4/5;overflow:hidden;animation:wiggle 3s ease-in-out infinite 1s}
.result .r-photo img{width:100%;height:100%;object-fit:cover}
@keyframes wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(2deg)}}
.result h2{font-size:clamp(34px,9vw,54px);margin:4px 0}
.result .r-tag{display:inline-block;margin-bottom:10px}
.gear{margin-top:16px;text-align:left}
.gear h3{text-align:center}
.gear-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.gear-item{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:10px;box-shadow:0 4px 0 var(--ink)}
.gear-item .icon-sticker{border-width:4px;padding:10%}
.gear-item .pick{border:0;padding:0}
.result-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.fine{font-size:13px;opacity:.8;margin-top:12px}

/* ---------- prose pages ---------- */
.prose{max-width:760px;margin:10px auto 0}
.prose .torn{padding:28px 22px 30px;font-size:17px}
.prose h2{font-size:30px;margin-top:1em;color:var(--cobalt)}
.prose h1{color:var(--ink)}
.prose a{color:var(--cobalt);font-weight:600}
.prose table{width:100%;border-collapse:collapse;font-size:13.5px}
.prose th,.prose td{border-bottom:2px dashed rgba(23,17,15,.2);padding:8px 6px;text-align:left;vertical-align:top}
.prose .table-wrap{overflow-x:auto}
.prose .callout{background:var(--cream);border:3px solid var(--ink);border-radius:14px;padding:12px 14px;margin:14px 0}
.prose .callout.pending{background:#fff7d6;border-style:dashed}

/* ---------- footer ---------- */
.site-foot{margin-top:50px;padding:34px 0 40px;background:var(--deep);border-top:5px solid var(--ink);position:relative}
.site-foot::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px;background:var(--deep);
  -webkit-mask:url(/assets/img/edge.svg) bottom/60px 22px repeat-x;mask:url(/assets/img/edge.svg) bottom/60px 22px repeat-x}
.foot-grid{display:grid;gap:22px}
@media (min-width:800px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr}}
.site-foot a{color:#fff;text-decoration:none;opacity:.9}
.site-foot a:hover{color:var(--butter-hi);text-decoration:underline}
.site-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.site-foot .small{font-size:13px;opacity:.85}
.foot-brand{display:flex;gap:12px;align-items:center}
.foot-brand img{width:64px;height:64px;border-radius:50%;border:4px solid #fff}
.foot-brand .host-peek{width:76px}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .marquee-track{animation:none}
  .reveal{opacity:1;transform:none}
  .burst,.stage-glow{animation:none}
}
html.rm .reveal{opacity:1;transform:none}

/* ---------- desktop hero ---------- */
.logo-word{--torn-mask:url(/assets/img/torn-top.svg) top/100% 4px no-repeat,url(/assets/img/torn-bot.svg) bottom/100% 4px no-repeat,url(/assets/img/torn-left.svg) left/4px 100% no-repeat,url(/assets/img/torn-right.svg) right/4px 100% no-repeat,linear-gradient(#000,#000) center/calc(100% - 7px) calc(100% - 7px) no-repeat}
@media (min-width:900px){
  .hero{min-height:auto;padding-bottom:60px}
  .hero > .wrap{display:grid;grid-template-columns:1.05fr .95fr;grid-template-rows:auto auto;column-gap:30px;position:relative}
  .hero-title{grid-column:1;grid-row:1;margin:56px 0 0;text-align:left;max-width:560px;align-self:end}
  .hero-title h1{font-size:72px}
  .hero-cta{grid-column:1;grid-row:2;margin-top:28px;align-items:flex-start;align-self:start;flex-direction:row;gap:28px}
  .stage{grid-column:2;grid-row:1/3;margin:10px auto 0;width:min(440px,100%)}
  .sticker{width:calc(var(--w) * 1.3)}
  .sticker:nth-child(1){left:1%!important;top:74%!important}
  .sticker:nth-child(2){left:93%!important;top:42%!important}
  .sticker:nth-child(3){left:18%!important;top:1%!important}
  .sticker:nth-child(4){left:90%!important;top:76%!important}
  .sticker:nth-child(5){left:89%!important;top:4%!important}
  .sticker:nth-child(6){left:47%!important;top:2%!important}
  .dept-card .ph{width:120px}
}