/* =========================================================
   CHIHUAHOOD — Small Dog. Big Hood Energy.
   Palette: acid lime / ink / cream / tan / olive. No pink.
   ========================================================= */
@font-face{font-family:"Hood";src:url("../assets/fonts/rubik-var.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Tag";src:url("../assets/fonts/permanent-marker.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --lime:#c6ff00;--ink:#101211;--ink-2:#1a1d18;--cream:#f5eedc;--tan:#dfa46b;--olive:#25301b;--white:#fffdf6;
  --pad:clamp(16px,3.2vw,48px);
  --radius:14px;
  --shadow:5px 5px 0 var(--ink);
  --ease:cubic-bezier(.2,.9,.2,1.15);
  --header:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--lime);color:var(--ink);font-family:"Hood",system-ui,sans-serif;font-weight:500;font-size:clamp(16px,1.05vw,18px);line-height:1.45;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,p{margin:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--lime);padding:10px 16px;border-radius:10px;font-weight:800;text-decoration:none}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--lime)}
body.locked{overflow:hidden}
main,.footer{overflow-x:clip}

/* ---------- shared type ---------- */
.mega{font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.02em;font-size:clamp(48px,8.4vw,150px)}
.mega--ink{color:var(--ink)}
.big{font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:-.015em;font-size:clamp(34px,4.6vw,78px)}
.hl{color:var(--lime)}
.chapter{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:22px}
.chapter::before{content:"";width:14px;height:14px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(198,255,0,.18)}
.chapter--ink{color:var(--ink)}
.chapter--ink::before{box-shadow:none}
.lede{font-weight:600;font-size:clamp(18px,1.5vw,24px);line-height:1.3;max-width:34ch}
.fineprint{font-size:13px;line-height:1.5;opacity:.75;max-width:70ch}
.fineprint--ink{color:var(--ink);opacity:.8}

/* ---------- buttons ---------- */
.sticker-btn{--bg:var(--cream);--fg:var(--ink);display:inline-flex;align-items:center;gap:10px;padding:13px 20px 12px;background:var(--bg);color:var(--fg);border:3px solid var(--ink);border-radius:12px;box-shadow:var(--shadow);font-weight:900;font-size:15px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;line-height:1;white-space:nowrap;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.sticker-btn:hover{transform:translate(-3px,-3px) rotate(-1.5deg);box-shadow:8px 8px 0 var(--ink)}
.sticker-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.sticker-btn--ink{--bg:var(--ink);--fg:var(--lime)}
.sticker-btn--ink:hover{box-shadow:8px 8px 0 var(--cream)}
.sticker-btn--lime{--bg:var(--lime);--fg:var(--ink)}
.sticker-btn--cream{--bg:var(--cream)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn-row--center{justify-content:center}
.round-btn{width:48px;height:48px;border-radius:50%;border:3px solid var(--ink);background:var(--lime);box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center;transition:transform .18s var(--ease)}
.round-btn:hover{transform:translate(-2px,-2px) rotate(-8deg)}
.link-btn{background:none;border:0;padding:0;font-weight:800;text-decoration:underline;text-underline-offset:3px;color:var(--lime)}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:150;background:var(--ink);color:var(--lime);display:grid;place-items:center;overflow:hidden}
.loader-tiles{position:absolute;inset:-10%;display:grid;grid-template-columns:repeat(2,1fr);align-content:space-around;justify-items:center;font-weight:900;font-size:clamp(90px,19vw,330px);line-height:.8;color:#191b18;letter-spacing:-.03em;transform:rotate(-6deg)}
.loader-tiles span{animation:tileblink 1.6s steps(1) infinite}
.loader-tiles span:nth-child(2n){animation-delay:.4s}
.loader-tiles span:nth-child(3n){animation-delay:.8s}
@keyframes tileblink{50%{color:#22261d}}
.loader-center{position:relative;display:grid;justify-items:center;gap:6px;text-align:center}
.loader-icon{width:clamp(110px,14vw,170px);animation:loaderbob .6s ease-in-out infinite alternate}
@keyframes loaderbob{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-14px) rotate(4deg)}}
.loader-count{font-weight:900;font-size:clamp(70px,11vw,160px);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.loader-count small{font-size:.4em;vertical-align:top}
.loader-line{font-weight:800;letter-spacing:.12em;font-size:14px;color:var(--cream)}
.loader-skip{position:absolute;right:var(--pad);bottom:var(--pad);background:none;border:2px solid var(--lime);color:var(--lime);border-radius:999px;padding:10px 16px;font-weight:800;letter-spacing:.08em;font-size:13px}
.loader.is-done{pointer-events:none}
html:not(.js) .loader{display:none}

/* ---------- header ---------- */
.site-header{position:fixed;left:0;right:0;top:0;z-index:100;height:var(--header);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);pointer-events:none;transition:transform .45s var(--ease)}
.site-header>*{pointer-events:auto}
.site-header.is-hidden{transform:translateY(-110%)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:46px;height:46px;filter:drop-shadow(2px 2px 0 var(--ink));transition:transform .3s var(--ease)}
.brand:hover img{transform:rotate(-12deg) scale(1.08)}
.brand-word{font-weight:900;font-size:22px;letter-spacing:-.01em;background:var(--ink);color:var(--lime);padding:6px 10px 5px;border-radius:8px;line-height:1}
.header-actions{display:flex;align-items:center;gap:12px}
.header-paper{padding:11px 16px 10px;font-size:14px}
.menu-btn{flex-direction:column;gap:4px;display:flex;align-items:center;justify-content:center}
.menu-btn i{display:block;width:20px;height:3px;border-radius:3px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.menu-btn[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.music-btn{background:var(--cream);position:relative}
.music-btn svg{width:22px;height:22px;fill:var(--ink);stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.music-btn .stem{fill:none}
.music-btn .eq{display:none;align-items:flex-end;gap:2px;height:18px}
.music-btn .eq i{display:block;width:4px;height:100%;background:var(--ink);border-radius:2px;transform-origin:bottom;animation:eqbar .9s ease-in-out infinite alternate}
.music-btn .eq i:nth-child(2){animation-duration:.62s;animation-delay:-.3s}
.music-btn .eq i:nth-child(3){animation-duration:.78s;animation-delay:-.5s}
.music-btn .eq i:nth-child(4){animation-duration:.55s;animation-delay:-.1s}
.music-btn.is-on{background:var(--lime)}
.music-btn.is-on svg{display:none}
.music-btn.is-on .eq{display:flex}
.music-btn.is-loading .eq i{animation:eqload .8s ease-in-out infinite;transform:scaleY(.25)}
.music-btn.is-loading .eq i:nth-child(2){animation-delay:.1s}.music-btn.is-loading .eq i:nth-child(3){animation-delay:.2s}.music-btn.is-loading .eq i:nth-child(4){animation-delay:.3s}
@keyframes eqbar{0%{transform:scaleY(.25)}100%{transform:scaleY(1)}}
@keyframes eqload{0%,100%{opacity:.35}50%{opacity:1}}
.sound-tip{position:fixed;z-index:95;right:var(--pad);top:calc(var(--header) + 56px);background:var(--ink);color:var(--lime);font-weight:800;font-size:13px;letter-spacing:.04em;padding:10px 14px;border-radius:10px;box-shadow:4px 4px 0 var(--cream);opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s var(--ease);pointer-events:none}
.sound-tip.is-on{opacity:1;transform:none}

/* ---------- menu ---------- */
.menu{position:fixed;inset:0;z-index:90;background:var(--lime);display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr auto;padding:calc(var(--header) + 30px) var(--pad) var(--pad);clip-path:circle(0% at calc(100% - 50px) 38px);transition:clip-path .7s cubic-bezier(.7,0,.2,1);overflow:hidden}
.menu-ears{display:none}
.menu-links{grid-column:1;grid-row:1}
.menu.is-open{clip-path:circle(150% at calc(100% - 50px) 38px)}
.menu-links{display:flex;flex-direction:column;justify-content:center;gap:0;position:relative;z-index:2}
.menu-links a{display:flex;align-items:baseline;gap:16px;text-decoration:none;font-weight:900;font-size:clamp(34px,min(7.4vw,8.6svh),112px);line-height:.95;letter-spacing:-.02em;transform:translateY(40px);opacity:0;transition:transform .5s var(--ease),opacity .4s,color .2s}
.menu-links small{font-size:14px;letter-spacing:.1em;font-weight:800}
.menu-links a span{position:relative}
.menu-links a:hover span{color:var(--cream);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.menu.is-open .menu-links a{transform:none;opacity:1}
.menu.is-open .menu-links a:nth-child(2){transition-delay:.05s}.menu.is-open .menu-links a:nth-child(3){transition-delay:.1s}.menu.is-open .menu-links a:nth-child(4){transition-delay:.15s}.menu.is-open .menu-links a:nth-child(5){transition-delay:.2s}.menu.is-open .menu-links a:nth-child(6){transition-delay:.25s}
.menu-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;position:relative;z-index:2}
.menu-foot p{font-weight:900;font-size:clamp(16px,1.6vw,22px);line-height:1.05}
.menu-dog{position:absolute;right:-4vw;bottom:-8vh;width:min(46vw,620px,80svh);transform:translateY(40%) rotate(8deg);transition:transform .8s var(--ease) .15s;z-index:1}
.menu.is-open .menu-dog{transform:translateY(0) rotate(-4deg)}

/* ---------- tickers & bands ---------- */
.ticker{overflow:hidden;border-block:3px solid var(--ink);white-space:nowrap}
.ticker--ink{background:var(--ink);color:var(--lime)}
.ticker-track{display:inline-flex;gap:18px;align-items:center;padding:9px 0 8px;font-weight:900;font-size:15px;letter-spacing:.06em;animation:marquee 32s linear infinite}
.ticker-track b{color:var(--cream)}
@keyframes marquee{to{transform:translateX(-50%)}}
.band{background:var(--ink);overflow:hidden;padding:clamp(16px,2.4vw,34px) 0;transform:rotate(-2deg) scale(1.04);margin:-1.6vw 0;position:relative;z-index:5;border-block:4px solid var(--lime)}
.band-track{display:inline-flex;align-items:center;gap:clamp(20px,3vw,48px);white-space:nowrap;font-weight:900;font-size:clamp(54px,9vw,150px);line-height:.9;color:var(--cream);letter-spacing:-.02em;will-change:transform}
.band-track img{width:clamp(56px,7vw,110px);height:auto}
.band-track .outline{color:transparent;-webkit-text-stroke:2px var(--lime)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;padding-top:var(--header);display:flex;flex-direction:column;background:var(--lime);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(16,18,17,.13) 1.2px,transparent 1.4px);background-size:14px 14px;mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent);pointer-events:none}
.hero .ticker{position:relative;z-index:3}
.hero-stage{position:relative;flex:1;display:flex;align-items:center;padding:clamp(10px,2vw,24px) var(--pad) 0}
.wordmark{--wm:19.2vw;position:relative;z-index:2;font-weight:900;font-size:var(--wm);line-height:.8;letter-spacing:-.035em;text-transform:uppercase;width:100%;user-select:none}
.wm-row{display:flex;align-items:flex-end;white-space:nowrap;width:max-content}
.wm-l{display:inline-block;transform-origin:50% 100%}
.wm-bottom{margin-top:.04em}
.wm-eyes{position:relative;display:inline-flex;gap:.035em;margin:0 .02em;align-items:flex-end;padding-bottom:.005em}
.eye{position:relative;width:.72em;height:.72em;border-radius:50%;background:var(--cream);border:.15em solid var(--ink);display:grid;place-items:center;overflow:visible;transition:height .12s}
.eye .pupil{position:relative;width:.26em;height:.26em;border-radius:50%;background:var(--ink);will-change:transform}
.eye .pupil i{position:absolute;width:30%;height:30%;left:20%;top:16%;border-radius:50%;background:var(--lime)}
.eye .brow{position:absolute;top:-.2em;left:-.02em;width:.66em;height:.16em;background:var(--ink);border-radius:.05em;transform:rotate(16deg);transform-origin:50% 50%;z-index:2;transition:transform .25s var(--ease)}
.eye+.eye .brow{transform:rotate(-16deg)}
.wordmark:hover .eye .brow,.wordmark.is-surprised .eye .brow{transform:translateY(-.08em) rotate(4deg)}
.wordmark:hover .eye+.eye .brow,.wordmark.is-surprised .eye+.eye .brow{transform:translateY(-.08em) rotate(-4deg)}
.wordmark.is-blink .eye{animation:blink .22s}
@keyframes blink{50%{transform:scaleY(.1)}}
.ear{position:absolute;bottom:.55em;width:.62em;height:.78em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130'%3E%3Cpath d='M18 126C8 90 4 40 12 6c30 10 64 44 82 92-24 2-54 12-76 28z' fill='%23dfa46b' stroke='%23101211' stroke-width='7' stroke-linejoin='round'/%3E%3Cpath d='M28 104c-6-26-8-58-6-82 20 12 42 38 54 70-16 2-34 6-48 12z' fill='%23f5eedc'/%3E%3C/svg%3E") no-repeat center/contain;z-index:-1;transform-origin:50% 100%;transition:transform .3s var(--ease)}
.ear--l{left:-.12em;transform:rotate(-24deg)}
.ear--r{right:-.12em;transform:scaleX(-1) rotate(-24deg)}
.wordmark:hover .ear--l{transform:rotate(-34deg)}
.wordmark:hover .ear--r{transform:scaleX(-1) rotate(-34deg)}
.wordmark.is-perk .ear--l{animation:perkL .5s var(--ease)}
.wordmark.is-perk .ear--r{animation:perkR .5s var(--ease)}
@keyframes perkL{40%{transform:rotate(-6deg) translateY(-.05em)}}
@keyframes perkR{40%{transform:scaleX(-1) rotate(-6deg) translateY(-.05em)}}

.hero-dog{position:absolute;z-index:3;right:calc(var(--pad) - 1.4vw);bottom:-3%;width:min(30vw,480px,calc(100svh - var(--header) - 180px));aspect-ratio:1}
.hero-dog-btn{all:unset;display:block;width:100%;height:100%;cursor:pointer;border-radius:50%}
.hero-dog-btn:focus-visible{outline:3px dashed var(--ink);outline-offset:-20px}
.hero-dog img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(8px 10px 0 rgba(16,18,17,.9));transform-origin:50% 90%;animation:idle 2.6s ease-in-out infinite;will-change:transform}
@keyframes idle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-1.5deg)}}
.hero-dog.is-barking img{animation:barkshake .5s ease-out}
@keyframes barkshake{0%{transform:scale(1)}15%{transform:scale(1.08,.92) rotate(-3deg)}30%{transform:scale(.96,1.06) rotate(3deg)}45%{transform:translateX(-6px) rotate(-2deg)}60%{transform:translateX(6px)}100%{transform:none}}
.bubble{position:absolute;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:22px;padding:12px 16px 11px;font-weight:900;font-size:clamp(15px,1.4vw,22px);line-height:1.02;text-transform:uppercase;box-shadow:var(--shadow);white-space:nowrap}
.bubble::after{content:"";position:absolute;width:22px;height:22px;background:inherit;border:inherit;border-width:0 3px 3px 0;bottom:-13px;transform:rotate(45deg)}
.bubble--hero{left:-20%;top:17%;transform-origin:100% 80%;animation:bubblebob 3s ease-in-out infinite}
.bubble--hero::after{right:-13px;bottom:16px;border-width:3px 3px 0 0;transform:rotate(45deg) skew(-8deg,-8deg)}
@keyframes bubblebob{50%{transform:translateY(-6px) rotate(-2deg)}}
.bubble.is-pop{animation:pop .45s var(--ease)}
@keyframes pop{0%{transform:scale(.4) rotate(-10deg);opacity:0}100%{transform:none;opacity:1}}
.hint-sticker{position:absolute;left:32%;top:-3%;background:var(--ink);color:var(--lime);font-family:"Tag",cursive;font-size:clamp(13px,1.1vw,17px);line-height:1.05;padding:8px 10px;border-radius:8px;transform:rotate(9deg);box-shadow:3px 3px 0 var(--cream)}
.woof-burst{position:absolute;left:-10%;top:34%;width:52%;aspect-ratio:1;display:grid;place-items:center;opacity:0;transform:scale(.2) rotate(-20deg);pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath d='M200 8l30 104 92-58-36 100 108 6-96 50 76 78-104-24 6 108-76-80-76 80 6-108-104 24 76-78-96-50 108-6-36-100 92 58z' fill='%23f5eedc' stroke='%23101211' stroke-width='10' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
.woof-burst span{font-weight:900;font-size:clamp(20px,2.4vw,40px);transform:rotate(-8deg)}
.hero-dog.is-barking .woof-burst{animation:burst .7s var(--ease)}
@keyframes burst{0%{opacity:0;transform:scale(.2) rotate(-20deg)}30%{opacity:1;transform:scale(1.1) rotate(-6deg)}75%{opacity:1;transform:scale(1) rotate(-4deg)}100%{opacity:0;transform:scale(1.25) rotate(0)}}

.stickers{position:absolute;inset:0;z-index:4;pointer-events:none}
.sticker{display:inline-block;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:10px;padding:8px 13px 7px;font-weight:900;font-size:clamp(14px,1.2vw,19px);letter-spacing:.03em;box-shadow:4px 4px 0 var(--ink);line-height:1;user-select:none;touch-action:none}
.stickers .sticker{position:absolute;pointer-events:auto;cursor:grab}
.sticker.is-dragging{cursor:grabbing;box-shadow:10px 12px 0 rgba(16,18,17,.85);z-index:10}
.s-sus{left:43%;top:6%;transform:rotate(-8deg);background:var(--tan)}
.s-based{left:4%;bottom:6%;transform:rotate(6deg);background:var(--ink);color:var(--lime)}
.s-lol{left:58%;top:58%;transform:rotate(10deg)}
.s-receipts{left:33%;bottom:2%;transform:rotate(-4deg);font-family:"Tag",cursive;font-weight:400}
.s-bone{left:86%;top:8%;width:76px;padding:6px 8px;transform:rotate(-18deg)}
.s-bone svg{fill:var(--cream);stroke:var(--ink);stroke-width:5}
.s-paw{left:24%;top:3%;width:58px;padding:6px;border-radius:50%;background:var(--ink);transform:rotate(-14deg)}
.s-paw svg{fill:var(--lime)}

.hero-foot{position:relative;z-index:5;display:grid;grid-template-columns:1.1fr 1fr auto;gap:clamp(16px,3vw,48px);align-items:end;padding:clamp(14px,1.8vw,26px) var(--pad) calc(clamp(18px,2.4vw,34px) + 3vw)}
.hero-claim{display:flex;flex-direction:column;font-weight:900;font-size:clamp(28px,3.4vw,58px);line-height:.88;letter-spacing:-.02em;text-transform:uppercase}
.hero-claim span:last-child{background:var(--ink);color:var(--lime);align-self:flex-start;padding:.06em .14em .02em;margin-top:.08em;transform:rotate(-1.5deg)}
.hero-pitch{display:grid;gap:16px}
.hero-pitch p{font-weight:700;font-size:clamp(17px,1.35vw,22px);line-height:1.2;max-width:28ch}
.scroll-cue{display:flex;align-items:center;gap:10px;font-weight:900;font-size:12px;letter-spacing:.08em;line-height:1.05;text-decoration:none}
.scroll-arrow{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--lime);font-size:18px;animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(6px)}}

/* ---------- LEGEND (pinned) ---------- */
.legend{position:relative;background:var(--ink);color:var(--cream)}
.legend-pin{position:relative;height:100svh;overflow:hidden;display:grid;place-items:center;padding:var(--header) var(--pad) 40px}
.legend-bg{position:absolute;inset:0;background:url("../assets/img/alley-night.webp") center/cover;opacity:.0;transform:scale(1.15)}
.legend .chapter{position:absolute;top:calc(var(--header) + 10px);left:var(--pad)}
.beat{position:absolute;inset:0;display:grid;place-items:center;padding:calc(var(--header) + 40px) var(--pad) 60px;text-align:center}
.beat-1 .mega{font-size:clamp(54px,10vw,180px)}
.beat-2{align-content:center;gap:30px}
.typed{font-weight:900;font-size:clamp(24px,3.3vw,56px);line-height:1.02;text-transform:uppercase;max-width:22ch;margin-inline:auto;letter-spacing:-.01em}
.typed--sm{font-size:clamp(20px,2.2vw,36px);color:var(--lime);max-width:30ch}
.typed .ch{opacity:.12}
.beat-3{place-items:end center;padding-bottom:0}
.hound{position:absolute;bottom:-4%;width:min(36vw,520px,calc(100svh - 215px))}
.hound img{width:100%;filter:drop-shadow(10px 10px 0 rgba(0,0,0,.6))}
.hound--hype{left:-2%}
.hound--rumor{right:-2%}
.hound .bubble{top:-2%;font-size:clamp(18px,2vw,34px)}
.bubble--l{right:-8%}
.bubble--l::after{left:24px}
.bubble--r{left:-6%}
.bubble--r::after{right:24px}
.beat-caption{position:absolute;top:calc(var(--header) + 46px);left:0;right:0;margin:auto;font-weight:900;font-size:clamp(34px,4.6vw,78px);line-height:.88;text-transform:uppercase;color:var(--lime);letter-spacing:-.02em;width:max-content}
.beat-4{--star:min(48vw,640px,78svh);background:var(--lime);color:var(--ink);grid-template-columns:1fr 1fr;text-align:left;gap:4vw;align-items:center}
.impact{position:relative;grid-row:1;grid-column:1;justify-self:center;align-self:center;width:var(--star);aspect-ratio:1}
.impact svg{position:absolute;inset:0;fill:var(--cream);stroke:var(--ink);stroke-width:8;stroke-linejoin:round}
.impact span{position:absolute;right:-14%;top:-1%;z-index:3;font-weight:900;font-size:max(26px,calc(var(--star) * .098));line-height:.9;letter-spacing:-.03em;color:var(--ink);-webkit-text-stroke:6px var(--cream);paint-order:stroke fill;transform:rotate(-10deg)}
.leap{position:relative;z-index:2;grid-row:1;grid-column:1;align-self:center;width:min(44vw,640px,72svh);justify-self:center;filter:drop-shadow(12px 12px 0 var(--ink))}
.beat-4-copy{position:relative;z-index:2;grid-row:1;grid-column:2}
.beat-4-copy .kicker{font-weight:800;letter-spacing:.08em;font-size:clamp(13px,1vw,16px);margin-bottom:18px}
.beat-4 .hl{color:var(--cream);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.legend-progress{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);display:grid;gap:10px;z-index:5}
.legend-progress i{width:10px;height:34px;border-radius:6px;border:2px solid currentColor;opacity:.5;transition:background .3s,opacity .3s}
.legend-progress i.on{background:var(--lime);border-color:var(--lime);opacity:1}
.legend.at-4 .legend-progress i.on{background:var(--ink);border-color:var(--ink)}
.legend.at-4 .legend-progress{color:var(--ink)}
/* no-anim fallback: show beats stacked */
html:not(.anim) .legend-pin{height:auto;display:block}
html:not(.anim) .beat{position:relative;inset:auto;min-height:80svh}
html:not(.anim) .beat-3{min-height:90svh}
html:not(.anim) .legend-progress{display:none}
html:not(.anim) .typed .ch{opacity:1}

/* ---------- STRIP ---------- */
.strip{background:var(--lime);padding:clamp(80px,10vw,150px) 0 clamp(60px,8vw,120px);overflow:hidden;position:relative}
.strip-head{padding:0 var(--pad);margin-bottom:clamp(30px,5vw,70px)}
.strip-rail{transform:rotate(-3deg);background:var(--ink);padding:22px 0;border-block:4px solid var(--ink);box-shadow:0 14px 0 var(--olive)}
.strip-rail::before,.strip-rail::after{content:"";display:block;height:14px;background:repeating-linear-gradient(90deg,var(--cream) 0 16px,transparent 16px 34px);margin:0 0 16px;opacity:.9}
.strip-rail::after{margin:16px 0 0}
.strip-track{display:flex;gap:22px;padding:0 var(--pad);width:max-content;will-change:transform}
.panel{position:relative;margin:0;height:clamp(260px,34vw,480px);aspect-ratio:1;border:5px solid var(--cream);border-radius:6px;overflow:hidden;background:var(--olive);flex:none}
.panel--wide{aspect-ratio:16/10}
.panel img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.panel:hover img{transform:scale(1.06)}
.panel figcaption{position:absolute;left:14px;top:14px;max-width:80%;background:var(--cream);color:var(--ink);border:3px solid var(--ink);padding:8px 12px 7px;font-weight:900;font-size:clamp(14px,1.3vw,20px);line-height:1;text-transform:uppercase;box-shadow:4px 4px 0 var(--ink)}
.panel figcaption b{background:var(--lime);padding:0 .15em}
.panel:nth-child(even) figcaption{top:auto;bottom:14px;left:auto;right:14px;background:var(--lime)}
html:not(.anim) .strip-rail{overflow-x:auto}

/* ---------- MANIFESTO ---------- */
.manifesto{background:var(--cream);padding:clamp(90px,11vw,170px) var(--pad);position:relative;text-align:center}
.ink-reveal{font-weight:900;font-size:clamp(34px,5.6vw,98px);line-height:.92;letter-spacing:-.02em;text-transform:uppercase;max-width:15ch;margin:0 auto}
.ink-reveal .w{color:rgba(16,18,17,.12);transition:color .2s}
.ink-reveal .w.on{color:var(--ink)}
html:not(.anim) .ink-reveal .w{color:var(--ink)}
.principles{list-style:none;padding:0;margin:clamp(40px,6vw,80px) auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 18px;max-width:1000px}
.principles .sticker{font-size:clamp(16px,1.6vw,24px);padding:12px 18px 11px;cursor:grab}
.p1{background:var(--lime)!important;transform:rotate(-3deg)}.p2{transform:rotate(2deg)}.p3{background:var(--tan)!important;transform:rotate(-1deg)}.p4{background:var(--ink)!important;color:var(--lime)!important;transform:rotate(3deg)}.p5{transform:rotate(-2.5deg)}
.pillars{list-style:none;padding:0;margin:clamp(40px,5vw,70px) auto 0;max-width:1100px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;text-align:left}
.pillars li{background:var(--ink);color:var(--cream);border-radius:var(--radius);padding:18px 20px;display:grid;gap:6px}
.pillars li:nth-child(2){background:var(--lime);color:var(--ink);border:3px solid var(--ink)}
.pillars b{font-weight:900;font-size:clamp(20px,1.8vw,28px);line-height:.95}
.pillars li:first-child b,.pillars li:last-child b{color:var(--lime)}
.pillars span{font-weight:600;font-size:15px;line-height:1.3}
.no-gas{margin-top:20px;background:var(--cream);border:3px solid var(--ink);border-radius:12px;padding:12px 14px;box-shadow:4px 4px 0 var(--ink);font-weight:600;max-width:46ch;transform:rotate(-.6deg)}
.no-gas b{font-weight:900;display:block}
.evidence-rep{grid-column:1/-1;margin-top:22px;border-top:2px dashed rgba(245,238,220,.3);padding-top:18px;display:grid;grid-template-columns:auto 1fr;gap:6px 24px;align-items:baseline}
.evidence-rep h4{margin:0;font-weight:900;font-size:clamp(20px,2vw,30px);color:var(--tan)}
.evidence-rep p{font-weight:600;max-width:70ch}
.manifesto-quote{margin-top:clamp(40px,5vw,70px);font-family:"Tag",cursive;font-size:clamp(20px,2.2vw,34px);line-height:1.15;transform:rotate(-2deg)}

/* ---------- ear dividers ---------- */
.ears-divider{height:clamp(34px,4.4vw,64px);background-repeat:repeat-x;background-size:auto 100%;position:relative;z-index:3;margin-top:-1px}
.ears-divider--ink{background-color:var(--cream);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M0 60 14 4 42 40 60 30 78 40 106 4 120 60Z' fill='%23101211'/%3E%3C/svg%3E")}
.ears-divider--lime-on-ink{background-color:var(--lime);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M0 60 14 4 42 40 60 30 78 40 106 4 120 60Z' fill='%23101211'/%3E%3C/svg%3E")}
.ears-divider--lime{background-color:var(--cream);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M0 60 14 4 42 40 60 30 78 40 106 4 120 60Z' fill='%23c6ff00'/%3E%3C/svg%3E")}

/* ---------- HOOD (neighborhoods) ---------- */
.hood{background:var(--ink);color:var(--cream);padding:clamp(70px,9vw,140px) var(--pad);position:relative}
.hood-head{display:grid;grid-template-columns:minmax(0,1fr);align-items:end;gap:24px 40px;margin-bottom:clamp(30px,5vw,70px)}
.hood-head .mega{white-space:nowrap;font-size:clamp(44px,7.4vw,130px)}
.hood-head .chapter{grid-column:1/-1;margin-bottom:0}
.hood-head .lede{color:var(--cream);opacity:.85}
.graffiti-swap{position:relative;display:inline-block;white-space:nowrap}
.graffiti-swap s{text-decoration:none;position:relative;color:var(--cream)}
.graffiti-swap s::after{content:"";position:absolute;left:-4%;right:-4%;top:46%;height:.12em;background:var(--lime);transform:rotate(-4deg) scaleX(var(--strike,1));transform-origin:left;border-radius:.06em}
.graffiti-swap em{position:absolute;left:12%;top:-38%;font-style:normal;font-family:"Tag",cursive;font-weight:400;color:var(--lime);font-size:.86em;transform:rotate(-8deg);letter-spacing:0;text-shadow:3px 3px 0 var(--ink);clip-path:inset(0 calc(100% - var(--spray,100%)) 0 0);white-space:nowrap}
.graffiti-swap--ink s{color:var(--ink)}
.graffiti-swap--ink s::after{background:var(--ink)}
.graffiti-swap--ink em{color:var(--cream);text-shadow:4px 4px 0 var(--ink);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
.hoods{list-style:none;margin:0;padding:0;border-top:2px solid rgba(245,238,220,.25);counter-reset:h}
.hoods button{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:60px 1fr 1fr 40px;align-items:center;gap:20px;padding:clamp(14px,1.6vw,22px) 6px;border-bottom:2px solid rgba(245,238,220,.25);cursor:pointer;position:relative;overflow:hidden;transition:color .25s}
.hoods button::before{content:"";position:absolute;inset:0;background:var(--lime);transform:scaleY(0);transform-origin:bottom;transition:transform .35s var(--ease);z-index:0}
.hoods button>*{position:relative;z-index:1}
.hoods button:hover,.hoods button:focus-visible{color:var(--ink)}
.hoods button:hover::before,.hoods button:focus-visible::before{transform:scaleY(1)}
.hoods small{font-weight:800;font-size:14px;letter-spacing:.1em;opacity:.7}
.hoods strong{font-weight:900;font-size:clamp(30px,4.4vw,72px);line-height:.9;letter-spacing:-.02em;transition:transform .35s var(--ease)}
.hoods button:hover strong{transform:translateX(14px) skewX(-6deg)}
.hoods span{font-weight:600;font-size:clamp(15px,1.15vw,19px);opacity:.85;max-width:36ch}
.hoods i{font-style:normal;font-weight:900;font-size:28px;justify-self:end;transition:transform .3s var(--ease)}
.hoods button:hover i{transform:rotate(45deg)}
.hood-preview{position:fixed;left:0;top:0;z-index:30;width:clamp(220px,22vw,340px);pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-8deg);transition:opacity .25s,transform .35s var(--ease)}
.hood-preview.is-on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-5deg)}
.hood-preview img{width:100%;aspect-ratio:1;object-fit:cover;border:5px solid var(--cream);border-radius:12px;box-shadow:10px 10px 0 var(--lime)}
.hood-preview span{position:absolute;left:-10px;bottom:-14px;background:var(--lime);color:var(--ink);font-weight:900;padding:6px 10px;border:3px solid var(--ink);border-radius:8px;transform:rotate(4deg)}
.hood-foot{display:flex;align-items:center;gap:20px;margin-top:clamp(30px,4vw,60px);background:var(--lime);color:var(--ink);padding:clamp(18px,2vw,28px);border-radius:var(--radius);border:3px solid var(--cream);box-shadow:8px 8px 0 var(--cream);transform:rotate(-.6deg)}
.hood-foot strong{font-weight:900}
.paw-icon{width:clamp(44px,4vw,64px);flex:none;fill:var(--ink);animation:wiggle 2.4s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(12deg)}}

.hood-dialog{border:4px solid var(--ink);border-radius:20px;padding:0;max-width:min(860px,92vw);width:100%;background:var(--cream);color:var(--ink);box-shadow:12px 12px 0 var(--lime);overflow:hidden}
.hood-dialog[open]{display:grid;grid-template-columns:1fr 1.1fr;animation:pop .4s var(--ease)}
.hood-dialog::backdrop{background:rgba(16,18,17,.75);backdrop-filter:blur(3px)}
.hood-dialog img{width:100%;height:100%;object-fit:cover;border-right:4px solid var(--ink)}
.hd-body{padding:clamp(22px,3vw,40px);display:grid;gap:14px;align-content:center}
.hd-body small{font-weight:800;letter-spacing:.1em}
.hd-body h3{font-weight:900;font-size:clamp(32px,4vw,58px);line-height:.9;letter-spacing:-.02em}
.hd-empty{font-family:"Tag",cursive;font-size:20px;transform:rotate(-2deg);background:var(--lime);justify-self:start;padding:4px 10px;border-radius:6px}
.hd-close{position:absolute;right:14px;top:12px;width:44px;height:44px;border-radius:50%;border:3px solid var(--ink);background:var(--lime);font-size:26px;font-weight:900;line-height:1;z-index:2}

/* ---------- BARKING (forum) ---------- */
.barking{background:var(--lime);padding:clamp(80px,10vw,150px) var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start;position:relative}
.barking .graffiti-swap em{top:-26%;left:8%}
.hood .graffiti-swap em{left:100%;top:-12%;margin-left:.12em;font-size:1em;transform:rotate(-6deg)}
.hood-head .lede{max-width:52ch}
.barking-copy .lede{margin-top:clamp(30px,4vw,50px)}
.lingo{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.lingo li{background:var(--ink);color:var(--lime);font-weight:900;font-size:14px;padding:9px 12px 8px;border-radius:9px;letter-spacing:.03em}
.lingo s{color:var(--cream);opacity:.55;margin-right:6px;font-weight:700}
.lingo li:nth-child(odd){transform:rotate(-1.5deg)}.lingo li:nth-child(even){transform:rotate(1.5deg)}
.thread{position:relative;background:var(--cream);border:4px solid var(--ink);border-radius:20px;padding:clamp(20px,2.4vw,32px);box-shadow:12px 12px 0 var(--ink);transform:rotate(1.2deg);margin-top:20px}
.thread-tag{position:absolute;top:-18px;right:20px;background:var(--tan);border:3px solid var(--ink);border-radius:8px;padding:6px 10px 5px;font-weight:900;font-size:13px;letter-spacing:.06em;transform:rotate(4deg)}
.thread-head{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.thread-head img{width:48px;height:48px;border-radius:50%;background:var(--ink);padding:5px;border:3px solid var(--ink)}
.thread-head strong{display:block;font-weight:900}
.thread-head small{font-weight:700;font-size:12px;letter-spacing:.06em;opacity:.7}
.thread h3{font-weight:900;font-size:clamp(22px,2vw,32px);line-height:1.04;letter-spacing:-.01em;margin-bottom:12px}
.thread>p{font-weight:500}
.thread-ref{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px}
.thread-ref span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;font-weight:600;background:var(--white);border:2px dashed var(--ink);border-radius:6px;padding:4px 8px}
.reactions{display:flex;flex-wrap:wrap;gap:10px}
.reactions button{position:relative;display:inline-flex;gap:8px;align-items:center;background:var(--white);border:3px solid var(--ink);border-radius:999px;padding:8px 14px 7px;font-weight:900;font-size:14px;box-shadow:3px 3px 0 var(--ink);transition:transform .15s var(--ease),background .2s}
.reactions button span{font-variant-numeric:tabular-nums;opacity:.7}
.reactions button:hover{transform:translateY(-3px) rotate(-3deg)}
.reactions button.is-on{background:var(--lime)}
.reactions button.is-pop{animation:reactpop .5s var(--ease)}
@keyframes reactpop{30%{transform:scale(1.25) rotate(-6deg)}}
.react-fx{position:fixed;z-index:60;pointer-events:none;font-weight:900;font-size:22px;color:var(--ink);background:var(--lime);border:3px solid var(--ink);border-radius:10px;padding:4px 8px;animation:floatup .9s ease-out forwards}
@keyframes floatup{0%{transform:translate(-50%,0) scale(.6);opacity:0}20%{transform:translate(-50%,-20px) scale(1.15) rotate(-6deg);opacity:1}100%{transform:translate(-50%,-90px) rotate(6deg);opacity:0}}
.thread-toast{min-height:1.4em;margin-top:14px;font-family:"Tag",cursive;font-size:18px}
.thread-note{font-size:13px;opacity:.7;margin-top:6px}
.cred{grid-column:1/-1;background:var(--ink);color:var(--cream);border-radius:22px;padding:clamp(22px,3vw,40px);display:grid;grid-template-columns:auto 1fr;gap:6px 30px;align-items:center}
.cred h3{font-weight:900;font-size:clamp(30px,3.6vw,60px);line-height:.9;color:var(--lime)}
.cred>p{font-weight:600}
.cred-ladder{grid-column:1/-1;list-style:none;padding:0;margin:26px 0 12px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.cred-ladder li{font-weight:900;font-size:clamp(12px,1.15vw,18px);letter-spacing:.02em;text-align:center;padding:10px 4px;border:2px solid rgba(245,238,220,.3);border-radius:10px;transition:background .3s,color .3s,border-color .3s}
.cred-ladder li.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.cred-bar{grid-column:1/-1;position:relative;height:14px;border-radius:999px;background:rgba(245,238,220,.15)}
.cred-bar span{position:absolute;left:0;top:0;bottom:0;width:var(--cred,0%);background:var(--lime);border-radius:inherit}
.cred-bar img{position:absolute;left:var(--cred,0%);top:50%;width:44px;height:44px;transform:translate(-50%,-50%);filter:drop-shadow(2px 2px 0 #000)}

/* ---------- SNIFF IT ---------- */
.sniff{background:var(--ink);color:var(--cream);padding:clamp(70px,9vw,140px) var(--pad);position:relative;overflow:hidden}
.sniff::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(198,255,0,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(198,255,0,.06) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.sniff-head{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px 40px}
.sniff-head .chapter{grid-column:1/-1;margin:0}
.sniff-head .mega{font-size:clamp(70px,13vw,230px)}
.sniff-head .lede{opacity:.9}
.sniff-lab{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(20px,4vw,60px);align-items:center;margin-top:clamp(30px,4vw,60px)}
.sniff-dog{position:relative;max-width:520px;width:100%;justify-self:center}
/* Sniff It mascot: the real Chihua art, cut into ears, tail and body so they can move */
.pup{position:relative;width:100%;aspect-ratio:1}
.pup::before{content:"";position:absolute;left:8%;right:8%;top:10%;bottom:6%;border-radius:50%;background:var(--lime);box-shadow:inset -16px -18px 0 rgba(16,18,17,.16);border:4px solid var(--ink)}
.pup-shadow{position:absolute;left:12%;right:14%;bottom:8.5%;height:6%;border-radius:50%;background:rgba(16,18,17,.35)}
.pup-rig{position:absolute;inset:0;isolation:isolate;transform-origin:50% 88%;transition:transform .45s var(--ease);animation:breathe 3.2s ease-in-out infinite}
.pup-rig>img,.pup-fx{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pup-part{transition:transform .35s var(--ease)}
.pup-ear-l{transform-origin:36.7% 35.6%;animation:twitchL 6s 2.2s infinite}
.pup-ear-r{transform-origin:77.8% 32.2%;animation:twitchR 5s infinite}
.pup-tail{transform-origin:26.7% 62.8%;animation:wag 1.1s ease-in-out infinite alternate}
.pup-fx *{transform-box:fill-box}
.pup-lid{transform-origin:50% 0;transform:scaleY(0);animation:blink 4.6s infinite}
.pup-happy,.pup-puffs,.pup-glass,.pup-stink,.pup-spark,.pup-sweat{opacity:0;transition:opacity .25s}
.pup-glass{transform-origin:50% 50%;transform:scale(.4) rotate(-30deg);transition:opacity .25s,transform .4s var(--ease)}
@keyframes breathe{50%{transform:scale(1.01,1.018)}}
@keyframes wag{from{transform:rotate(-5deg)}to{transform:rotate(8deg)}}
@keyframes twitchR{0%,86%,100%{transform:none}89%{transform:rotate(-7deg)}92%{transform:rotate(2deg)}95%{transform:rotate(-5deg)}}
@keyframes twitchL{0%,88%,100%{transform:none}91%{transform:rotate(8deg)}95%{transform:rotate(-2deg)}}
@keyframes blink{0%,93%,100%{transform:scaleY(0)}96%{transform:scaleY(1)}}
/* sniffing: nose down, magnifier out, ears forward */
.sniff-dog[data-mood="sniffing"] .pup-rig{animation:sniffbob .42s ease-in-out infinite alternate}
.sniff-dog[data-mood="sniffing"] .pup-ear-l{animation:none;transform:rotate(7deg)}
.sniff-dog[data-mood="sniffing"] .pup-ear-r{animation:none;transform:rotate(-7deg)}
.sniff-dog[data-mood="sniffing"] .pup-tail{animation-duration:.3s}
.sniff-dog[data-mood="sniffing"] .pup-glass{opacity:1;transform:none}
.sniff-dog[data-mood="sniffing"] .pup-puffs{opacity:1}
.sniff-dog[data-mood="sniffing"] .pup-puffs path{animation:puff .42s ease-in-out infinite alternate}
.sniff-dog[data-mood="sniffing"] .pup-puffs path:nth-child(even){animation-delay:.21s}
@keyframes sniffbob{from{transform:translateY(0) rotate(0)}to{transform:translateY(12px) rotate(2.5deg)}}
@keyframes puff{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(-4px)}}
/* all clear: happy eyes, hop, wag */
.sniff-dog[data-mood="clear"] .pup-rig{animation:hop .5s cubic-bezier(.3,0,.4,1) infinite alternate}
.sniff-dog[data-mood="clear"] .pup-lid{animation:none;transform:none}
.sniff-dog[data-mood="clear"] .pup-lash{opacity:0}
.sniff-dog[data-mood="clear"] .pup-happy,.sniff-dog[data-mood="clear"] .pup-spark{opacity:1}
.sniff-dog[data-mood="clear"] .pup-spark path{transform-origin:50% 50%;animation:twinkle .8s ease-in-out infinite alternate}
.sniff-dog[data-mood="clear"] .pup-spark path:nth-child(2){animation-delay:.3s}
.sniff-dog[data-mood="clear"] .pup-tail{animation-duration:.18s}
.sniff-dog[data-mood="clear"] .pup-ear-l{animation:none;transform:rotate(-5deg)}
.sniff-dog[data-mood="clear"] .pup-ear-r{animation:none;transform:rotate(5deg)}
@keyframes hop{from{transform:translateY(0)}to{transform:translateY(-22px) scale(1.01,.99)}}
@keyframes twinkle{from{transform:scale(.6) rotate(0)}to{transform:scale(1.1) rotate(25deg)}}
/* something smells: squint, lean away, ears back */
.sniff-dog[data-mood="smells"] .pup-rig{animation:none;transform:rotate(-5deg) translateX(-12px)}
.sniff-dog[data-mood="smells"] .pup-lid{animation:none;transform:scaleY(.55)}
.sniff-dog[data-mood="smells"] .pup-lash{opacity:0}
.sniff-dog[data-mood="smells"] .pup-ear-l{animation:none;transform:rotate(-9deg)}
.sniff-dog[data-mood="smells"] .pup-ear-r{animation:none;transform:rotate(9deg)}
.sniff-dog[data-mood="smells"] .pup-tail{animation:none;transform:rotate(9deg)}
.sniff-dog[data-mood="smells"] .pup-stink{opacity:1}
.sniff-dog[data-mood="smells"] .pup-stink path{animation:stink 1.4s ease-in infinite}
.sniff-dog[data-mood="smells"] .pup-stink path:nth-child(2){animation-delay:.45s}.sniff-dog[data-mood="smells"] .pup-stink path:nth-child(3){animation-delay:.9s}
@keyframes stink{0%{opacity:0;transform:translateY(20px)}40%{opacity:1}100%{opacity:0;transform:translateY(-40px)}}
/* bark alert: ears up, shaking */
.sniff-dog[data-mood="alert"] .pup-rig{animation:shake .09s linear infinite alternate}
.sniff-dog[data-mood="alert"] .pup-lid{animation:none}
.sniff-dog[data-mood="alert"] .pup-ear-l{animation:none;transform:rotate(7deg)}
.sniff-dog[data-mood="alert"] .pup-ear-r{animation:none;transform:rotate(-7deg)}
.sniff-dog[data-mood="alert"] .pup-tail{animation:none;transform:rotate(-10deg)}
@keyframes shake{from{transform:translateX(-5px) rotate(-1.4deg)}to{transform:translateX(5px) rotate(1.4deg)}}
/* can't sniff this: head tilt, floppy ear, sweat */
.sniff-dog[data-mood="confused"] .pup-rig{animation:tilt 2.4s ease-in-out infinite alternate}
.sniff-dog[data-mood="confused"] .pup-ear-r{animation:none;transform:rotate(16deg)}
.sniff-dog[data-mood="confused"] .pup-ear-l{animation:none;transform:rotate(-4deg)}
.sniff-dog[data-mood="confused"] .pup-tail{animation:wag 2s ease-in-out infinite alternate}
.sniff-dog[data-mood="confused"] .pup-sweat{opacity:1;animation:drip 1.6s ease-in infinite}
@keyframes tilt{from{transform:rotate(-9deg) translateX(-10px)}to{transform:rotate(-5deg) translateX(-6px)}}
@keyframes drip{0%{transform:translateY(-6px)}100%{transform:translateY(14px)}}
.sniff-dog{cursor:pointer}
.mood-bubble{position:absolute;right:0;top:4%;width:76px;height:76px;border-radius:50%;background:var(--cream);color:var(--ink);border:4px solid var(--ink);display:grid;place-items:center;font-weight:900;font-size:40px;box-shadow:4px 4px 0 var(--lime);opacity:0;transform:scale(.3);transition:opacity .2s,transform .35s var(--ease);z-index:2}
.sniff-dog:not([data-mood="idle"]) .mood-bubble{opacity:1;transform:none}
.sniff-woof{position:absolute;left:-4%;top:16%;font-weight:900;font-size:clamp(28px,3vw,48px);line-height:.9;color:var(--lime);transform:rotate(-14deg) scale(.4);opacity:0;transition:opacity .2s,transform .3s var(--ease);text-shadow:4px 4px 0 #000}
.sniff-dog[data-mood="alert"] .sniff-woof{opacity:1;transform:rotate(-14deg)}
.sniff-lines{position:absolute;inset:0;pointer-events:none}
.sniff-lines i{position:absolute;right:-4%;height:5px;border-radius:5px;background:var(--lime);opacity:0}
.sniff-lines i:nth-child(1){top:36%;width:60px}.sniff-lines i:nth-child(2){top:44%;width:90px}.sniff-lines i:nth-child(3){top:52%;width:50px}
.sniff-dog[data-mood="alert"] .sniff-lines i{animation:lines .3s ease-out infinite alternate}
@keyframes lines{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(10px)}}

.sniff-console{position:relative;background:var(--ink-2);border:3px solid var(--lime);border-radius:22px;padding:clamp(18px,2.4vw,32px);box-shadow:10px 10px 0 var(--lime)}
.sniff-form label{display:block;font-weight:800;font-size:13px;letter-spacing:.12em;color:var(--lime);margin-bottom:10px}
.sniff-field{display:flex;gap:12px}
.sniff-field input{flex:1;min-width:0;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:12px;padding:14px 16px;font:600 16px/1.2 ui-monospace,Menlo,Consolas,monospace;box-shadow:inset 3px 3px 0 rgba(0,0,0,.12)}
.sniff-field input:focus{outline:3px solid var(--lime);outline-offset:2px}
.sniff-help{margin-top:10px;font-size:14px;opacity:.85}
.sniff-screen{margin-top:20px;border:2px dashed rgba(198,255,0,.4);border-radius:14px;padding:16px;min-height:220px;position:relative;overflow:hidden}
.sniff-screen.is-scanning::after{content:"";position:absolute;left:0;right:0;height:40%;top:-40%;background:linear-gradient(180deg,transparent,rgba(198,255,0,.25),transparent);animation:scan 1s linear infinite}
@keyframes scan{to{top:100%}}
.sniff-status{font-weight:800;letter-spacing:.06em;color:var(--lime);font-size:15px}
.verdict{display:grid;gap:4px;margin:6px 0 14px;padding:14px 16px;border-radius:12px;background:var(--lime);color:var(--ink);border:3px solid var(--ink)}
.verdict small{font-weight:800;font-size:11px;letter-spacing:.14em}
.verdict strong{font-weight:900;font-size:clamp(26px,2.6vw,40px);line-height:.95}
.verdict span{font-weight:600;font-size:14px}
.verdict.v-smells{background:var(--tan)}
.verdict.v-alert{background:var(--cream);box-shadow:inset 0 0 0 3px var(--ink),6px 6px 0 var(--lime);animation:alertshake .4s 2}
@keyframes alertshake{25%{transform:translateX(-6px) rotate(-1deg)}75%{transform:translateX(6px) rotate(1deg)}}
.verdict.v-confused{background:#cfd2c4}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.checks li{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:9px 12px;border-radius:10px;background:rgba(245,238,220,.06);font-weight:600;font-size:14px;opacity:0;transform:translateY(8px);animation:checkin .35s var(--ease) forwards}
.checks li b{font-weight:900;font-size:12px;letter-spacing:.06em;padding:4px 8px;border-radius:6px;background:var(--lime);color:var(--ink)}
.checks li b.warn{background:var(--tan)}
.checks li b.bad{background:var(--cream);outline:2px solid var(--lime)}
.checks li b.na{background:#5b5f55;color:var(--cream)}
@keyframes checkin{to{opacity:1;transform:none}}
.moods{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px}
.moods span{font-weight:800;font-size:12px;letter-spacing:.1em;opacity:.7;margin-right:4px}
.moods button{background:transparent;border:2px solid var(--cream);color:var(--cream);border-radius:999px;padding:7px 12px;font-weight:800;font-size:12px;letter-spacing:.04em;transition:background .2s,color .2s,transform .2s var(--ease)}
.moods button:hover,.moods button.is-on{background:var(--lime);color:var(--ink);border-color:var(--lime);transform:rotate(-2deg)}
.sniff .fineprint{margin-top:16px}

/* ---------- DOG WORK (board) ---------- */
.dogwork{position:relative;background:var(--olive);color:var(--cream);padding:clamp(80px,10vw,150px) var(--pad);overflow:hidden}
.dogwork-bg{position:absolute;inset:0;background:url("../assets/img/den.webp") center/cover;opacity:.22;filter:grayscale(.3) contrast(1.1);transform:scale(1.1)}
.dogwork-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--olive),rgba(37,48,27,.7) 40%,var(--olive))}
.dogwork-head{position:relative;display:grid;grid-template-columns:1fr auto;gap:20px 40px;align-items:end}
.dogwork-head .chapter{grid-column:1/-1;margin:0}
.board{position:relative;margin-top:clamp(70px,9vw,140px);height:clamp(560px,48vw,700px)}
.board-strings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.board-strings path{fill:none;stroke:var(--lime);stroke-width:3;stroke-dasharray:8 7;vector-effect:non-scaling-stroke}
.clue{position:absolute;width:min(330px,40%);background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:6px;padding:26px 22px 22px;box-shadow:10px 12px 0 rgba(0,0,0,.45);transition:transform .35s var(--ease)}
.clue:hover{transform:rotate(0) scale(1.04)!important;z-index:5}
html.anim .clue:not(.settled){transition:none}
.clue small{font-weight:800;font-size:12px;letter-spacing:.12em;opacity:.7}
.clue h3{font-weight:900;font-size:clamp(26px,2.4vw,38px);line-height:.92;margin:6px 0 10px;letter-spacing:-.01em}
.clue p{font-weight:500;font-size:15px;line-height:1.35}
.pin{position:absolute;top:-14px;left:50%;width:26px;height:26px;border-radius:50%;background:var(--lime);border:3px solid var(--ink);transform:translateX(-50%);box-shadow:2px 3px 0 var(--ink)}
.c1{left:2%;top:4%;transform:rotate(-3deg)}
.c2{left:52%;top:0%;transform:rotate(2.5deg);background:var(--lime)}
.c2 .pin{background:var(--cream)}
.c3{left:18%;top:56%;transform:rotate(2deg);background:var(--tan)}
.c4{left:66%;top:52%;transform:rotate(-2deg)}
.paw-node{position:absolute;width:34px;height:34px;border-radius:50%;background:var(--ink);border:3px solid var(--lime);transform:translate(-50%,-50%)}
.paw-node::after{content:"";position:absolute;inset:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23c6ff00'%3E%3Cellipse cx='22' cy='40' rx='11' ry='14'/%3E%3Cellipse cx='42' cy='22' rx='10' ry='14'/%3E%3Cellipse cx='64' cy='22' rx='10' ry='14'/%3E%3Cellipse cx='82' cy='40' rx='10' ry='13'/%3E%3Cpath d='M50 50c14 0 30 18 30 30 0 10-8 12-15 10-6-2-10-4-15-4s-9 2-15 4c-7 2-15 0-15-10 0-12 16-30 30-30z'/%3E%3C/svg%3E") center/contain no-repeat}
.paw-node{z-index:3}
.n1{left:19%;top:24%}.n2{left:64%;top:27%}.n3{left:33%;top:74%}.n4{left:82%;top:71%}

/* ---------- RECEIPTS ---------- */
.receipts{background:var(--cream);padding:clamp(80px,10vw,150px) var(--pad);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,100px);align-items:center;overflow:hidden}
.printer{position:relative;max-width:420px;width:100%;justify-self:center}
.printer-slot{position:relative;z-index:2;height:64px;background:var(--ink);border-radius:18px 18px 10px 10px;display:grid;place-items:center;box-shadow:0 8px 0 var(--olive)}
.printer-slot span{font-weight:900;font-size:11px;letter-spacing:.16em;color:var(--lime)}
.printer-slot::after{content:"";position:absolute;left:8%;right:8%;bottom:10px;height:6px;border-radius:4px;background:#000}
.paper-wrap{overflow:hidden;margin:-14px 10% 0;padding:0 14px 30px}
.paper{position:relative;background:var(--white);padding:30px 24px 34px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;box-shadow:6px 8px 0 rgba(16,18,17,.15);clip-path:polygon(0 0,100% 0,100% 100%,95% 97%,90% 100%,85% 97%,80% 100%,75% 97%,70% 100%,65% 97%,60% 100%,55% 97%,50% 100%,45% 97%,40% 100%,35% 97%,30% 100%,25% 97%,20% 100%,15% 97%,10% 100%,5% 97%,0 100%)}
.p-title{font-family:"Hood";font-weight:900;font-size:28px;text-align:center;letter-spacing:-.01em}
.p-sub{text-align:center;font-size:12px;opacity:.6;margin-top:4px}
.paper hr{border:0;border-top:2px dashed var(--ink);margin:14px 0}
.p-row{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.p-row s{opacity:.55}
.p-total{display:flex;justify-content:space-between;font-family:"Hood";font-weight:900;font-size:26px}
.p-total b{background:var(--lime);padding:0 6px}
.barcode{height:52px;margin:18px 0 8px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 7px,transparent 7px 9px,var(--ink) 9px 10px,transparent 10px 13px)}
.p-thanks{text-align:center;font-size:12px;letter-spacing:.06em}
.p-foot{position:relative;padding-right:92px;margin-top:18px}
.p-foot .barcode{margin-top:0}
.p-stamp{position:absolute;right:0;top:calc(50% - 42px);font-family:"Hood";font-weight:900;font-size:16px;line-height:1;color:var(--ink);border:4px solid var(--ink);border-radius:50%;width:84px;height:84px;font-size:13px;display:grid;place-items:center;text-align:center;transform:rotate(-16deg);background:rgba(198,255,0,.85)}
.receipts-copy{display:grid;gap:22px}
.receipts-copy .chapter{margin:0}
.mark{white-space:nowrap;background:var(--lime);padding:0 .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.receipts-copy p:not(.lede){max-width:46ch;font-size:17px}

/* ---------- TOKEN ---------- */
.token{background:var(--lime);padding:clamp(80px,10vw,150px) var(--pad);text-align:center;position:relative;overflow:hidden}
.token .mega{margin-bottom:28px}
#receipts-title{font-size:clamp(44px,7vw,124px)}
.rule-label{display:flex;align-items:center;gap:16px;margin:clamp(40px,5vw,70px) 0 14px;font-weight:800;font-size:13px;letter-spacing:.14em}
.rule-label::before,.rule-label::after{content:"";flex:1;height:3px;background:var(--ink)}
.ticker-big{font-weight:900;font-size:clamp(46px,10.6vw,190px);line-height:.85;letter-spacing:-.04em;word-break:break-word}
.split{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:clamp(10px,3vw,40px)}
.split .rule-label{margin-top:clamp(30px,4vw,50px)}
.stat{font-weight:900;font-size:clamp(70px,11vw,190px);line-height:.85;letter-spacing:-.04em}
.tag-swing{position:relative;width:clamp(120px,13vw,190px);height:clamp(230px,24vw,330px);transform-origin:50% 0;animation:swing 2.6s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(9deg)}50%{transform:rotate(-9deg)}}
.tag-string{position:absolute;left:50%;top:0;width:3px;height:42%;background:var(--ink);transform:translateX(-50%)}
.tag-string::before{content:"";position:absolute;left:50%;top:-6px;width:16px;height:16px;border-radius:50%;background:var(--ink);transform:translateX(-50%)}
.dogtag{position:absolute;left:0;right:0;bottom:0;height:62%;background:var(--ink);border-radius:46% 46% 40% 40%/30% 30% 50% 50%;border:5px solid var(--ink);box-shadow:inset 0 0 0 5px var(--lime),6px 6px 0 rgba(16,18,17,.3);display:grid;place-items:center;align-content:center;gap:4px;padding:10px}
.dogtag::before{content:"";position:absolute;top:8px;left:50%;width:16px;height:16px;border-radius:50%;background:var(--lime);transform:translateX(-50%);box-shadow:inset 0 0 0 4px var(--ink)}
.dogtag img{width:62%;margin-top:14px}
.dogtag small{color:var(--lime);font-weight:900;font-size:clamp(9px,.8vw,12px);letter-spacing:.06em}
.no-list{list-style:none;padding:0;margin:clamp(24px,3vw,40px) auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.no-list li{background:var(--ink);color:var(--lime);font-weight:900;padding:10px 16px 9px;border-radius:10px;font-size:clamp(14px,1.3vw,20px)}
.no-list li:nth-child(odd){transform:rotate(-2deg)}.no-list li:nth-child(even){transform:rotate(2deg)}
.path{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:left;counter-reset:p}
.path li{position:relative;background:var(--cream);border:3px solid var(--ink);border-radius:16px;padding:20px 18px;box-shadow:var(--shadow);display:grid;gap:6px;align-content:start}
.path li:not(:last-child)::after{content:"→";position:absolute;right:-14px;top:50%;transform:translate(50%,-50%);font-weight:900;font-size:22px;z-index:2;background:var(--lime);border:3px solid var(--ink);border-radius:50%;width:38px;height:38px;display:grid;place-items:center}
.path b{font-weight:900;font-size:13px;letter-spacing:.1em;opacity:.6}
.path strong{font-weight:900;font-size:clamp(22px,2vw,32px);line-height:.95}
.path span{font-weight:500;font-size:15px;line-height:1.3}
.utility{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(40px,5vw,70px);text-align:left}
.u-col{border:3px solid var(--ink);border-radius:20px;padding:clamp(20px,2.4vw,34px)}
.u-col h3{font-weight:900;font-size:clamp(26px,2.6vw,42px);line-height:.9;margin-bottom:16px}
.u-col ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.u-col li{font-weight:700;font-size:clamp(16px,1.3vw,20px);display:flex;gap:10px;align-items:baseline}
.u-yes{background:var(--ink);color:var(--cream)}
.u-yes h3{color:var(--lime)}
.u-yes li::before{content:"✓";color:var(--lime);font-weight:900}
.u-no{background:var(--cream)}
.u-no li::before{content:"✕";font-weight:900}
.token .fineprint{margin:clamp(30px,4vw,50px) auto 0}

/* ---------- FAQ ---------- */
.faq{background:var(--cream);padding:clamp(80px,10vw,150px) var(--pad);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,80px)}
.faq-head{position:relative}
.faq-dog{width:min(320px,70%);margin-top:30px;transform:rotate(-4deg);filter:drop-shadow(8px 8px 0 var(--lime))}
.faq-list details{border-bottom:3px solid var(--ink)}
.faq-list details:first-child{border-top:3px solid var(--ink)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 4px;font-weight:900;font-size:clamp(19px,1.7vw,27px);line-height:1.1}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{flex:none;width:40px;height:40px;border-radius:50%;background:var(--lime);border:3px solid var(--ink);display:grid;place-items:center;font-size:22px;transition:transform .3s var(--ease)}
.faq-list details[open] summary span{transform:rotate(135deg);background:var(--ink);color:var(--lime)}
.faq-list details p{padding:0 4px 24px;font-size:17px;max-width:60ch}
.faq-list details p a{font-weight:800}

/* ---------- FOOTER ---------- */
.footer{background:var(--lime);position:relative;overflow:hidden}
.footer-inner{padding:clamp(60px,8vw,110px) var(--pad) 0;text-align:center}
.footer-kicker{font-weight:800;letter-spacing:.14em;font-size:13px}
.footer-title{font-weight:900;font-size:clamp(40px,7vw,120px);line-height:.88;letter-spacing:-.02em;margin-top:16px}
.footer-wordmark{font-weight:900;line-height:.8;letter-spacing:-.035em;font-size:var(--wm2,12vw);margin:clamp(30px,4vw,60px) 0 0;display:flex;justify-content:center}
.wm-eyes--sm .eye .brow{top:-.12em}
.footer-row{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,auto) minmax(200px,1fr);gap:24px;align-items:end;margin-top:clamp(30px,4vw,50px);text-align:left}
.footer-line{font-weight:900;font-size:clamp(20px,1.7vw,30px);line-height:.95}
.footer-line,.footer-row .btn-row{margin-bottom:clamp(24px,2.8vw,44px)}
.footer-row .btn-row{justify-content:center}
.footer-dog{width:min(300px,100%);justify-self:end;margin-bottom:-6px;filter:drop-shadow(6px 6px 0 var(--ink))}
.footer .ticker{border-bottom:0}
.footer-legal{background:var(--ink);color:var(--cream);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px var(--pad) calc(20px + env(safe-area-inset-bottom));font-size:13px}
.footer-legal p{opacity:.75;max-width:70ch}

/* ---------- paw stamps ---------- */
.paw-layer{position:fixed;inset:0;pointer-events:none;z-index:120}
.paw-stamp{position:absolute;width:34px;height:34px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23101211'%3E%3Cellipse cx='22' cy='40' rx='11' ry='14'/%3E%3Cellipse cx='42' cy='22' rx='10' ry='14'/%3E%3Cellipse cx='64' cy='22' rx='10' ry='14'/%3E%3Cellipse cx='82' cy='40' rx='10' ry='13'/%3E%3Cpath d='M50 50c14 0 30 18 30 30 0 10-8 12-15 10-6-2-10-4-15-4s-9 2-15 4c-7 2-15 0-15-10 0-12 16-30 30-30z'/%3E%3C/svg%3E") center/contain no-repeat;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(.4);opacity:0;animation:stamp 1.2s ease-out forwards}
.paw-stamp.on-dark{filter:invert(84%) sepia(73%) saturate(1200%) hue-rotate(28deg)}
@keyframes stamp{15%{opacity:.9;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1.1)}30%{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1)}}

/* ---------- motion pause / reduced ---------- */
@media (prefers-reduced-motion:reduce){
  .music-btn .eq i{animation:none!important;transform:scaleY(.6)}.music-btn .eq i:nth-child(2n){transform:scaleY(1)}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .ticker-track{transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .barking{grid-template-columns:minmax(0,1fr)}
  .thread{max-width:640px}
  .path{grid-template-columns:1fr 1fr}
  .path li:nth-child(2)::after{display:none}
  .footer-row{grid-template-columns:minmax(0,1fr);text-align:center}
  .footer-dog{justify-self:center;width:220px}
}
@media (max-width:900px){
  :root{--header:64px}
  .header-paper{display:none}
  .brand-word{font-size:18px}
  .round-btn{width:44px;height:44px}
  .hero-stage{flex-direction:column;align-items:stretch;padding-top:14px}
  .hero-dog{position:relative;right:auto;bottom:auto;width:min(64vw,400px);margin:4vw auto 0;align-self:center}
  .bubble--hero{left:-24%;top:21%;font-size:14px;padding:9px 12px 8px}
  .hint-sticker{left:auto;right:-14%;top:auto;bottom:22%}
  .hero-foot{grid-template-columns:1fr;gap:18px;padding-top:6px}
  .scroll-cue{display:none}
  .s-lol{left:auto;right:3%;top:auto;bottom:6%}.s-sus{left:auto;right:3%;top:37%}.s-receipts,.s-paw,.s-based{display:none}.s-bone{left:3%;top:auto;bottom:8%}
  .hood-head,.sniff-head,.dogwork-head{grid-template-columns:1fr}
  .hoods button{grid-template-columns:36px 1fr 28px;gap:12px}
  .hoods button span{grid-column:2;grid-row:2;font-size:14px}
  .hoods i{grid-row:1/3;grid-column:3}
  .hood-preview{display:none}
  .hood-dialog[open]{grid-template-columns:1fr}
  .hood-dialog img{height:220px;border-right:0;border-bottom:4px solid var(--ink)}
  .sniff-lab{grid-template-columns:minmax(0,1fr)}
  .sniff-dog{max-width:300px}
  .board{height:auto;display:grid;gap:30px;padding-top:20px}
  .board-strings,.paw-node{display:none}
  .clue{position:relative;left:auto!important;top:auto!important;width:100%}
  .receipts{grid-template-columns:minmax(0,1fr)}
  .faq{grid-template-columns:minmax(0,1fr)}
  .faq-dog{display:none}
  .split{grid-template-columns:1fr 1fr}
  .tag-swing{grid-column:1/-1;grid-row:1;justify-self:center;height:200px;width:120px}
  .utility{grid-template-columns:minmax(0,1fr)}
  .footer-row{grid-template-columns:1fr;text-align:center}
  .footer-row .btn-row{justify-content:center}
  .footer-dog{justify-self:center;width:220px}
  .beat-4{grid-template-columns:1fr;text-align:center;align-content:center;gap:10px}
  .leap{width:min(66vw,44svh,380px)}
  .beat-4{--star:min(84vw,52svh,460px)}
  .beat-4-copy{grid-row:2;grid-column:1}
  .impact span{right:0;top:-11%;font-size:max(26px,calc(var(--star) * .09));-webkit-text-stroke-width:5px}
  .hound{width:62vw}
  .hound .bubble{font-size:15px;top:-8%}
  .bubble--l{right:auto;left:8%;top:-40%}.bubble--r{left:auto;right:6%;top:-10%}
  .cred{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .evidence-rep{grid-template-columns:1fr}
  .cred-ladder{grid-template-columns:1fr 1fr}
  .cred-ladder li:last-child{grid-column:1/-1}
  .legend-progress{display:none}
}
@media (max-width:560px){
  .header-actions{gap:8px}
  .hood-head .mega{font-size:10.2vw}
  .impact span{right:auto;left:-2%;top:-12%;transform:rotate(-14deg)}
  .sticker-btn{padding:12px 15px 11px;font-size:14px}
  .sniff-field{flex-direction:column}
  .sniff-field .sticker-btn{justify-content:center}
  .path{grid-template-columns:1fr}
  .path li::after{display:none}
  .lingo li{font-size:12px}
  .brand-word{display:none}
  .hero-foot .btn-row .sticker-btn{flex:1;justify-content:center}
  .thread{transform:none}
}
@media (max-width:600px){.manifesto-quote br{display:none}}
/* wide but short screens (laptops with browser chrome, landscape tablets) */
@media (min-width:901px) and (max-height:760px){
  .hero-dog{bottom:-16%}
  .hero-foot .scroll-cue{visibility:hidden}
  .hint-sticker{left:-12%;top:40%;transform:rotate(-7deg)}
  .s-bone{left:60%;top:6%}
}

/* paw cursor: mouse and trackpad only */
@media (hover:hover) and (pointer:fine){
  html,body{cursor:url("../assets/cursor/paw-32.png") 8 8,auto;cursor:-webkit-image-set(url("../assets/cursor/paw-32.png") 1x,url("../assets/cursor/paw-64.png") 2x) 8 8,auto;cursor:image-set(url("../assets/cursor/paw-32.png") 1x,url("../assets/cursor/paw-64.png") 2x) 8 8,auto}
  a,button,summary,label,select,[role="button"],.hero-dog-btn,.hoods button,.clue,.reactions button{cursor:url("../assets/cursor/paw-hover-32.png") 8 8,pointer;cursor:-webkit-image-set(url("../assets/cursor/paw-hover-32.png") 1x,url("../assets/cursor/paw-hover-64.png") 2x) 8 8,pointer;cursor:image-set(url("../assets/cursor/paw-hover-32.png") 1x,url("../assets/cursor/paw-hover-64.png") 2x) 8 8,pointer}
  input[type="text"],input:not([type]),textarea{cursor:text}
  .stickers .sticker,.principles .sticker{cursor:grab}
  .sticker.is-dragging{cursor:grabbing}
}