/* TNT Vintage Finds: design system v0.1 ("Showtime").
   Source of truth: docs/design-brief.md. Tokens first, then base, then components.
   Pages are assembled from components only; no one-off styles in page templates. */

/* ── Fonts (self-hosted, SIL OFL; see fonts/OFL-*.txt) ───────── */
@font-face { font-family: "Bowlby One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/bowlby-one.woff2") format("woff2"); }
@font-face { font-family: "Bungee"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/bungee.woff2") format("woff2"); }
@font-face { font-family: "Alfa Slab One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/alfa-slab-one.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/figtree.woff2") format("woff2-variations"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/fraunces-latin-opsz-wght-normal.woff2") format("woff2-variations"); }
/* Lab options (see lab.js): loaded only when picked */
@font-face { font-family: "Chango"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/chango.woff2") format("woff2"); }
@font-face { font-family: "Lilita One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/lilita-one.woff2") format("woff2"); }
@font-face { font-family: "Titan One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/titan-one.woff2") format("woff2"); }
@font-face { font-family: "Bagel Fat One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/bagel-fat-one.woff2") format("woff2"); }
@font-face { font-family: "Rammetto One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/rammetto-one.woff2") format("woff2"); }
@font-face { font-family: "Paytone One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/paytone-one.woff2") format("woff2"); }
@font-face { font-family: "Sigmar One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/sigmar-one.woff2") format("woff2"); }
@font-face { font-family: "Rye"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/rye.woff2") format("woff2"); }
@font-face { font-family: "Monoton"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/monoton.woff2") format("woff2"); }
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/anton.woff2") format("woff2"); }
@font-face { font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/archivo-black.woff2") format("woff2"); }
@font-face { font-family: "Abril Fatface"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/abril-fatface.woff2") format("woff2"); }
@font-face { font-family: "Shrikhand"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/shrikhand.woff2") format("woff2"); }
@font-face { font-family: "Lemon"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/lemon.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/assets/fonts/dm-sans.woff2") format("woff2-variations"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/assets/fonts/nunito.woff2") format("woff2-variations"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/assets/fonts/outfit.woff2") format("woff2-variations"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/assets/fonts/lora.woff2") format("woff2-variations"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/assets/fonts/manrope.woff2") format("woff2-variations"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); }

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  /* color (from the logo badge; contrast ratios are in the brief) */
  --bg: #140a24;
  --bg-2: #1b0e31; /* alternate section band */
  --ink: #140a24; /* fixed dark: text on accent/brand color blocks, never themed */
  --paper: #fff4e0; /* fixed light: text on brand blocks, light form fields */
  --stage: #3a1a6b;
  --surface: #24104a;
  --show-purple: #7a3fd1;
  --text-2: #d9c8ff;
  --accent: #ff7a1a;
  --accent-hot: #ff9340;
  --alert: #e2434b;
  --accent-2: #6fd6ff;
  --text: #fff4e0;
  --uranium: #b6ff3b; /* reserved: UV + "glows under UV" only */
  --muted: #a996c9;
  --line: color-mix(in srgb, var(--text-2) 28%, transparent);
  --accent-text: var(--accent);
  --link: var(--accent-hot);
  --bulb-1: var(--text);
  --bulb-2: var(--accent);
  --r-chip: 999px;
  --r-btn: 12px;
  --card-shadow: none; /* dark sections: cards sit flat on the stage */
  --card-shadow-hover: 0 24px 40px -28px rgba(0, 0, 0, 0.9);
  --section-pad: clamp(72px, 8.5vw, 120px);
  --gutter: clamp(20px, 4vw, 48px);

  /* type */
  --display-a: "Bowlby One", "Arial Black", Impact, sans-serif;
  --display-b: "Bungee", "Arial Black", Impact, sans-serif;
  --display-c: "Alfa Slab One", "Rockwell", Georgia, serif;
  --display-d: "Lilita One", "Arial Black", Impact, sans-serif;
  --font-display: var(--display-d);
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-read: "Fraunces", Georgia, serif;
  --t-display: clamp(2.9rem, 6.2vw, 6rem);
  --t-h1: clamp(2.6rem, 5.4vw, 4.5rem);
  --t-h2: clamp(2rem, 3.8vw, 3rem);
  --t-h3: 1.5rem;
  --t-body: 1.125rem;
  --t-small: 0.875rem;

  /* space (8px base) */
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px; --s9: 128px;

  /* shape */
  --r: 12px;
  --r-lg: 20px;
  --bw: 2px;
  --container: 1200px;
  --header-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── Base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  overflow-x: clip;
  margin: 0; font-family: var(--font-text); font-size: var(--t-body); line-height: 1.6; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color 0.5s ease;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1; letter-spacing: 0.005em; margin: 0 0 0.5em; text-wrap: balance; color: var(--text); }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.1; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--accent); color: var(--ink); padding: 8px 14px; border-radius: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--section-pad); }
.section-head { max-width: 760px; margin-bottom: var(--s6); }
.section-head p { color: var(--text-2); font-size: 1.2rem; margin: 0; }
.section-head .eyebrow { color: var(--accent-text); font-size: var(--t-small); margin-bottom: var(--s2); }
.eyebrow { font-weight: 600; font-size: var(--t-small); letter-spacing: 0.04em; color: var(--accent-text); margin: 0 0 var(--s2); text-wrap: balance; }
.lede { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.55; color: var(--text-2); max-width: 56ch; }
.muted { color: var(--muted); }
.stack > * + * { margin-top: var(--s3); }

/* inline links in running text: bold + tinted chip (no underline, and not color alone) */
.prose a, .link {
  font-weight: 600; color: var(--link); background: color-mix(in srgb, var(--accent) 18%, transparent); padding: 0 0.3em; border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}
.prose a:hover, .link:hover { background: var(--accent); color: var(--ink); }

/* ── Button ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 48px; padding: 0.7em 1.4em; border-radius: var(--r-btn);
  border: var(--bw) solid transparent; font: 600 1rem/1.2 var(--font-text); letter-spacing: 0.01em; cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-primary:hover { background: var(--accent-hot); }
.btn-secondary { background: var(--show-purple); color: var(--paper); }
.btn-secondary:hover { background: #8c55df; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--text-2); }
.btn-ghost:hover { background: rgba(217, 200, 255, 0.14); }
.btn-small { min-height: 40px; padding: 0.45em 1em; font-size: 0.9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }

/* ── Chip (status + labels) ──────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.2em 0.8em; border-radius: var(--r-chip); font: 600 0.8rem/1.6 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; }
.chip-live { background: var(--alert); color: var(--ink); }
.chip-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: blink 1.4s steps(1) infinite; }
.chip-available { background: var(--accent); color: var(--ink); }
.chip-hold { background: var(--stage); color: var(--text-2); border: 1.5px solid var(--text-2); }
.chip-sold { background: transparent; color: var(--muted); border: 1.5px solid var(--muted); }
.chip-uv { background: var(--uranium); color: var(--ink); }
@keyframes blink { 50% { opacity: 0.2; } }

/* ── Marquee frame: bulbs that chase around a block ──────────── */
.marquee { position: relative; padding: var(--s6) var(--s5); background: var(--surface); border-radius: var(--r-lg); isolation: isolate; }
.marquee::before, .marquee::after { content: ""; position: absolute; pointer-events: none; --b: radial-gradient(circle at 50% 50%, var(--c) 0 3.5px, transparent 4.5px); }
/* top + bottom edges: whole bulbs, evenly spaced, flush to both corners */
.marquee::before { inset: 8px; --c: var(--bulb-1);
  background: var(--b) 0 0 / 26px 14px space no-repeat, var(--b) 0 100% / 26px 14px space no-repeat; }
/* left + right edges: inset so they never collide with the corner bulbs */
.marquee::after { inset: 22px 8px; --c: var(--bulb-2);
  background: var(--b) 0 0 / 14px 26px no-repeat space, var(--b) 100% 0 / 14px 26px no-repeat space; animation: chase 2.4s steps(1) infinite; }
@keyframes chase { 0% { opacity: 1; } 50% { opacity: 0.15; } }

/* ── Stage + Lot card: the piece under a spotlight, never cropped ── */
.stage {
  position: relative; display: grid; place-items: center; padding: var(--s4); border-radius: var(--r-lg); overflow: clip;
  background: radial-gradient(70% 55% at 50% 0%, rgba(255, 244, 224, 0.26), transparent 70%), var(--stage);
}
.stage img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 16px 14px rgba(0, 0, 0, 0.45)); transition: transform 0.4s var(--ease), filter 0.5s ease; }
.lot { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); overflow: clip; border: var(--bw) solid transparent; transition: border-color 0.2s, transform 0.25s var(--ease); }
.lot:hover { border-color: var(--accent); transform: translateY(-4px); }
.lot .stage { position: relative; aspect-ratio: 4 / 5; border-radius: 0; padding: 0; }
.lot .stage img { position: absolute; inset: var(--s5); width: calc(100% - 2 * var(--s5)); height: calc(100% - 2 * var(--s5)); }
/* Lot photos: sized by area (--pw from home-v2.mjs), centered, never cropped. */
.lot .stage img[style*="--pw"] { inset: auto; left: 50%; top: 50%; translate: -50% -50%; width: calc(var(--pw) * 100%); height: auto; max-height: 84%; }
.stage-art { position: absolute; inset: 0; display: grid; place-items: center; }
.stage-art svg { width: 62%; height: auto; filter: drop-shadow(0 16px 14px rgba(0, 0, 0, 0.45)); }

/* Shop our pieces: live eBay listings (pieces.js). Photos keep their natural ratio, never cropped. */
.piece-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s4); align-items: stretch; }
.piece-grid[hidden], .shop-fallback[hidden], [data-shop-more][hidden] { display: none; }
.piece { display: flex; flex-direction: column; text-decoration: none; } /* surface + hover: see Card */
/* light mat so real listing photos (shot on their own backgrounds) read as photos; whole photo, never cropped */
.piece-photo { height: 240px; padding: var(--s3); display: grid; place-items: center; background: var(--paper); border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
.piece-photo img { display: block; max-width: 100%; max-height: calc(240px - 2 * var(--s3)); width: auto; height: auto; } /* whole photo, fitted, never cropped */
.piece-body { padding: var(--s3) var(--s4) var(--s4); display: grid; gap: var(--s2); }
.piece-title { font-family: var(--font-text); font-weight: 600; font-size: 1rem; line-height: 1.35; margin: 0; text-wrap: pretty; }
.piece-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.piece-price { font-family: var(--font-display); font-size: 1.4rem; color: var(--accent-text); }
.piece-tag { font-size: var(--t-small); color: var(--muted); }
/* Collection pages: "Available now" row (pieces.js fills it; hidden until pieces arrive, max 4). */
.avail-now { padding-block: 0 var(--s7); }
.avail-now[hidden] { display: none; }
.avail-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s6); margin-bottom: var(--s5); }
.avail-head h2 { margin: 0; font-size: var(--t-h2); }
.avail-head p { margin: 0; max-width: 56ch; color: var(--text-2); }
.avail-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.avail-grid .piece-photo { height: 220px; }
/* Whole listing photo, fitted (object-fit: contain), never cropped; a soft corner so photos that
   come with their own backdrop read as mounted prints on the light tile. */
.avail-grid .piece-photo img { max-height: calc(220px - 2 * var(--s3)); object-fit: contain; border-radius: 6px; }
.avail-grid .piece-body { flex: 1; grid-template-rows: 1fr auto; }
@media (max-width: 1000px) { .avail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .avail-now { padding-block: 0 var(--s6); }
  .avail-grid { gap: var(--s3); }
  .avail-grid .piece-photo { height: 150px; padding: var(--s2); }
  .avail-grid .piece-photo img { max-height: calc(150px - 2 * var(--s2)); }
  .avail-grid .piece-body { padding: var(--s2) var(--s3) var(--s3); gap: var(--s1); }
  .avail-grid .piece-title { font-size: 0.875rem; }
  .avail-grid .piece-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .avail-grid .piece-price { font-size: 1.15rem; }
  .avail-grid .piece-tag { font-size: 0.75rem; }
}
.shop-fallback { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }

/* Live / next show panel (filled by live.js from the Whatnot Seller API) */
.live-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s5); align-items: center; margin-bottom: var(--s5); padding: var(--s5); border-radius: var(--r-lg); background: var(--stage); border: var(--bw) solid var(--line); }
.live-panel[hidden] { display: none; }
.live-panel.is-live { border-color: var(--alert); box-shadow: 0 0 0 4px color-mix(in srgb, var(--alert) 25%, transparent); }
.live-title { font-size: var(--t-h2); margin: var(--s2) 0 var(--s3); }
.live-when { margin: 0 0 var(--s2); color: var(--text-2); }
.live-local { margin: 0 0 var(--s3); color: var(--muted); font-size: var(--t-small); }
.live-later-h { margin: var(--s4) 0 var(--s2); font-weight: 700; color: var(--text-2); }
.live-later { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.live-later li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.live-thumb { width: 220px; height: auto; border-radius: var(--r); }
@media (max-width: 760px) { .live-panel { grid-template-columns: 1fr; } .live-thumb { width: 100%; max-width: 360px; } }
.stage-empty { color: var(--muted); font-weight: 500; font-size: var(--t-small); letter-spacing: 0.08em; text-transform: uppercase; }
.lot-body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); flex: 1; }
.lot-no { font-size: var(--t-small); font-weight: 600; letter-spacing: 0.04em; color: var(--accent-text); }
.lot-name { font-size: 1.45rem; margin: 0; }
.lot-text { color: var(--text-2); font-size: 1rem; line-height: 1.5; margin: 0; flex: 1; }
.lot-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s2); }
.ticket { position: relative; display: inline-block; padding: 0.2em 1.1em; background: var(--accent); color: var(--ink); font-family: var(--font-display); font-size: 1.3rem; line-height: 1.4;
  --n: radial-gradient(circle 0.42em at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 0.42em at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  -webkit-mask: var(--n); mask: var(--n); }
.lot-go { font-weight: 600; color: var(--text); }
.lot-go::after { content: " \2192"; display: inline-block; transition: transform 0.2s var(--ease); }
.lot:hover .lot-go::after { transform: translateX(4px); }
.lot.is-sold .stage img { filter: grayscale(0.7) drop-shadow(0 16px 14px rgba(0, 0, 0, 0.45)); opacity: 0.7; }
.lot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s4); }

/* ── Review card (verbatim public Whatnot reviews only) ──────────
   One card, one type scale, no featured variant. Same surface as every other card (see "Card"
   below) and the same padding as the site's other cards (s5, s4 on phones). Six cards sit
   3 / 2 / 1 across, so no row is ever left with an orphan; cards in a row share one height.
   Quote at the top (grows); byline pinned to the bottom, always exactly two lines (handle;
   stars + date), so avatars, handles and dates line up across a row. */
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; }
.review { margin: 0; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.review blockquote { flex: 1 1 auto; margin: 0; padding: 0; border: 0; font-family: var(--font-text); font-size: 1.125rem; line-height: 1.55; font-weight: 500; color: var(--text); }
.review blockquote p { margin: 0; }
.review figcaption { margin: 0; padding: 0; border: 0; }
.who { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--s3); row-gap: 2px; align-items: center; font-size: var(--t-small); line-height: 1.4; color: var(--text-2); }
.avatar { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--ink); font: 800 1.05rem/1 var(--font-text); }
.who b { color: var(--text); font-size: 1rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.who-meta { display: flex; align-items: baseline; column-gap: 6px; white-space: nowrap; }
.stars { color: var(--accent-text); letter-spacing: 0.1em; }

/* ── Show strip + ticker ─────────────────────────────────────── */
.ticker { overflow: hidden; background: var(--accent); color: var(--ink); padding: var(--s3) 0; margin-block: var(--s6); }
.ticker-track { display: flex; width: max-content; animation: ticker 40s linear infinite; }
.ticker-set { display: flex; flex: none; align-items: center; }
.ticker-item { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.2rem); white-space: nowrap; padding-right: var(--s5); }
.ticker-item::after { content: "\2726"; margin-left: var(--s5); font-size: 0.7em; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ── Steps, FAQ, fields ──────────────────────────────────────── */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s5); counter-reset: s; }
.steps li { counter-increment: s; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-2); color: var(--ink); font: 400 1.5rem var(--font-display); margin-bottom: var(--s3); }
.steps h3 { font-size: 1.3rem; }
.steps p { color: var(--text-2); font-size: 1rem; }
.faq-list { display: grid; gap: var(--s3); }
.faq summary { cursor: pointer; list-style: none; padding: var(--s4) 56px var(--s4) var(--s4); font-weight: 600; font-size: 1.15rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: var(--s4); top: 50%; translate: 0 -52%; font: 400 1.8rem var(--font-display); color: var(--accent); transition: rotate 0.25s var(--ease); }
.faq[open] summary::after { rotate: 45deg; }
.faq p { padding: 0 var(--s4) var(--s4); margin: 0; color: var(--text-2); max-width: 66ch; }
.field { display: grid; gap: var(--s2); }
.field label { font-weight: 600; font-size: 0.95rem; }
.input { width: 100%; min-height: 48px; padding: 0.6em 0.9em; border-radius: var(--r); border: var(--bw) solid var(--text-2); background: var(--paper); color: var(--ink); font: 500 1rem var(--font-text); }
.input::placeholder { color: #6b5f78; }
.input:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.input[aria-invalid="true"] { border-color: var(--alert); }
.field-error { color: #ff8a90; font-size: var(--t-small); font-weight: 600; }

/* ── Header + footer ─────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: var(--bw) solid var(--stage); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); height: var(--header-h); }
.brand { display: flex; align-items: center; gap: var(--s3); font-family: var(--font-display); font-size: 1.2rem; white-space: nowrap; min-width: 0; }
.brand .badge { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.main-nav { display: flex; gap: var(--s5); }
.main-nav a { white-space: nowrap; font-weight: 500; font-size: 1rem; color: var(--text-2); padding: 6px 0; border-bottom: 3px solid transparent; transition: color 0.2s, border-color 0.2s; }
.main-nav a:hover, .main-nav a[aria-current] { color: var(--text); border-color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: var(--s3); white-space: nowrap; flex: none; }
.uv-toggle { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0.4em 0.9em; border-radius: 999px; border: var(--bw) solid var(--text-2); background: transparent; color: var(--text); font: 700 0.9rem var(--font-text); cursor: pointer; }
.uv-toggle:hover { background: rgba(217, 200, 255, 0.14); }
.uv-toggle .bulb { width: 10px; height: 10px; border-radius: 50%; background: var(--show-purple); transition: background 0.3s, box-shadow 0.3s; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 11px; }
.menu-toggle span { display: block; height: 3px; background: var(--text); margin: 6px 0; border-radius: 2px; transition: transform 0.2s; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.mobile-nav { display: grid; padding: var(--s2) var(--s4) var(--s4); border-top: var(--bw) solid var(--stage); }
.mobile-nav a:not(.btn) { padding: 14px 0; font-weight: 500; border-bottom: 1px solid var(--line); }
.mobile-nav .btn { margin-top: var(--s3); }
.mobile-nav[hidden] { display: none; }
.site-footer { background: var(--surface); padding: var(--s8) 0 var(--s5); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--s6); }
.foot-h { font-family: var(--font-display); font-size: 1.1rem; color: var(--accent-text); margin: 0 0 var(--s3); }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.foot-list a:hover { color: var(--accent-hot); }
.foot-bottom { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-small); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); }
.site-credit a { color: inherit; font-weight: 700; letter-spacing: .04em; text-decoration: underline; text-underline-offset: 3px; }
.site-credit a:hover { color: var(--accent); }

/* ── Card: the one surface every block is built from ───────────
   Every card-like thing on the site shares this surface: same fill, 1px hairline, radius and
   (on light sections) one soft drop shadow. No second border, no 1px "ledge" shadow under the
   border (that read as a double line). Components only add padding and layout on top. */
.card, .piece, .review, .aside-card, .toc, .contact-card, .ws-card, .steps li, .promise li, .faq, .type-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--card-shadow); color: var(--text);
}
.faq { border-radius: var(--r); } /* stacked accordion rows: a tighter radius than standalone cards */
.card { position: relative; display: flex; flex-direction: column; }
:is(a.card, a.piece, a.aside-card, a.contact-card, a.ws-card) { transition: border-color 0.2s, transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
:is(a.card, a.piece, a.aside-card, a.contact-card, a.ws-card):hover { border-color: color-mix(in srgb, var(--accent) 70%, transparent); transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
:is(a.card, a.piece, a.aside-card, a.contact-card, a.ws-card):focus-visible { outline-offset: 4px; }
.go { margin-top: auto; padding-top: var(--s3); font-weight: 600; font-size: 1rem; color: var(--accent-hot); }
.go::after { content: "\2192"; display: inline-block; margin-left: 0.35em; transition: transform 0.2s var(--ease); }
a.card:hover .go::after, a.card:focus-visible .go::after, a.aside-card:hover .go::after { transform: translateX(4px); }

/* ── Section rhythm ──────────────────────────────────────────── */
.section-alt { background: var(--bg-2); }
.section-head-row { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s3) var(--s7); align-items: end; }
.section-head-row h2 { margin: 0; }
.section-head-row > p { max-width: 52ch; padding-bottom: 0.35em; }
.section .btn-row:last-child { margin-top: var(--s6); }

/* ── Page: Home ──────────────────────────────────────────────── */
.hero { position: relative; padding-block: clamp(var(--s6), 6vw, 104px) clamp(var(--s7), 7vw, 120px); isolation: isolate; }
/* Hero color: the base stays dark purple; soft color fields and a strip of glass colors
   along the bottom edge break it up. All static, all decorative (aria-hidden / pseudo-elements). */
.hero { --h-orange: var(--accent); --h-rose: #ff6fae; --h-teal: var(--accent-2); --h-violet: #9b6bff; --h-green: var(--uranium); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 48% at 4% 12%, color-mix(in srgb, var(--h-orange) 24%, transparent), transparent 70%),
    radial-gradient(34% 44% at 40% 102%, color-mix(in srgb, var(--h-rose) 22%, transparent), transparent 72%),
    radial-gradient(36% 50% at 96% 6%, color-mix(in srgb, var(--h-teal) 20%, transparent), transparent 70%),
    radial-gradient(42% 58% at 78% 52%, color-mix(in srgb, var(--h-violet) 30%, transparent), transparent 72%),
    radial-gradient(22% 30% at 100% 100%, color-mix(in srgb, var(--h-green) 14%, transparent), transparent 72%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--show-purple) 14%, var(--bg)) 100%); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 6px; pointer-events: none;
  background: linear-gradient(90deg, var(--h-orange) 0 20%, var(--h-rose) 20% 40%, var(--h-violet) 40% 60%, var(--h-teal) 60% 80%, var(--h-green) 80% 100%); }
.hero-tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.hero-tags span { padding: 4px 12px; border-radius: var(--r-chip); color: var(--h-orange); background: color-mix(in srgb, var(--h-orange) 14%, transparent); border: 1px solid color-mix(in srgb, var(--h-orange) 40%, transparent); }
.hero-tags span:last-child { color: var(--h-teal); background: color-mix(in srgb, var(--h-teal) 12%, transparent); border-color: color-mix(in srgb, var(--h-teal) 40%, transparent); }
.hero-tags .sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; border: 0; }
.hero-accent { color: var(--h-orange); background: linear-gradient(90deg, var(--h-orange), var(--h-rose)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(var(--s6), 5vw, 88px); align-items: center; }
.hero-copy { max-width: 600px; }
.hero h1 { font-size: clamp(2.75rem, 4.4vw + 0.6rem, 4.9rem); line-height: 1; margin: 0 0 var(--s4); }
.hero .lede { margin: 0 0 var(--s5); max-width: 46ch; }
.hero .btn-row { margin: 0 0 var(--s6); }

/* Trust row under the buttons (Whatnot stats, shown as text with the as-of date) */
.hero-proof { margin: 0; padding: var(--s4) 0 0; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); border-top: 1px solid var(--line); }
.hero-proof { border-top: 2px solid; border-image: linear-gradient(90deg, var(--h-orange), var(--h-rose), var(--h-violet), var(--h-teal)) 1; }
.hero-proof > div:nth-child(1) strong { color: var(--h-orange); }
.hero-proof > div:nth-child(2) strong { color: var(--h-rose); }
.hero-proof > div:nth-child(3) strong { color: var(--h-teal); }
.hero-proof dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-proof dd { margin: 0; font-size: var(--t-small); color: var(--muted); }
.hero-proof strong { display: block; margin-bottom: 4px; font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1; color: var(--text); }
.hero-asof { margin: var(--s3) 0 0; font-size: 0.8rem; color: var(--muted); }

/* Hero show card. Static: the weekly show as a text card. With data (live.js): the real poster
   beside the details on desktop, stacked on phones. The poster keeps its own ratio, never cropped. */
.show-card { justify-self: end; width: 100%; max-width: 460px; display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 40px 80px -48px rgba(0, 0, 0, 0.95); }
.show-card.has-poster { max-width: 620px; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); align-items: start; }
.show-card.is-live { border-color: var(--alert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--alert) 35%, transparent), 0 40px 80px -48px rgba(0, 0, 0, 0.95); }
.show-card-poster { position: relative; display: block; padding: var(--s4); }
.show-card-poster img { display: block; width: 100%; height: auto; max-height: 440px; object-fit: contain; border-radius: 14px; box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.8); }
.show-card-meta { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); min-width: 0; }
.show-card.has-poster .show-card-meta { padding: var(--s5) var(--s5) var(--s4) var(--s1); }
.show-card-label { margin: 0; display: flex; align-items: center; gap: var(--s2); font-weight: 600; font-size: var(--t-small); color: var(--accent-2); }
.show-card-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.show-card.is-live .show-card-label { color: #ff6b72; }
.show-card.is-live .show-card-label::before { animation: blink 1.4s steps(1) infinite; }
.show-card-name { margin: var(--s1) 0 0; font-family: var(--font-display); font-size: clamp(1.5rem, 1.9vw, 1.9rem); line-height: 1.05; text-wrap: balance; overflow-wrap: anywhere; }
.show-card-when { margin: 0; display: grid; color: var(--text-2); line-height: 1.4; }
.show-card-when strong { color: var(--text); font-weight: 600; }
.show-card-countdown { align-self: start; margin: var(--s1) 0 0; padding: 2px 10px; border-radius: var(--r-chip); background: color-mix(in srgb, var(--accent-2) 16%, transparent); color: var(--accent-2); font-weight: 600; font-size: var(--t-small); }
.show-card-blurb { margin: var(--s1) 0 0; color: var(--text-2); font-size: 1rem; line-height: 1.55; }
.show-card-meta .btn { margin-top: var(--s3); }
.show-card-later { grid-column: 1 / -1; margin: 0; padding: var(--s4) var(--s5) var(--s5); border-top: 1px solid var(--line); }
.show-card-later-h { margin: 0 0 var(--s2); font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.show-card-later ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s2) var(--s5); }
.show-card-later li { display: grid; font-size: 0.9rem; line-height: 1.35; color: var(--muted); }
.show-card-later b { color: var(--text-2); font-weight: 600; }

/* Show types */
.show-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.show { padding: var(--s5); }
.show-when { margin: 0 0 var(--s2); font-weight: 600; font-size: var(--t-small); color: var(--accent-text); }
.show h3 { margin: 0 0 var(--s3); }
.show p:last-child { margin: 0; color: var(--text-2); font-size: 1rem; }

/* Shop fallback doors (until /api/shop-items has pieces); always a .card */
.shop-door { padding: var(--s5); gap: var(--s2); text-decoration: none; }
.shop-door-where { font-weight: 600; font-size: var(--t-small); color: var(--accent-text); }
.shop-door h3 { margin: 0; }
.shop-door p { margin: 0; color: var(--text-2); }

/* Collection shelf: every stage stands for the same real width (home-v2.mjs STAGE_IN), so pieces
   are to scale with each other. --rw = image width as a fraction of the stage. Pieces stand on a
   common floor line; the image's transparent bottom padding (~6.1% of its height) is shifted
   below the floor so the glass itself touches it. Nothing is clipped. */
.shelf { --gap: var(--s4); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 0; }
/* Each card spans two row tracks (stage, body) as a subgrid, so stages and bodies line up across a row.
   Every card is the same size: a piece too tall for the stage is shrunk to fit (home-v2.mjs fitScale). */
.coll { display: grid; grid-row: span 2; grid-template-rows: subgrid; margin-bottom: var(--gap); }
/* The stage is the size container (not the card: containment would switch the subgrid off),
   so 1cqw = 1% of the stage width, i.e. STAGE_IN / 100 inches. */
.shelf-stage { container-type: inline-size; position: relative; aspect-ratio: 1 / 0.9; border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  background: radial-gradient(70% 60% at 50% 0%, rgba(255, 244, 224, 0.14), transparent 72%), var(--stage); }
.shelf-stage::before { content: ""; position: absolute; inset: auto 0 0; height: 9cqw; background: color-mix(in srgb, var(--bg) 35%, transparent); border-top: 1px solid color-mix(in srgb, var(--text-2) 22%, transparent); }
.shelf-piece { position: absolute; left: 50%; bottom: 6cqw; width: calc(var(--rw) * 100cqw); max-width: none; height: auto; translate: -50% 6.1%;
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.45)); transition: filter 0.5s ease; }
.coll-body { display: flex; flex-direction: column; flex: 1; padding: var(--s4); }
.coll-name { font-size: 1.4rem; margin: 0 0 var(--s2); }
.coll-text { margin: 0; color: var(--text-2); font-size: 0.98rem; line-height: 1.5; }
.guide-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); }
.guide-link { padding: var(--s5); text-decoration: none; }
.guide-link h3 { margin: 0 0 var(--s2); font-size: 1.3rem; line-height: 1.15; }
.guide-link p { margin: 0; color: var(--text-2); font-size: 1rem; line-height: 1.5; }
.shelf-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s2); }
.shelf-note { margin: 0; font-size: var(--t-small); color: var(--muted); }

/* Meet Tina & Tom */
.meet { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s6) var(--s7); align-items: center; }
.meet-head h2 { margin-bottom: var(--s3); }
.meet-head p:last-child { margin: 0; color: var(--text-2); font-size: 1.2rem; max-width: 40ch; }
.meet-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.person { padding: var(--s5); }
.person h3 { font-size: 1.75rem; margin-bottom: var(--s3); }
.person h3::after { content: ""; display: block; width: 40px; height: 3px; margin-top: var(--s3); border-radius: 2px; background: var(--accent); }
.person:nth-child(2) h3::after { background: var(--accent-2); }
.person p { color: var(--text-2); margin: 0; font-size: 1rem; }

/* Closing call to action */
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: var(--s5) var(--s6); padding: clamp(var(--s5), 5vw, var(--s7));
  border-radius: 28px; border: 1px solid var(--line); background: radial-gradient(60% 120% at 0% 0%, color-mix(in srgb, var(--show-purple) 45%, transparent), transparent 70%), var(--stage); }
.cta-band h2 { margin: 0 0 var(--s2); }
.cta-band p { margin: 0; color: var(--text-2); font-size: 1.2rem; max-width: 46ch; }
.cta-band .btn { flex: none; }
.cta-section { padding-bottom: clamp(var(--s6), 6vw, var(--s8)); }
.btn-large { min-height: 56px; padding: 0.9em 1.8em; font-size: 1.05rem; }

/* Older helpers still used by the specimen page */
.hero-caption { margin: var(--s3) 0 0; text-align: center; font-weight: 500; color: var(--text-2); font-size: 0.95rem; }
.hero-note { margin-top: var(--s4); color: var(--muted); font-size: 1rem; max-width: 52ch; }
.two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s4); }

/* ── UV mode: stage lights go purple, only uranium glows ─────── */
body.blacklight { --bg: #08040f; --bg-2: #0d0619; --stage: #1a0d33; --surface: #120826; --muted: #9c8bbd; }
body.blacklight .uv-toggle { border-color: var(--uranium); color: var(--uranium); }
body.blacklight .uv-toggle .bulb { background: var(--uranium); box-shadow: 0 0 12px var(--uranium); }
body.blacklight :is(.stage img, .shelf-piece) { filter: grayscale(0.85) brightness(0.4); }
body.blacklight :is(.stage img, .shelf-piece).glows { filter: saturate(1.7) brightness(1.2) drop-shadow(0 0 10px rgba(182, 255, 59, 0.9)) drop-shadow(0 0 36px rgba(182, 255, 59, 0.55)); animation: hum 2.4s ease-in-out infinite; }
@keyframes hum { 50% { filter: saturate(1.9) brightness(1.32) drop-shadow(0 0 14px rgba(182, 255, 59, 1)) drop-shadow(0 0 50px rgba(182, 255, 59, 0.7)); } }
body.blacklight { --bulb-1: var(--text-2); --bulb-2: var(--uranium); }
body.blacklight .ticker { background: var(--uranium); }
/* Blacklight hero: the room goes dark, only the glass-green and violet fields hold their color */
body.blacklight .hero { --h-orange: #c9a2ff; --h-rose: #9b6bff; --h-teal: #7fe7ff; }
body.blacklight .hero::before { background:
    radial-gradient(40% 52% at 4% 12%, color-mix(in srgb, var(--uranium) 16%, transparent), transparent 70%),
    radial-gradient(42% 58% at 78% 52%, color-mix(in srgb, var(--h-violet) 30%, transparent), transparent 72%),
    radial-gradient(30% 40% at 100% 100%, color-mix(in srgb, var(--uranium) 18%, transparent), transparent 72%),
    var(--bg); }
body.blacklight .hero::after { background: var(--uranium); box-shadow: 0 0 18px var(--uranium); }
body.blacklight 
/* ── Motion: three jobs only (bulbs, lift-on-hover, UV) ──────── */
body.uv-flick::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; background: radial-gradient(120% 90% at 50% 0%, rgba(122, 63, 209, 0.4), transparent 75%); animation: flick 0.85s steps(1, end) both; }
@keyframes flick { 0% { opacity: 0.9; } 8% { opacity: 0.1; } 16% { opacity: 0.75; } 22% { opacity: 0; } 34% { opacity: 0.5; } 42% { opacity: 0.15; } 60% { opacity: 0.3; } 100% { opacity: 0; } }
html.vt-uv::view-transition-old(root), html.vt-uv::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.site-header { view-transition-name: site-header; }
html.vt-uv .site-header { view-transition-name: none; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1180px) {
  .main-nav, .hide-sm { display: none; }
  .menu-toggle { display: block; }
}
@media (max-width: 1079px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s6); }
  .hero-copy { max-width: 680px; }
  .show-card { justify-self: stretch; max-width: 680px; } /* same measure as .hero-copy above it */
  .show-card.has-poster { max-width: none; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .show-card.has-poster .show-card-meta { padding: var(--s5); }
  .meet { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .section-head-row { grid-template-columns: 1fr; }
  .show-grid { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 699px) {
  .shelf { --gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coll-body { padding: var(--s3) var(--s3) var(--s4); }
  .coll-name { font-size: 1.15rem; }
  .coll-text { display: none; }
  .go { font-size: 0.95rem; padding-top: var(--s2); }
  .meet-people { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 1.0625rem; }
  .marquee { padding: var(--s5) var(--s3); }
  .review-grid { grid-template-columns: minmax(0, 1fr); }
  .uv-label { display: none; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .brand span { font-size: 1.05rem; }
  .lot-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .show-card.has-poster { grid-template-columns: 1fr; }
  .show-card-poster { padding: var(--s3) var(--s3) 0; }
  .show-card-poster img { max-height: min(380px, 50vh); }
  .show-card-meta, .show-card.has-poster .show-card-meta { padding: var(--s4); }
  .show, .shop-door, .person, .review, .guide-link { padding: var(--s4); }
  .btn-row .btn { flex: 1 1 auto; }
  .hero-proof { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s4); }
  .hero-proof strong { font-size: 1.4rem; }
  .hero-proof dd { font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .marquee::after { opacity: 0.6; }
  .ticker { transform: none; }
}

/* ── Specimen page only (/design-system) ─────────────────────── */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.swatch { display: grid; gap: 2px; font-size: 0.9rem; }
.swatch-chip { display: grid; place-items: end start; height: 96px; padding: var(--s2) var(--s3); border-radius: var(--r); font-weight: 800; border: 1px solid var(--line); margin-bottom: var(--s2); }
.type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.type-card { padding: var(--s5); }
.type-big { font-family: var(--sample); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; margin-bottom: var(--s3); }
.type-mid { font-family: var(--sample); font-size: 1.4rem; margin-bottom: var(--s3); color: var(--accent); }
.spec-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-block: var(--s4); }
.space-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s4); margin-block: var(--s4); }
.space-row div { display: grid; gap: 6px; justify-items: start; font-size: 0.85rem; color: var(--muted); }
.space-row i { display: block; background: var(--accent); border-radius: 3px; }
a.show { transition: border-color 0.2s; }
a.show:hover { border-color: var(--accent); }


/* ══ Options (every one is a data-attribute on <html>, set by lab.js) ══════
   Defaults live in :root above; each block below only overrides tokens. */

/* Themes (semantic tokens only; UV mode still wins for bg/stage/surface) */
html[data-theme="flame"] { --bg: #150a05; --stage: #4a1f0a; --surface: #2a1308; --brand: #c2410c; --text: #fff1e6; --text-2: #ffd2b0; --muted: #c9a68c; --accent: #ffb020; --accent-hot: #ffc54d; --accent-2: #6fd6ff; }
html[data-theme="uranium-lab"] { --bg: #06130a; --stage: #0f3a1a; --surface: #0a2412; --brand: #1f8a3a; --text: #effff0; --text-2: #c4f5c8; --muted: #8fc29a; --accent: #b6ff3b; --accent-hot: #cbff6b; --accent-2: #6fd6ff; --alert: #ff6b6b; }
html[data-theme="carnival"] { --bg: #1a0620; --stage: #5b1457; --surface: #2a0b33; --brand: #c2185b; --text: #fff4e0; --text-2: #f8c9e8; --muted: #c79ab8; --accent: #ff5a6e; --accent-hot: #ff7b8a; --accent-2: #6fd6ff; --alert: #ffb020; }
html[data-theme="ribbon"] { --bg: #200614; --stage: #6b0f3a; --surface: #300a22; --brand: #e2434b; --text: #fff4e0; --text-2: #ffc9d4; --muted: #c99aa8; --accent: #ff7a1a; --accent-hot: #ff9340; --accent-2: #6fd6ff; }
html[data-theme="lavender-day"] { --bg: #f3ecff; --stage: #e3d4ff; --surface: #ffffff; --brand: #7a3fd1; --text: #1d0f36; --text-2: #4a3a6b; --muted: #6e5f8c; --accent: #ff7a1a; --accent-hot: #ff9340; --accent-text: #a94700; --link: #a94700; --accent-2: #1b78a8; --alert: #c4222b; --line: rgba(29, 15, 54, 0.18); --bulb-1: #7a3fd1; --bulb-2: #ff7a1a; }
html[data-theme="cream-plum"] { --bg: #fff4e0; --stage: #ead9bd; --surface: #fffaf0; --brand: #3a1a6b; --text: #24104a; --text-2: #4d3a73; --muted: #75658a; --accent: #ff7a1a; --accent-hot: #ff9340; --accent-text: #a94700; --link: #a94700; --accent-2: #1b78a8; --alert: #b4232b; --line: rgba(36, 16, 74, 0.18); --bulb-1: #3a1a6b; --bulb-2: #ff7a1a; }
html[data-theme="lavender-day"] .stage, html[data-theme="cream-plum"] .stage { background: radial-gradient(70% 55% at 50% 0%, rgba(255, 255, 255, 0.7), transparent 70%), var(--stage); }
html[data-theme="lavender-day"] .stage img, html[data-theme="cream-plum"] .stage img { filter: drop-shadow(0 14px 12px rgba(36, 16, 74, 0.28)); }
html[data-theme="gold-night"] { --bg: #0d0d14; --stage: #2a2a40; --surface: #17172a; --brand: #8a6a12; --text: #fbf5e6; --text-2: #e6dcc0; --muted: #a9a08a; --accent: #ffc83d; --accent-hot: #ffd666; --accent-2: #6fd6ff; --bulb-1: #ffc83d; --bulb-2: #fbf5e6; }
html[data-theme="aqua-pop"] { --bg: #04161c; --stage: #0b4a57; --surface: #082a33; --brand: #0e8aa3; --text: #effcff; --text-2: #bfeef7; --muted: #8cbcc6; --accent: #ff6b9d; --accent-hot: #ff8cb3; --accent-2: #ffe066; --bulb-1: #ff6b9d; --bulb-2: #6fe3ff; }
html[data-theme="sunburst"] { --bg: #fff3c4; --stage: #ffd966; --surface: #fffbe6; --brand: #c2255c; --text: #2b1700; --text-2: #5a3a10; --muted: #7a5a2a; --accent: #e8590c; --accent-hot: #f76707; --accent-text: #9c3a00; --link: #9c3a00; --accent-2: #1b6ea8; --alert: #b4232b; --line: rgba(43, 23, 0, 0.2); --bulb-1: #c2255c; --bulb-2: #e8590c; }
html[data-theme="mint-candy"] { --bg: #e6fbf1; --stage: #c4f1dc; --surface: #ffffff; --brand: #0f7a55; --text: #0b2a20; --text-2: #1f5a46; --muted: #4a7a68; --accent: #ff5a6e; --accent-hot: #ff7b8a; --accent-text: #b3202f; --link: #b3202f; --accent-2: #1b6ea8; --alert: #b4232b; --line: rgba(11, 42, 32, 0.18); --bulb-1: #0f7a55; --bulb-2: #ff5a6e; }
html[data-theme="sunburst"] .stage, html[data-theme="mint-candy"] .stage { background: radial-gradient(70% 55% at 50% 0%, rgba(255, 255, 255, 0.7), transparent 70%), var(--stage); }
html[data-theme="sunburst"] .stage img, html[data-theme="mint-candy"] .stage img { filter: drop-shadow(0 14px 12px rgba(43, 23, 0, 0.25)); }

/* Shape */
html[data-shape="sharp"] { --r: 2px; --r-lg: 4px; --r-btn: 2px; --r-chip: 2px; }
html[data-shape="pill"] { --r: 22px; --r-lg: 34px; --r-btn: 999px; --r-chip: 999px; }

/* Frame around hero / live strip */
html[data-frame="solid"] .marquee::before, html[data-frame="solid"] .marquee::after, html[data-frame="dashed"] .marquee::before, html[data-frame="dashed"] .marquee::after, html[data-frame="stripes"] .marquee::before, html[data-frame="stripes"] .marquee::after, html[data-frame="none"] .marquee::before, html[data-frame="none"] .marquee::after { display: none; }
html[data-frame="solid"] .marquee { border: 4px solid var(--accent); }
html[data-frame="dashed"] .marquee { border: 4px dashed var(--text-2); }
html[data-frame="stripes"] .marquee { border: 12px solid; border-image: repeating-linear-gradient(45deg, var(--accent) 0 14px, var(--brand) 14px 28px) 12; border-radius: 0; }
html[data-frame="none"] .marquee { background: transparent; }

/* Hero layout */
html[data-hero="centered"] .hero-grid { grid-template-columns: 1fr; text-align: center; }
html[data-hero="centered"] .hero .lede, html[data-hero="centered"] .hero-note { margin-inline: auto; }
html[data-hero="centered"] .hero .btn-row { justify-content: center; }
html[data-hero="centered"] .hero .marquee { max-width: 560px; margin-inline: auto; }
html[data-hero="poster"] .hero-grid { grid-template-columns: 1fr; gap: var(--s5); }
html[data-hero="poster"] .hero h1 { font-size: clamp(3.4rem, 11.5vw, 10.5rem); line-height: 0.9; }
html[data-hero="poster"] .hero .marquee { max-width: 520px; margin-left: auto; }

/* Headline case + type scale + density */
html[data-caps="upper"] :is(h1, h2, h3, .ticket, .ticker-item, .foot-h, .brand span) { text-transform: uppercase; letter-spacing: 0.02em; }
html[data-scale="compact"] { --t-display: clamp(2.3rem, 4.4vw, 4.2rem); --t-h1: clamp(2.1rem, 3.8vw, 3.2rem); --t-h2: clamp(1.7rem, 2.8vw, 2.3rem); }
html[data-scale="huge"] { --t-display: clamp(3.4rem, 8.4vw, 8.4rem); --t-h1: clamp(3rem, 6.8vw, 6rem); --t-h2: clamp(2.3rem, 4.8vw, 4rem); }
html[data-density="tight"] { --section-pad: clamp(40px, 5vw, 56px); }
html[data-density="airy"] { --section-pad: clamp(88px, 11vw, 150px); }

/* Lot card + ticker */
html[data-lot="flat"] .lot { background: transparent; border-color: var(--line); }
html[data-lot="flat"] .lot .stage { background: transparent; }
html[data-lot="outline"] .lot { background: transparent; border-color: var(--accent); }
html[data-lot="outline"] .lot .stage { background: var(--surface); }
html[data-ticker="off"] .ticker { display: none; }

/* ── Design lab panel (fixed colors so it stays readable under any theme) ── */
.lab { position: fixed; left: 12px; bottom: 12px; z-index: 90; width: min(340px, calc(100vw - 24px)); max-height: 82vh; overflow: auto; background: #140a24; color: #fff4e0; border: 2px solid #7a3fd1; border-radius: 14px; font: 600 14px/1.3 "Figtree", system-ui, sans-serif; }
.lab > summary { cursor: pointer; list-style: none; padding: 12px 16px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; }
.lab > summary::-webkit-details-marker { display: none; }
.lab > summary::after { content: "+"; font-size: 20px; color: #ff7a1a; }
.lab[open] > summary::after { content: "\2212"; }
.lab-body { display: grid; gap: 10px; padding: 4px 16px 16px; }
.lab label { display: grid; gap: 4px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #d9c8ff; }
.lab select { min-height: 38px; border-radius: 8px; border: 2px solid #3a1a6b; background: #24104a; color: #fff4e0; font: 600 14px "Figtree", system-ui, sans-serif; padding: 0 8px; }
.lab-row { display: flex; gap: 8px; flex-wrap: wrap; }
.lab button { min-height: 38px; padding: 0 14px; border-radius: 8px; border: 2px solid #d9c8ff; background: transparent; color: #fff4e0; font: 800 13px "Figtree", system-ui, sans-serif; cursor: pointer; }
.lab button.go { background: #ff7a1a; border-color: #ff7a1a; color: #140a24; }
.lab textarea { width: 100%; min-height: 70px; border-radius: 8px; background: #24104a; color: #fff4e0; border: 2px solid #3a1a6b; font: 12px ui-monospace, Consolas, monospace; padding: 8px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.pick { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--surface); border: var(--bw) solid var(--line); cursor: pointer; text-align: left; color: var(--text); font: inherit; }
.pick:hover { border-color: var(--accent); }
.pick[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); }
.pick .pick-name { font-weight: 800; font-size: 0.95rem; }
.pick .pick-sample { font-family: var(--sample); font-size: 1.5rem; line-height: 1.1; }
.pick .dots { display: flex; gap: 4px; }
.pick .dots i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(128, 128, 128, 0.5); }
@media (max-width: 620px) { .lab { left: 8px; bottom: 8px; } }
.pick-preset { gap: var(--s2); }
.pick-preset .pick-blurb { font-size: 0.85rem; color: var(--text-2); }
.pick-preset .pick-sample { font-size: 1.7rem; }

/* ── Inner pages (collections, guides, live, about, FAQ, contact, 404) ──────────
   Same tokens and components as Home; these are the few layouts only inner pages need. */
.wrap { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
/* Narrow pages keep the reading measure but share the container's left edge with the header,
   breadcrumbs and the full-width sections on the same page (no centered column drifting in). */
.wrap.narrow > *, .wrap.narrow-hero > * { max-width: 860px; }
.center > * { margin-inline: auto; }
.pt0 { padding-top: 0; }
.tiny { font-size: 0.8rem; }
.faq-list + p { margin-top: var(--s5); }
.hint { margin: var(--s5) 0 0; color: var(--muted); font-size: 1rem; }
.hint a, .lede a { font-weight: 600; color: var(--link); }
.text-link { font-weight: 600; color: var(--link); }
.text-link:hover { color: var(--text); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.center-row { justify-content: center; }
.sub-h { margin: var(--s7) 0 var(--s4); font-size: clamp(1.6rem, 2.6vw, 2.1rem); }

/* breadcrumbs */
.crumbs { padding-top: var(--s5); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); font-size: var(--t-small); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: var(--s2); opacity: 0.6; }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--accent-hot); }
.crumbs [aria-current] { color: var(--muted); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* page hero */
.page-hero { padding-block: var(--s6) var(--s7); }
.page-hero h1 { margin-bottom: var(--s4); max-width: 18ch; }
.page-hero .lede { margin: 0; }
.page-hero .lede + .tiny { margin: var(--s3) 0 0; }
.narrow-hero h1 { max-width: none; font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
.c-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s7); align-items: center; }
.c-hero.no-photo { grid-template-columns: minmax(0, 1fr); }
.c-hero.no-photo .lede { max-width: 66ch; }

/* studio stage for a single real photo (never cropped: the photo keeps its own ratio) */
.photo-stage { position: relative; aspect-ratio: 5 / 4; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: radial-gradient(70% 60% at 50% 0%, rgba(255, 244, 224, 0.14), transparent 72%), var(--stage); overflow: hidden; }
.photo-stage::before { content: ""; position: absolute; inset: auto 0 0; height: 9%; background: color-mix(in srgb, var(--bg) 35%, transparent); border-top: 1px solid color-mix(in srgb, var(--text-2) 22%, transparent); }
/* the cutout is letterboxed inside the stage (object-fit: contain on a transparent image never crops) and stands on the floor */
.stage-photo { position: absolute; left: 10%; top: 9%; width: 80%; height: 79%; max-width: none; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.45)); }
.photo-stage-sm { aspect-ratio: 16 / 10; margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) var(--s4); border: 0; border-bottom: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; }
body.blacklight .stage-photo { filter: grayscale(0.85) brightness(0.4); }
body.blacklight .stage-photo.glows { filter: saturate(1.7) brightness(1.2) drop-shadow(0 0 10px rgba(182, 255, 59, 0.9)) drop-shadow(0 0 36px rgba(182, 255, 59, 0.55)); }

/* article + sidebar */
.guide { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s7); align-items: start; }
.prose { max-width: 70ch; color: var(--text-2); }
.prose h2 { margin: var(--s6) 0 var(--s3); font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.1; }
.prose > h2:first-child, .prose > .toc + h2 { margin-top: 0; }
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.7; }
.prose strong { color: var(--text); }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.prose li + li { margin-top: var(--s2); }
.prose .faq-list { margin-top: var(--s3); }
.toc { margin-bottom: var(--s6); padding: var(--s4) var(--s5); }
.toc-h { margin: 0 0 var(--s2); font-weight: 600; font-size: var(--t-small); color: var(--accent-text); }
.toc ol { margin: 0; padding-left: 1.2em; columns: 2 240px; column-gap: var(--s6); }
.toc li { break-inside: avoid; font-size: 1rem; line-height: 1.45; margin: 0 0 var(--s2); }
.toc a { color: var(--text); background: none; padding: 0; font-weight: 500; }
.toc a:hover { color: var(--accent-hot); background: none; }
.guide-aside { position: sticky; top: calc(var(--header-h) + var(--s4)); display: grid; gap: var(--s4); }
.aside-card { display: block; padding: var(--s5); }
.aside-card h2 { margin: 0 0 var(--s3); font-size: 1.45rem; line-height: 1.1; }
.aside-card p { color: var(--text-2); font-size: 1rem; }
.aside-card.hot { background: linear-gradient(160deg, color-mix(in srgb, var(--show-purple) 55%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--show-purple) 70%, transparent); }
.aside-card .btn { width: 100%; }
a.aside-card { overflow: hidden; }
a.aside-card .go { display: inline-block; padding-top: 0; }
.checks, .aside-links, .kv { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.checks li { position: relative; padding-left: 30px; font-size: 1rem; line-height: 1.45; color: var(--text-2); }
.checks li::before { content: "\2713"; position: absolute; left: 0; top: 0.05em; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--ink); font-size: 0.75rem; font-weight: 700; }
.aside-links a { display: block; font-weight: 600; font-size: 1rem; line-height: 1.4; color: var(--text); }
.aside-links a:hover { color: var(--accent-hot); }
.kv li { display: flex; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); font-size: 1rem; color: var(--text-2); }
.kv strong { color: var(--text); }
.related { background: var(--bg-2); }
.related h2 { margin: 0 0 var(--s5); font-size: clamp(1.8rem, 3vw, 2.4rem); }
.quote { margin: var(--s5) 0; padding: var(--s4) var(--s5); border-left: 4px solid var(--accent); background: var(--surface); border-radius: 0 var(--r) var(--r) 0; font: 400 clamp(1.3rem, 2vw, 1.6rem)/1.25 var(--font-display); color: var(--text); }
.quote p { margin: 0 0 var(--s2); font: inherit; }
.quote footer { font-family: var(--font-text); }

/* live page */
.live-band { background: var(--bg-2); }
.live-band > .wrap > h3 { margin: var(--s7) 0 var(--s4); font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: var(--s2); border-radius: 50%; background: var(--alert); vertical-align: 0.1em; }
.live-band .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.steps li, .promise li { padding: var(--s5); }
.steps h3, .promise h3 { margin: 0 0 var(--s2); font-size: 1.35rem; }
.steps p, .promise p { margin: 0; color: var(--text-2); font-size: 1rem; line-height: 1.55; }
.promise { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }

/* contact + where we sell */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s4); }
.contact-card { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s5); }
.contact-card strong { font-size: 1.15rem; }
.contact-card .eyebrow, .ws-card .eyebrow { margin: 0; }
.ws-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.ws-grid.solo { grid-template-columns: minmax(0, 640px); }
.ws-grid.duo { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.ws-card { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); color: var(--text-2); font-size: 1rem; }
.ws-card strong { font: 400 2rem/1 var(--font-display); color: var(--text); }
.ws-main { background: linear-gradient(160deg, color-mix(in srgb, var(--show-purple) 55%, var(--surface)), var(--surface)); }
.ws-card .btn { align-self: flex-start; margin-top: var(--s2); }
.notfound { padding-block: var(--s8); }
.notfound h1 { max-width: none; }

@media (max-width: 1000px) {
  .guide { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .guide-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .live-band .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-grid, .ws-grid.duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .c-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .c-hero .photo-stage { max-width: 520px; }
}
@media (max-width: 620px) {
  .page-hero { padding-block: var(--s5) var(--s6); }
  .live-band .steps, .promise { grid-template-columns: minmax(0, 1fr); }
  .toc { padding: var(--s4); }
  .aside-card, .steps li, .promise li, .contact-card, .ws-card { padding: var(--s4); }
  .photo-stage-sm { margin: calc(-1 * var(--s4)) calc(-1 * var(--s4)) var(--s3); }
  .crumbs [aria-current] { max-width: 22ch; }
}

/* ── Showroom (light) sections ─────────────────────────────────────────────────
   The dark purple stays for the stage: hero, live shows, page heroes, footer. Pieces, collections,
   guides and reviews sit on warm cream "shelves" so real glass reads like it does in a shop.
   Re-scoping the tokens means every component inside adapts without its own light variant. */
.light {
  /* Text tokens meet WCAG AA (4.5:1) on both cream bands (#fbf3e4 and #f3e5cb) and on white cards:
     --text-2 7.8:1+, --muted 5.1:1+, --accent-text 4.9:1+, --accent-2 4.8:1+ (worst case = #f3e5cb). */
  --bg: #fbf3e4; --bg-2: #f3e5cb; --surface: #ffffff; --stage: #f4e6cc;
  --text: #1f1430; --text-2: #4b3f5e; --muted: #665a79;
  --line: rgba(31, 20, 48, 0.13); --accent-text: #a84300; --link: #a84300; --accent-hot: #a84300; --accent-2: #0b6f76;
  --card-shadow: 0 1px 2px rgba(31, 20, 48, 0.05), 0 14px 30px -24px rgba(31, 20, 48, 0.45);
  --card-shadow-hover: 0 2px 4px rgba(31, 20, 48, 0.05), 0 24px 40px -26px rgba(31, 20, 48, 0.5);
  --ghost-line: rgba(31, 20, 48, 0.45); --ghost-hover: rgba(31, 20, 48, 0.06);
  background: var(--bg); color: var(--text);
}
/* Alternate cream band: home "section-alt", and the inner-page bands that were dark-alt before
   (.related "Keep hunting"/"More guides", the /live how-it-works band, "Available now"). */
.light:is(.section-alt, .related, .live-band, .avail-now) { background: var(--bg-2); }
.light .btn-ghost { color: var(--text); border-color: var(--ghost-line); }
.light .btn-ghost:hover { background: var(--ghost-hover); }
.light :focus-visible { outline-color: var(--accent-text); }
/* A real display shelf: warm back wall, wooden ledge, soft shadow under each piece. */
.light .shelf-stage { background: linear-gradient(180deg, #fffaf1 0%, #f6e9d2 78%); }
.light .shelf-stage::before { background: linear-gradient(180deg, #d9b98b, #c49a66); border-top: 1px solid #b88b55; box-shadow: 0 -6px 14px -10px rgba(80, 50, 20, 0.45); }
.light .shelf-piece { filter: drop-shadow(0 10px 8px rgba(60, 40, 20, 0.28)); }
.light .photo-stage { background: linear-gradient(180deg, #fffaf1 0%, #f6e9d2 80%); }
.light .photo-stage::before { background: linear-gradient(180deg, #d9b98b, #c49a66); border-top-color: #b88b55; }
.light .stage-photo { filter: drop-shadow(0 10px 8px rgba(60, 40, 20, 0.28)); }
.light .piece-photo { background: #ffffff; }
.light :is(.aside-card.hot, .ws-main) { background: linear-gradient(160deg, #efe4ff, #ffffff); border-color: rgba(122, 63, 209, 0.35); }
/* UV mode turns the lights off everywhere, shelves included: every light-only value goes back to
   its dark-stage equivalent, so nothing light leaks into the dark (ghost borders, lavender cards). */
body.blacklight .light {
  --bg: #08040f; --bg-2: #0d0619; --stage: #1a0d33; --surface: #120826; --text: #fff4e0; --text-2: #d9c8ff; --muted: #9c8bbd;
  --line: color-mix(in srgb, #d9c8ff 28%, transparent); --accent-text: #ff7a1a; --link: #ff9340; --accent-hot: #ff9340; --accent-2: #6fd6ff;
  --card-shadow: none; --card-shadow-hover: 0 24px 40px -28px rgba(0, 0, 0, 0.9); --ghost-line: #d9c8ff; --ghost-hover: rgba(217, 200, 255, 0.14);
}
body.blacklight .light :is(.shelf-stage, .photo-stage) { background: var(--stage); }
body.blacklight .light :is(.shelf-stage, .photo-stage)::before { background: color-mix(in srgb, var(--bg) 35%, transparent); border-top: 1px solid color-mix(in srgb, var(--text-2) 22%, transparent); box-shadow: none; }
body.blacklight .light :is(.aside-card.hot, .ws-main) { background: linear-gradient(160deg, color-mix(in srgb, var(--show-purple) 45%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--show-purple) 70%, transparent); }
body.blacklight .light .piece-photo { background: var(--paper); }
/* Inner pages: a section that started flush under the hero needs room once it's on its own shelf. */
.light.pt0 { padding-top: clamp(var(--s6), 5vw, var(--s8)); }
.page-hero { padding-bottom: clamp(var(--s6), 5vw, var(--s7)); }
/* Two sections on the same band in a row: one gap between them, not two stacked section paddings. */
.section.light:not(.section-alt, .related, .live-band, .avail-now) + .section.light:not(.section-alt, .related, .live-band, .avail-now) { padding-top: 0; }
.section:not(.light, .section-alt) + .cta-section { padding-top: 0; }
/* Collection pages: "Available now" is its own darker shelf band between the hero and the guide. */
.avail-now.light { padding-block: clamp(var(--s6), 5vw, var(--s8)); }
.avail-now.light .wrap { margin-inline: auto; }

/* ── /shop ──────────────────────────────────────────────────────────────────── */
.shop-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); margin-bottom: var(--s5); }
.shop-bar[hidden], .shop-loading[hidden], [data-shop-all-fallback][hidden], .piece[hidden], .chip-btn[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip-btn { font: 600 0.95rem/1 var(--font-text); padding: 10px 14px; border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.chip-btn:hover { border-color: var(--text-2); }
.chip-btn[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip-btn .n { margin-left: 2px; font-weight: 500; color: var(--muted); }
.chip-btn[aria-pressed="true"] .n { color: inherit; }
.shop-count { margin: 0; color: var(--muted); font-size: var(--t-small); }
.shop-loading { margin: 0 0 var(--s6); color: var(--muted); }
.shop-more { margin-top: var(--s6); }
@media (max-width: 620px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .chip-btn { flex: none; }
}
/* Phones: every piece grid (home, /shop) goes two across with compact cards, like "Available now". */
@media (max-width: 620px) {
  .piece-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .piece-grid .piece-photo { height: 150px; padding: var(--s2); }
  .piece-grid .piece-photo img { max-height: calc(150px - 2 * var(--s2)); }
  .piece-grid .piece-body { padding: var(--s2) var(--s3) var(--s3); gap: var(--s1); }
  .piece-grid .piece-title { font-size: 0.875rem; }
  .piece-grid .piece-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .piece-grid .piece-price { font-size: 1.15rem; }
  .piece-grid .piece-tag { font-size: 0.75rem; }
  .shop-more .btn { flex: 1 1 100%; }
}
/* Long eBay titles: three lines max so cards in a row stay even (the full title is on the listing). */
.piece-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Pieces lined up for upcoming shows (home shows section, /shop). */
.live-pieces { margin-top: var(--s6); }
.live-pieces[hidden], .shop-live[hidden], [data-live-pieces][hidden], [data-shop-live][hidden] { display: none; }
.live-pieces-h { margin: 0 0 var(--s4); font-weight: 600; color: var(--text-2); }
.live-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.piece-live .piece-price { color: var(--accent-2); }

/* /shop loading: placeholder cards in the real grid's shape (no layout jump when pieces land). */
.shop-skeleton[hidden], .shop-pending[hidden] { display: none; }
.piece-ghost { display: grid; gap: var(--s2); padding: 0 0 var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.piece-ghost div { height: 240px; background: var(--bg-2); }
.piece-ghost span { height: 12px; margin: 0 var(--s4); border-radius: 6px; background: var(--bg-2); }
.piece-ghost span:last-child { width: 40%; height: 18px; }
@media (prefers-reduced-motion: no-preference) { .piece-ghost > * { animation: ghost 1.4s ease-in-out infinite; } }
@keyframes ghost { 50% { opacity: 0.55; } }
@media (max-width: 620px) { .piece-ghost div { height: 150px; } }
.shop-pending { margin: var(--s4) 0 0; color: var(--muted); font-size: var(--t-small); }
.chips-source { padding-right: var(--s3); margin-right: var(--s1); border-right: 1px solid var(--line); }
@media (max-width: 900px) { .chips-source { border-right: 0; padding-right: 0; margin-right: 0; } .shop-bar { align-items: flex-start; flex-direction: column; } }
/* Teaser grids (home "Fresh off our shelves", the home live strip, collection "Available now") are
   fixed 4 / 2 across, and a part-filled last row is dropped once there is at least one full row,
   so a teaser never ends on a lonely orphan card. Everything is one click away on /shop. */
.home-pieces { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 1001px) {
  :is(.home-pieces, .live-grid, .avail-grid) > .piece:nth-child(4n+5):nth-last-child(-n+3),
  :is(.home-pieces, .live-grid, .avail-grid) > .piece:nth-child(4n+5):nth-last-child(-n+3) ~ .piece { display: none; }
}
@media (max-width: 1000px) {
  .home-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.home-pieces, .live-grid, .avail-grid) > .piece:nth-child(2n+3):last-child { display: none; }
}

/* ── SEO/GEO content blocks (team/seo2) ─────────────────────────
   Guide pages: a one-sentence "short answer" lede, then the chatty intro.
   /about: the "at a glance" fact list (quotable by search + AI). */
.page-hero .lede-more { margin: var(--s3) 0 0; max-width: 62ch; color: var(--text-2); }
.page-hero .lede-more + .tiny { margin: var(--s3) 0 0; }
.facts { margin: var(--s4) 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.facts > div { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: var(--s2) var(--s5); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; }
@media (max-width: 640px) { .facts > div { grid-template-columns: 1fr; gap: 2px; } }