/* Glitchee merch store: static preview (round F). Direction: banana takeover, Glitchee's own stuff only.
   Lettering: Montserrat (the Progress-tee sans, SIL OFL 1.1, self-hosted variable 500-900). Headings 900, UI 700,
   body 500. The groovy shirt lettering appears only as his own traced art (img/lockup-*.png, tinted through
   mask-image), never as a font.
   Motifs, all his: the ripe banana (Badge_3), the banana bunch (Badge_4), the shirt print's double-line corner
   brackets, and from his YouTube thumbnails a bold red arrow, chunky outlined captions and thick purple/orange frames.
   Colours: orange #F66F00 (Glitchee Logo.png), purple #9305F1 (Purple_Glitchee_Logo.png), banana #FAD000 (Badge_3.png),
   shirt red #D30F12 (sampled off IMG_7604 at full res, white-balanced), near-black ink.
   Contrast (WCAG): ink on ground 17.8, muted on ground 7.6, purple on ground 5.7, white on purple 5.9,
   ink on orange 6.4, ink on banana 12.5, red on ground 5.2. Orange is never used for small text on light grounds.
   Sections are shaped for an OS 2.0 theme later: header, hero, product-grid, product, text-with-image, video-row,
   band, socials, footer. */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url(../fonts/montserrat-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --purple: #9305F1;
  --purple-deep: #5B0399;
  --orange: #F66F00;
  --orange-hover: #FF8418;
  --banana: #FAD000;
  --red: #D30F12;
  --ink: #16101C;
  --muted: #574D63;
  --ground: #FFF9EF;
  --paper: #FFFFFF;
  --line: rgba(22, 16, 28, .14);
  --rule: rgba(147, 5, 241, .12);
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --w-body: 500;
  --w-ui: 700;
  --w-head: 900;
  --max: 1344px;
  --pad: clamp(16px, 3.4vw, 48px);
  --radius: 10px;
  --frame: 7px;
  --lift: 0 1px 1px rgba(22, 16, 28, .14), 0 14px 26px -16px rgba(22, 16, 28, .55);
  --ease: cubic-bezier(.3, .7, .1, 1);
  --t: 200ms;
  --outline: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink),
    1.5px 1.5px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink),
    3px 4px 0 var(--ink);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { background: var(--ground); color: var(--ink); font: var(--w-body) 17px/1.55 var(--font); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100vh; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--purple); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--purple-deep); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-weight: var(--w-head); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--banana); color: var(--ink); }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: var(--w-ui); text-decoration: none; }
.skip:focus { top: 12px; color: #fff; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(56px, 7vw, 104px); }
.kicker { font-weight: var(--w-ui); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--purple); }
.h2 { font-size: clamp(2.1rem, 2.4vw + 1.1rem, 3.4rem); color: var(--purple); }
.lede { font-size: clamp(1.06rem, .4vw + .98rem, 1.25rem); color: var(--muted); max-width: 46ch; }
.muted { color: var(--muted); }

/* owner placeholders: visible on purpose, every owner fact we do not have yet */
.ph { background: rgba(250, 208, 0, .38); color: var(--ink); border-bottom: 2px dashed var(--ink); padding: 0 .2em; border-radius: 3px; font-weight: var(--w-ui); font-size: .92em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ------------------------------------------------------------------ his motifs */
/* 1. the shirt print's double-line corner brackets (top-left and bottom-right), tinted with currentColor */
.brk { position: relative; --bk: 92px; color: var(--ink); }
.brk::before, .brk::after { content: ""; position: absolute; width: var(--bk); height: var(--bk); pointer-events: none;
  background: currentColor; -webkit-mask: url(../img/bracket.svg) no-repeat 0 0 / 100% 100%; mask: url(../img/bracket.svg) no-repeat 0 0 / 100% 100%; }
.brk::before { left: 0; top: 0; }
.brk::after { right: 0; bottom: 0; transform: rotate(180deg); }

/* 2. chunky outlined caption, the way his thumbnails write "Oh Poop" */
.cap { font-weight: var(--w-head); text-transform: uppercase; letter-spacing: .01em; color: #fff; text-shadow: var(--outline); line-height: 1; }
.cap-y { color: var(--banana); }

/* 3. the red thumbnail arrow (img/arrow.svg) */
.arrow { pointer-events: none; }

/* 4. thick thumbnail frames */
.frame { border: var(--frame) solid var(--purple); border-radius: 12px; background: var(--paper); overflow: hidden; }
.frame-o { border-color: var(--orange); }

/* groovy lockup art, traced from the shirt (alpha masks tinted in CSS) */
.lk { display: block; }
.lk i { display: block; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.lk-red, .lk-org { display: block; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.lk-red { background: var(--red); }
.lk-org { background: var(--orange); }
.lk-never { -webkit-mask-image: url(../img/lockup-line-never.png); mask-image: url(../img/lockup-line-never.png); aspect-ratio: 1507 / 454; }
.lk-stop { -webkit-mask-image: url(../img/lockup-line-stop.png); mask-image: url(../img/lockup-line-stop.png); aspect-ratio: 1355 / 481; }
.lk-being { -webkit-mask-image: url(../img/lockup-line-being.png); mask-image: url(../img/lockup-line-being.png); aspect-ratio: 1497 / 488; }
.lk-stupid { -webkit-mask-image: url(../img/lockup-stupid.png); mask-image: url(../img/lockup-stupid.png); aspect-ratio: 1917 / 437; }
/* one-row title lockup: NEVER STOP BEING / S.T.U.P.I.D */
.lk-title { width: 100%; max-width: 300px; }
.lk-title .row { display: flex; gap: 3%; align-items: flex-end; }
.lk-title .row i { height: auto; }
.lk-title .lk-never { width: 34%; }
.lk-title .lk-stop { width: 28.6%; }
.lk-title .lk-being { width: 31.4%; }
.lk-title .lk-stupid { width: 100%; margin-top: 4%; }

/* the shirt print, rebuilt from his parts: brackets, red block, orange line, banana bunches */

/* ------------------------------------------------------------------ header */
.site-header { position: relative; z-index: 20; }
.site-header .bar { max-width: var(--max); margin: 0 auto; padding: 14px var(--pad) 6px; display: flex; align-items: center; gap: clamp(14px, 3vw, 44px); }
.logo { display: block; flex: none; }
.logo img { width: 138px; }
.nav { display: flex; gap: clamp(12px, 2.2vw, 30px); }
.nav a { position: relative; display: inline-block; padding: 10px 2px; font-weight: var(--w-ui); font-size: 18px; color: var(--ink); text-decoration: none; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 5px; border-radius: 3px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--purple); }
.cart-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 14px 6px 12px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 999px; font-weight: var(--w-ui); font-size: 17px; transition: background var(--t) var(--ease); }
.cart-btn:hover { background: var(--banana); }
.cart-btn svg { width: 22px; height: 22px; flex: none; }
.cart-btn b { min-width: 1.4em; height: 1.4em; display: inline-grid; place-items: center; border-radius: 999px; background: var(--purple); color: #fff; font-size: 14px; font-variant-numeric: tabular-nums; padding: 0 .3em; }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 12px; border: 3px solid var(--ink); font-weight: var(--w-ui); font-size: 17px; line-height: 1.1; text-decoration: none; color: var(--ink); background: var(--paper); transition: background var(--t) var(--ease), transform 120ms var(--ease), box-shadow var(--t) var(--ease); box-shadow: 0 4px 0 var(--ink); }
.btn:hover { background: var(--banana); color: var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn-buy { width: 100%; min-height: 60px; background: var(--orange); font-size: 21px; font-weight: var(--w-head); letter-spacing: .01em; }
.btn-buy:hover { background: var(--orange-hover); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--purple); color: #fff; }
.btn-purple { background: var(--purple); color: #fff; }
.btn-purple:hover { background: var(--purple-deep); color: #fff; }
.btn:focus-visible { outline-offset: 4px; }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

/* ------------------------------------------------------------------ socials */
.socials { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.soc { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 15px 0 12px; background: var(--banana); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 12px; text-decoration: none; font-weight: var(--w-ui); font-size: 16px; transition: transform var(--t) var(--ease), background var(--t) var(--ease); }
.soc:nth-child(odd) { transform: rotate(-1.5deg); }
.soc:nth-child(even) { transform: rotate(1.2deg); }
.soc:hover { transform: rotate(0) translateY(-2px); color: var(--ink); background: #FFE14D; }
.soc svg { width: 20px; height: 20px; flex: none; }

/* ------------------------------------------------------------------ HERO (home) */
.hero { position: relative; overflow-x: clip; max-width: 1440px; margin: 0 auto; padding: 6px var(--pad) 40px; display: grid;
  grid-template-columns: 290px minmax(0, 1fr) 440px; grid-template-areas: "mascot head head" "fan fan card"; column-gap: 30px; }
.mascot { grid-area: mascot; position: relative; z-index: 4; height: 278px; }
.mascot .flip { position: absolute; inset: 0; }
.nana { position: absolute; left: 0; top: 0; width: 290px; transform-origin: 10% 88%; }
/* the one fun moment: js adds .go once the banana image has loaded, so the nod is never spent on an empty box */
.nana.go { animation: nod 900ms cubic-bezier(.3, .7, .1, 1) 150ms 1 both; }
.nana img { width: 100%; filter: drop-shadow(0 12px 14px rgba(22, 16, 28, .22)); }
@keyframes nod { 0% { transform: rotate(0); } 40% { transform: rotate(9deg); } 66% { transform: rotate(-2.5deg); } 84% { transform: rotate(1deg); } 100% { transform: rotate(0); } }
.mascot .arrow { position: absolute; right: -86px; top: 34px; width: 142px; z-index: 5; }
.head { grid-area: head; align-self: start; justify-self: start; margin-top: 26px; margin-left: 66px; padding: 30px 22px 34px 34px; --bk: 70px; }
.hero h1 { font-size: clamp(3.1rem, 5.6vw + .1rem, 5.6rem); line-height: .95; color: var(--purple); letter-spacing: -.035em; white-space: nowrap; text-shadow: .045em .05em 0 var(--banana); }
.hang { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hang > span { font-weight: var(--w-ui); font-size: 17px; margin-right: 2px; }
.fan { grid-area: fan; position: relative; height: 460px; margin-top: -26px; }
.stk { position: absolute; width: 252px; padding: 9px; background: var(--paper); border-radius: 12px; box-shadow: var(--lift); cursor: pointer; border: 0 solid var(--purple); transition: transform var(--t) var(--ease), border-width var(--t) var(--ease), padding var(--t) var(--ease); }
.stk img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 5px; }
.stk .lab { position: absolute; left: 0; right: 0; bottom: -48px; text-align: center; font-size: 26px; }
.stk-white { left: 18px; top: 66px; transform: rotate(-6deg); z-index: 1; }
.stk-purple { left: 290px; top: 8px; transform: rotate(1.5deg); z-index: 2; }
.stk-black { left: 560px; top: 44px; transform: rotate(5deg); z-index: 1; }
.stk:hover { transform: rotate(0) translateY(-6px); }
.stk.on { z-index: 3; border-width: var(--frame); padding: 4px; }
.stk.on .lab { color: var(--banana); }
.hero-card { grid-area: card; align-self: start; margin-top: -54px; position: relative; z-index: 5; }
.peek { position: absolute; width: 84px; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(22, 16, 28, .2)); }
.peek-r { right: -26px; top: 470px; transform: rotate(-36deg); }

/* ------------------------------------------------------------------ the index-card buy box */
.icard { position: relative; background: var(--paper); padding: 30px 30px 24px 46px; border-radius: 4px; box-shadow: var(--lift); transform: rotate(.8deg);
  background-image: linear-gradient(90deg, transparent 26px, rgba(246, 111, 0, .6) 26px, rgba(246, 111, 0, .6) 28px, transparent 28px),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px); }
.icard .bunch-pin { position: absolute; right: -26px; top: -34px; width: 86px; transform: rotate(18deg); filter: drop-shadow(0 6px 6px rgba(22, 16, 28, .2)); }
.icard h2, .icard h1 { margin: 0; }
.price-row { display: flex; align-items: baseline; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.price { font-weight: var(--w-head); font-size: 50px; line-height: 1; color: var(--purple); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.price-note { font-size: 15px; color: var(--muted); }
.opt { border: 0; padding: 0; margin-top: 16px; min-width: 0; }
.opt legend { padding: 0; margin-bottom: 8px; font-size: 16px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.opt legend b { color: var(--ink); font-weight: var(--w-ui); }
.opt legend a { margin-left: auto; font-weight: var(--w-ui); font-size: 15px; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tees { display: flex; gap: 8px; flex-wrap: wrap; }
.tees label { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 4px 12px 4px 6px; border-radius: 12px; border: 2.5px solid var(--line); background: var(--paper); cursor: pointer; font-weight: var(--w-ui); font-size: 15px; transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
.tees label:hover { border-color: var(--ink); }
.tees svg { width: 30px; height: 27px; flex: none; }
.tees input:checked + label { border-color: var(--ink); background: rgba(250, 208, 0, .45); box-shadow: inset 0 0 0 1px var(--ink); }
.tees input:focus-visible + label, .sizes input:focus-visible + label { outline: 3px solid var(--purple); outline-offset: 2px; }
.sizes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sizes label { position: relative; display: grid; place-items: center; min-height: 48px; border-radius: 12px; border: 2.5px solid var(--line); background: var(--paper); cursor: pointer; font-weight: var(--w-ui); font-size: 17px; transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
.sizes label:hover { border-color: var(--ink); }
.sizes input:checked + label { border-color: var(--ink); background: var(--ink); color: #fff; }
.sizes input:disabled + label { cursor: not-allowed; color: #5F5669; background: #F4F1F6; border-style: dashed; text-decoration: line-through; text-decoration-thickness: 2px; }
.sizes input:disabled + label:hover { border-color: var(--line); }
.opt-msg { min-height: 0; margin-top: 8px; font-size: 15px; font-weight: var(--w-ui); color: var(--red); }
.opt-msg:empty { display: none; }
.icard .btn-buy { margin-top: 20px; }
.buy-facts { margin-top: 14px; padding: 0; list-style: none; font-size: 14.5px; color: var(--muted); display: grid; gap: 6px; }
.buy-facts li { display: flex; gap: 8px; align-items: baseline; }
.buy-facts li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--purple); transform: translateY(-1px) rotate(45deg); }
.buy-facts a { font-weight: var(--w-ui); }
.tap-hint { margin-top: 10px; font-size: 15px; color: var(--muted); }
.soldout-note { font-size: 14px; color: var(--muted); margin-top: 6px; }

/* ------------------------------------------------------------------ product grid */
.grid-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.grid-head .cap { font-size: 20px; transform: rotate(-4deg); }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 48px); margin-top: 36px; list-style: none; padding: 0; }
.pcard { position: relative; display: flex; flex-direction: column; }
.pcard .pic { position: relative; display: block; }
.pcard .pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pcard:nth-child(1) .frame { transform: rotate(-1.2deg); }
.pcard:nth-child(2) .frame { transform: rotate(1deg); }
.pcard:nth-child(3) .frame { transform: rotate(-.7deg); }
.pcard h2, .pcard h3 { margin-top: 20px; font-size: 22px; line-height: 1.15; letter-spacing: -.01em; }
.pcard :is(h2, h3) a { color: var(--ink); text-decoration: none; }
.pcard :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pcard :is(h2, h3) a:hover { color: var(--purple); }
.pgrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.pcard .meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; }
.pcard .p { font-weight: var(--w-head); font-size: 30px; color: var(--purple); line-height: 1; letter-spacing: -.02em; }
.pcard .p-soon { font-size: 18px; color: var(--muted); font-weight: var(--w-ui); letter-spacing: 0; }
.pcard .btn { position: relative; z-index: 2; min-height: 46px; padding: 10px 18px; font-size: 16px; }
.dots { display: flex; gap: 6px; margin-top: 8px; }
.dots span { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink); }
.stamp { position: absolute; right: 14px; top: 16px; z-index: 2; font-size: 26px; transform: rotate(7deg); }

/* ------------------------------------------------------------------ acronym (text-with-image) */
.acro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.shirt { background: var(--paper); border-radius: 18px; box-shadow: var(--lift); transform: rotate(-1.5deg); max-width: 540px; width: 100%; justify-self: center; }

/* S.T.U.P.I.D. flip tiles: one row of six, his traced lettering on the front, the word on the back.
   Mouse: hover flips. Keyboard: focus flips. Touch: a tap flips (js/site.js adds .is-flipped). */
.acro-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.flip-row li { container-type: inline-size; }
.flip-row { list-style: none; padding: 0; margin-top: clamp(28px, 3vw, 44px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.3vw, 18px); }
.flip-tile { display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; perspective: 1000px; -webkit-tap-highlight-color: transparent; }
.ft-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 560ms var(--ease); }
.ft-face { position: absolute; inset: 0; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ft-front { background: var(--paper); }
.ft-front i { height: 58%; }
.lk-s { -webkit-mask-image: url(../img/lk-s.png); mask-image: url(../img/lk-s.png); aspect-ratio: 150 / 260; }
.lk-t { -webkit-mask-image: url(../img/lk-t.png); mask-image: url(../img/lk-t.png); aspect-ratio: 193 / 260; }
.lk-u { -webkit-mask-image: url(../img/lk-u.png); mask-image: url(../img/lk-u.png); aspect-ratio: 170 / 260; }
.lk-p { -webkit-mask-image: url(../img/lk-p.png); mask-image: url(../img/lk-p.png); aspect-ratio: 165 / 260; }
.lk-i { -webkit-mask-image: url(../img/lk-i.png); mask-image: url(../img/lk-i.png); aspect-ratio: 72 / 260; }
.lk-d { -webkit-mask-image: url(../img/lk-d.png); mask-image: url(../img/lk-d.png); aspect-ratio: 155 / 260; }
.ft-back { transform: rotateY(180deg); align-content: center; gap: 8px; padding: 4cqi; background: var(--purple); color: #fff; font-weight: var(--w-head); font-size: 16px; font-size: clamp(13px, 12cqi, 26px); line-height: 1.15; text-align: center; text-wrap: balance; }
.ft-back b { font-size: .8em; width: 2em; height: 2em; display: grid; place-items: center; justify-self: center; border-radius: 50%; background: var(--banana); color: var(--ink); }
.flip-row li:nth-child(odd) .flip-tile { transform: rotate(-1.2deg); }
.flip-row li:nth-child(even) .flip-tile { transform: rotate(1deg); }
@media (hover: hover) { .flip-tile:hover .ft-in { transform: rotateY(180deg); } }
.flip-tile:focus-visible { outline: none; }
.flip-tile:focus-visible .ft-in { transform: rotateY(180deg); }
.flip-tile:focus-visible .ft-back { outline: 3px solid var(--ink); outline-offset: 4px; }
.flip-tile.is-flipped .ft-in { transform: rotateY(180deg); }

/* banana-yellow section ground (his mascot colour): ink text, purple only at heading size */
.on-banana { background: var(--banana); }
.on-banana .kicker { color: var(--ink); }
.on-banana .lede, .on-banana .vmeta { color: #3B3045; }
.on-banana a:not(.btn) { color: var(--ink); }
.on-banana .yt { box-shadow: 0 5px 0 var(--ink); }
.btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* ------------------------------------------------------------------ video row */
.vrow { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 2.6vw, 36px); margin-top: 34px; align-items: start; }
.vlist { display: grid; gap: 18px; }
.yt { position: relative; display: block; width: 100%; padding: 0; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--ink); aspect-ratio: 16 / 9; }
.yt img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.yt:hover img { transform: scale(1.03); }
.yt .play { position: absolute; left: 50%; top: 50%; width: 74px; height: 52px; translate: -50% -50%; border-radius: 14px; background: var(--red); border: 3px solid var(--ink); display: grid; place-items: center; transition: transform var(--t) var(--ease); }
.yt:hover .play { transform: scale(1.08); }
.yt .play svg { width: 26px; height: 26px; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vcard h3 { font-size: 18px; line-height: 1.25; letter-spacing: -.005em; margin-top: 12px; }
.vcard .vmeta { font-size: 15px; color: var(--muted); margin-top: 4px; }
.vbox { position: relative; }
.vfeat .cap { position: absolute; left: 14px; top: 14px; z-index: 2; font-size: 22px; transform: rotate(-3deg); pointer-events: none; }
.vfeat h3 { font-size: 22px; }
.vlist .vcard { display: grid; grid-template-columns: 46% minmax(0, 1fr); gap: 16px; align-items: center; }
.vlist .vcard h3 { margin-top: 0; font-size: 17px; }
.vlist .yt .play { width: 52px; height: 38px; border-radius: 10px; }
.vlist .yt .play svg { width: 18px; height: 18px; }
.vrow-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vrow-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ------------------------------------------------------------------ background-clip band */
.band { position: relative; overflow: hidden; background: var(--ink); border-top: 6px solid var(--purple); border-bottom: 6px solid var(--orange); min-height: clamp(360px, 42vw, 560px); display: grid; align-items: center; }
.band video, .band .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22, 16, 28, .78) 0%, rgba(22, 16, 28, .45) 55%, rgba(22, 16, 28, .1) 100%); }
.band .wrap { position: relative; z-index: 2; width: 100%; }
.band .cap { font-size: clamp(2.2rem, 4.4vw + .4rem, 4.6rem); max-width: 13ch; line-height: 1.02; text-transform: none; letter-spacing: -.02em; }
.band .cap .y { color: var(--banana); }
.band p { color: #fff; margin-top: 18px; font-weight: var(--w-ui); max-width: 40ch; }
.band .btn { margin-top: 24px; }
.band .slot-tag { color: var(--ink); margin: 0; }
.slot-tag { position: absolute; right: 12px; bottom: 12px; z-index: 3; background: var(--banana); color: var(--ink); border: 2px solid var(--ink); border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: var(--w-ui); max-width: calc(100% - 24px); }

/* ------------------------------------------------------------------ about strip + socials tiles */
.strip { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 56px); align-items: center; }
.strip img { width: 200px; transform: rotate(-8deg); }
.strip h2 { font-size: clamp(1.8rem, 1.6vw + 1.1rem, 2.6rem); color: var(--purple); }
.strip p { margin-top: 10px; color: var(--muted); max-width: 52ch; font-size: 18px; }
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 30px; list-style: none; padding: 0; }
.tile { display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 20px; border-radius: 14px; border: 3px solid var(--ink); background: var(--paper); text-decoration: none; color: var(--ink); box-shadow: 0 5px 0 var(--ink); transition: transform var(--t) var(--ease), background var(--t) var(--ease); }
.tile:hover { transform: translateY(-3px); background: var(--banana); color: var(--ink); }
.tile svg { width: 38px; height: 38px; margin-bottom: auto; }
.tile b { font-size: 20px; font-weight: var(--w-head); }
.tile span { font-size: 15px; color: var(--muted); overflow-wrap: anywhere; }
.tile:nth-child(odd) { transform: rotate(-.8deg); }
.tile:nth-child(odd):hover { transform: rotate(0) translateY(-3px); }

/* ------------------------------------------------------------------ footer */
.site-footer { background: var(--purple); color: #fff; margin-top: 0; position: relative; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--banana); }
.foot { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 36px; padding-top: 64px; padding-bottom: 40px; }
.foot .logo img { width: 160px; }
.foot .tag { margin-top: 16px; font-weight: var(--w-ui); max-width: 26ch; }
.foot h2 { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; font-weight: var(--w-head); color: #fff; }
.foot h2::after { content: ""; display: block; width: 28px; height: 5px; border-radius: 3px; background: var(--banana); margin-top: 8px; }
.foot ul { list-style: none; padding: 0; margin-top: 12px; display: grid; gap: 2px; }
.foot li a { display: inline-block; padding: 5px 0; font-weight: var(--w-ui); text-decoration: none; }
.foot li a:hover { text-decoration: underline; }
.foot-base { border-top: 2px solid rgba(255, 255, 255, .28); padding-top: 18px; padding-bottom: 26px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 15px; }
.foot-bunch { position: absolute; right: clamp(12px, 4vw, 56px); top: -48px; width: 96px; transform: rotate(12deg); filter: drop-shadow(0 6px 6px rgba(22, 16, 28, .25)); }

/* ------------------------------------------------------------------ page heads (inner pages) */
.phead { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(20px, 3vw, 36px); }
.phead .inner { display: inline-block; padding: 26px 34px 30px 30px; --bk: 54px; }
.phead h1 { font-size: clamp(2.6rem, 4vw + 1rem, 4.8rem); color: var(--purple); text-shadow: .045em .05em 0 var(--banana); }
.phead p { margin-top: 12px; font-size: clamp(1.05rem, .4vw + .98rem, 1.25rem); color: var(--muted); max-width: 50ch; }
.crumbs { font-size: 15px; color: var(--muted); padding-top: 18px; }
.crumbs a { font-weight: var(--w-ui); display: inline-block; padding: 4px 0; }

/* ------------------------------------------------------------------ product page */
.product { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding-top: 18px; padding-bottom: 64px; }
.gallery .main { position: relative; }
.gallery .main img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; }
.gallery .main .frame { transform: rotate(-.8deg); }
.thumbs { display: flex; gap: 10px; margin-top: 18px; list-style: none; padding: 4px 2px 8px; overflow-x: auto; scrollbar-width: thin; }
.thumbs button { position: relative; flex: none; width: 84px; padding: 0; border: 3px solid transparent; border-radius: 10px; background: none; overflow: hidden; }
.thumbs button img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; }
.thumbs button[aria-current="true"] { border-color: var(--purple); }
.thumbs button:hover { border-color: var(--ink); }
.buybox { position: sticky; top: 20px; }
.buybox .icard { transform: rotate(.5deg); }
.buybox h1 { font-size: clamp(1.9rem, 1.4vw + 1.2rem, 2.5rem); line-height: 1.08; }
.buybox .lk-title { max-width: 340px; margin-bottom: 14px; }
.ptext { margin-top: 12px; color: var(--muted); }
.details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.dblock { background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; padding: 24px; }
.dblock h2 { font-size: 24px; color: var(--purple); }
.dblock p, .dblock li { margin-top: 10px; font-size: 16px; }
.dblock ul { padding-left: 1.1em; }
.sizetable { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.sizetable th, .sizetable td { text-align: left; padding: 8px 6px; border-bottom: 1.5px solid var(--line); vertical-align: top; }
.sizetable th { font-weight: var(--w-ui); }
.sizetable .ph { font-size: 12.5px; }
.sticky-buy { display: none; }
.notify { display: grid; gap: 8px; margin-top: 18px; }
.notify label { font-weight: var(--w-ui); font-size: 16px; }
.notify .row { display: flex; gap: 8px; }
.notify input { flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; border: 2.5px solid var(--muted); border-radius: 12px; font-size: 16px; background: #fff; }
.notify input:focus-visible { outline: 3px solid var(--purple); outline-offset: 1px; border-color: var(--ink); }
.notify .btn { min-height: 52px; box-shadow: none; }
.notify .hint { font-size: 14px; color: var(--muted); }
.notify .done { font-weight: var(--w-ui); color: var(--purple-deep); font-size: 15px; }
.soon-badge { display: inline-block; margin-top: 14px; font-size: 30px; transform: rotate(-3deg); }
.progress-print { display: grid; justify-items: start; gap: .1em; font-weight: var(--w-ui); line-height: 1; padding: 13% 12%; font-size: clamp(1.4rem, 2.6vw, 2.5rem); }
.progress-print span { display: block; transform: scaleY(1.45); transform-origin: left center; margin: .22em 0; letter-spacing: -.01em; }
.progress-print em { font-style: normal; }
.progress-print .o { color: var(--orange); }
.progress-print .pu { color: var(--purple); }

/* ------------------------------------------------------------------ shop / about / watch / faq / 404 / policies */
.about-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.about-hero .frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about-hero .frame { transform: rotate(1.5deg); max-width: 480px; justify-self: center; }
/* family photos (Josiah 10-18): framed like the product photos, a slight opposite tilt each */
.fam-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 48px); margin-top: 32px; }
.fam-row .frame img, .fam-big img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.fam-row .frame:first-child { transform: rotate(-1deg); }
.fam-row .frame:last-child { transform: rotate(1.2deg); }
.fam-big { max-width: 1000px; margin: 32px auto 0; transform: rotate(-.6deg); }
.prose { max-width: 66ch; }
.prose p, .prose ul, .prose ol, .prose table { margin-top: 14px; }
.prose h2 { margin-top: 40px; font-size: clamp(1.4rem, .8vw + 1.1rem, 1.8rem); color: var(--purple); letter-spacing: -.01em; }
.prose h3 { margin-top: 24px; font-size: 1.15rem; }
.prose li { margin-top: 6px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 8px; border-bottom: 1.5px solid var(--line); vertical-align: top; min-width: 120px; }
.prose th { font-weight: var(--w-ui); }
.policy-note { background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; padding: 18px 20px; font-size: 15.5px; max-width: 66ch; }
.policy-note b { font-weight: var(--w-ui); }
.faq { max-width: 820px; display: grid; gap: 14px; }
.faq details { background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-weight: var(--w-ui); font-size: 19px; min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--banana) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316101C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/18px no-repeat; border: 2px solid var(--ink); }
.faq details[open] summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316101C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.faq .ans { padding: 0 20px 20px; }
.faq .ans p + p { margin-top: 10px; }
.lost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; min-height: 60vh; }
.lost .slip { width: min(380px, 80%); transform: rotate(104deg); justify-self: center; }
.lost .btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.watch-feat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 44px); align-items: center; }

/* ------------------------------------------------------------------ cart drawer (opens only on Add to cart or the header cart) */
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(22, 16, 28, .45); opacity: 0; transition: opacity 240ms var(--ease); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(440px, 100vw - 28px); background: var(--ground); border-left: 4px solid var(--ink); display: flex; flex-direction: column; transform: translateX(105%); transition: transform 260ms var(--ease); }
.drawer.open { transform: none; }
.scrim.open { opacity: 1; }
.drawer[hidden], .scrim[hidden] { display: none; }
.drawer .dh { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 3px solid var(--ink); background: var(--banana); }
.drawer .dh h2 { font-size: 26px; color: var(--ink); }
.drawer .x { width: 44px; height: 44px; border-radius: 12px; border: 2.5px solid var(--ink); background: var(--paper); display: grid; place-items: center; }
.drawer .x:hover { background: var(--ground); }
.drawer .x svg { width: 20px; height: 20px; }
.drawer .lines { flex: 1; overflow-y: auto; padding: 8px 20px; list-style: none; margin: 0; }
.line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1.5px solid var(--line); align-items: start; }
.line img { width: 72px; height: 96px; object-fit: cover; border-radius: 8px; border: 2px solid var(--ink); }
.line .nm { font-weight: var(--w-ui); font-size: 16px; line-height: 1.25; }
.line .vr { font-size: 14px; color: var(--muted); margin-top: 2px; }
.line .lp { font-weight: var(--w-head); color: var(--purple); font-size: 17px; }
.qty { display: inline-flex; align-items: center; margin-top: 10px; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; background: var(--paper); }
.qty button { width: 40px; height: 40px; border: 0; background: none; font-weight: var(--w-head); font-size: 20px; line-height: 1; }
.qty button:hover { background: var(--banana); }
.qty output { min-width: 32px; text-align: center; font-weight: var(--w-ui); font-variant-numeric: tabular-nums; }
.line .rm { margin-top: 10px; background: none; border: 0; padding: 8px 0; min-height: 40px; color: var(--purple); font-weight: var(--w-ui); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.drawer .df { padding: 18px 20px 22px; border-top: 3px solid var(--ink); background: var(--paper); }
.drawer .tot { display: flex; justify-content: space-between; align-items: baseline; font-weight: var(--w-ui); font-size: 18px; }
.drawer .tot b { font-weight: var(--w-head); font-size: 26px; color: var(--purple); font-variant-numeric: tabular-nums; }
.drawer .fine { font-size: 14px; color: var(--muted); margin-top: 8px; }
.drawer .btn-buy { margin-top: 14px; flex-direction: column; gap: 2px; min-height: 66px; }
.drawer .btn-buy small { font-size: 13px; font-weight: var(--w-ui); }
.drawer .msg { margin-top: 10px; font-size: 14.5px; font-weight: var(--w-ui); color: var(--purple-deep); }
.drawer .msg:empty { display: none; }
.drawer .keep { display: block; width: 100%; margin-top: 10px; background: none; border: 0; min-height: 44px; font-weight: var(--w-ui); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.empty { text-align: center; padding: 40px 10px; }
.empty img { width: 120px; margin: 0 auto 16px; transform: rotate(-12deg); }
.empty p { font-weight: var(--w-ui); font-size: 18px; }
.empty .btn { margin-top: 18px; }
body.locked { overflow: hidden; }

/* Live edits (js/edits.js, saved in the editor at edit.html): the page stays hidden until they are applied, and shows
   after 2.5 s whatever happens. The class is only ever set by the server when this page has edits. */
html.edits-pending body { visibility: hidden; animation: edits-reveal 0s linear 2.5s forwards; }
@keyframes edits-reveal { to { visibility: visible; } }

/* ------------------------------------------------------------------ motion: one fun moment only */
@media (prefers-reduced-motion: reduce) {
  .nana, .nana.go { animation: none; }
  /* tiles swap faces without turning */
  .ft-in { transform: none !important; }
  .ft-face { -webkit-backface-visibility: visible; backface-visibility: visible; transition: opacity 1ms; }
  .ft-back { transform: none; opacity: 0; }
  .flip-tile:focus-visible .ft-back, .flip-tile.is-flipped .ft-back { opacity: 1; }
  @media (hover: hover) { .flip-tile:hover .ft-back { opacity: 1; } }
  *, *::before, *::after { transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ tablet */
@media (max-width: 1180px) {
  .hero { grid-template-columns: 220px minmax(0, 1fr) 380px; }
  .mascot { height: 210px; }
  .nana { width: 220px; }
  .mascot .arrow { width: 112px; right: -64px; top: 20px; }
  .head { margin-left: 40px; padding: 24px 28px 28px 26px; --bk: 54px; }
  .hero h1 { font-size: clamp(2.8rem, 5vw, 4.4rem); }
  .fan { height: 380px; margin-top: 10px; }
  .stk { width: 196px; padding: 7px; }
  .stk .lab { font-size: 20px; bottom: -38px; }
  .stk-white { left: 0; top: 52px; } .stk-purple { left: 196px; top: 0; } .stk-black { left: 392px; top: 34px; }
  .hero-card { margin-top: -20px; }
  .icard { padding: 26px 22px 22px 40px; }
  .price { font-size: 44px; }
  .peek-r { display: none; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .flip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flip-tile { aspect-ratio: 1; }
  .hero { grid-template-columns: 180px minmax(0, 1fr); grid-template-areas: "mascot head" "fan fan" "card card"; }
  .mascot { height: 172px; }
  .nana { width: 180px; }
  .mascot .arrow { width: 96px; right: -56px; }
  .hero h1 { white-space: normal; }
  .fan { max-width: 700px; width: 100%; margin: 26px auto 0; height: 400px; }
  .stk { width: 220px; }
  .stk-white { left: 0; top: 50px; } .stk-purple { left: calc(50% - 110px); top: 0; } .stk-black { left: auto; right: 0; top: 34px; }
  .hero-card { max-width: 560px; width: 100%; margin: 64px auto 0; }
  .pgrid, .pgrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acro, .about-hero, .watch-feat, .lost { grid-template-columns: minmax(0, 1fr); }
  .vrow { grid-template-columns: minmax(0, 1fr); }
  .vrow-4, .vrow-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip { grid-template-columns: 120px minmax(0, 1fr); }
  .strip img { width: 120px; }
  .strip .btn { grid-column: 1 / -1; justify-self: start; }
  .product { grid-template-columns: minmax(0, 1fr); }
  .buybox { position: static; }
  .details { grid-template-columns: minmax(0, 1fr); }
  .sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 3px solid var(--ink); transition: opacity 160ms var(--ease); }
  .sticky-buy[hidden] { display: none; }
  .sticky-buy img { width: 44px; height: 58px; object-fit: cover; border-radius: 6px; border: 2px solid var(--ink); flex: none; }
  .sticky-buy .info { min-width: 0; flex: 1; line-height: 1.2; }
  .sticky-buy .info b { display: block; font-weight: var(--w-head); color: var(--purple); font-size: 19px; }
  .sticky-buy .info span { display: block; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sticky-buy .btn-buy { width: auto; min-height: 52px; font-size: 18px; padding: 10px 18px; box-shadow: none; }
  body.has-sticky { padding-bottom: 84px; }
}

/* ------------------------------------------------------------------ phone */
@media (max-width: 640px) {
  html { font-size: 16px; }
  .fam-row { grid-template-columns: minmax(0, 1fr); }
  .site-header .bar { padding: 10px 14px 4px; gap: 10px; }
  .logo img { width: 92px; }
  .nav { gap: 12px; }
  .nav a { font-size: 15px; padding: 10px 1px; }
  .cart-btn { padding: 4px 10px 4px 9px; gap: 6px; min-height: 44px; font-size: 15px; border-width: 2px; }
  .cart-btn .word { display: none; }
  .cart-btn svg { width: 20px; height: 20px; }

  .hero { padding: 0 16px 24px; column-gap: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fan" "card"; }
  .head { margin: 10px 0 0; padding: 18px 22px 22px 18px; --bk: 40px; justify-self: stretch; }
  .hero h1 { font-size: clamp(2.7rem, 13.4vw, 3.5rem); line-height: .98; white-space: normal; max-width: 6.2em; }
  .mascot { grid-area: head; justify-self: end; align-self: start; width: 86px; height: 84px; margin: 118px 2px 0 0; }
  .mascot .flip { transform: scaleX(-1); }
  .nana { width: 86px; }
  .mascot .arrow { display: none; }
  .hang { margin-top: 16px; gap: 8px; flex-wrap: wrap; }
  .hang > span { font-size: 14px; width: 100%; }
  .hang .socials { gap: 8px; }
  .soc { width: 44px; height: 44px; padding: 0; justify-content: center; flex: none; border-width: 2px; }
  .soc .nm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .fan { height: 262px; margin-top: 12px; }
  .stk { width: 134px; padding: 5px; border-radius: 9px; }
  .stk.on { padding: 2px; border-width: 5px; }
  .stk .lab { bottom: -32px; font-size: 17px; }
  .stk-white { left: 2px; top: 22px; } .stk-purple { left: calc(50% - 67px); top: 0; } .stk-black { left: auto; right: 2px; top: 20px; }
  .hero-card { margin-top: 30px; }
  .icard { padding: 22px 16px 18px 34px; transform: rotate(.4deg);
    background-image: linear-gradient(90deg, transparent 19px, rgba(246, 111, 0, .6) 19px, rgba(246, 111, 0, .6) 21px, transparent 21px),
      repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px); }
  .icard .bunch-pin { width: 62px; right: 0; top: -30px; }
  .lk-title { max-width: 260px; }
  .price { font-size: 40px; }
  .price-row { margin-top: 10px; }
  .opt { margin-top: 12px; }
  .tees { gap: 6px; }
  .tees label { padding: 3px 9px 3px 5px; gap: 5px; font-size: 14px; min-height: 46px; }
  .tees svg { width: 28px; height: 26px; }
  .sizes { gap: 6px; }
  .btn-buy { min-height: 56px; font-size: 20px; }
  .buy-facts { font-size: 14px; }

  .pgrid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .vrow-4, .vrow-3 { grid-template-columns: minmax(0, 1fr); }
  .vlist .vcard { grid-template-columns: 44% minmax(0, 1fr); gap: 12px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tile { min-height: 124px; padding: 16px; }
  .tile b { font-size: 18px; }
  .strip { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; }
  .strip img { width: 84px; }
  .foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; padding-top: 56px; }
  .foot > div:first-child { grid-column: 1 / -1; }
  .foot-bunch { width: 72px; top: -36px; }
  .phead .inner { padding: 20px 22px 24px 20px; --bk: 40px; }
  .band .cap { font-size: clamp(2rem, 9vw, 2.6rem); }
  .slot-tag { font-size: 12px; left: 12px; right: auto; top: 12px; bottom: auto; }
  .pgrid-2 { grid-template-columns: minmax(0, 1fr); }
  .thumbs button { width: 64px; }
  .notify .row { flex-direction: column; }
  .lost .slip { width: 200px; }
}

.strip-sec { padding-bottom: 0; }

/* ------------------------------------------------------------------ hero photos on computers (921 px and up)
   A centred row sized to the screen: each photo is at most 31% of the row and short enough that all three, with their
   labels, sit on a laptop's first screen (Josiah 2026-10-14: "the pictures in the first section dont really fit great
   on computer"; at 1280 the black one slid under the buy card, at 1519x730 the labels fell off the bottom). */
@media (min-width: 921px) {
  .fan { display: flex; justify-content: center; align-items: flex-start; height: auto; margin-top: -26px; padding-bottom: 60px;
    container-type: inline-size; --pw: clamp(160px, min(31cqi, (100svh - 400px) * .625), 268px); }
  .stk { position: relative; left: auto; top: auto; flex: none; width: var(--pw); padding: calc(var(--pw) * .036); }
  .stk + .stk { margin-left: calc(var(--pw) * -.02); }
  .stk-white { margin-top: calc(var(--pw) * .18); }
  .stk-black { margin-top: calc(var(--pw) * .11); }
  .stk.on { padding: 4px; }
}
@media (min-width: 921px) and (max-width: 1180px) {
  .fan { margin-top: 10px; padding-bottom: 48px; --pw: clamp(150px, min(31cqi, (100svh - 380px) * .625), 210px); }
}