/* ═══════════════════════════════════════════════════════════════
   $GOONER: a seasonal costume store's product page for one product,
   the Professional Gooner, adult costume, one size fits most.
   The site is the store. Everything on it is a store object: a box, a
   price-gun label, a shelf, a hang tag, a neon sign, a curtain, a
   safety poster, a receipt.
   Colour strategy: drenched. The hero IS the side of the box (flame
   orange into red), the black band from the box's corner carries the
   marquee and the chrome, gold is the badge. Paper is only for tags.
   Body text holds 4.5:1 on every surface it sits on.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/anton-400.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/barlowcondensed-600.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/barlowcondensed-700.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/barlow-400.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/barlow-600.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/barlow-700.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/jetbrainsmono-var.woff2") format("woff2")}

:root{
  --ink:#1c0702; --ink-0:#120302; --ink-2:#240904; --ink-3:#2f0d06;
  --flame:#d2793c; --flame-2:#b92d38; --flame-3:#a1222f; --ember:#f2a03d;
  --gold:#c9a24a; --gold-2:#e8c877;
  --paper:#f1ece2; --paper-2:#e2dccd; --paper-ink:#1a0d08; --paper-dim:#5d463a;
  --bone:#fbf6ec; --mute:#d8cabd; --dim:#ad998c;
  --scan:#ff2a2a; --neon:#ff4d6d; --velvet:#8e1022;

  --drench:linear-gradient(100deg,#e08a44 0%,#d2793c 18%,#cc5a35 38%,#c03c37 52%,#b92d38 66%,#a1222f 100%);
  --drench-v:linear-gradient(180deg,#d2793c 0%,#cc6237 34%,#bd3a37 54%,#b92d38 70%,#a1222f 100%);

  --f-display:"Anton",Impact,"Arial Narrow Bold",sans-serif;
  --f-cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:clamp(80px,11vw,144px);
  --t-mega:clamp(3.4rem,10vw,6rem);
  --t-xl:clamp(2.6rem,6.8vw,5.25rem);
  --t-lg:clamp(1.3rem,2.6vw,1.9rem);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.22,1,.36,1);
  --z-sticky:80; --z-grain:700; --z-fx:800; --z-toast:850; --z-lights:900;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
body{background:var(--ink);color:var(--bone);font-family:var(--f-body);font-size:1.05rem;line-height:1.6;
  overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
input,select{font:inherit}
[hidden]{display:none!important}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto;position:relative}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--gold-2);outline-offset:3px}

/* grain over everything: a tiled alpha-noise tile, jumped around so it reads as film, never as a pattern */
#grain{position:fixed;inset:-120px;z-index:var(--z-grain);pointer-events:none;background:url("grain.webp") 0 0/160px 160px repeat;opacity:.55;
  animation:grain .9s infinite}
@keyframes grain{
  0%{transform:translate(0,0);animation-timing-function:steps(1,end)}
  20%{transform:translate(-37px,21px);animation-timing-function:steps(1,end)}
  40%{transform:translate(18px,-44px);animation-timing-function:steps(1,end)}
  60%{transform:translate(-52px,-9px);animation-timing-function:steps(1,end)}
  80%{transform:translate(41px,33px);animation-timing-function:steps(1,end)}
  100%{transform:translate(0,0)}}

/* box type: white, condensed, black outline, like the front of the package */
.boxtype{font-family:var(--f-display);color:#fff;letter-spacing:-.01em;line-height:.92;font-weight:400;
  -webkit-text-stroke:.035em #000;paint-order:stroke fill;text-shadow:.045em .045em 0 #000,0 0 1px #000}
h2{font-family:var(--f-display);font-size:var(--t-xl);line-height:.92;font-weight:400;color:#fff;text-wrap:balance;letter-spacing:-.01em;
  -webkit-text-stroke:.02em #000;paint-order:stroke fill;text-shadow:.045em .045em 0 #000}
.lede{max-width:56ch;color:var(--mute);margin-top:var(--s2);font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.55;text-wrap:pretty}
.lede b{color:var(--bone);font-weight:600}
section{padding:var(--s6) 0;position:relative}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s3) var(--s4)}
.head > div{min-width:0;max-width:820px}

/* ── the section-label system: price-gun labels, slapped on at an angle ──
   One system, used where a label belongs (a shelf, a rack, a rating), never as an eyebrow. */
.pg{display:inline-block;flex:none;rotate:var(--pr,-5deg);max-width:100%;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.92)) drop-shadow(0 12px 14px rgba(0,0,0,.3))}
.pg > span{--bg:var(--ember);--fg:#1c0702;display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.2em .6em;background:var(--bg);color:var(--fg);
  padding:.65em 1.5em .6em;font-family:var(--f-mono);font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.3;
  -webkit-mask:radial-gradient(circle at 0 50%,#0000 7px,#000 7.5px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 7px,#000 7.5px) 100% 0/51% 100% no-repeat;
          mask:radial-gradient(circle at 0 50%,#0000 7px,#000 7.5px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 7px,#000 7.5px) 100% 0/51% 100% no-repeat}
.pg b{font-family:var(--f-display);font-weight:400;font-size:1.9rem;letter-spacing:.02em;line-height:1}
.pg em{font-style:normal;color:#b92d38;font-weight:800}
.pg--white > span{--bg:#fbf6ec}
.pg--gold > span{--bg:var(--gold-2)}
.pg--flame > span{--bg:var(--ember)}
#label .pg{--pr:-7deg} #aisle .pg{--pr:5deg} #reviews .pg{--pr:-4deg} #poses .pg{--pr:6deg} #box .pg{--pr:-5deg}

/* ── buttons: retail, blunt ── */
.btn{--bg:var(--ink-3);--fg:var(--bone);
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--f-cond);font-weight:700;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.75em 1.2em;color:var(--fg);background:var(--bg);border:2px solid #000;border-radius:3px;
  box-shadow:0 3px 0 #000;transition:transform .14s var(--ease-2),box-shadow .14s,background .14s;white-space:nowrap;min-height:44px;position:relative;will-change:transform}
.btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 #000}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #000}
.btn--flame{--bg:var(--flame);--fg:#1c0702} .btn--flame:hover{--bg:var(--ember)}
.btn--gold{--bg:var(--gold-2);--fg:#1c0702}   .btn--gold:hover{--bg:#f3dc9a}
.btn--paper{--bg:var(--paper);--fg:var(--paper-ink)} .btn--paper:hover{--bg:#fff}
.btn--ink{--bg:var(--ink);--fg:#fff} .btn--ink:hover{--bg:#000}
.btn--xl{font-size:1.15rem;padding:.9em 1.5em}
.btn--sm{font-size:.85rem;padding:.55em .9em;min-height:38px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:0 3px 0 #000}
.btn .ico{width:18px;height:18px;flex:none}

/* ── lights: the store's fluorescent tubes warming up on first load (JS only) ── */
#lights{position:fixed;inset:0;z-index:var(--z-lights);background:#050101;pointer-events:none;opacity:0}

/* ── store chrome ── */
.strip{background:var(--gold-2);color:#1c0702;font-family:var(--f-mono);font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  text-align:center;padding:.45rem 12px;border-bottom:2px solid #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* solid, not a 95% tint under an 8px backdrop blur: the blur re-sampled the page under the sticky bar on every scroll frame */
header{position:sticky;top:0;z-index:var(--z-sticky);background:rgb(28,7,2);
  border-bottom:2px solid #000;box-shadow:0 2px 0 rgba(232,200,119,.4)}
.hud{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:.6rem 0;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:.55rem;font-family:var(--f-display);font-size:1.35rem;color:var(--gold-2);letter-spacing:.04em;white-space:nowrap}
.mark img{width:34px;height:34px}
.mark small{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;color:var(--dim);display:block;line-height:1;margin-top:.15em}
/* the CA chip is a price tag with an 18+ price-gun label slapped on its corner */
.chip{position:relative;display:inline-flex;max-width:100%;min-width:0}
.tag{display:inline-flex;align-items:center;gap:.55em;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;
  background:var(--paper);color:var(--paper-ink);border:2px solid #000;border-radius:3px;padding:.45em 1.9em .45em .6em;position:relative;
  box-shadow:0 2px 0 #000;transition:transform .14s var(--ease-2);max-width:100%;overflow:hidden;white-space:nowrap}
.tag::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink);border:2px solid #000;flex:none}
.tag b{font-weight:700}
.tag:hover:not(:disabled){transform:translateY(-1px)}
.tag:disabled{cursor:default;background:var(--paper-2)}
.tag.live{background:var(--gold-2)}
.gun{position:absolute;right:-9px;top:-10px;z-index:2;background:var(--flame-2);color:#fff;border:2px solid #000;border-radius:2px;
  font-family:var(--f-display);font-size:.8rem;letter-spacing:.04em;line-height:1;padding:.25em .4em .2em;rotate:11deg;box-shadow:0 2px 0 #000;pointer-events:none}
nav{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
nav .btn{font-size:.85rem;padding:.6em .95em;min-height:40px}
@media (max-width:760px){
  .hud{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.5rem .75rem;padding:.55rem 0}
  .mark img{width:28px;height:28px}
  .mark span{font-size:1.1rem}
  .mark small{display:none}
  .chip{justify-self:end;margin-right:6px}
  .tag{font-size:.68rem;padding:.4em 1.7em .4em .55em}
  nav{grid-column:1/-1;width:100%;justify-content:flex-start;flex-wrap:nowrap}
  nav .btn{font-size:.74rem;padding:.5em .5em;min-height:38px;flex:1 1 0;justify-content:center;letter-spacing:.05em}
  /* three buttons fit a phone; telegram and X live in the doors and footer */
  nav [data-link="telegram"],nav [data-link="x"]{display:none}
}

/* ── hero: the side of the box, drenched, the product under a spotlight ── */
.hero{padding:var(--s4) 0 0;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse 34% 62% at 25% 42%,rgba(255,228,184,.4),rgba(255,196,130,.12) 55%,transparent 76%),var(--drench)}
.hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:75%;z-index:-2;background:url("flame-bg.webp") center bottom/cover no-repeat;mix-blend-mode:screen;opacity:.5;
  -webkit-mask-image:linear-gradient(0deg,#000 20%,transparent 100%);mask-image:linear-gradient(0deg,#000 20%,transparent 100%)}
@media (min-width:900px){.hero{--spot-x:max(25.5%,calc(50% - 311px))}}
.hero::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse 100% 90% at 45% 40%,transparent 62%,rgba(28,7,2,.38) 100%)}
@media (max-width:899px){
  .hero{background:radial-gradient(ellipse 85% 34% at 50% 24%,rgba(255,228,184,.38),transparent 72%),var(--drench-v)}
}
.hero-grid{display:grid;grid-template-columns:1fr;gap:var(--s4);align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5)}}
.stage{position:relative;justify-self:center;width:min(100%,560px);perspective:1400px}
/* the spotlight: a cone from the ceiling onto the box (a hero-level layer: inside the 3D stage it knocks the box out on some compositors) */
.spot{position:absolute;left:var(--spot-x,50%);top:-14%;width:min(1000px,130vw);height:112%;translate:-50% 0;z-index:-1;pointer-events:none;
  background:conic-gradient(from 150deg at 50% 0,transparent 0deg,rgba(255,236,200,.42) 13deg,rgba(255,246,226,.55) 30deg,rgba(255,236,200,.42) 47deg,transparent 60deg,transparent 360deg);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
/* the box stays a flat layer that tilts as one piece: a preserve-3d context under the drench,
   the spotlight and the grain makes some compositors drop the image entirely */
.product{position:relative;transform-style:flat}
.product img{width:100%;border-radius:4px;border:3px solid #000;box-shadow:0 40px 80px rgba(40,0,0,.65),0 12px 24px rgba(0,0,0,.4)}
.sticker{position:absolute;z-index:3;font-family:var(--f-display);font-size:clamp(.95rem,2vw,1.35rem);letter-spacing:.05em;text-transform:uppercase;line-height:1.1;
  padding:.5em .95em;border:2.5px solid #000;border-radius:999px;box-shadow:0 4px 0 #000,0 14px 24px rgba(0,0,0,.4);white-space:nowrap;transform:rotate(var(--r))}
.sticker.s1{top:3%;left:-6%;--r:-12deg;background:var(--gold-2);color:#1c0702}
.sticker.s2{top:10%;right:-5%;--r:9deg;background:var(--flame-2);color:#fff;font-size:clamp(1.15rem,2.6vw,1.75rem)}
.sticker.s3{bottom:7%;right:-4%;--r:-7deg;background:var(--paper);color:var(--paper-ink)}
.sticker.s4{bottom:21%;left:-7%;--r:5deg;background:#fff;color:var(--flame-2);font-family:var(--f-cond);font-weight:700;font-size:clamp(.78rem,1.4vw,.95rem);letter-spacing:.08em;border-radius:3px;padding:.45em .7em}
@media (max-width:760px){.sticker.s1{left:-2%}.sticker.s2{right:-2%}.sticker.s3{right:-1%}.sticker.s4{left:-1%;white-space:normal;text-wrap:balance;max-width:72%}}
/* the shelf under the box: a rail with the price channel, lit from above */
.shelf{position:relative;margin-top:-6px;height:22px;background:linear-gradient(180deg,#6a5a4f,#2b2420 60%,#161110);border:2px solid #000;border-radius:2px;
  box-shadow:0 14px 28px rgba(40,0,0,.55)}
.shelf::after{content:"";position:absolute;left:8px;right:8px;top:5px;height:8px;background:linear-gradient(90deg,#b58f3c,#e8c877 50%,#b58f3c);border:1px solid #000;border-radius:1px;opacity:.9}
.hero-copy{position:relative;padding-bottom:var(--s2)}
.hero h1{font-size:var(--t-mega);margin:.02em 0 .18em;max-width:9ch;letter-spacing:-.02em;line-height:.88}
.hero h1 .line{display:block}
.subtitle{font-family:var(--f-cond);font-weight:700;font-size:clamp(1.2rem,2.4vw,1.75rem);text-transform:uppercase;letter-spacing:.06em;line-height:1.35;rotate:-1.2deg;transform-origin:left center}
.subtitle span{background:var(--ink);color:#fff;padding:.12em .5em;box-decoration-break:clone;-webkit-box-decoration-break:clone;box-shadow:0 3px 0 #000}
.hero .lede{color:#fff;max-width:40ch;font-size:clamp(1.12rem,1.6vw,1.32rem);font-weight:600;margin-top:var(--s3);text-shadow:0 1px 0 rgba(60,0,0,.35)}
.hero-cta{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}
.shelf-tag{margin-top:var(--s4);display:inline-flex;flex-direction:column;gap:.2em;background:var(--paper);color:var(--paper-ink);border:2px solid #000;max-width:100%;
  border-radius:3px;padding:.8em 1.1em;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 4px 0 #000,0 16px 30px rgba(60,0,0,.35);position:relative;rotate:-1deg;transform-origin:left top}
.shelf-tag b{font-family:var(--f-display);font-weight:400;font-size:1.5rem;letter-spacing:.06em;line-height:1.1}
.shelf-tag .bars{position:absolute;right:10px;top:8px;bottom:8px;width:38px;
  background:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 4px,#000 4px 5px,transparent 5px 8px,#000 8px 11px,transparent 11px 13px);opacity:.85}
.shelf-tag span{padding-right:52px}
.shelf-tag .price{display:flex;align-items:center;flex-wrap:wrap;gap:.1em .5em;font-weight:700;margin-top:.15em}
.shelf-tag .price em{font-style:normal;color:var(--flame-2)}
.shelf-tag .flat{width:44px;height:14px;flex:none;color:var(--paper-ink)}

/* the neon sign: ADULT, 18+. Tubes on a black backing board, hung from two wires */
.neon{position:relative;display:inline-flex;align-items:center;gap:.55em;margin:0 0 var(--s3);padding:.4em .75em .45em;background:#0d0201;border:2px solid #000;border-radius:10px;
  rotate:-3deg;box-shadow:0 18px 40px rgba(50,0,0,.55),inset 0 0 34px rgba(255,60,90,.22)}
.neon::before,.neon::after{content:"";position:absolute;bottom:100%;width:2px;height:60px;background:#1c0702}
@media (max-width:899px){.neon::before,.neon::after{height:22px}}
.neon::before{left:22px} .neon::after{right:22px}
.neon-word{font-family:var(--f-display);font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1;letter-spacing:.16em;text-transform:uppercase;color:#ffe3ea;padding-left:.16em;
  text-shadow:0 0 2px #fff,0 0 7px var(--neon),0 0 16px var(--neon),0 0 30px #ff2750,0 0 52px #d4003a;animation:flick 7s linear infinite}
.neon-18{display:grid;place-items:center;width:2.5em;height:2.5em;border-radius:50%;border:3px solid #ffd36b;font-family:var(--f-display);font-size:clamp(.95rem,1.8vw,1.3rem);color:#fff6da;
  box-shadow:0 0 6px #ffd36b,0 0 18px #ffb020,inset 0 0 10px #ffb020;text-shadow:0 0 4px #ffd36b,0 0 14px #ffb020}
@keyframes flick{0%,17.9%,19.1%,22%,23.4%,61%,62.2%,100%{opacity:1}18%,19%,22.1%,23.3%,61.1%,62.1%{opacity:.28}}

/* ── marquee: the black band off the corner of the box ── */
.mq{overflow:hidden;white-space:nowrap;border-block:3px solid #000;padding:.7rem 0;background:var(--ink);color:#fff;
  font-family:var(--f-display);font-size:clamp(1.15rem,2.2vw,1.65rem);letter-spacing:.08em;text-transform:uppercase;rotate:-1.2deg;margin:var(--s5) -3% var(--s3);width:106%;
  box-shadow:0 14px 30px rgba(40,0,0,.45)}
.mq span{display:inline-block;animation:slide 44s linear infinite;padding-right:1em}
.mq em{font-style:normal;color:#1c0702;background:var(--gold-2);padding:.02em .4em;border-radius:2px;box-shadow:0 2px 0 #000}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── contents: the side of the box, full bleed ── */
.label{background:#5a1a0a url("flame-bg.webp") center/cover no-repeat;color:#fff;isolation:isolate;overflow:hidden;padding-bottom:calc(var(--s6) + 40px)}
.label::before{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(28,7,2,.55) 0,rgba(28,7,2,0) 12%,rgba(28,7,2,0) 84%,#0a0101 100%),
  linear-gradient(90deg,rgba(0,0,0,.3),transparent 30%,transparent 70%,rgba(0,0,0,.3));z-index:-1}
.label .fire{position:absolute;inset:-10% 0;background:url("flame-bg.webp") center/cover no-repeat;z-index:-2;will-change:transform}
.label h2{max-width:14ch;-webkit-text-stroke:.025em #000;text-shadow:.05em .05em 0 #000,0 0 30px rgba(0,0,0,.4)}
.label .lede{color:#fff;font-weight:600;text-shadow:0 1px 0 #000,0 0 12px rgba(0,0,0,.6)}
.panelgrid{display:grid;grid-template-columns:1fr;gap:var(--s4) var(--s5);margin-top:var(--s5);align-items:start}
@media (min-width:860px){.panelgrid{grid-template-columns:1.25fr 1fr}}
.boxlist h3{font-family:var(--f-cond);font-weight:700;font-size:clamp(1.25rem,2.1vw,1.6rem);letter-spacing:.08em;text-transform:uppercase;
  -webkit-text-stroke:.6px #000;paint-order:stroke fill;text-shadow:2px 2px 0 #000;margin-bottom:.35em}
.boxlist ul{list-style:none}
.boxlist li{font-family:var(--f-cond);font-weight:700;font-size:clamp(1.6rem,3.1vw,2.55rem);line-height:1.02;letter-spacing:.005em;text-wrap:balance;
  -webkit-text-stroke:.02em #000;paint-order:stroke fill;text-shadow:.06em .06em 0 #000;will-change:clip-path}
.boxlist li+li{margin-top:.22em}
.boxlist--small li{font-size:clamp(1.5rem,2.8vw,2.3rem)}
.boxlist p{font-family:var(--f-cond);font-weight:700;font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.25;text-shadow:1.5px 1.5px 0 #000,0 0 2px #000;max-width:30ch}
.boxlist p+p{margin-top:.5em}
.boxlist + .boxlist{margin-top:var(--s4)}
.warning{background:rgba(12,2,1,.78);border:2px solid #000;border-radius:4px;padding:var(--s3);box-shadow:0 4px 0 #000}
.warning h3{color:var(--gold-2)}
.stamp-corner{display:inline-block;margin-top:var(--s3);background:#000;color:#fff;font-family:var(--f-cond);font-weight:700;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.55em 1em;border-radius:3px}
.warning .stamp-corner{background:var(--flame-2);border:2px solid #000;rotate:-2deg}

/* ── the fine print: two paper tags tied to the box ── */
.tags{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--s4);align-items:start;padding:calc(var(--s5) + 20px) 0 0}
.papertag{position:relative;background:var(--paper);color:var(--paper-ink);border:2px solid #000;border-radius:4px;padding:var(--s3);
  box-shadow:0 5px 0 #000,0 26px 40px rgba(40,0,0,.45);transform-origin:50% -20px}
.papertag::before{content:"";position:absolute;left:50%;top:-2px;translate:-50% -100%;width:2px;height:34px;background:linear-gradient(#f3dc9a,#8a6a2a)}
.papertag::after{content:"";position:absolute;left:50%;top:10px;translate:-50% 0;width:14px;height:14px;border-radius:50%;background:var(--ink);border:2px solid #000;box-shadow:inset 0 0 0 3px var(--paper)}
.papertag:nth-child(odd){rotate:-1.2deg} .papertag:nth-child(even){rotate:1deg}
.papertag h3{font-family:var(--f-display);font-size:1.5rem;letter-spacing:.1em;text-transform:uppercase;font-weight:400;text-align:center;margin-top:var(--s2)}
.papertag .sub{text-align:center;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-dim);margin-top:.2em}
.care{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s3)}
.care div{border:1.5px solid rgba(26,13,8,.35);border-radius:4px;padding:.8em .9em;text-wrap:balance;font-family:var(--f-cond);font-weight:600;font-size:1.08rem;line-height:1.25}
.care b{display:block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-dim);margin-bottom:.35em;font-weight:500}
.sizes{width:100%;border-collapse:collapse;font-family:var(--f-cond);font-weight:600;font-size:1.05rem;margin-top:var(--s3)}
.sizes th,.sizes td{text-align:left;padding:.55em .5em;border-bottom:1.5px solid rgba(26,13,8,.3);vertical-align:top}
.sizes th{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-dim);font-weight:500}
.sizes td:first-child{font-family:var(--f-display);font-size:1.35rem;width:2.2em;letter-spacing:.04em}
.sizes td:nth-child(2){white-space:nowrap}
.sizes tr:last-child td{border-bottom:0}
.sizes td em{font-style:normal;color:var(--flame-2);font-weight:700}
.papertag .foot{font-family:var(--f-cond);font-weight:700;font-size:1.2rem;margin-top:var(--s2);text-align:center}

/* ── THE CAVE: the adult section. A velvet curtain over a dark room with a CRT ──
   Without JS the curtain hangs open (gathered at the sides); site.js closes it
   itself and scrubs it open with scroll, or on a click. */
.cave{padding:0;--open:1;background:#0a0101}
.cave-clip{position:relative;overflow:hidden;min-height:max(640px,calc(100svh - 66px));z-index:1}
.rod{position:absolute;left:0;right:0;top:0;height:16px;z-index:6;background:linear-gradient(180deg,#f7e3a6,#c9a24a 45%,#5e4519);border-bottom:2px solid #000;box-shadow:0 6px 16px rgba(0,0,0,.7)}
.room{position:relative;min-height:inherit;display:grid;align-items:center;padding:200px 0 56px;
  background:
    radial-gradient(ellipse 70% 42% at 50% 104%,rgba(214,30,56,.6),transparent 70%),
    radial-gradient(ellipse 40% 50% at 28% 52%,rgba(255,40,70,.16),transparent 72%),
    linear-gradient(180deg,#160203,#0a0101 55%,#1d0306)}
.room-box{position:absolute;right:-3%;bottom:0;height:88%;width:auto;max-width:none;opacity:.5;pointer-events:none;
  filter:grayscale(1) sepia(1) hue-rotate(-40deg) saturate(3.2) brightness(.42) contrast(1.15);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 45%);mask-image:linear-gradient(90deg,transparent 0,#000 45%)}
@media (max-width:899px){.room-box{right:-30%;height:70%;opacity:.35}}
.room-grid{display:grid;grid-template-columns:1fr;gap:var(--s5);align-items:center;position:relative;z-index:1}
@media (min-width:900px){.room-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.room-copy h2{font-size:clamp(2.5rem,6.2vw,4.9rem);max-width:12ch;text-shadow:.045em .045em 0 #000,0 0 44px rgba(255,40,70,.45)}
.room-copy p{margin-top:var(--s3);max-width:30ch;font-family:var(--f-cond);font-weight:600;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.3;color:#f6ddd8}
/* the CRT: beige plastic, a curved screen, a green power light */
.crt{margin:0;justify-self:center;width:min(100%,500px)}
@media (max-width:899px){.room{padding:212px 0 72px}.room-grid{gap:var(--s4);padding-inline:22px}.room-copy{order:-1}}
.crt-body{position:relative;background:linear-gradient(160deg,#ddd4c1,#b7ac95 55%,#8a806b);border:2px solid #000;border-radius:24px 24px 16px 16px;padding:22px 22px 12px;rotate:-2deg;
  box-shadow:0 34px 60px rgba(0,0,0,.75),0 0 90px rgba(255,40,70,.28),inset 0 2px 0 rgba(255,255,255,.55),inset 0 -8px 14px rgba(0,0,0,.25)}
.crt-screen{position:relative;border-radius:20px/16px;overflow:hidden;background:#020903;border:3px solid #26221b;
  box-shadow:0 0 0 7px #6f6654,0 0 44px rgba(90,255,150,.2)}
.crt-screen::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(ellipse 60% 40% at 30% 18%,rgba(255,255,255,.12),transparent 60%),radial-gradient(ellipse at 50% 50%,transparent 58%,rgba(0,0,0,.65) 100%)}
.crt canvas{display:block;width:100%;height:auto;aspect-ratio:640/440;cursor:default}
.crt-chin{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding-top:10px}
.crt-chin i{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#9a917e,#4e473b);border:1.5px solid #000}
.crt-chin b{width:10px;height:10px;border-radius:50%;background:#58ff8c;box-shadow:0 0 8px #58ff8c,0 0 16px #1fd35c;margin-left:6px}
.crt figcaption{margin-top:22px;text-align:center;text-wrap:balance;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#f1c9c2;line-height:1.6}
/* the hanging sign */
.cave-sign{position:absolute;z-index:7;top:54px;left:50%;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:.35em;width:max-content;max-width:calc(100% - 40px);
  background:#0d0201;color:#fff;border:2px solid #000;border-radius:8px;padding:.75em 1.4em .8em;text-align:center;transform-origin:50% -54px;
  box-shadow:0 16px 34px rgba(0,0,0,.65),inset 0 0 30px rgba(255,60,90,.2);animation:sway 5s ease-in-out infinite}
.cave-sign::before,.cave-sign::after{content:"";position:absolute;bottom:100%;width:2px;height:40px;background:linear-gradient(#c9a24a,#6b5020)}
.cave-sign::before{left:26px} .cave-sign::after{right:26px}
.cs-a{font-family:var(--f-display);font-size:clamp(1.3rem,3vw,2rem);letter-spacing:.14em;text-transform:uppercase;line-height:1;color:#ffe3ea;
  text-shadow:0 0 2px #fff,0 0 7px var(--neon),0 0 16px var(--neon),0 0 32px #d4003a;animation:flick 9s linear infinite}
.cs-18{display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:50%;border:3px solid #ffd36b;font-family:var(--f-display);font-size:1.05rem;color:#fff6da;
  box-shadow:0 0 6px #ffd36b,0 0 16px #ffb020,inset 0 0 8px #ffb020}
.cs-b{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#f1c9c2}
@keyframes sway{0%,100%{rotate:-1.2deg}50%{rotate:1.2deg}}
/* the drapes: velvet folds; gathered (open) by default */
.drapes{position:absolute;inset:0;z-index:5;pointer-events:none}
.drape{position:absolute;top:0;bottom:0;width:50.5%;will-change:transform;
  background:
    linear-gradient(180deg,rgba(0,0,0,.6),transparent 14%,transparent 78%,rgba(0,0,0,.55) 96%),
    linear-gradient(90deg,#3e040c 0,#7a0c1b 8%,#b8182f 15%,#d8304a 17%,#9c1226 24%,#3e040c 33%,#7a0c1b 42%,#b8182f 49%,#d8304a 51%,#9c1226 58%,#3e040c 67%,#7a0c1b 75%,#b8182f 83%,#d8304a 85%,#9c1226 92%,#3e040c 100%) 0 0/132px 100%;
  border-bottom:8px solid #c9a24a}
.drape.l{left:0;transform-origin:0 50%;transform:scaleX(.13);box-shadow:14px 0 30px rgba(0,0,0,.6)}
.drape.r{right:0;transform-origin:100% 50%;transform:scaleX(.13);box-shadow:-14px 0 30px rgba(0,0,0,.6)}
.curtain-hit{position:absolute;inset:0;z-index:6;width:100%;cursor:pointer;background:none}
.curtain-hit:focus-visible{outline-offset:-8px}
/* red light spilling out from behind the curtain, over the floor and up the wall */
.spill{position:absolute;left:-5%;right:-5%;bottom:-200px;height:420px;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 48% 50% at 50% 50%,rgba(255,36,64,.42),rgba(185,45,56,.16) 48%,transparent 72%);opacity:calc(.3 + .7 * var(--open))}
.spill.top{top:-140px;bottom:auto;height:280px;opacity:calc(.12 + .45 * var(--open))}

/* ── the aisle: walk past six of him ── */
/* sits above the cave's light spill: the red glow reads as light behind the aisle, never over its type */
#aisle{z-index:3;background:radial-gradient(ellipse 70% 30% at 50% 0,rgba(185,45,56,.28),transparent 70%)}
.aisle-wrap{position:relative;margin-top:var(--s4);border:3px solid #000;border-radius:6px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.6);background:#3b3733}
.aisle-track{width:140%;will-change:transform}
.aisle-track img{width:100%;aspect-ratio:2000/857;object-fit:cover}
.hang{position:absolute;top:0;left:var(--s3);transform-origin:50% 0;z-index:2;max-width:calc(100% - 48px)}
.hang::before,.hang::after{content:"";position:absolute;top:0;width:2px;height:26px;background:#111}
.hang::before{left:14px} .hang::after{right:14px}
.hang .sign{display:block;margin-top:26px;background:var(--paper);color:var(--paper-ink);border:2px solid #000;border-radius:3px;padding:.5em 1em;
  font-family:var(--f-display);font-size:clamp(.85rem,2vw,1.2rem);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 3px 0 #000}
.hang .sign i{font-style:normal;color:var(--flame-2)}
.notes{margin-top:var(--s4);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--s3)}
.note{position:relative;background:var(--paper);color:var(--paper-ink);padding:var(--s3);box-shadow:0 14px 26px rgba(0,0,0,.45);transform-origin:50% 0}
.note:nth-child(1){rotate:-1.4deg} .note:nth-child(2){rotate:.9deg;margin-top:var(--s2)} .note:nth-child(3){rotate:-.6deg}
.note::before{content:"";position:absolute;left:50%;top:-10px;translate:-50% 0;width:74px;height:22px;background:rgba(255,255,255,.4);border:1px solid rgba(0,0,0,.08);rotate:-2deg}
.note b{display:block;font-family:var(--f-display);font-size:1.15rem;letter-spacing:.1em;text-transform:uppercase;font-weight:400;margin-bottom:.4em}
.note p{font-family:var(--f-cond);font-weight:600;font-size:1.25rem;line-height:1.25;text-wrap:pretty}

/* ── reviews: hang tags on a chrome rail, on a red wall ── */
#reviews{background:radial-gradient(ellipse 60% 40% at 80% 0,rgba(242,160,61,.22),transparent 70%),linear-gradient(180deg,#b92d38,#a1222f);
  border-block:3px solid #000}
#reviews .lede{color:#fff}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));column-gap:var(--s3);row-gap:calc(var(--s5) + 12px);margin-top:calc(var(--s5) + 28px);align-items:start}
.hook{position:relative;padding-top:0}
/* the rail runs through the grid gap so each row reads as one bar; the wire drops to the tag's hole */
.hook::before{content:"";position:absolute;left:calc(var(--s3) / -2 - 1px);right:calc(var(--s3) / -2 - 1px);top:-46px;height:9px;border-radius:5px;
  background:linear-gradient(180deg,#fff,#b9b9b9 50%,#6d6d6d);border:1.5px solid #000;box-shadow:0 5px 8px rgba(0,0,0,.35)}
.hook::after{content:"";position:absolute;left:50%;top:-38px;width:12px;height:52px;translate:-50% 0;border:2.5px solid #d9d9d9;border-top:0;border-radius:0 0 8px 8px;
  border-left-color:transparent;filter:drop-shadow(1px 1px 0 #000)}
.review{position:relative;background:var(--paper);color:var(--paper-ink);border:2px solid #000;border-radius:6px 6px 4px 4px;padding:calc(var(--s4) + 6px) var(--s3) var(--s3);
  box-shadow:0 5px 0 #000,0 20px 34px rgba(40,0,0,.45);transition:rotate .5s var(--ease);transform-origin:50% 2px;rotate:var(--r,0deg)}
.review::before{content:"";position:absolute;left:50%;top:12px;translate:-50% 0;width:14px;height:14px;border-radius:50%;background:#a1222f;border:2px solid #000;box-shadow:inset 0 0 0 2px var(--paper)}
.hook:nth-child(3n+1) .review{--r:-2.2deg} .hook:nth-child(3n+2) .review{--r:1.6deg} .hook:nth-child(3n) .review{--r:-.8deg}
.hook:hover .review{rotate:calc(var(--r,0deg) * -2.2)}
.stars{font-size:1.05rem;letter-spacing:.12em;color:var(--flame-2);font-family:var(--f-mono)}
.review p{font-family:var(--f-cond);font-weight:600;font-size:1.35rem;line-height:1.22;margin-top:.5em;text-wrap:pretty}
.review cite{display:block;margin-top:var(--s2);font-style:normal;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim)}
.rating > span{align-items:baseline}

/* ── recall notice: a red safety poster stapled to the wall by the door ── */
.notice{position:relative;max-width:900px;margin-inline:auto;background:#a82a33;color:#fff;border:3px solid #000;border-radius:3px;
  box-shadow:0 6px 0 #000,0 34px 60px rgba(0,0,0,.6);transform-origin:50% 0;rotate:-.6deg}
.staple{position:absolute;top:-6px;width:22px;height:8px;border:2px solid #444;border-bottom:0;border-radius:2px 2px 0 0;background:#9a9a9a;z-index:2}
.staple.l{left:22px;rotate:-6deg} .staple.r{right:22px;rotate:5deg}
.notice-head{background:var(--gold-2);color:#1c0702;font-family:var(--f-display);font-size:clamp(1.1rem,2.6vw,1.6rem);letter-spacing:.08em;text-transform:uppercase;padding:.55em var(--s3);
  border-bottom:3px solid #000;display:flex;justify-content:space-between;gap:var(--s1) var(--s2);align-items:center;flex-wrap:wrap}
.notice-head > span{display:inline-flex;align-items:center;gap:.5em}
.hazard{width:1.35em;height:1.25em;flex:none}
.notice-head small{font-family:var(--f-mono);font-size:.68rem;font-weight:600;letter-spacing:.18em}
.notice-body{padding:clamp(24px,4.4vw,52px)}
.notice h2{font-size:clamp(2.5rem,7vw,5.25rem);max-width:12ch}
.notice .lede{color:#fff;font-weight:600}
.notice dl{margin-top:var(--s4);display:grid;grid-template-columns:max-content 1fr;gap:.85em var(--s3);border-top:2px solid rgba(0,0,0,.45);padding-top:var(--s3)}
.notice dt{font-family:var(--f-mono);font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#ffe2d2;padding-top:.45em}
.notice dd{font-family:var(--f-body);font-size:1.1rem;font-weight:600;line-height:1.45;max-width:52ch}
@media (max-width:520px){.notice dl{grid-template-columns:1fr;gap:.2em}.notice dt{padding-top:.9em}}
.stamp{position:absolute;right:clamp(24px,4.4vw,52px);top:clamp(96px,11vw,128px);font-family:var(--f-display);font-size:clamp(1.3rem,3.4vw,2.1rem);letter-spacing:.12em;text-transform:uppercase;color:#fff;
  border:4px solid #fff;border-radius:4px;padding:.12em .5em;rotate:-9deg;opacity:.92;transform-origin:50% 50%;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
@media (max-width:640px){.stamp{position:relative;right:auto;top:auto;display:inline-block;margin:0 0 var(--s3) var(--s3)}}

/* ── display units: the rack, on the orange side of the box ── */
#poses{background:radial-gradient(ellipse 55% 45% at 15% 0,rgba(255,232,196,.4),transparent 70%),linear-gradient(180deg,#d2793c,#cf6d38 60%,#c9603a);border-block:3px solid #000}
#poses .lede{color:#1c0702;font-weight:600}
#poses .pg{filter:drop-shadow(0 3px 0 #000)}
.rack{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s4)}
@media (max-width:640px){.rack{grid-template-columns:repeat(2,1fr);gap:var(--s1)}}
.unit{position:relative;background:var(--ink-2);border:2px solid #000;border-radius:5px;box-shadow:0 4px 0 #000;padding:var(--s2);text-align:center;
  transition:transform .2s var(--ease),box-shadow .2s;display:flex;flex-direction:column;gap:var(--s1)}
@media (max-width:640px){.unit{padding:var(--s1)}}
.unit:hover{transform:translateY(-4px);box-shadow:0 8px 0 #000}
.unit .frame{position:relative;background:#cfcbc4;border:2px solid #000;border-radius:3px;aspect-ratio:3/4;display:grid;place-items:end center;overflow:hidden;
  background-image:linear-gradient(180deg,#e6e3dd 0%,#cfcbc4 70%,#b9b5ae 100%)}
.unit .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.18) 0,rgba(255,255,255,0) 35%,rgba(255,255,255,0) 60%,rgba(255,255,255,.12) 100%);pointer-events:none}
.unit img{height:92%;width:auto;max-width:92%;object-fit:contain;transition:transform .25s var(--ease);filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.unit:hover img{transform:scale(1.04)}
.beam{position:absolute;left:0;right:0;top:-6px;height:3px;background:var(--scan);box-shadow:0 0 12px 3px rgba(255,42,42,.7);opacity:0;pointer-events:none;z-index:2}
.unit .lbl{font-family:var(--f-cond);font-weight:700;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--bone);min-height:2.4em;display:grid;place-items:center;line-height:1.15}
@media (max-width:640px){.unit .lbl{font-size:.85rem}}
.unit .grab{width:100%;font-size:.85rem;padding:.6em}
@media (max-width:640px){.unit .grab{font-size:.74rem;padding:.55em .4em}}
.unit.got{border-color:var(--gold)}
.unit.got .grab{--bg:var(--gold);--fg:#1c0702}
.copied{position:absolute;top:8px;right:8px;z-index:3;background:var(--gold);color:#1c0702;border:2px solid #000;border-radius:999px;padding:.35em .7em;
  font-family:var(--f-display);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;rotate:-10deg;box-shadow:0 2px 0 #000;transform:scale(0);opacity:0;pointer-events:none}
.unit.got .copied{transform:none;opacity:1}
.row{display:flex;gap:var(--s2);align-items:center;justify-content:center;flex-wrap:wrap;margin-top:var(--s4)}

/* ── box yourself: the kiosk ── */
.maker{display:grid;grid-template-columns:1fr;gap:var(--s4);margin-top:var(--s4);align-items:start}
@media (min-width:900px){.maker{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}.preview{position:sticky;top:calc(var(--s4) + 60px)}}
.form{background:var(--ink-2);border:2px solid #000;border-radius:6px;padding:var(--s3);box-shadow:0 4px 0 #000}
.field{margin-top:var(--s3)}
.field:first-child{margin-top:0}
.field label,.field .lab{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);margin-bottom:.5em}
.field .lab .btn{letter-spacing:.08em}
.field input[type=text]{width:100%;padding:.7em .85em;background:#0b0201;color:var(--bone);border:2px solid #3a1208;border-radius:3px;font-family:var(--f-cond);font-weight:600;font-size:1.15rem;min-height:44px;transition:border-color .15s,box-shadow .15s}
.field input[type=text]:focus{outline:0;border-color:var(--flame);box-shadow:0 0 0 3px rgba(210,121,60,.25)}
.field input[type=text]::placeholder{color:#7a6459;font-weight:500}
.inc{display:grid;gap:.5em}
.field label.drop{position:relative;display:grid;place-items:center;gap:.3em;text-align:center;min-height:120px;padding:var(--s2);border:2px dashed #5a2a16;border-radius:5px;background:#0b0201;
  color:var(--mute);font-family:var(--f-cond);font-weight:600;font-size:1.1rem;letter-spacing:0;text-transform:none;margin-bottom:0;justify-content:center;cursor:pointer;transition:border-color .15s,background .15s,transform .15s var(--ease)}
.drop:hover,.drop.over{border-color:var(--flame);background:#160603}
.drop.over{transform:scale(1.01)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop b{font-family:var(--f-display);font-weight:400;font-size:1.3rem;letter-spacing:.04em;color:#fff}
.drop small{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.drop .name{color:var(--gold-2);font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;overflow-wrap:anywhere}
.photo-row{display:flex;gap:var(--s1);flex-wrap:wrap;align-items:center;margin-top:var(--s1)}
.check{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-cond);font-weight:600;font-size:1rem;color:var(--mute);cursor:pointer;text-transform:none;letter-spacing:0}
.check input{accent-color:var(--flame);width:18px;height:18px}
.zoomrow{display:flex;align-items:center;gap:var(--s2)}
.zoomrow input[type=range]{flex:1;accent-color:var(--flame);min-height:24px}
.zoomrow .btn{flex:none}
.hintline{font-family:var(--f-mono);font-size:.72rem;color:var(--dim);line-height:1.6;margin-top:var(--s3)}
.hintline b{color:var(--mute);font-weight:500}
.preview{position:relative;justify-self:center;width:min(100%,520px)}
.preview canvas{width:100%;height:auto;border:2px solid #000;border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.6);background:#2b2b2b;display:block;touch-action:none;cursor:grab}
.preview canvas.dragging{cursor:grabbing}
.status{position:absolute;left:var(--s2);bottom:var(--s2);background:var(--paper);color:var(--paper-ink);border:2px solid #000;border-radius:3px;padding:.45em .8em;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 3px 0 #000;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s var(--ease);pointer-events:none;max-width:calc(100% - 32px)}
.status.on{opacity:1;transform:none}
.status.busy::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--flame-2);margin-right:.6em;animation:blink 1s steps(2) infinite;vertical-align:middle}
@keyframes blink{50%{opacity:.2}}
.maker-actions{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s3)}
.maker-actions .btn{flex:1 1 auto}

/* ── the fourth wall: a store announcement over the PA ── */
.pa{margin-top:var(--s4);position:relative;background:var(--ink-2);border:2px solid #000;border-radius:6px;padding:clamp(28px,5vw,56px);box-shadow:0 4px 0 #000,0 24px 60px rgba(0,0,0,.5);overflow:hidden}
.pa::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.16) 3px 4px);pointer-events:none}
.pa > *{position:relative}
.pa .speaker{position:absolute;right:var(--s3);top:var(--s3);display:flex;gap:.5em;align-items:center;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.pa .speaker i{width:8px;height:8px;border-radius:50%;background:var(--scan);box-shadow:0 0 8px var(--scan);animation:blink 1.6s steps(2) infinite}
.pa .big{font-family:var(--f-display);font-size:clamp(1.7rem,4.4vw,3.2rem);line-height:1.05;color:#fff;max-width:20ch;
  -webkit-text-stroke:.02em #000;paint-order:stroke fill;text-shadow:.04em .04em 0 #000}
.pa p{max-width:62ch;color:var(--mute);margin-top:var(--s2);text-wrap:pretty}
.pa p.last{color:var(--bone);font-weight:600}
.readout{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s3);margin-top:var(--s4);padding-top:var(--s3);border-top:2px dashed rgba(201,162,74,.35)}
.readout b{font-family:var(--f-display);font-size:clamp(2.4rem,7vw,4.4rem);line-height:1;color:var(--gold-2);font-variant-numeric:tabular-nums;letter-spacing:.02em;font-weight:400}
.readout span{font-family:var(--f-mono);font-size:.8rem;line-height:1.6;color:var(--mute);max-width:40ch}

/* ── the receipt, printed as you scroll ── */
.printer{position:relative;margin-top:var(--s4);max-width:640px}
.printer .slot{position:relative;z-index:2;height:18px;background:linear-gradient(180deg,#3a2f29,#14100e);border:2px solid #000;border-radius:3px;box-shadow:0 6px 12px rgba(0,0,0,.6)}
.printer .slot::after{content:"";position:absolute;left:14px;right:14px;top:6px;height:4px;background:#000;border-radius:2px}
.receipt{position:relative;background:linear-gradient(90deg,rgba(0,0,0,.08),transparent 6%,transparent 94%,rgba(0,0,0,.08)),linear-gradient(180deg,#fff 0,#f7f5ef 100%);color:#221c1a;font-family:var(--f-mono);margin:0 12px;
  padding:var(--s4) var(--s3) var(--s5);box-shadow:0 20px 50px rgba(0,0,0,.55);will-change:clip-path}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:14px;
  background:linear-gradient(-45deg,var(--ink) 7px,transparent 0) 0 0/14px 14px repeat-x,linear-gradient(45deg,var(--ink) 7px,transparent 0) 0 0/14px 14px repeat-x}
.receipt h3{font-family:var(--f-display);font-size:1.5rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;font-weight:400}
.receipt .meta{text-align:center;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-dim);margin-top:.3em}
.rline{display:flex;justify-content:space-between;gap:var(--s2);font-size:.86rem;padding:.55em 0;border-bottom:1px dashed #b7ad9c}
.rline span:first-child{letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);font-size:.7rem;padding-top:.2em;flex:none}
.rline span:last-child{text-align:right;font-weight:600;overflow-wrap:anywhere}
.rlines{margin-top:var(--s3);border-top:2px solid var(--paper-ink)}
.ca-row{margin-top:var(--s3);display:flex;flex-direction:column;gap:var(--s1);position:relative}
.ca-row .lab{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-dim)}
.ca-row code{display:block;position:relative;font-family:inherit;font-size:clamp(.78rem,2.4vw,.95rem);font-weight:700;background:#fff;border:2px solid var(--paper-ink);border-radius:3px;padding:.8em .9em;overflow-wrap:anywhere;line-height:1.4;overflow:hidden}
.ca-row code.pre{font-weight:500;color:var(--paper-dim);text-align:center;letter-spacing:.06em}
.ca-row .beam{top:-6px}
.count{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);text-align:center}
.count b{font-family:var(--f-display);font-size:1.5rem;letter-spacing:.06em;color:var(--paper-ink);font-variant-numeric:tabular-nums;display:block;margin-top:.15em;font-weight:400}
.receipt .straight{margin-top:var(--s3);font-family:var(--f-body);font-size:1rem;line-height:1.5;color:#3a2a22}
.receipt .actions{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s3)}
.receipt .actions .btn{flex:1 1 auto}
.barcode{margin:var(--s4) auto 0;width:min(100%,300px);height:46px;
  background:repeating-linear-gradient(90deg,#1a0d08 0 2px,transparent 2px 4px,#1a0d08 4px 5px,transparent 5px 9px,#1a0d08 9px 12px,transparent 12px 14px,#1a0d08 14px 15px,transparent 15px 19px)}
.thanks{text-align:center;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-dim);margin-top:.8em}

/* ── doors ── */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:var(--s3);margin-top:var(--s4);align-items:stretch;perspective:1200px}
.door{position:relative;display:flex;flex-direction:column;gap:var(--s1);padding:var(--s4) var(--s3) var(--s3);background:var(--ink-2);border:2px solid #000;border-radius:5px;
  box-shadow:0 4px 0 #000;transition:transform .35s var(--ease),box-shadow .35s,background .35s;transform-origin:left center;transform-style:preserve-3d}
.door:hover{transform:rotateY(-7deg) translateX(-2px);box-shadow:14px 8px 0 #000;background:var(--ink-3)}
.door .sign{position:absolute;top:-12px;left:var(--s3);background:var(--gold);color:#1c0702;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;padding:.35em .7em;border:2px solid #000;border-radius:3px}
.door .ico{width:36px;height:36px;color:var(--gold-2)}
.door h3{font-family:var(--f-display);font-size:var(--t-lg);letter-spacing:.04em;color:#fff;font-weight:400}
.door p{color:var(--mute);font-size:1rem;line-height:1.5}
.door .go{margin-top:auto;padding-top:var(--s2)}
.door .knob{position:absolute;right:8px;top:50%;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid #000;box-shadow:0 2px 0 #000}

/* ── footer: the box side one more time, then the black band with the fine print ── */
footer{border-top:3px solid #000;margin-top:var(--s4);text-align:center}
.foot-fire{position:relative;isolation:isolate;overflow:hidden;padding:var(--s6) 0;background:var(--drench)}
.foot-fire::before{content:"";position:absolute;inset:0;z-index:-1;background:url("flame-wide.webp") center/cover no-repeat;mix-blend-mode:multiply;opacity:.5}
.chant{font-size:clamp(3rem,10.5vw,6rem);letter-spacing:-.015em;line-height:.9;text-transform:uppercase}
.chant span{display:block}
.chant span+span{color:var(--gold-2)}
.foot-band{background:var(--ink-0);border-top:3px solid #000;padding:var(--s5) 0 var(--s4)}
.foot-band .mark{justify-content:center}
.foot-links{display:flex;gap:var(--s1);justify-content:center;flex-wrap:wrap;margin:var(--s3) 0}
.closing{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:var(--s2);text-wrap:balance}
.disclaimer{font-family:var(--f-mono);font-size:.78rem;color:var(--dim);max-width:62ch;margin:var(--s3) auto 0;line-height:1.75}
.disclaimer b{color:var(--mute);font-weight:500}
.credit{margin-top:var(--s3);font-family:var(--f-mono);font-size:.72rem;color:var(--dim);letter-spacing:.06em}
.credit a{color:var(--gold-2);border-bottom:1px solid rgba(232,200,119,.35)}

#fx{position:fixed;inset:0;z-index:var(--z-fx);pointer-events:none;overflow:hidden}
.coin-p{position:absolute;width:22px;height:22px;background:url("gooner-badge.png") center/contain no-repeat;will-change:transform,opacity}
#toast{position:fixed;left:50%;bottom:var(--s4);transform:translate(-50%,140px);z-index:var(--z-toast);visibility:hidden;opacity:0;
  background:var(--paper);color:var(--paper-ink);border:2px solid #000;border-radius:3px;box-shadow:0 3px 0 #000;
  padding:.7em 1.2em;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;max-width:calc(100% - 32px);text-align:center;
  transition:transform .25s var(--ease),opacity .2s,visibility 0s .2s}
#toast.on{transform:translate(-50%,0);visibility:visible;opacity:1;transition-delay:0s}

/* ── first paint with JS: hero pieces hold their start state for at most 1.5s
   (site.js removes .pre once the choreography owns them; the head script
   removes it on a timer regardless, so nothing can stay hidden) ── */
html.pre .hero .product,html.pre .hero .sticker,html.pre .hero .hero-copy > *,html.pre .hero .shelf{opacity:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html.pre .hero .product,html.pre .hero .sticker,html.pre .hero .hero-copy > *,html.pre .hero .shelf{opacity:1}
  .mq span,#grain,.neon-word,.cs-a,.cave-sign{animation:none}
  .pa .speaker i{animation:none}
  .door:hover{transform:none}
  .unit:hover,.btn:hover{transform:none}
  .hook:hover .review{rotate:var(--r,0deg)}
}

/* static frame under the CRT canvas so it is never blank, even before site.js runs */
#incognito{background:#0b0d0f url(crt-fallback.webp) center/100% 100% no-repeat}