/* Paw Grip — site styles. Phone first (390 x 844 reference); desktop from 761px. */
:root{
  --sv:1svh;
  --ink:#141414; --grit:#1a1917; --paper:#e2dbcc; --bone:#f4efe4;
  --orange:#ff6a1a; --orange-ink:#b23d00; --yellow:#ffc629;
  --muted:#4f4940; --muted-dark:#bdb5a6; --line:#141414;
  --f-display:'Anton', Impact, 'Arial Narrow', sans-serif;
  --f-body:'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:'Space Mono', ui-monospace, Menlo, monospace;
  --gut:16px; --sec:44px; --sec-sm:32px; --head-h:60px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --grit-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 12px)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--paper) var(--grain);color:var(--ink);font:400 17px/1.55 var(--f-body);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
main{overflow-x:clip}
figure{margin:0}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
button{font:inherit;color:inherit}
ul[role=list],ol.sign-list{list-style:none;margin:0;padding:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.grit :focus-visible,.site-head :focus-visible,.site-foot :focus-visible{outline-color:var(--yellow)}
.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{position:absolute;left:12px;top:-60px;z-index:200;background:var(--yellow);color:var(--ink);padding:10px 14px;font:700 15px var(--f-mono);text-decoration:none}
.skip:focus{top:10px}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- type ---------- */
.h1,.h1-xl,.h2,.h3,.hero-h,.card-name,.way-h,.feat-h,.stockist-name,.logo{font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.95;margin:0}
.h1{font-size:clamp(44px,13vw,96px)}
.h1-xl{font-size:clamp(56px,19vw,180px);line-height:.86}
.h1-xl .line,.hero-h .line{display:block}
.h2{font-size:clamp(30px,8.4vw,60px)}
.h3{font-size:clamp(26px,7vw,40px)}
.line-hot{color:var(--orange)}
.eyebrow{font:700 13px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px;color:var(--muted)}
.lede{font-size:clamp(18px,4.6vw,24px);line-height:1.35;margin:12px 0 0;font-weight:500}
.on-dark{color:var(--bone)}
.eyebrow.on-dark{color:var(--yellow)}
p{margin:0 0 12px}
.tape{display:inline-block;font:700 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;padding:8px 14px 7px;margin:0 0 14px;transform:rotate(-2deg);color:var(--ink);clip-path:polygon(2% 0,98% 4%,100% 50%,97% 100%,1% 96%,0 48%)}
.tape-y{background:var(--yellow)}
.tape-o{background:var(--orange)}
.link-arrow{display:inline-flex;align-items:center;gap:10px;font:700 14px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:10px 0;min-height:44px;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 6px)/0 2px no-repeat;transition:background-size .3s ease}
.link-arrow::after{content:"";width:22px;height:12px;background:currentColor;clip-path:polygon(0 42%,70% 42%,70% 0,100% 50%,70% 100%,70% 58%,0 58%);transition:transform .25s ease}
.link-arrow:hover{background-size:100% 2px}
.link-arrow:hover::after{transform:translateX(5px)}
.hand-note{display:inline-flex;align-items:center;gap:6px;font:700 13px var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--orange-ink)}
.hand-note.on-dark{color:var(--yellow)}
.arrow{width:46px;height:auto;flex:none}
.arrow-down{width:30px}
.tilt-l{transform:rotate(-2.5deg)}
.tilt-r{transform:rotate(2deg)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;font:400 20px/1 var(--f-display);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;border:3px solid var(--ink);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background-color .2s ease}
.btn-hot{background:var(--orange);color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.grit .btn-hot,.hero .btn-hot,.page-hero-photo .btn-hot,.story-band .btn-hot{border-color:var(--ink);box-shadow:5px 5px 0 var(--yellow)}
.btn-hot:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.grit .btn-hot:hover,.hero .btn-hot:hover,.story-band .btn-hot:hover,.page-hero-photo .btn-hot:hover{box-shadow:7px 7px 0 var(--yellow)}
.btn-hot:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn-ghost{background:transparent;color:var(--bone);border-color:var(--bone)}
.btn-ghost:hover{background:var(--bone);color:var(--ink)}
.btn-ghost-dark{background:transparent;color:var(--ink)}
.btn-ghost-dark:hover{background:var(--ink);color:var(--bone)}
.btn-sm{min-height:44px;font-size:17px;padding:0 16px}
.btn-wide{width:100%}

/* ---------- header (hidden sticky header) ---------- */
.site-head{position:sticky;top:0;z-index:100;background:var(--ink);color:var(--bone);transition:transform .32s ease}
.site-head.is-hidden{transform:translateY(-100%)}
.head-in{display:flex;align-items:center;gap:16px;height:var(--head-h);max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.logo{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.logo-sheet{display:inline-flex;background:var(--orange) var(--grain);padding:6px 10px;transform:rotate(-2deg);transition:transform .2s ease}
.logo:hover .logo-sheet{transform:rotate(1deg) scale(1.04)}
.logo .mark{height:30px;width:auto;fill:var(--ink);display:block}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.nav{display:none;margin-left:auto}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:10px 12px;font:700 13px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;text-decoration:none;position:relative}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.head-cta{display:none;background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.head-cta:hover{background:var(--bone);border-color:var(--bone)}
.menu-btn{margin-left:auto;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px 0 10px;background:none;border:0;color:var(--bone);font:700 13px var(--f-mono);text-transform:uppercase;letter-spacing:.1em;cursor:pointer}
.menu-bars{width:24px;height:14px;position:relative;border-top:3px solid currentColor;border-bottom:3px solid currentColor;transition:transform .25s}
.menu-bars::after{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:currentColor}
.menu-btn[aria-expanded=true] .menu-bars{border-color:transparent}
.menu-btn[aria-expanded=true] .menu-bars::after{transform:rotate(45deg);box-shadow:0 0 0 0 currentColor}
.menu-btn[aria-expanded=true] .menu-bars::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:currentColor;transform:rotate(-45deg)}
.menu-panel{position:fixed;inset:var(--head-h) 0 0 0;background-color:var(--ink);background-image:url("paw-tile.svg");background-size:132px 132px;padding:20px var(--gut) 28px;overflow-y:auto;overscroll-behavior:contain}
.menu-panel ul{list-style:none;margin:0;padding:0}
.menu-panel a{display:block;padding:10px 0;font:400 clamp(38px,11vw,56px)/1 var(--f-display);text-transform:uppercase;color:var(--bone);text-decoration:none}
.menu-panel a[aria-current=page]{color:var(--orange)}
.menu-panel .menu-foot a{font:700 14px var(--f-mono);letter-spacing:.08em;text-transform:none;color:var(--yellow);margin-top:18px}
body.menu-open{overflow:hidden}

/* ---------- home hero ---------- */
.hero{position:relative;min-height:calc(100 * var(--sv) - var(--head-h));display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);color:var(--bone)}
.hero-media{position:absolute;inset:0}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:50% 44%}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,20,.05) 30%,rgba(20,20,20,.55) 62%,rgba(20,20,20,.9) 100%)}
.hero-copy{position:relative;z-index:2;padding:0 var(--gut) 26px;width:100%;max-width:1240px;margin:0 auto}
.hero-tape{margin-bottom:12px}
.hero-h{font-size:clamp(54px,min(17.5vw,calc(8.2 * var(--sv))),150px);line-height:.88}
.hero-h .line{opacity:1}
.js .hero-h .line{animation:heroRise .8s cubic-bezier(.2,.7,.2,1) both}
.js .hero-h .line:nth-child(2){animation-delay:.12s}
.js .hero-h .line:nth-child(3){animation-delay:.24s}
@keyframes heroRise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.hero-sub{max-width:30ch;font-size:18px;line-height:1.4;margin:14px 0 18px;color:var(--bone)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-sheet{display:none}

/* ---------- ticker (ambient centerpiece) ---------- */
.ticker{position:relative;background:var(--orange);color:var(--ink);overflow:hidden;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.ticker-track{display:flex;width:max-content;animation:tick 34s linear infinite}
.ticker-track span{font:400 22px/1 var(--f-display);text-transform:uppercase;letter-spacing:.03em;padding:13px 0;white-space:nowrap;display:inline-flex;align-items:center}
.ticker-track span::after{content:"";width:16px;height:16px;margin:0 22px;background:var(--ink);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.ticker.is-paused .ticker-track{animation-play-state:paused}
.ticker-pause{position:absolute;right:0;top:0;bottom:0;width:48px;border:0;border-left:3px solid var(--ink);background:var(--orange);color:var(--ink);font-size:12px;cursor:pointer}
.ticker.is-paused .ticker-pause span{font-size:0}
.ticker.is-paused .ticker-pause span::before{content:"▶";font-size:14px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{padding:var(--sec) 0}
.grit{background:var(--grit) var(--grit-tex);color:var(--bone)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.sec-note{margin:0;font-size:16px}
.sec-note a{color:var(--yellow)}

/* warning signs */
.signs-grid{display:grid;grid-template-columns:1fr 36%;gap:16px;align-items:start}
.signs .h2{margin-bottom:16px}
.sign-list li{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-top:2px solid var(--ink);font-size:17px;line-height:1.3;font-weight:500}
.sign-list li:last-child{border-bottom:2px solid var(--ink)}
.sign-n{font:700 12px var(--f-mono);color:var(--orange-ink);flex:none}
.signs .link-arrow{margin-top:8px;white-space:nowrap;font-size:13px;letter-spacing:.04em}
.signs-photo{margin-top:52px;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--orange)}
.signs-photo img{aspect-ratio:3/4;object-fit:cover;width:100%}

/* swipe rows */
.swipe{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gut));padding:4px var(--gut) 14px;scrollbar-width:thin;scrollbar-color:var(--orange) transparent}
.swipe>li{scroll-snap-align:start}
.card-sheet a{display:block;text-decoration:none;color:var(--bone)}
.card-img{display:block;overflow:hidden;border:3px solid var(--bone);aspect-ratio:4/5}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card-sheet a:hover img{transform:scale(1.06)}
.card-name{display:block;font-size:28px;margin-top:12px;color:var(--bone)}
.card-line{display:block;font-size:16px;color:var(--muted-dark)}
.card-sheet a:hover .card-name{color:var(--orange)}

/* story band (blurred photo) */
.story-band{position:relative;overflow:hidden;background:var(--ink);padding:56px 0}
.story-bg{position:absolute;inset:-30px}
.story-bg img{width:100%;height:100%;object-fit:cover;filter:blur(14px) brightness(.5) saturate(1.2);transform:scale(1.08)}
.story-in{position:relative;z-index:1;max-width:760px}
.story-p{font-size:clamp(19px,5vw,26px);line-height:1.38;margin:16px 0 22px;font-weight:500}

/* crew strip */
.crew-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.crew-row a{display:block;text-decoration:none;position:relative}
.crew-row img{aspect-ratio:3/4;object-fit:cover;width:100%;filter:grayscale(1) contrast(1.08);transition:filter .35s ease}
.crew-row a:hover img,.crew-row a:focus-visible img{filter:none}
@media (hover:none){.crew-row img{filter:none}}
.crew-name{position:absolute;left:8px;bottom:8px;background:var(--yellow);color:var(--ink);font:700 12px/1 var(--f-mono);letter-spacing:.05em;padding:6px 8px;text-transform:uppercase}

/* full-bleed band with card */
.band-photo{position:relative;min-height:calc(78 * var(--sv));display:flex;align-items:flex-end;overflow:hidden}
.band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.band-card{position:relative;z-index:1;background:var(--bone);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);margin:0 var(--gut) var(--gut);padding:18px 18px 8px;max-width:440px}
.band-card .h3{margin-bottom:10px}

/* two ways in */
.two-way-grid{display:grid;gap:14px}
.way{display:grid;grid-template-columns:42% 1fr;align-items:center;gap:14px;text-decoration:none;border:3px solid var(--ink);background:var(--bone);color:var(--ink);transition:transform .2s ease,box-shadow .2s ease}
.way:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--orange)}
.way-img img{aspect-ratio:1;object-fit:cover;width:100%}
.way-k{display:block;font:700 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.way-h{display:block;font-size:30px;margin-top:6px}

/* ---------- inner page heroes ---------- */
.page-hero-photo{position:relative;min-height:calc(62 * var(--sv));display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.page-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,20,0) 25%,rgba(20,20,20,.85) 100%)}
.page-hero-copy{position:relative;z-index:1;padding:0 var(--gut) 24px;width:100%;max-width:1240px;margin:0 auto}
.page-hero-copy .btn{margin-top:18px}
.page-hero-split{display:grid;grid-template-columns:minmax(0,1fr) 44%;align-items:center;gap:12px;padding:20px var(--gut) 8px;max-width:1240px;margin:0 auto}
.split-media img{aspect-ratio:3/4;object-fit:cover;width:100%;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--orange)}
.split-copy .hand-note{margin-top:10px}
.page-hero-type{padding:36px 0 30px;overflow:hidden}
.type-hero{position:relative}
.type-hero-logos{display:flex;gap:14px;margin-top:22px}
.logo-art{width:40%;max-width:220px;background:var(--bone);padding:6px;border:3px solid var(--ink)}
.page-hero-gallery{padding:28px 0 6px}
.gal-head .lede{margin-bottom:16px}

/* jump nav */
.jump{background:var(--ink);position:relative;z-index:5}
.jump ul{display:flex;gap:6px;overflow-x:auto;list-style:none;margin:0 auto;padding:8px var(--gut);scrollbar-width:none}
.jump ul::-webkit-scrollbar{display:none}
.jump a{display:block;white-space:nowrap;padding:10px 12px;font:700 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bone);text-decoration:none;border:2px solid #4a4743}
.jump a:hover{border-color:var(--orange);color:var(--orange)}

/* ---------- grip lines ---------- */
.line-grid{display:grid;gap:22px}
.line-p{font-size:18px;font-weight:500;max-width:36ch}
.spec{margin:16px 0 0;border-top:2px solid currentColor}
.spec div{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:9px 0;border-bottom:2px solid currentColor}
.spec dt{font:700 13px/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;padding-top:2px}
.spec dd{margin:0;font-size:16px;line-height:1.35}
.spec a{color:inherit}
.line-photos{position:relative;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto;align-items:start}
.ph{border:3px solid var(--ink);background:var(--ink)}
.grit .ph{border-color:var(--bone)}
.ph img{width:100%;aspect-ratio:3/4;object-fit:cover}
.ph-a{grid-column:1/9;grid-row:1;transform:rotate(-1.5deg);position:relative;z-index:1}
.ph-b{grid-column:7/13;grid-row:1;margin-top:38%;transform:rotate(2deg);position:relative;z-index:2;box-shadow:6px 6px 0 var(--orange)}
.ph-c{grid-column:2/7;grid-row:2;margin-top:-18%;transform:rotate(-3deg);position:relative;z-index:3;box-shadow:6px 6px 0 var(--yellow)}
.line-photos-one{display:block}
.ph-wide img{aspect-ratio:4/3}
.swatches{display:flex;gap:16px;list-style:none;margin:14px 0 0;padding:0;font:700 13px var(--f-mono);text-transform:uppercase}
.swatches li{display:flex;align-items:center;gap:8px}
.sw{width:30px;height:30px;border:2px solid var(--ink)}
.sw-black{background:#151515}.sw-orange{background:var(--orange)}.sw-yellow{background:var(--yellow)}

/* features */
.features .h2{margin-bottom:20px}
.feat-grid,.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px}
.feat-img,.why-img{display:block;overflow:hidden;border:3px solid var(--bone);margin-bottom:10px}
.why-img{border-color:var(--ink)}
.feat-img img,.why-img img{aspect-ratio:1;object-fit:cover;width:100%;transition:transform .5s ease}
.feat:hover img,.why-item:hover img{transform:scale(1.05)}
.feat-h{font-size:22px;margin-bottom:6px;color:inherit}
.feat p,.why-item p{font-size:16px;line-height:1.4;margin:0}
.feat p{color:var(--muted-dark)}
.why .h2{margin-bottom:20px}


/* faq accordion */
.faq-grid{display:grid;gap:18px}
.faq-photo{display:none}
.acc-item{border-top:3px solid var(--ink)}
.acc-item:last-child{border-bottom:3px solid var(--ink)}
.acc-dark .acc-item{border-color:var(--bone)}
.acc-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;min-height:52px;font-weight:700;font-size:18px;line-height:1.3}
.acc-item summary::-webkit-details-marker{display:none}
.acc-item summary::after{content:"";flex:none;width:18px;height:18px;background:currentColor;clip-path:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%);transition:transform .25s ease}
.acc-item[open] summary::after{transform:rotate(45deg)}
.acc-item summary:hover span{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px}
.acc-body{padding:0 0 14px;font-size:17px}
.acc-body a{color:inherit}
.acc-dark .acc-body a{color:var(--yellow)}
.steps{margin:0;padding-left:22px}
.steps li{padding:3px 0}

/* forms */
.notify-in{display:grid;gap:16px}
.form{display:grid;gap:12px}
.form-inline{grid-template-columns:1fr;align-items:end}
.field{display:grid;gap:6px}
.field-l{font:700 13px var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.field-l em{font-style:normal;font-weight:400;text-transform:none;letter-spacing:0;opacity:.75}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{width:100%;font:500 16px/1.3 var(--f-body);padding:12px 12px;min-height:50px;border:3px solid var(--ink);background:var(--bone);color:var(--ink);border-radius:0;-webkit-appearance:none;appearance:none}
.grit .form input{border-color:var(--bone)}
.form input:focus,.form textarea:focus{outline:3px solid var(--orange);outline-offset:0}
.form [aria-invalid=true]{border-color:#c4260d;background:#fff1ec}
.form-row{display:grid;gap:12px}
.checks{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.checks legend{margin-bottom:8px}
.checks label{display:inline-flex}
.checks input{position:absolute;opacity:0;width:1px;height:1px}
.checks span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:2px solid var(--ink);font:700 13px var(--f-mono);cursor:pointer;transition:background-color .15s}
.checks input:checked+span{background:var(--ink);color:var(--bone)}
.checks input:checked+span::before{content:"✓";margin-right:6px;color:var(--yellow)}
.checks input:focus-visible+span{outline:3px solid var(--orange);outline-offset:2px}
.form-msg{font:700 14px/1.4 var(--f-mono);margin:0;min-height:1em}
.field-err{font:700 14px/1.3 var(--f-mono);color:#b3200a}
.field-err.on-dark{color:#ff9b85}
.spec a,.acc-body a,.sec-note a,.ug-links a{display:inline-block;padding:10px 0;margin:-10px 0}
.form-offline{display:grid;gap:14px;justify-items:start}
.form-offline-ws{background:var(--bone);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--orange);padding:22px 18px}
.offline-k{font:700 13px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.offline-h{font:400 clamp(26px,7vw,36px)/1 var(--f-display);text-transform:uppercase;margin:0}
.form-msg.ok::before{content:"✓ ";color:#2f8a3a;font-size:18px}
.grit .form-msg.ok::before{color:#7fe08a}
.form-msg.err{color:#b3200a}
.grit .form-msg.err{color:#ff9b85}
.form-msg a{color:inherit}
.form.is-sent .field,.form.is-sent .form-row,.form.is-sent .checks,.form.is-sent button[type=submit]{display:none}

/* ---------- crew ---------- */
.rider{display:grid;gap:16px;padding-bottom:36px;margin-bottom:36px;border-bottom:3px solid var(--ink)}
.rider-photos{display:grid;grid-template-columns:62% 1fr;gap:10px;align-items:end}
.rp{border:3px solid var(--ink)}
.rp img{width:100%;aspect-ratio:3/4;object-fit:cover}
.rp-side{transform:rotate(2.5deg);box-shadow:5px 5px 0 var(--orange);margin-bottom:18px}
.rider-copy p{font-size:17px;max-width:38ch}
.rider-copy .h2{margin-bottom:10px}
.rider-pair{display:grid;gap:14px}
.rider-mini{border:3px solid var(--ink);background:var(--bone);padding:18px 18px 6px;box-shadow:6px 6px 0 var(--ink)}
.rider-mini .h3{margin-bottom:8px}
.swipe-tees{grid-auto-columns:64%}
.card-tee img{aspect-ratio:3/4;object-fit:cover;width:100%;border:3px solid var(--bone)}
.card-tee .card-name{font-size:22px}
.mosaic{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:150px;grid-auto-flow:dense;gap:10px}
.mosaic li{overflow:hidden;border:3px solid var(--ink)}
.mosaic .m-tall{grid-row:span 2}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mosaic li:hover img{transform:scale(1.06)}

/* ---------- shops ---------- */
.stockists{display:grid;gap:12px}
.stockist{border:3px solid var(--bone);padding:18px 18px 8px}
.stockist p{margin:0 0 8px;color:var(--muted-dark)}
.stockist a{color:var(--bone)}
.stockist a[href^=tel]{display:inline-block;padding:10px 0}
.stockist .link-arrow{color:var(--yellow)}
.stockist-name{font-size:26px;margin-bottom:10px;color:var(--bone)}
.stockist-you{border-style:dashed;border-color:var(--yellow)}
.ws-grid{display:grid;gap:22px}
.ws-photo{display:none}
.form-ws{background:var(--bone);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--orange);padding:18px}

/* ---------- story ---------- */
.chapter-grid{display:grid;gap:18px;align-items:center}
.chapter-photo{border:3px solid var(--ink);box-shadow:8px 8px 0 var(--yellow)}
.chapter-flip .chapter-photo{box-shadow:8px 8px 0 var(--orange)}
.chapter-photo img{aspect-ratio:4/3;object-fit:cover;object-position:50% 22%;width:100%}
.chapter-copy p{font-size:18px;max-width:40ch}
.ug-lede{font-size:18px;max-width:52ch;margin-bottom:20px}
.ug-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ug-grid li{border:3px solid var(--bone);overflow:hidden}
.ug-grid img{width:100%;aspect-ratio:3/4;object-fit:cover}
.ug-big{grid-column:1/-1}
.ug-big img{aspect-ratio:4/3}
.ug-links{margin-top:18px;font-size:16px}
.ug-links a{color:var(--yellow)}
.spot-row{display:grid;grid-auto-flow:column;grid-auto-columns:60%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gut));padding:10px var(--gut) 18px}
.spot-row li{scroll-snap-align:start;border:3px solid var(--ink);background:var(--bone);padding:6px}
.spot-row img{aspect-ratio:3/4;object-fit:cover;width:100%}
.cta-band{background:var(--yellow)}
.cta-in{display:grid;gap:16px;justify-items:start}

/* ---------- gallery ---------- */
.gallery{padding-top:10px}
.tiles{list-style:none;margin:0;padding:0;columns:2;column-gap:10px}
.tile{break-inside:avoid;margin:0 0 10px}
.tile[hidden]{display:none}
.tile-btn{display:block;width:100%;padding:0;border:3px solid var(--ink);background:var(--grit) var(--grit-tex);cursor:zoom-in;overflow:hidden}
.tile-btn img{width:100%;transition:transform .45s ease,opacity .3s}
.tile-btn:hover img{transform:scale(1.04)}
.lightbox{border:0;padding:0;margin:0;width:100vw;height:100%;max-width:none;max-height:none;background:rgba(14,14,14,.96);color:var(--bone)}
.lightbox::backdrop{background:rgba(14,14,14,.9)}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lb-fig{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%;padding:56px 12px 70px}
.lb-img{max-width:100%;max-height:calc(100 * var(--sv) - 170px);width:auto;height:auto;object-fit:contain}
.lb-cap{font-size:15px;line-height:1.4;max-width:60ch;text-align:center;color:var(--muted-dark)}
.lb-btn{position:absolute;width:52px;height:52px;border:2px solid var(--bone);background:var(--ink);color:var(--bone);font-size:30px;line-height:1;cursor:pointer}
.lb-btn:hover{background:var(--orange);color:var(--ink);border-color:var(--orange)}
.lb-close{top:10px;right:10px}
.lb-prev{left:10px;bottom:12px}
.lb-next{right:10px;bottom:12px}
.lb-count{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);margin:0;font:700 13px var(--f-mono)}

/* ---------- footer ---------- */
.site-foot{background:var(--ink) url("paw-tile.svg");background-size:132px 132px;color:var(--bone);padding:32px 0 18px}
.foot-in{max-width:1240px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:1fr 1fr;gap:20px 16px}
.foot-brand{grid-column:1/-1}
.foot-brand p{margin:10px 0 0;color:var(--muted-dark);font-size:16px}
.logo-foot .mark{height:40px}
.logo-foot .logo-sheet{padding:9px 14px}
.foot-h{font:700 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);margin:0 0 8px}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li a{display:inline-block;padding:7px 0;font-size:16px;text-decoration:none}
.site-foot li a:hover{color:var(--orange);text-decoration:underline}
.foot-legal{max-width:1240px;margin:22px auto 0;padding:14px var(--gut) 0;border-top:1px solid #3a3835;font:400 12px var(--f-mono);color:var(--muted-dark)}


/* ================= GRIT ================= */
/* film grain over the whole page: one fixed layer, never in the way */
body::after{content:"";position:fixed;inset:0;z-index:150;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E");opacity:.22;mix-blend-mode:overlay}
/* photocopied paper: toner specks and a faint edge burn */
.xerox{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='x'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -9 4.6'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23x)' opacity='.16'/%3E%3C/svg%3E"),var(--grain);box-shadow:inset 0 0 90px rgba(60,44,20,.18)}
/* rough photos: harder contrast, a little colour bled out; back to life on hover */
main img{filter:contrast(1.12) saturate(.84) brightness(.97)}
main .logo-art img{filter:none}
main a:hover img,main .tile-btn:hover img{filter:contrast(1.05) saturate(1)}
.crew-row img{filter:grayscale(1) contrast(1.15)}
/* torn top edge where a section starts */
.rip{position:relative}
.rip::before{content:"";position:absolute;left:0;right:0;top:-15px;height:16px;z-index:3;background:inherit;clip-path:polygon(0 100%,0.0% 44%,1.5% 69%,2.9% 60%,4.9% 24%,7.2% 23%,9.4% 25%,10.8% 52%,13.8% 29%,15.5% 67%,18.8% 63%,20.8% 93%,22.1% 84%,24.0% 31%,25.4% 43%,28.4% 34%,30.9% 68%,32.9% 61%,34.3% 24%,35.9% 71%,38.1% 44%,40.5% 54%,42.4% 80%,45.1% 38%,47.6% 59%,50.7% 75%,52.6% 94%,54.0% 51%,56.9% 31%,59.2% 23%,61.8% 77%,64.3% 86%,66.2% 72%,68.7% 63%,70.9% 83%,74.2% 56%,76.8% 25%,79.6% 69%,83.0% 82%,84.8% 49%,87.5% 22%,89.7% 33%,91.1% 24%,94.0% 30%,95.8% 49%,98.9% 26%,100% 60%,100% 100%);pointer-events:none}
.band-photo.rip::before{background:var(--ink)}
.grit{position:relative}
/* claw marks dragged across the dark sections */
.grit::after{content:"";position:absolute;right:-30px;bottom:-20px;width:min(46vw,380px);height:min(46vw,380px);pointer-events:none;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 8l14 70M46 4l10 76M74 10l6 66' fill='none' stroke='%23ff6a1a' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;transform:rotate(-14deg)}
.grit>.wrap,.grit>div{position:relative;z-index:1}
/* misprinted headlines: ink pulled a few pixels off register */
.hero-h,.h1,.h1-xl{text-shadow:3px 3px 0 rgba(255,106,26,.75),-1px 0 0 rgba(20,20,20,.25)}
.xerox .h2{text-shadow:2px 2px 0 rgba(255,106,26,.35)}
.grit .h2{text-shadow:2px 2px 0 rgba(0,0,0,.5)}
/* marker scrawls */
.scrawl{display:inline-flex;align-items:center;gap:6px;font:400 22px/1.1 'Permanent Marker',var(--f-body);color:var(--orange-ink);transform:rotate(-4deg)}
.grit .scrawl,.scrawl-y{color:var(--yellow)}
.scrawl .arrow{width:26px}
.scrawl-link{margin-top:18px;min-height:44px;text-decoration:underline wavy;text-decoration-thickness:2px;text-underline-offset:6px}
.scrawl-link:hover{color:var(--ink)}
/* photos taped to the page */
.taped{position:relative}
.taped::before,.taped::after{content:"";position:absolute;z-index:2;width:74px;height:22px;background:rgba(240,226,170,.72);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.taped::before{top:-9px;left:12px;transform:rotate(-8deg)}
.taped::after{bottom:-9px;right:12px;transform:rotate(-6deg)}
.tape{background-image:var(--grain)}
/* story: the roll */
.roll{padding:var(--sec) 0}
.frame{display:grid;gap:14px;margin-bottom:46px}
.frame-photo{position:relative;border:3px solid var(--bone);background:var(--ink)}
.frame-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%}
.frame-no{display:inline-block;font:700 13px var(--f-mono);letter-spacing:.14em;background:var(--yellow);color:var(--ink);padding:5px 8px;margin:0 0 10px}
.frame-photo .frame-no{position:absolute;left:-3px;top:-3px;margin:0}
.frame-sub{font-size:20px;margin-top:6px}
.credit{font:700 15px/1.3 var(--f-mono);color:var(--yellow);margin:8px 0 0}
.frame-text{padding:10px 0 40px;border-top:2px dashed #4a4743;padding-top:24px}
.frame-text .link-arrow{color:var(--yellow)}
.reveal-tre{position:relative;padding:28px 0 20px;border-top:2px dashed #4a4743;overflow:hidden}
.tre-h{font-size:clamp(110px,40vw,300px);line-height:.8;color:var(--orange);text-shadow:5px 5px 0 rgba(0,0,0,.6)}
.tre-sub{font:400 clamp(26px,7vw,46px)/1.05 var(--f-display);text-transform:uppercase;margin:16px 0 14px}
.reveal-tre .link-arrow{color:var(--yellow)}
.claw-mark{position:absolute;right:-10px;top:10px;width:46%;max-width:300px;color:var(--orange);opacity:.18;pointer-events:none}
.claw-mark .claw{width:100%;height:auto;display:block}
.story-h span{display:inline-block}
.story-h span:nth-child(2){transform:rotate(-3deg);opacity:.75}
.story-h span:nth-child(3){transform:rotate(2deg);opacity:.5}
.story-p{font:400 clamp(34px,9vw,64px)/1 var(--f-display);text-transform:uppercase;color:var(--orange)}
/* crew */
.rp{position:relative}
.rp-credit{position:absolute;left:-3px;bottom:-3px;font:700 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--bone);padding:6px 8px}
.rider-tre .h2{color:var(--orange-ink)}
.rider-pair-one{grid-template-columns:1fr!important;max-width:520px}
@media (min-width:761px){
  .frame{grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;margin-bottom:72px}
  .frame-flip .frame-photo{order:2}
  .frame-text{padding:36px 0 60px}
  .reveal-tre{padding:56px 0 40px}
  .scrawl{font-size:26px}
}
@media (prefers-reduced-motion:reduce){ body::after{opacity:.15} }
@media (hover:none){ .crew-row img{filter:contrast(1.1) saturate(.85)} }

/* ---------- reveal (only once GSAP is running) ---------- */
.anim [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.anim [data-reveal].in{opacity:1;transform:none}

/* ---------- small phones ---------- */
@media (max-width:359px){
  :root{--gut:14px}
  .signs-grid{grid-template-columns:1fr 33%}
  .feat-grid,.why-grid{grid-template-columns:1fr}
  .page-hero-split{grid-template-columns:1fr 40%}
  .btn{font-size:18px;padding:0 16px}
}

/* ---------- desktop ---------- */
@media (min-width:761px){
  :root{--gut:32px;--sec:88px;--sec-sm:64px;--head-h:72px}
  body{font-size:18px}
  .nav,.head-cta{display:flex}
  .head-cta{display:inline-flex}
  .menu-btn,.menu-panel{display:none!important}
  .hero{min-height:calc(100 * var(--sv) - var(--head-h))}
  .hero-img{object-position:50% 30%}
  .hero-scrim{background:linear-gradient(90deg,rgba(20,20,20,.75) 0%,rgba(20,20,20,.25) 55%,rgba(20,20,20,0) 100%),linear-gradient(180deg,rgba(20,20,20,0) 50%,rgba(20,20,20,.6) 100%)}
  .hero-copy{padding-bottom:64px}
  .hero-h{font-size:clamp(80px,min(10vw,calc(15 * var(--sv))),160px)}
  .hero-sub{font-size:21px}
  .hero-sheet{display:block;position:absolute;z-index:1;right:-30px;bottom:54px;width:40%;max-width:600px;transform:rotate(-6deg);background:var(--orange) var(--grain);border:4px solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:18px 40px 18px 34px;overflow:hidden}
  .hero-sheet .mark{display:block;width:100%;height:auto;fill:var(--ink)}
  .h2{font-size:clamp(44px,5vw,72px)}
  .signs-grid{grid-template-columns:1.2fr .8fr;gap:64px;align-items:center}
  .signs-photo{margin-top:0}
  .sign-list li{font-size:22px;padding:14px 0}
  .lineup .hand-note{display:none}
  .swipe{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:0;gap:20px}
  .swipe-tees{grid-template-columns:repeat(5,1fr)}
  .story-band{padding:120px 0}
  .crew-row{grid-template-columns:repeat(4,1fr);gap:18px}
  .crew-name{font-size:13px}
  .band-photo{min-height:calc(86 * var(--sv))}
  .band-card{margin:0 0 64px calc((100vw - min(1240px,100vw)) / 2 + var(--gut));padding:26px 26px 14px}
  .two-way-grid{grid-template-columns:1fr 1fr;gap:24px}
  .way-h{font-size:44px}
  .page-hero-photo{min-height:calc(72 * var(--sv))}
  .page-hero-copy{padding-bottom:56px}
  .page-hero-split{grid-template-columns:1fr 1fr;gap:48px;padding:56px var(--gut) 24px}
  .h1{font-size:clamp(80px,9vw,140px)}
  .lede{font-size:26px}
  .type-hero-logos{position:absolute;right:var(--gut);top:0;flex-direction:column;margin:0;width:22%}
  .logo-art{width:100%}
  .jump ul{justify-content:center;max-width:1240px}
  .line-grid{grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
  .line-flip .line-copy{order:2}
  .line-p{font-size:22px}
  .feat-grid,.why-grid{grid-template-columns:repeat(4,1fr);gap:24px}
  .feat-h{font-size:26px}
  .faq-grid{grid-template-columns:.8fr 1.2fr;gap:64px}
  .faq-photo{display:block;margin-top:28px;max-width:360px;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--orange)}
  .faq-photo img{aspect-ratio:4/5;object-fit:cover;width:100%}
  .notify-in{grid-template-columns:1fr 1fr;align-items:center;gap:48px}
  .form-inline{grid-template-columns:1fr auto;column-gap:12px}
  .form-inline .form-msg{grid-column:1/-1}
  .form-row{grid-template-columns:1fr 1fr}
  .rider{grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .rider-flip .rider-photos{order:2}
  .rider-pair{grid-template-columns:1fr 1fr;gap:28px}
  .mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:16px}
  .stockists{grid-template-columns:repeat(3,1fr);gap:20px}
  .ws-grid{grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
  .ws-photo{display:block;max-width:300px;margin-top:24px;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--yellow)}
  .form-ws{padding:28px}
  .chapter-grid{grid-template-columns:1fr 1fr;gap:64px}
  .chapter-flip .chapter-copy{order:2}
  .ug-grid{grid-template-columns:repeat(4,1fr);gap:16px}
  .ug-big{grid-column:span 2;grid-row:span 2}
  .ug-big img{aspect-ratio:auto;height:100%}
  .spot-row{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:10px 0}
  .tiles{columns:3;column-gap:14px}
  .tile{margin-bottom:14px}
  .lb-prev{left:16px;bottom:auto;top:50%;transform:translateY(-50%)}
  .lb-next{right:16px;bottom:auto;top:50%;transform:translateY(-50%)}
  .lb-fig{padding:56px 90px}
  .lb-img{max-height:calc(100 * var(--sv) - 150px)}
  .foot-in{grid-template-columns:2fr 1fr 1fr}
  .foot-brand{grid-column:auto}
  .cta-in{grid-template-columns:1fr auto;align-items:center}
}
@media (min-width:1100px){ .tiles{columns:4} }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ticker-track{animation:none!important;flex-wrap:wrap;width:auto}
  .ticker-track [aria-hidden=true]{display:none}
  .ticker-pause{display:none}
  .anim [data-reveal]{opacity:1;transform:none}
}

/* ---------- home: photo wall ---------- */
.wall-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px;grid-auto-flow:dense;gap:8px}
.wall-grid li{min-width:0;position:relative}
.wall-grid a{display:block;height:100%;border:3px solid var(--ink);overflow:hidden;background:var(--ink);box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.wall-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .4s ease;filter:contrast(1.06) saturate(.92)}
.wall-grid a:hover img,.wall-grid a:focus-visible img{transform:scale(1.05);filter:none}
.wall-grid .w-tall{grid-row:span 2}
.wall-grid .w-big{grid-column:span 2;grid-row:span 2}
.wall-grid .w-wide{grid-column:span 2}
.wall-grid li:nth-child(3n) a{transform:rotate(-.6deg)}
.wall-grid li:nth-child(4n+1) a{transform:rotate(.5deg)}
@media (min-width:760px){
  .wall-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:170px;gap:12px}
  .wall-grid .w-big{grid-column:span 3;grid-row:span 2}
}

/* ---------- crew: Tre sequence ---------- */
.rider-aside{font:700 14px/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.04em;margin-top:-4px}
.tre-seq{margin:-8px 0 48px}
.seq{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.seq li{border:3px solid var(--ink);background:var(--ink);overflow:hidden}
.seq img{width:100%;aspect-ratio:3/4;object-fit:cover}
.seq li:nth-child(2){transform:translateY(10px) rotate(.8deg)}
.seq-cap{display:flex;align-items:baseline;gap:14px;margin:18px 0 0}
.seq-cap .credit{color:var(--ink);margin:0;font-size:13px}
@media (min-width:760px){ .seq{gap:12px} .tre-seq{margin:-20px 0 72px} }

/* ---------- story: Tre poster + strip ---------- */
.tre-poster{position:relative;z-index:1;margin:28px 0 0;width:min(78%,340px);border:3px solid var(--ink);background:var(--ink)}
.tre-poster img{width:100%}
.tre-poster .credit{position:absolute;left:0;bottom:-30px;font-size:12px}
.frame-strip{padding:56px 0 24px;border-top:2px dashed #4a4743}
.strip-row{list-style:none;margin:10px 0 18px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.strip-row li{border:3px solid #000;overflow:hidden;background:#000}
.strip-row img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:contrast(1.1)}
.strip-row li:nth-child(odd){transform:rotate(-.7deg)}
.strip-row li:nth-child(even){transform:rotate(.6deg) translateY(8px)}
@media (min-width:760px){
  .reveal-tre{min-height:520px}
  .tre-poster{position:absolute;right:4%;top:56px;margin:0;width:min(30%,320px);transform:rotate(3deg)}
  .strip-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
}
.wall-grid .w-wide img{object-position:50% 28%}

/* ---------- gallery: row-ordered contact sheet (Tre leads) ---------- */
.tiles{columns:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;grid-auto-flow:dense}
.tile{margin:0;min-width:0}
.tile-btn{height:100%}
.tile-btn img{height:100%;aspect-ratio:4/5;object-fit:cover}
.tile:first-child{grid-column:span 2;grid-row:span 2}
.tile:first-child .tile-btn img{aspect-ratio:auto}
@media (min-width:760px){ .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .tile{margin:0} }
@media (min-width:1100px){ .tiles{grid-template-columns:repeat(4,minmax(0,1fr));columns:auto} }

/* ---------- clips ---------- */
.clip{margin:0;position:relative;background:#000;border:3px solid var(--ink);overflow:hidden}
.clip video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#000}
.clip-wide video{aspect-ratio:16/9}
.clip figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.78));display:flex;flex-direction:column;gap:2px;pointer-events:none}
.clip-l{font:400 clamp(20px,2.2vw,30px)/1 var(--f-display);text-transform:uppercase;color:#fff;letter-spacing:.01em}
.clip-c{font:700 12px/1.3 var(--f-mono);text-transform:uppercase;color:var(--yellow,#ffc629);letter-spacing:.04em}
.clip-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.clip-grid>li{min-width:0}
@media (min-width:760px){.clip-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media (min-width:1100px){.clip-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.reel{list-style:none;margin:0;padding:0 0 6px;display:grid;grid-auto-flow:column;grid-auto-columns:min(62vw,300px);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.reel>li{scroll-snap-align:start;min-width:0}
@media (min-width:1100px){.reel{grid-auto-columns:calc((100% - 40px)/5)}}

/* ---------- image-first blocks (round 4) ---------- */
.big-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:4px;background:var(--ink)}
.big-tiles a,.two-tiles .tt{position:relative;display:block;overflow:hidden;background:#000}
.big-tiles img,.two-tiles img{width:100%;height:min(78svh,620px);object-fit:cover;transition:transform .6s ease,filter .4s ease;filter:contrast(1.05) saturate(.95)}
.big-tiles a:hover img,.big-tiles a:focus-visible img,.two-tiles .tt:hover img,.two-tiles .tt:focus-visible img{transform:scale(1.04);filter:none}
.big-t{position:absolute;left:16px;bottom:14px;font:400 clamp(44px,7vw,104px)/.88 var(--f-display);text-transform:uppercase;color:#fff;text-shadow:3px 3px 0 var(--ink),0 0 30px rgba(0,0,0,.45);letter-spacing:.005em}
.big-tiles a::after,.two-tiles .tt::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none}
.big-t{z-index:1}
@media (min-width:760px){
  .big-tiles{grid-template-columns:1fr 1fr}
  .big-tiles img{height:min(86svh,760px)}
  .big-t{left:28px;bottom:22px}
}
.poster{padding:0;background:#0e0d0c}
.poster-in{position:relative;display:grid;grid-template-columns:1fr;gap:4px}
.poster-photo{margin:0}
.poster-photo img{width:100%;height:min(92svh,820px);object-fit:cover;object-position:50% 30%}
.poster-clip{border:0}
.poster-clip video{height:min(92svh,820px);aspect-ratio:auto}
.poster-type{position:absolute;left:16px;top:16px;z-index:2;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.poster-h{margin:0;font:400 clamp(110px,22vw,340px)/.8 var(--f-display);text-transform:uppercase;color:var(--orange);text-shadow:6px 6px 0 var(--ink)}
@media (min-width:760px){ .poster-in{grid-template-columns:1fr 1fr} .poster-type{left:32px;top:28px} }
.band-tall{min-height:min(96svh,900px)}
.band-over{position:absolute;left:16px;bottom:20px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.band-h{margin:0;font:400 clamp(72px,13vw,200px)/.85 var(--f-display);text-transform:uppercase;color:#fff;text-shadow:5px 5px 0 var(--ink)}
@media (min-width:760px){ .band-over{left:40px;bottom:36px} }
.two-tiles{display:grid;grid-template-columns:1fr;gap:4px;background:var(--ink)}
@media (min-width:760px){ .two-tiles{grid-template-columns:1fr 1fr} }
.vids .sec-head,.wall .sec-head{margin-bottom:18px}
.hero-page{min-height:min(80svh,760px)}
.pline{padding:4px 0 0;background:var(--ink)}
.pline-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;position:relative}
.pline-grid figure{margin:0;overflow:hidden;background:#000}
.pline-grid img{width:100%;height:100%;object-fit:cover}
.pl-a{grid-column:1 / -1;height:min(80svh,680px)}
.pl-b,.pl-c{height:min(46svh,380px)}
.pl-name{position:absolute;left:16px;top:16px;z-index:2;max-width:calc(100% - 32px)}
.pl-h{margin:0 0 10px;font:400 clamp(56px,10vw,150px)/.86 var(--f-display);text-transform:uppercase;color:#fff;text-shadow:4px 4px 0 var(--ink),0 0 34px rgba(0,0,0,.5)}
.pl-spec{display:inline-block;margin:0 0 10px;padding:6px 10px;background:var(--yellow);color:var(--ink);font:700 12px/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.03em}
.pl-name .link-arrow{display:flex;width:max-content;max-width:100%;background:rgba(0,0,0,.6);padding:6px 10px}
@media (min-width:760px){
  .pline-grid{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;height:min(92svh,860px)}
  .pl-a{grid-column:1;grid-row:1 / 3;height:auto}
  .pl-b,.pl-c{height:auto}
  .pline-flip{grid-template-columns:1fr 2fr}
  .pline-flip .pl-a{grid-column:2}
  .pline-flip .pl-b,.pline-flip .pl-c{grid-column:1}
  .pline-flip .pl-name{left:auto;right:28px;text-align:right}
  .pl-name{left:28px;top:28px}
}
.team{background:var(--ink);padding:4px 0 0}
.tm{position:relative;margin:0 0 4px}
.tm-media{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.tm-media figure{margin:0;overflow:hidden;background:#000}
.tm-media img{width:100%;height:100%;object-fit:cover}
.tm-media .clip{border:0}
.tm-tre .tm-media figure:first-child{grid-column:1 / -1;height:min(80svh,700px)}
.tm-tre .tm-media .clip video,.tm-tre .tm-media figure:last-child{height:min(70svh,560px)}
.tm-two figure{height:min(62svh,520px)}
.tm-two figure:first-child{grid-column:1 / -1}
.tm-name{position:absolute;left:16px;top:16px;z-index:2}
.tm-h{margin:0 0 8px;font:400 clamp(52px,9vw,140px)/.86 var(--f-display);text-transform:uppercase;color:#fff;text-shadow:4px 4px 0 var(--ink),0 0 30px rgba(0,0,0,.5)}
.tm-name .link-arrow{background:rgba(0,0,0,.6);padding:6px 10px;display:inline-flex}
.tm-text{padding:56px 16px 40px;background:#141312}
.tm-text .tm-name{position:static}
.seq-band{padding:24px 16px 32px;background:#141312;margin:0 0 4px}
.seq-band .seq-cap .credit{color:var(--yellow)}
@media (min-width:760px){
  .tm-tre .tm-media{grid-template-columns:2fr 1fr 1fr;height:min(92svh,860px)}
  .tm-tre .tm-media figure:first-child{grid-column:auto;height:auto}
  .tm-tre .tm-media .clip video,.tm-tre .tm-media figure:last-child{height:100%}
  .tm-tre .tm-media .clip{height:100%}
  .tm-two{grid-template-columns:3fr 2fr;height:min(88svh,820px)}
  .tm-two figure,.tm-two figure:first-child{grid-column:auto;height:auto}
  .tm-name{left:32px;top:28px}
  .tm-text{padding:72px 40px 56px}
  .seq-band{padding:36px 40px 44px}
}
.dealer-wall{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--ink)}
.dealer-wall figure{margin:0;height:min(50svh,420px);overflow:hidden}
.dealer-wall img{width:100%;height:100%;object-fit:cover}
@media (min-width:760px){.dealer-wall{grid-template-columns:repeat(4,1fr)}.dealer-wall figure{height:min(70svh,560px)}}
.vids-page{padding:28px 0 64px;min-height:80svh}
.vp-head{margin-bottom:20px}
.frame-clip{position:relative;max-width:420px}
.frame-clip .frame-no{position:absolute;left:10px;top:10px;z-index:2}
.vtile{grid-row:span 2;min-width:0}
.vtile .clip{height:100%}
.vtile .clip video{height:100%;aspect-ratio:auto}

/* ---------- hero flipbook ---------- */
.flip{position:absolute;inset:0;overflow:hidden;background:#000}
.flip-f{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);filter:contrast(1.08) saturate(1.05)}
.flip-f.on{opacity:1}
.flip-pause{position:absolute;right:12px;top:12px;z-index:3;width:44px;height:44px;border:2px solid var(--bone);background:rgba(20,20,20,.55);color:var(--bone);font-size:13px;cursor:pointer}
.flip-pause[aria-pressed="true"]{background:var(--orange);color:var(--ink);border-color:var(--ink)}
.flip-pause:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.tm-two .clip{height:min(62svh,520px)}
.tm-two .clip:first-child{grid-column:1 / -1}
.tm-two .clip video{height:100%;aspect-ratio:auto}
@media (min-width:760px){.tm-two .clip,.tm-two .clip:first-child{grid-column:auto;height:auto}}
.tm-one{grid-template-columns:1fr}
.tm-one .clip{border:0;height:min(80svh,720px)}
.tm-one .clip video{height:100%;aspect-ratio:auto}
.hero:not(.hero-page) .hero-img{object-position:49% 50%}
@media (min-width:900px){.hero:not(.hero-page) .hero-img{object-position:50% 40%}.hero:not(.hero-page) .hero-sheet{display:none}.hero:not(.hero-page) .hero-copy{display:flex;flex-direction:column;align-items:flex-end;text-align:right}.hero:not(.hero-page) .hero-ctas{justify-content:flex-end}}
@media (min-width:900px){
  .hero:not(.hero-page) .hero-media{right:auto;width:62%;border-right:4px solid var(--orange)}
  .hero:not(.hero-page) .hero-img{object-position:50% 46%}
  .hero:not(.hero-page) .hero-scrim{background:linear-gradient(90deg,rgba(20,20,20,0) 0 50%,rgba(20,20,20,.35) 62%,rgba(20,20,20,0) 62.1%)}
}
/* product-first tiles: studio shots on white */
.big-tiles .prod a{background:#fff}
.big-tiles .prod img{object-fit:contain;padding:28px 0 72px;filter:none;background:#fff}
.big-tiles .prod a::after{display:none}
.big-tiles .prod .big-t{color:var(--ink);text-shadow:3px 3px 0 var(--orange)}
.pl-prod{background:#fff}
.pline-grid .pl-prod img{object-fit:contain;padding:36px 12px;filter:none}
.pline-grid .pl-prod ~ .pl-name .pl-h{color:var(--ink);text-shadow:4px 4px 0 var(--orange)}
.pl-more{list-style:none;margin:0;padding:4px 0 0;display:grid;grid-auto-flow:column;grid-auto-columns:min(56vw,300px);gap:4px;overflow-x:auto;scroll-snap-type:x mandatory;background:var(--ink)}
.pl-more li{scroll-snap-align:start;height:min(52svh,400px);overflow:hidden}
.pl-more img{width:100%;height:100%;object-fit:cover}
@media (min-width:1100px){.pl-more{grid-auto-columns:calc((100% - 16px)/5)}}
.pline-grid .pl-prod{background:#fff}
@media (max-width:759px){.pline-grid .pl-prod{height:min(92svh,760px)}.pline-grid .pl-prod img{padding:190px 12px 20px}}
/* homepage line tiles: 2-3 lifestyle photos per line */
.big-tiles .col-imgs{display:grid;grid-template-columns:3fr 2fr;grid-template-rows:1fr 1fr;gap:4px;height:min(78svh,620px);background:var(--ink)}
.big-tiles .col-imgs img{height:100%;min-height:0}
.big-tiles .col-imgs img:first-child{grid-row:1 / 3}
.big-tiles .col2 .col-imgs{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.big-tiles .col2 .col-imgs img:first-child{grid-row:auto}
@media (min-width:760px){.big-tiles .col-imgs{height:min(86svh,760px)}}
@media (min-width:760px){.big-tiles>li:last-child:nth-child(odd){grid-column:1 / -1}}

/* ---------- moving clip slider ---------- */
.slide-sec{padding:28px 0 40px;background:#0e0d0c}
.slide{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.slide::-webkit-scrollbar{display:none}
.slide:focus-visible{box-shadow:inset 0 0 0 3px var(--yellow)}
.slide.dragging{cursor:grabbing}
.slide-track{list-style:none;margin:0;padding:0 10px;display:flex;gap:10px;width:max-content}
.slide-track>li{flex:0 0 min(58vw,300px)}
.slide-track>li:nth-child(odd) .clip{transform:rotate(-.8deg)}
.slide-track>li:nth-child(even) .clip{transform:rotate(.7deg) translateY(10px)}
.slide-track video{pointer-events:none}
.slide-ui{display:flex;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap}
.slide-bar{flex:1 1 200px;height:6px;background:rgba(237,231,218,.18);position:relative;overflow:hidden}
.slide-fill{position:absolute;inset:0;background:var(--orange);transform-origin:0 50%;transform:scaleX(0)}
.slide-btns{display:flex;align-items:center;gap:8px}
.slide-btn{width:48px;height:48px;border:2px solid var(--bone);background:transparent;color:var(--bone);font:700 18px/1 var(--f-mono);cursor:pointer}
.slide-btn:hover,.slide-btn:focus-visible{background:var(--orange);color:var(--ink);border-color:var(--orange);outline:none}
.slide-btns .link-arrow{margin-left:10px}
@media (min-width:1100px){.slide-track>li{flex-basis:clamp(240px,19vw,320px)}}

/* ---------- hero heading: LOOK / D-O-W-N stepping down ---------- */
.hero-h.look{position:relative;display:inline-block;font-size:clamp(64px,min(19vw,calc(9.2 * var(--sv))),176px);line-height:.84;text-shadow:none}
.look .lk-1{display:block;color:transparent;-webkit-text-stroke:2px var(--bone);letter-spacing:.06em;font-size:.62em;padding-left:.04em}
.look .lk-2{display:flex;align-items:flex-start;color:var(--orange);text-shadow:.05em .05em 0 var(--ink),.08em .08em 0 rgba(255,198,41,.9)}
.look .lk-2>span{display:inline-block}
.look .lk-2>span:nth-child(1){transform:translateY(0) rotate(-2deg)}
.look .lk-2>span:nth-child(2){transform:translateY(.07em) rotate(1.5deg)}
.look .lk-2>span:nth-child(3){transform:translateY(.15em) rotate(-1deg)}
.look .lk-2>span:nth-child(4){transform:translateY(.24em) rotate(2deg)}
.look .lk-2>.lk-dot{transform:translateY(.34em);color:var(--yellow)}
.look .lk-arrow{position:absolute;width:.5em;color:var(--yellow);left:-.42em;bottom:-.34em;transform:rotate(28deg)}
.look .lk-arrow svg{width:100%;height:auto}
.js .hero-h.look .lk-2>span{animation:lkDrop .7s cubic-bezier(.2,.8,.2,1.2) both}
.js .hero-h.look .lk-2>span:nth-child(2){animation-delay:.06s}.js .hero-h.look .lk-2>span:nth-child(3){animation-delay:.12s}.js .hero-h.look .lk-2>span:nth-child(4){animation-delay:.18s}.js .hero-h.look .lk-2>span:nth-child(5){animation-delay:.24s}
@keyframes lkDrop{from{opacity:0;translate:0 -.5em}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.js .hero-h.look .lk-2>span{animation:none}}
.hero:not(.hero-page) .hero-copy{padding-bottom:44px}
@media (min-width:900px){.look .lk-arrow{left:-.55em;bottom:.1em;transform:rotate(60deg) scaleX(-1)}.hero:not(.hero-page) .hero-ctas{margin-top:.5em}}
.hero:not(.hero-page) .hero-ctas{margin-top:clamp(34px,6vw,64px)}
@media (min-width:900px){
  .hero:not(.hero-page) .hero-copy{padding-bottom:64px}
  .hero-h.look{font-size:clamp(84px,9.6vw,170px)}
  .look .lk-2{justify-content:flex-end}
}
.ug-credit{margin:16px 0 0;font:700 12px/1.6 var(--f-mono);text-transform:uppercase;letter-spacing:.04em;color:rgba(237,231,218,.7)}
.ug-credit a{color:inherit;display:inline-block;padding:12px 0;margin:-12px 0}

/* ---------- product rows: one line per row, name runs across its photos ---------- */
.lines-tiles .big-tiles{grid-template-columns:1fr!important;gap:0}
.lines-tiles .big-tiles>li{grid-column:auto!important;border-top:6px solid var(--ink)}
.lines-tiles .big-tiles>li+li{border-top:6px solid var(--orange)}
.lines-tiles .col-imgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr;gap:4px;height:min(64svh,520px)}
.lines-tiles .col-imgs img:first-child{grid-row:auto}
.lines-tiles .big-tiles a::after{height:100%;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.28) 50%,rgba(0,0,0,.05))}
.lines-tiles .big-t{left:0;right:0;bottom:auto;top:50%;transform:translateY(-50%) rotate(-2deg);text-align:center;white-space:nowrap;font-size:clamp(58px,15.5vw,250px);line-height:.82;color:#fff;
  -webkit-text-stroke:2px var(--ink);text-shadow:.04em .04em 0 var(--orange),.07em .07em 0 var(--ink);pointer-events:none}
.lines-tiles .big-tiles>li:nth-child(even) .big-t{transform:translateY(-50%) rotate(1.5deg)}
.lines-tiles .big-tiles a:hover .big-t{color:var(--yellow)}
@media (min-width:760px){.lines-tiles .col-imgs{height:min(78svh,700px)}}

/* ---------- gallery: true ratios, masonry by row span ---------- */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px;row-gap:0;grid-auto-flow:row dense;grid-auto-rows:auto;align-items:start}
.tiles.mason{grid-auto-rows:4px}
.tiles .gtile{grid-column:auto!important;grid-row:auto;padding-bottom:10px;margin:0}
.tiles .gtile:first-child{grid-column:auto;grid-row:auto}
.tiles .tile-btn{display:block;height:auto;background:transparent}
.tiles .tile-btn img,.tiles .tile:first-child .tile-btn img{width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover}
.tiles .vtile .clip{height:auto;background:transparent;border:0}
.tiles .vtile .clip video{height:auto;width:100%;aspect-ratio:var(--ar);object-fit:cover;background:#1c1b1a}
.tag-tile a{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;aspect-ratio:1;padding:22px;background:var(--orange);color:var(--ink);text-decoration:none;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.tag-h{font:400 clamp(30px,3.6vw,52px)/.9 var(--f-display);text-transform:uppercase}
.tag-hot{color:#fff;-webkit-text-stroke:1.5px var(--ink)}
.tag-at{margin-top:10px;font:700 14px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.05em}
.tag-tile a:hover,.tag-tile a:focus-visible{background:var(--yellow)}
@media (min-width:760px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px}.tiles .gtile{padding-bottom:12px}}
@media (min-width:1100px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- products page ---------- */
.prod-hero{padding:34px 0 10px}
.pgroup{padding:36px 0 56px}
.pgroup-dark{background:var(--ink)}
.pg-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px;border-bottom:4px solid var(--orange);padding-bottom:10px}
.pg-h{margin:0;font:400 clamp(44px,7vw,96px)/.9 var(--f-display);text-transform:uppercase}
.pg-note{margin:0;font:700 13px/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.04em}
.pg-note a{color:inherit;display:inline-block;padding:12px 0;margin:-12px 0}
.pcards{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.pcards-2{grid-template-columns:1fr}
.pcards-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pcard{min-width:0}
.pc-img{display:block;overflow:hidden;border:3px solid var(--ink);background:#000;aspect-ratio:4/5}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pc-img:hover img,.pc-img:focus-visible img{transform:scale(1.04)}
.pc-studio{background:#fff;aspect-ratio:4/5}
.pc-studio img{object-fit:contain;padding:24px}
.pc-name{margin:12px 0 4px;font:400 clamp(28px,3.4vw,44px)/.95 var(--f-display);text-transform:uppercase}
.pc-spec{margin:0;font:700 12px/1.5 var(--f-mono);text-transform:uppercase;letter-spacing:.03em;color:var(--orange)}
.pgroup-dark .pc-spec{color:var(--yellow)}
.pc-links{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px 16px}
.pc-links a{font:700 13px/1 var(--f-mono);text-transform:uppercase;color:var(--ink);display:inline-block;padding:14px 0;text-decoration:underline;text-underline-offset:3px}
@media (min-width:760px){.pcards-2{grid-template-columns:1fr 1fr;gap:24px}.pcards-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.pcards-3{grid-template-columns:1fr;gap:12px}
@media (min-width:760px){.pcards-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}

/* ---------- hero: Stand on something LOUD ---------- */
.look.loud .lk-1{font-size:.5em;letter-spacing:.05em}
.look.loud .lk-mid{display:block;color:var(--bone);font-size:.62em;line-height:.95;margin:.04em 0 .02em}
.look.loud .lk-2{font-size:1.12em}
@media (min-width:900px){.hero-h.look.loud{font-size:clamp(80px,8.4vw,150px)}}

/* ---------- home: staggered product tiles, titles hang below the photos ---------- */
.stag{padding:28px 0 56px;background:var(--paper,#ede7da)}
.stag-grid{list-style:none;margin:0 auto;padding:0 var(--gut);max-width:1320px;display:grid;grid-template-columns:1fr;gap:72px 28px}
.st a{display:block;position:relative;color:var(--ink);text-decoration:none}
.st .col-imgs{display:grid;grid-template-columns:3fr 2fr;grid-template-rows:1fr 1fr;gap:4px;height:min(70svh,560px);border:3px solid var(--ink);background:var(--ink);box-shadow:8px 8px 0 var(--ink)}
.st .col-imgs img{width:100%;height:100%;min-height:0;object-fit:cover}
.st .col-imgs img:first-child{grid-row:1 / 3}
.st-t{position:absolute;left:-6px;bottom:0;transform:translateY(58%) rotate(-2.5deg);z-index:2;font:400 clamp(56px,11vw,132px)/.82 var(--f-display);text-transform:uppercase;color:#fff;
  -webkit-text-stroke:2px var(--ink);text-shadow:.04em .04em 0 var(--orange),.07em .07em 0 var(--ink);pointer-events:none;white-space:nowrap}
.st:nth-child(even) .st-t{left:auto;right:-6px;transform:translateY(58%) rotate(2deg)}
.st a:hover .st-t,.st a:focus-visible .st-t{color:var(--yellow)}
.st a:hover .col-imgs img{filter:saturate(1.15)}
.stag-all{text-align:center;margin:84px 0 0}
@media (min-width:760px){
  .stag{padding:48px 0 96px}
  .stag-grid{grid-template-columns:1fr 1fr;gap:110px 40px}
  .st:nth-child(even){margin-top:140px}
  .st:nth-child(odd):not(:first-child){margin-top:-60px}
  .st .col-imgs{height:min(72svh,600px)}
  .st-t{font-size:clamp(64px,7.2vw,124px)}
}
.sp-crumbs a{display:inline-flex;align-items:center;min-height:44px;padding:0;margin:0}.sp-crumbs{align-items:center}

/* ---------- What We Sell + product pages: plain, easy to shop ---------- */
.sp{background:#f6f3ec;color:var(--ink);padding-bottom:40px}
.sp-top{padding:36px 0 8px}
.sp-h1{margin:0 0 18px;font:400 clamp(44px,7vw,84px)/.95 var(--f-display);text-transform:uppercase}
.sp-tabs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sp-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:2px solid var(--ink);border-radius:999px;font:700 14px/1 var(--f-mono);text-transform:uppercase;color:var(--ink);text-decoration:none}
.sp-tabs a:hover,.sp-tabs a:focus-visible{background:var(--ink);color:#fff}
.sp-group{padding:28px 0 12px}
.sp-group-h{margin:0 0 14px;font:400 32px/1 var(--f-display);text-transform:uppercase;border-bottom:2px solid #d9d2c3;padding-bottom:8px}
.sp-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.sp-card a{display:flex;flex-direction:column;gap:4px;color:var(--ink);text-decoration:none}
.sp-card-img{display:block;aspect-ratio:1;background:#fff;border:1px solid #e1dbcf;overflow:hidden}
.sp-card-img img{width:100%;height:100%;object-fit:contain;padding:12px;transition:transform .4s ease}
.sp-card a:hover .sp-card-img img{transform:scale(1.04)}
.sp-card-cat{margin-top:8px;font:700 12px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:#6b655a}
.sp-card-name{font:700 18px/1.2 var(--f-body)}
.sp-card-price{font:500 15px/1.3 var(--f-body);color:#3d3a34}
.sp-help-in{display:grid;grid-template-columns:1fr;gap:12px}
.sp-help-card{display:flex;flex-direction:column;gap:4px;padding:20px;border:2px solid var(--ink);background:#fff;color:var(--ink);text-decoration:none}
.sp-help-h{font:400 28px/1 var(--f-display);text-transform:uppercase}
.sp-help-card:hover,.sp-help-card:focus-visible{background:var(--orange)}
@media (min-width:760px){.sp-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.sp-help-in{grid-template-columns:1fr 1fr}}
.sp-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:18px;padding-bottom:4px;font:500 14px/1.4 var(--f-body);color:#6b655a}
.sp-crumbs a{color:#3d3a34;display:inline-flex;align-items:center;min-height:44px}
.sp-prod{display:grid;grid-template-columns:1fr;gap:24px;padding-top:8px;padding-bottom:28px}
.sp-main{background:#fff;border:1px solid #e1dbcf;aspect-ratio:1}
.sp-main-f{margin:0;height:100%}
.sp-main-f img{width:100%;height:100%;object-fit:contain}
.sp-thumbs{list-style:none;margin:10px 0 0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.sp-thumb{width:72px;height:72px;padding:0;border:2px solid #d9d2c3;background:#fff;cursor:pointer;overflow:hidden}
.sp-thumb img{width:100%;height:100%;object-fit:cover}
.sp-thumb.is-on{border-color:var(--ink)}
.sp-thumb:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.sp-cat{margin:0;font:700 12px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:#6b655a}
.sp-name{margin:8px 0 6px;font:400 clamp(40px,5vw,64px)/.95 var(--f-display);text-transform:uppercase}
.sp-price{margin:0 0 12px;font:700 24px/1.2 var(--f-body)}
.sp-blurb{margin:0 0 16px;font-size:18px;color:#3d3a34}
.sp-opts{margin:0 0 18px;display:grid;gap:8px}
.sp-opts div{display:flex;gap:10px;font-size:16px}
.sp-opts dt{min-width:64px;font-weight:700}
.sp-opts dd{margin:0}
.sp-buy{display:flex;flex-direction:column;gap:10px;max-width:420px}
.sp-buy-btn{justify-content:center;text-align:center}
.btn-line{background:transparent;color:var(--ink);border:2px solid var(--ink);box-shadow:none}
.sp-note{margin:12px 0 0;font-size:14px;color:#6b655a}
.sp-det-h{margin:26px 0 8px;font:700 15px/1 var(--f-body);text-transform:uppercase;letter-spacing:.04em}
.sp-det{margin:0;padding-left:18px;line-height:1.7}
.sp-section{padding:28px 0}
.sp-sec-h{margin:0 0 14px;font:400 32px/1 var(--f-display);text-transform:uppercase;border-bottom:2px solid #d9d2c3;padding-bottom:8px}
.sp-in{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sp-in img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.rv-box{background:#fff;border:1px solid #e1dbcf;padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.rv-empty{margin:0;font:700 18px/1.3 var(--f-body)}
.rv-ask{margin:0 0 6px;color:#3d3a34}
.rv-ext{margin:12px 0 0;font-size:15px;color:#3d3a34}
.rv-ext a{color:var(--ink);display:inline-block;padding:12px 0;margin:-12px 0}
@media (min-width:900px){.sp-prod{grid-template-columns:55fr 45fr;gap:48px;align-items:start}.sp-info{position:sticky;top:90px}.sp-in{grid-template-columns:repeat(4,minmax(0,1fr))}}
.st-t{transform:translateY(74%) rotate(-2.5deg)}
.st:nth-child(even) .st-t{transform:translateY(74%) rotate(2deg)}
.stag-grid{row-gap:96px}
@media (min-width:760px){.stag-grid{row-gap:130px}}

/* ---------- home: one gapless mosaic, every image touching ---------- */
.stag{padding:0;background:var(--ink)}
.stag-grid{max-width:none;padding:0;gap:0;grid-template-columns:1fr;grid-auto-rows:min(30svh,250px)}
.st,.st:nth-child(odd):not(:first-child),.st:nth-child(even){margin:0}
.st{grid-row:span 2;position:relative}
.st a{height:100%}
.st .col-imgs{height:100%;border:0;box-shadow:none;gap:0}
.st-t,.st:nth-child(even) .st-t{left:14px;right:auto;bottom:10px;transform:rotate(-2deg);font-size:clamp(48px,13vw,96px)}
.st:nth-child(even) .st-t{left:auto;right:14px;transform:rotate(2deg)}
@media (min-width:760px){
  .stag-grid{grid-template-columns:1fr 1fr;grid-auto-rows:min(26svh,240px)}
  .st:nth-child(1){grid-column:1;grid-row:1 / span 3}
  .st:nth-child(2){grid-column:2;grid-row:1 / span 2}
  .st:nth-child(3){grid-column:1;grid-row:4 / span 2}
  .st:nth-child(4){grid-column:2;grid-row:3 / span 3}
  .st-t,.st:nth-child(even) .st-t{font-size:clamp(64px,7vw,124px);bottom:14px}
}
/* clip strip flush */
.slide-sec{padding:0;position:relative}
.slide-track{gap:0;padding:0}
.slide-track>li .clip,.slide-track>li:nth-child(odd) .clip,.slide-track>li:nth-child(even) .clip{transform:none;border:0}
.slide-ui{position:absolute;left:0;right:0;bottom:0;margin:0;padding:0;max-width:none;z-index:3;pointer-events:none}
.slide-bar{flex:1 1 100%;height:5px;background:rgba(0,0,0,.35)}
.slide-btns{display:none}
/* wall flush */
.wall{padding:0}
.wall .wrap{max-width:none;padding:0}
.wall .sec-head{margin:0}
.wall-grid,.wall-grid li{gap:0}
.wall-grid{gap:0!important}
.wall-grid a,.wall-grid li:nth-child(3n) a,.wall-grid li:nth-child(4n+1) a{border:0;box-shadow:none;transform:none}
.two-tiles{gap:0}

/* ---------- product titles: doodles draw in on hover (Spider-Verse vibe) ---------- */
.st-t{display:inline-block}
.st-word{position:relative;z-index:2;display:inline-block}
.doodle{position:absolute;left:-14%;top:-46%;width:128%;height:190%;overflow:visible;pointer-events:none;z-index:1}
.dd{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;
  transition:stroke-dashoffset .42s steps(7,end);vector-effect:non-scaling-stroke}
.dd-loop{stroke:var(--yellow)}
.dd-zig{stroke:#2de2e6}
.dd-star,.dd-star2{stroke:#fff;stroke-width:4}
.dd-speed{stroke:#ff2e88}
.dd-paw{stroke:var(--orange)}
.dd-arrow{stroke:#2de2e6}
.doodle .dd:nth-child(2){transition-delay:.12s}.doodle .dd:nth-child(3){transition-delay:.24s}.doodle .dd:nth-child(4){transition-delay:.34s}
.st a:hover .dd,.st a:focus-visible .dd,.st.drawn .dd{stroke-dashoffset:0}
.st a::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .2s steps(2);
  background-image:radial-gradient(rgba(255,46,136,.5) 1.3px,transparent 1.8px),radial-gradient(rgba(45,226,230,.45) 1.3px,transparent 1.8px);
  background-size:8px 8px,8px 8px;background-position:0 0,4px 4px;mix-blend-mode:multiply}
.st a:hover::before,.st a:focus-visible::before{opacity:1}
@keyframes verse{0%{text-shadow:-.045em .01em 0 #2de2e6,.045em -.01em 0 #ff2e88,.07em .07em 0 var(--ink);translate:0 0}
  50%{text-shadow:.04em .02em 0 #2de2e6,-.04em -.015em 0 #ff2e88,.07em .07em 0 var(--ink);translate:-2px 1px}
  100%{text-shadow:-.03em -.02em 0 #2de2e6,.05em .02em 0 #ff2e88,.07em .07em 0 var(--ink);translate:1px -1px}}
.st a:hover .st-word,.st a:focus-visible .st-word{animation:verse .36s steps(3) infinite;color:#fff}
.st a:hover .st-t,.st a:focus-visible .st-t{color:#fff}
.st a:hover .col-imgs img{filter:contrast(1.12) saturate(1.2)}
@media (prefers-reduced-motion:reduce){.dd{transition:none}.st a:hover .st-word,.st a:focus-visible .st-word{animation:none}}
.st{z-index:1}
.st:hover,.st:focus-within,.st.drawn{z-index:4}
.doodle{left:-8%;top:-28%;width:116%;height:158%}
.dd{stroke-width:7;filter:drop-shadow(2px 2px 0 #141414)}
.dd-star,.dd-star2{stroke-width:5}
.stag{overflow:hidden}
.stag .st-t{bottom:34px}
.doodle{top:-22%;height:150%}
.stag{overflow:visible;overflow-x:clip;position:relative;z-index:2}
.stag .st-t{bottom:48px}

/* ---------- one hover effect per product ---------- */
/* thin lines between sections and between products */
.stag-grid{gap:3px;background:var(--bone)}
.stag{background:var(--bone)}
.slide-sec,.wall,.two-tiles{border-top:3px solid var(--bone)}
.two-tiles{gap:3px;background:var(--bone)}
/* doodle overlay and halftone belong to Big Logo only */
.st:not(.fx-doodle) a::before{display:none}
.st:not(.fx-doodle) a:hover .st-word,.st:not(.fx-doodle) a:focus-visible .st-word{animation:none}
.st a::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .25s}

/* Scratch: three claw slashes rip across, word shakes, red flash */
.cl{fill:none;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;stroke:#ff2b2b;stroke-width:11;filter:drop-shadow(3px 3px 0 #141414);transition:stroke-dashoffset .16s cubic-bezier(.7,0,.3,1)}
.cl2{transition-delay:.06s}.cl3{transition-delay:.12s}
.fx-claw a:hover .cl,.fx-claw a:focus-visible .cl,.fx-claw.drawn .cl{stroke-dashoffset:0}
.fx-claw a::after{background:linear-gradient(115deg,transparent 30%,rgba(255,43,43,.28) 50%,transparent 70%)}
.fx-claw a:hover::after,.fx-claw a:focus-visible::after{opacity:1}
@keyframes rip{0%,100%{translate:0 0}20%{translate:-6px 3px}40%{translate:5px -3px}60%{translate:-3px -2px}80%{translate:3px 2px}}
.fx-claw a:hover .st-word,.fx-claw a:focus-visible .st-word{animation:rip .32s steps(5) 1;color:#fff;text-shadow:.06em .06em 0 #ff2b2b}

/* Tees: spray paint drips run down from the letters */
.dr{fill:none;stroke:var(--orange);stroke-width:9;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.5,0,.6,1)}
.db{fill:var(--orange);opacity:0;transform-box:fill-box;transform-origin:center;scale:.2;transition:opacity .2s,scale .3s}
.dr2,.db2{transition-delay:.15s}.dr3,.db3{transition-delay:.3s}.dr4,.db4{transition-delay:.08s}.dr5,.db5{transition-delay:.22s}
.fx-drip a:hover .dr,.fx-drip a:focus-visible .dr,.fx-drip.drawn .dr{stroke-dashoffset:0}
.fx-drip a:hover .db,.fx-drip a:focus-visible .db,.fx-drip.drawn .db{opacity:1;scale:1;transition-delay:.75s}
.fx-drip a::after{background:radial-gradient(60% 40% at 20% 85%,rgba(255,106,26,.35),transparent 70%)}
.fx-drip a:hover::after,.fx-drip a:focus-visible::after{opacity:1}
.fx-drip a:hover .st-word,.fx-drip a:focus-visible .st-word{color:var(--orange);text-shadow:0 0 .08em rgba(255,106,26,.9),0 0 .25em rgba(255,106,26,.5),.05em .05em 0 #141414}

/* Stickers: the word slaps on like a sticker, little stickers pop around it */
.fx-slap .st-word{transition:rotate .35s cubic-bezier(.3,1.8,.5,1),scale .35s cubic-bezier(.3,1.8,.5,1)}
.fx-slap a:hover .st-word,.fx-slap a:focus-visible .st-word{rotate:-5deg;scale:1.08;color:#141414;-webkit-text-stroke:0;paint-order:stroke fill;
  text-shadow:3px 0 0 #fff,-3px 0 0 #fff,0 3px 0 #fff,0 -3px 0 #fff,3px 3px 0 #fff,-3px -3px 0 #fff,3px -3px 0 #fff,-3px 3px 0 #fff,7px 8px 0 rgba(0,0,0,.45)}
.pop{transform-box:fill-box;transform-origin:center;scale:0;rotate:-30deg;transition:scale .3s cubic-bezier(.3,1.8,.5,1),rotate .3s}
.pop2{transition-delay:.08s}.pop3{transition-delay:.16s}
.fx-slap a:hover .pop,.fx-slap a:focus-visible .pop,.fx-slap.drawn .pop{scale:1;rotate:0deg}
.pop3{rotate:20deg}

@media (prefers-reduced-motion:reduce){.cl,.dr,.db,.pop,.fx-slap .st-word{transition:none}.fx-claw a:hover .st-word{animation:none}}

/* drips hang off the letters */
.drips .dr{vector-effect:non-scaling-stroke;stroke-width:10}

/* ---------- hover: products pop out of the photos (dots + contrast) ---------- */
.st a::before{display:none}
.st a:hover .col-imgs img,.st a:focus-visible .col-imgs img{filter:none}
.hl-layer{position:absolute;inset:0;z-index:1;pointer-events:none}
.hl{position:absolute;overflow:hidden}
.hl-out,.hl-in,.hl-ring{position:absolute;inset:0;opacity:0;transition:opacity .25s steps(3)}
.hl-out{backdrop-filter:grayscale(.85) contrast(.75) brightness(.55);-webkit-backdrop-filter:grayscale(.85) contrast(.75) brightness(.55);
  background:radial-gradient(circle,rgba(20,20,20,.7) 1.3px,transparent 1.8px) 0 0/7px 7px;
  -webkit-mask:radial-gradient(circle var(--r) at var(--x) var(--y),transparent 72%,#000 100%);mask:radial-gradient(circle var(--r) at var(--x) var(--y),transparent 72%,#000 100%)}
.hl-in{backdrop-filter:contrast(1.35) saturate(1.45) brightness(1.08);-webkit-backdrop-filter:contrast(1.35) saturate(1.45) brightness(1.08);
  -webkit-mask:radial-gradient(circle var(--r) at var(--x) var(--y),#000 70%,transparent 100%);mask:radial-gradient(circle var(--r) at var(--x) var(--y),#000 70%,transparent 100%)}
.hl-ring{inset:auto;left:var(--x);top:var(--y);width:calc(var(--r) * 1.7);height:calc(var(--r) * 1.7);translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,var(--yellow) 1.6px,transparent 2.2px) 0 0/9px 9px;
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 62%,#000 70%,transparent 74%);mask:radial-gradient(circle,transparent 58%,#000 62%,#000 70%,transparent 74%);
  scale:.6;transition:opacity .2s steps(2),scale .35s cubic-bezier(.3,1.6,.5,1)}
.st a:hover .hl>*,.st a:focus-visible .hl>*,.st.drawn .hl>*{opacity:1}
.st a:hover .hl-ring,.st a:focus-visible .hl-ring,.st.drawn .hl-ring{scale:1}
@keyframes ringspin{to{rotate:360deg}}
.st a:hover .hl-ring{animation:ringspin 6s steps(24) infinite}
@media (prefers-reduced-motion:reduce){.hl-out,.hl-in,.hl-ring{transition:none}.st a:hover .hl-ring{animation:none}}
/* endless clip belt: moved by transform, not scrolling */
.slide.belt{overflow:hidden}
.slide.belt .slide-track{will-change:transform}

/* ---------- comic menu: Anton, ink offsets, stepped jitter; What + Why We Sell as one paired panel ---------- */
.nav ul{align-items:center;gap:6px}
.nav a{font:400 18px/1 var(--f-display);letter-spacing:.03em;color:var(--bone);padding:9px 10px;text-shadow:2px 2px 0 #000;transition:color .1s steps(2)}
.nav a::after{display:none}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current=page]{color:var(--yellow)}
@keyframes navjit{0%{translate:0 0;rotate:-2deg}33%{translate:-1px 1px;rotate:1.5deg}66%{translate:1px -1px;rotate:-1deg}100%{translate:0 0;rotate:-2deg}}
.nav li:not(.nav-pair) a:hover,.nav li:not(.nav-pair) a:focus-visible{animation:navjit .3s steps(3) infinite;
  text-shadow:-2px 0 0 #2de2e6,2px 0 0 #ff2e88,3px 3px 0 #000}
.nav li:not(.nav-pair) a[aria-current=page]{background:radial-gradient(circle,rgba(255,198,41,.35) 1.2px,transparent 1.7px) 0 0/6px 6px}
/* the pair */
.nav-pair{display:flex;align-items:center;position:relative;margin-right:8px}
.nav-pair a{color:var(--ink);text-shadow:none;border:2.5px solid #000;box-shadow:3px 3px 0 #000;padding:8px 12px 7px;position:relative}
.nav-pair .np-a{background:var(--yellow);rotate:-2.5deg;z-index:1}
.nav-pair .np-b{background:var(--orange);rotate:2deg;margin-left:-6px;z-index:1}
.nav-pair a::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(0,0,0,.18) 1.1px,transparent 1.6px) 0 0/5px 5px;pointer-events:none}
.np-join{position:relative;z-index:2;margin:0 -10px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#ff2e88;border:2.5px solid #000;
  font:400 15px/1 var(--f-display);color:#fff;box-shadow:2px 2px 0 #000;rotate:-8deg;transition:rotate .3s cubic-bezier(.3,1.8,.5,1),scale .3s cubic-bezier(.3,1.8,.5,1)}
.nav-pair a:hover,.nav-pair a:focus-visible{color:var(--ink);z-index:3;animation:navjit .3s steps(3) infinite;box-shadow:4px 4px 0 #000,-2px 0 0 #2de2e6}
.nav-pair a[aria-current=page]{color:#fff;text-shadow:2px 2px 0 #000}
.nav-pair:hover .np-join{rotate:172deg;scale:1.2}
.nav-pair:hover .np-a{translate:3px 0}.nav-pair:hover .np-b{translate:-3px 0}
/* phone menu panel gets the same treatment */
.menu-panel a{text-shadow:3px 3px 0 #000}
.menu-panel .nav-pair{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:6px 0 14px}
.menu-panel .nav-pair a{display:inline-block;color:var(--ink);text-shadow:none;border:3px solid #000;box-shadow:5px 5px 0 #000;padding:6px 12px 4px}
.menu-panel .nav-pair .np-a{background:var(--yellow);rotate:-2deg}
.menu-panel .nav-pair .np-b{background:var(--orange);rotate:1.5deg;margin-top:-4px;margin-left:24px}
.menu-panel .np-join{margin:-10px 0 -10px 14px;width:34px;height:34px;font-size:20px}
.menu-panel .nav-pair a[aria-current=page]{color:#fff;text-shadow:2px 2px 0 #000}
@media (prefers-reduced-motion:reduce){.nav a:hover,.nav-pair a:hover{animation:none}.np-join{transition:none}}
.nav-pair .np-a{padding-right:18px}.nav-pair .np-b{padding-left:18px}

/* ---------- round 13 ---------- */
/* Scratch: claws slash across in front of the word */
.fx-claw .doodle{z-index:3}
.cl{stroke-width:9;opacity:.95}

/* product spotlight, toned way down: whole photo stays readable, products just pop */
.hl-out{backdrop-filter:saturate(.7) brightness(.86);-webkit-backdrop-filter:saturate(.7) brightness(.86);
  background:radial-gradient(circle,rgba(20,20,20,.22) 1px,transparent 1.5px) 0 0/8px 8px}
.hl-in{backdrop-filter:contrast(1.18) saturate(1.3) brightness(1.04);-webkit-backdrop-filter:contrast(1.18) saturate(1.3) brightness(1.04)}
.hl-ring{opacity:0}
.st a:hover .hl-ring,.st a:focus-visible .hl-ring,.st.drawn .hl-ring{opacity:.55}

/* menu: no shaking, text stays crisp and readable on hover */
.nav a:hover,.nav a:focus-visible,.nav li:not(.nav-pair) a:hover,.nav li:not(.nav-pair) a:focus-visible,.nav-pair a:hover,.nav-pair a:focus-visible{animation:none!important}
.nav li:not(.nav-pair) a:hover,.nav li:not(.nav-pair) a:focus-visible{color:var(--yellow);text-shadow:2px 2px 0 #000}
.nav-pair a:hover,.nav-pair a:focus-visible{color:var(--ink);text-shadow:none;box-shadow:4px 4px 0 #000;translate:0 -2px}
.nav-pair .np-a:hover{translate:3px -2px}.nav-pair .np-b:hover{translate:-3px -2px}

/* subtle comic backdrop behind 'Stand on something loud.' */
@media (min-width:900px){
  .hero:not(.hero-page)::before{content:"";position:absolute;z-index:1;top:0;bottom:0;left:62%;right:0;pointer-events:none;
    background:
      radial-gradient(circle,rgba(255,106,26,.16) 1.4px,transparent 2px) 0 0/11px 11px,
      repeating-conic-gradient(from 0deg at 62% 62%,rgba(255,198,41,.045) 0deg 7deg,transparent 7deg 15deg);
    -webkit-mask:radial-gradient(75% 65% at 62% 62%,#000 20%,transparent 85%);mask:radial-gradient(75% 65% at 62% 62%,#000 20%,transparent 85%)}
}