/* The Adam Dunn Show mock-up: design tokens. Custom properties only. */
:root {
  /* Color: two tones, one muted grey per ground, one focus color */
  --ink: #0B0B0B;
  --paper: #F2EFE8;
  --smoke: #8A8A8A;      /* muted text on ink only, 5.70:1 */
  --graphite: #66635D;   /* muted text on paper only, 5.21:1 */
  --focus: #E23D3D;      /* the one accent, hue 0; text on it is always ink, 4.66:1 */
  --on-focus: var(--ink);
  --ink-rgb: 11 11 11;
  --paper-rgb: 242 239 232;

  /* Type families (Google Fonts only) */
  --font-display: "Anton", sans-serif;
  --font-body: "Archivo", sans-serif;
  --font-mono: "Space Mono", monospace;

  /* Fluid type scale, 375 px to 1440 px */
  --fs-mega: clamp(3.5rem, 1.5rem + 8.4vw, 9.5rem);
  --fs-display-1: clamp(2.75rem, 1.6rem + 5vw, 7rem);
  --fs-display-2: clamp(2.25rem, 1.5rem + 3.2vw, 4.75rem);
  --fs-display-3: clamp(1.75rem, 1.35rem + 1.7vw, 3rem);
  --fs-title: clamp(1.125rem, 1rem + 0.45vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.02rem + 0.55vw, 1.5rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-small: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --fs-mono-l: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem);
  --fs-mono: 0.8125rem;
  --fs-mono-s: 0.75rem;
  --lh-display: 0.9;
  --lh-tight: 1.15;
  --lh-body: 1.6;
  --lh-mono: 1.4;
  --track-display: 0.01em;
  --track-mono: 0.08em;
  --track-stamp: 0.14em;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-strong: 700;
  --measure: 65ch;

  /* Spacing, 4 px base */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 10rem;

  /* Layout */
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --section-y: clamp(4rem, 2.5rem + 6vw, 9rem);
  --container-max: 1440px;
  --grid-cols: 4;
  --header-h: 60px;
  --tap: 44px;
  --control-h: 52px;
  --bp-sm: 640;
  --bp-md: 1024;
  --bp-lg: 1280;
  --bp-xl: 1440;

  /* Radii and borders */
  --radius-0: 0;
  --radius-sleeve: 2px;
  --radius-pill: 999px;
  --radius-round: 50%;
  --border-hair: 1px;
  --border: 1.5px;
  --border-stamp: 2.5px;
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;

  /* Depth: shadow sets per ground (the ground blocks map them to --shadow-1 to 3) */
  --shadow-paper-1: 0 1px 1px rgb(var(--ink-rgb) / 0.10), 0 2px 6px rgb(var(--ink-rgb) / 0.10);
  --shadow-paper-2: 0 2px 2px rgb(var(--ink-rgb) / 0.10), 0 8px 18px rgb(var(--ink-rgb) / 0.16), 0 18px 36px rgb(var(--ink-rgb) / 0.12);
  --shadow-paper-3: 0 4px 6px rgb(var(--ink-rgb) / 0.12), 0 18px 40px rgb(var(--ink-rgb) / 0.22), 0 44px 90px rgb(var(--ink-rgb) / 0.26);
  --shadow-ink-1: 0 0 0 1px rgb(var(--paper-rgb) / 0.10), 0 2px 6px rgb(0 0 0 / 0.60);
  --shadow-ink-2: 0 0 0 1px rgb(var(--paper-rgb) / 0.14), 0 10px 24px rgb(0 0 0 / 0.70);
  --shadow-ink-3: 0 0 0 1px rgb(var(--paper-rgb) / 0.18), 0 24px 60px rgb(0 0 0 / 0.80);
  --shadow-press: 0 1px 0 rgb(var(--ink-rgb) / 0.20);
  --lift-hover: -6px;
  --lift-pulled: -14px;
  --peek-pulled: 22%;
  --perspective-card: 900px;
  --perspective-flip: 1400px;
  --perspective-door: 1800px;

  /* Grain (tiles generated at load; see section 5, Grain and textures) */
  --grain-tile: 192px;
  --grain-opacity-on-ink: 0.06;
  --grain-opacity-on-paper: 0.05;

  /* Z-index layers. The door, the Directory, and the record detail are native
     modal dialogs in the top layer; these values order everything else and
     any non-dialog fallback. */
  --z-base: 0;
  --z-raised: 10;
  --z-grain: 15;
  --z-sticky: 20;
  --z-transition: 30;
  --z-header: 40;
  --z-dialog: 50;
  --z-door: 60;
  --z-cursor: 80;
  --z-skip: 90;

  /* Motion: durations */
  --dur-micro: 140ms;
  --dur-short: 240ms;
  --dur-settle: 420ms;
  --dur-reveal: 640ms;
  --dur-stagger: 70ms;
  --dur-stamp: 360ms;
  --dur-wipe: 380ms;
  --dur-hold: 140ms;
  --dur-fly: 420ms;
  --dur-flip: 560ms;
  --dur-door: 900ms;
  --dur-crossfade: 400ms;

  /* Motion: easings */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-needle: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Motion: interaction constants, read by JavaScript */
  --marquee-speed: 60;          /* px per second */
  --magnet-strength: 0.28;
  --magnet-radius: 80px;
  --magnet-max-x: 10px;
  --magnet-max-y: 8px;
  --tilt-max-x: 6deg;
  --tilt-max-y: 8deg;
  --tilt-lift: 18px;
  --parallax-near: 10px;
  --parallax-mid: 6px;
  --parallax-far: 3px;
  --hero-spin-base: 0.5;        /* radians per second; 0.35 until the team asked for a tad more (2026-10-21) */
  --hero-dpr-max-fine: 1.75;
  --hero-dpr-max-coarse: 1.5;
}

@media (min-width: 640px) {
  :root { --grid-cols: 8; }
}

@media (min-width: 1024px) {
  :root { --grid-cols: 12; --header-h: 72px; }
}

@media (max-width: 639px) {
  :root { --marquee-speed: 40; }
}

/* Ground pairs: dark (ink) and paper */
[data-ground="ink"] {
  --bg: var(--ink);
  --fg: var(--paper);
  --muted: var(--smoke);
  --rule: rgb(var(--paper-rgb) / 0.16);
  --focus-ring: var(--paper);
  --grain-opacity: var(--grain-opacity-on-ink);
  --shadow-1: var(--shadow-ink-1);
  --shadow-2: var(--shadow-ink-2);
  --shadow-3: var(--shadow-ink-3);
}

[data-ground="paper"] {
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: var(--graphite);
  --rule: rgb(var(--ink-rgb) / 0.14);
  --focus-ring: var(--ink);
  --grain-opacity: var(--grain-opacity-on-paper);
  --shadow-1: var(--shadow-paper-1);
  --shadow-2: var(--shadow-paper-2);
  --shadow-3: var(--shadow-paper-3);
}

/* Reduced motion: the OS setting, or the footer Motion switch set to off.
   Color fades (--dur-micro) stay; anything that moves goes to zero. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-short: 0ms;
    --dur-settle: 0ms;
    --dur-reveal: 0ms;
    --dur-stagger: 0ms;
    --dur-stamp: 0ms;
    --dur-wipe: 0ms;
    --dur-hold: 0ms;
    --dur-fly: 0ms;
    --dur-flip: 0ms;
    --dur-door: 0ms;
    --dur-crossfade: 0ms;
    --marquee-speed: 0;
    --magnet-strength: 0;
    --tilt-max-x: 0deg;
    --tilt-max-y: 0deg;
    --tilt-lift: 0px;
    --lift-hover: 0px;
    --lift-pulled: 0px;
    --parallax-near: 0px;
    --parallax-mid: 0px;
    --parallax-far: 0px;
    --hero-spin-base: 0;
  }
}

:root[data-motion="reduced"] {
  --dur-short: 0ms;
  --dur-settle: 0ms;
  --dur-reveal: 0ms;
  --dur-stagger: 0ms;
  --dur-stamp: 0ms;
  --dur-wipe: 0ms;
  --dur-hold: 0ms;
  --dur-fly: 0ms;
  --dur-flip: 0ms;
  --dur-door: 0ms;
  --dur-crossfade: 0ms;
  --marquee-speed: 0;
  --magnet-strength: 0;
  --tilt-max-x: 0deg;
  --tilt-max-y: 0deg;
  --tilt-lift: 0px;
  --lift-hover: 0px;
  --lift-pulled: 0px;
  --parallax-near: 0px;
  --parallax-mid: 0px;
  --parallax-far: 0px;
  --hero-spin-base: 0;
}

/* ==========================================================================
   Builder A: base, grounds, grid, type, shared components, the shell,
   Home, and the seven simple views. Everything below reads the tokens above.
   ========================================================================== */

/* Grain tiles per ground (static tiles in assets/, strength from --grain-opacity) */
[data-ground="ink"] { --grain-url: url("../assets/grain-on-ink.png"); }
[data-ground="paper"] { --grain-url: url("../assets/grain-on-paper.png"); }
[data-ground] { color: var(--fg); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background-color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  --sticky-top: var(--header-h);
}
html[data-header="hidden"] { --sticky-top: 0px; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: var(--weight-strong); }
[hidden] { display: none !important; }
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring, currentColor);
  outline-offset: var(--focus-ring-offset);
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
svg.icon {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
}

/* The door hides the shop until a yes (no script: noscript style shows it) */
:root[data-door="ask"] .shell,
:root[data-door="ask"] .skip-link { visibility: hidden; }

/* ---------- Sections and grounds ---------- */
.section {
  position: relative;
  isolation: isolate;
  background-color: var(--bg);
  color: var(--fg);
  padding-block: var(--section-y);
  overflow-x: clip;
}
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--grain-url);
  background-size: var(--grain-tile) var(--grain-tile);
  opacity: var(--grain-opacity);
}
.section > * { position: relative; z-index: 2; }
.section > .under-grain { z-index: 0; }
.section + .section[data-ground] { margin-top: 0; }
.section--tight { padding-block: var(--space-8); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-6);
}
.grid > * { grid-column: 1 / -1; min-width: 0; }
.stack { display: grid; gap: var(--space-5); align-content: start; }
.stack--tight { gap: var(--space-3); }
.stack--loose { gap: var(--space-7); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.anchor { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---------- Type ---------- */
.kicker {
  font-family: var(--font-mono);
  font-weight: var(--weight-strong);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}
.h-mega, .h-display-1, .h-display-2, .h-display-3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}
.h-mega { font-size: var(--fs-mega); }
.h-display-1 { font-size: var(--fs-display-1); }
.h-display-2 { font-size: var(--fs-display-2); }
.h-display-3 { font-size: var(--fs-display-3); line-height: 0.95; }
.h-title { font-size: var(--fs-title); font-weight: var(--weight-strong); line-height: var(--lh-tight); }
.lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  max-width: var(--measure);
  text-wrap: pretty;
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  letter-spacing: var(--track-mono);
  font-variant-numeric: tabular-nums;
}
.mono-s { font-size: var(--fs-mono-s); }
.upper { text-transform: uppercase; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.prose { max-width: var(--measure); }
.prose p { text-wrap: pretty; }
.prose > * + * { margin-top: var(--space-4); }
.strong-line { font-weight: var(--weight-strong); font-size: var(--fs-lead); line-height: 1.4; max-width: var(--measure); }
.quote { font-size: var(--fs-lead); line-height: 1.4; font-weight: var(--weight-medium); max-width: 40ch; }

/* ---------- Buttons and links ---------- */
.btn {
  --lift: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--control-h);
  padding: 0 28px;
  border: var(--border) solid transparent;
  border-radius: var(--radius-0);
  background-color: transparent;
  color: var(--fg);
  font-family: var(--font-mono);
  font-weight: var(--weight-strong);
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  translate: 0 var(--lift);
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition:
    transform var(--dur-settle) var(--ease-out),
    translate var(--dur-settle) var(--ease-out),
    box-shadow var(--dur-micro) linear,
    background-color var(--dur-micro) linear,
    color var(--dur-micro) linear,
    border-color var(--dur-micro) linear;
}
.btn.is-magnet {
  transition:
    translate var(--dur-settle) var(--ease-out),
    box-shadow var(--dur-micro) linear,
    background-color var(--dur-micro) linear,
    color var(--dur-micro) linear,
    border-color var(--dur-micro) linear;
}
.btn__label { display: inline-block; transform: translate3d(var(--lx, 0px), var(--ly, 0px), 0); }
.btn .icon { width: 16px; height: 16px; }
.btn--solid { background-color: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--outline { border-color: var(--fg); }
.btn--focus { background-color: var(--focus); color: var(--on-focus); border-color: var(--focus); }
.btn--text {
  min-height: var(--tap);
  padding: 0;
  border: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-strong);
  font-size: var(--fs-body);
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  justify-content: flex-start;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transform: none;
  translate: none;
}
@media (hover: hover) {
  .btn:not(.btn--text):hover { --lift: calc(var(--lift-hover) / 3); box-shadow: var(--shadow-2); }
  .btn--outline:hover { background-color: var(--fg); color: var(--bg); }
  .btn--text:hover { text-decoration-thickness: 3px; }
}
.btn:not(.btn--text):active { --lift: 0px; box-shadow: var(--shadow-press); }
.btn[disabled], .btn[aria-busy="true"] { cursor: progress; }
.btn--block { width: 100%; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
@media (max-width: 639px) {
  .cta-row .btn:not(.btn--text) { width: 100%; }
}
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: var(--border) solid var(--fg);
  border-radius: var(--radius-0);
  background-color: var(--bg);
  color: var(--fg);
  cursor: pointer;
  flex: none;
  transition: background-color var(--dur-micro) linear, color var(--dur-micro) linear;
}
@media (hover: hover) { .icon-btn:hover { background-color: var(--fg); color: var(--bg); } }

/* ---------- Stamps ---------- */
.stamp {
  --rot: -2deg;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  flex: none;
  vertical-align: middle;
  padding: 0 0.6em;
  border: var(--border-stamp) solid currentColor;
  color: var(--fg);
  font-family: var(--font-mono);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
  letter-spacing: var(--track-stamp);
  line-height: 1;
  white-space: nowrap;
  justify-self: start;
  transform: rotate(var(--rot));
  -webkit-mask-image: url("../assets/stamp-grit.png");
  mask-image: url("../assets/stamp-grit.png");
  -webkit-mask-size: 128px 128px;
  mask-size: 128px 128px;
}
.stamp--s { font-size: 12px; height: 24px; border-width: 2px; }
.stamp--m { font-size: 14px; height: 32px; border-width: 2.5px; }
.stamp--l {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-3);
  letter-spacing: var(--track-display);
  padding: 0.14em 0.35em 0.08em;
  border-width: 3px;
}
.stamp--solid { background-color: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---------- Placeholder slot ---------- */
.placeholder-slot {
  --ratio: 4 / 5;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-3);
  aspect-ratio: var(--ratio);
  padding: var(--space-5);
  border: var(--border) dashed var(--fg);
  color: var(--fg);
  text-align: center;
}
.placeholder-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--fg);
  opacity: 0.1;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M-1 1l2-2M0 10L10 0M9 11l2-2' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M-1 1l2-2M0 10L10 0M9 11l2-2' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-size: 10px 10px;
  mask-size: 10px 10px;
}
.placeholder-slot__label {
  max-width: 28ch;
  font-family: var(--font-mono);
  font-weight: var(--weight-strong);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  line-height: var(--lh-mono);
}
.placeholder-text { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--muted); }
.photo { display: block; width: 100%; height: auto; }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--space-5); max-width: 640px; }
.form-row { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) { .form-row--pair { grid-template-columns: 1fr 1fr; } }
.form-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-field { display: grid; gap: var(--space-2); align-content: start; }
.form-field__label, .choice-group > legend {
  padding: 0;
  font-family: var(--font-mono);
  font-weight: var(--weight-strong);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--fg);
}
.form-field__input {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 16px;
  border: var(--border) solid var(--fg);
  border-radius: var(--radius-0);
  background-color: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
}
select.form-field__input {
  -webkit-appearance: auto;
  appearance: auto;
  background-color: var(--bg);
  color: var(--fg);
}
textarea.form-field__input { min-height: 140px; padding-block: 14px; resize: vertical; line-height: var(--lh-body); }
.form-field__input::placeholder { color: var(--muted); opacity: 1; }
@media (hover: hover) { .form-field__input:hover { border-width: 2px; padding-inline: 15.5px; } }
.form-field__input[aria-invalid="true"] { border-style: dashed; border-width: var(--border-stamp); padding-inline: 15px; }
.form-field__error, .choice-group__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
}
.form-field__error .icon { width: 18px; height: 18px; margin-top: 2px; }
.form-note { font-size: var(--fs-small); color: var(--muted); max-width: var(--measure); }
.choice-group { display: grid; gap: var(--space-1); margin: 0; padding: 0; border: 0; min-width: 0; }
.choice-group > legend { margin-bottom: var(--space-2); }
.choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  cursor: pointer;
  font-size: 17px;
}
.choice input {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  width: 24px; height: 24px;
  margin: 0;
  border: var(--border) solid var(--fg);
  border-radius: var(--radius-0);
  background-color: transparent;
  cursor: pointer;
}
.choice input:checked { background-color: var(--fg); }
.choice input:checked::after {
  content: "";
  width: 12px; height: 7px;
  border-left: 2px solid var(--bg);
  border-bottom: 2px solid var(--bg);
  transform: translateY(-2px) rotate(-45deg);
}
.choice-group[aria-invalid="true"] .choice input { border-style: dashed; border-width: 2px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.form-summary {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: var(--border-stamp) dashed var(--fg);
}
.form-summary a { font-weight: var(--weight-strong); text-underline-offset: 3px; }
.btn__spin { width: 18px; height: 18px; }
:root.motion-on .btn[aria-busy="true"] .btn__spin { animation: ads-spin 1.2s linear infinite; }
.received {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  max-width: 640px;
  padding: var(--space-6);
  border: var(--border) solid var(--fg);
}
.received__h:focus-visible { outline-offset: 6px; }

/* ---------- Dialog (shared) ---------- */
dialog.dialog {
  padding: 0;
  border: 0;
  max-width: min(1120px, calc(100vw - 32px));
  background-color: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-3);
  overscroll-behavior: contain;
}
dialog.dialog::backdrop { background-color: rgb(var(--ink-rgb) / 0.88); }
.dialog__scrim { position: fixed; inset: 0; background-color: rgb(var(--ink-rgb) / 0.88); }

/* ---------- Reveals ---------- */
:root.motion-on .reveal:not(.is-revealed):not(.is-revealing) { opacity: 0; }
.rv-line {
  display: block;
  overflow: clip;
  overflow-clip-margin: 0.06em;
  padding-block: 0.04em;
  margin-block: -0.04em;
}
.rv-inner { display: block; will-change: transform; }
:root.motion-on .reveal-fade:not(.is-revealed) { opacity: 0; transform: translateY(12px); }
:root.motion-on .reveal-fade.is-revealed {
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
@keyframes ads-spin { to { transform: rotate(360deg); } }

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-skip);
  transform: translateY(-200%);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background-color: var(--bg);
  color: var(--fg);
  border-bottom: var(--border-hair) solid var(--rule);
  transition: transform var(--dur-short) var(--ease-out);
}
:root[data-header="hidden"] .site-header { transform: translateY(-100%); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-logo { display: block; flex: none; width: 63px; height: 40px; }
.mark {
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.mark--flag-header { -webkit-mask-image: url("../assets/brand/flag-header.png"); mask-image: url("../assets/brand/flag-header.png"); }
.mark--flag-footer { -webkit-mask-image: url("../assets/brand/flag-footer.png"); mask-image: url("../assets/brand/flag-footer.png"); }
.mark--beard { -webkit-mask-image: url("../assets/brand/beard.png"); mask-image: url("../assets/brand/beard.png"); }
.site-nav { display: none; flex: 1; justify-content: center; }
.site-nav__list { display: flex; align-items: center; gap: var(--space-4); }
@media (min-width: 1440px) { .site-nav__list { gap: var(--space-5); } }
.site-nav .nav-item--wide, .site-header__right .header-link--wide { display: none; }
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-mono);
  font-weight: var(--weight-strong);
  font-size: 13px;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  height: 3px;
  background-color: var(--fg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-short) var(--ease-out);
}
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) { .nav-link:hover::after { transform: scaleX(1); } }
.site-header__right { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
@media (min-width: 768px) {
  .site-logo { width: 79px; height: 50px; }
  .site-nav { display: flex; }
}
@media (min-width: 1280px) {
  .site-nav .nav-item--wide { display: list-item; }
  .site-header__right .header-link--wide { display: inline-flex; }
  .site-header__right { gap: var(--space-4); }
}
.dir-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--space-3);
  border: var(--border) solid var(--fg);
  border-radius: var(--radius-0);
  background-color: transparent;
  color: var(--fg);
  font-family: var(--font-mono);
  font-weight: var(--weight-strong);
  font-size: 13px;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  transition: background-color var(--dur-micro) linear, color var(--dur-micro) linear;
}
@media (hover: hover) { .dir-btn:hover { background-color: var(--fg); color: var(--bg); } }
@media (max-width: 479px) { .dir-btn__label { display: none; } }

/* ---------- Now Spinning pill (never the focus color) ---------- */
.pill {
  --lift: 0px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--space-3);
  border: var(--border) solid var(--fg);
  border-radius: var(--radius-pill);
  color: var(--fg);
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: var(--weight-strong);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  white-space: nowrap;
  translate: 0 var(--lift);
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform var(--dur-settle) var(--ease-out), translate var(--dur-settle) var(--ease-out);
}
.pill.is-magnet { transition: translate var(--dur-settle) var(--ease-out); }
@media (hover: hover) { .pill:hover { --lift: calc(var(--lift-hover) / 3); } }
.pill__glyph { width: 18px; height: 18px; flex: none; }
:root.motion-on .pill.is-live .pill__glyph { animation: ads-spin 2.4s linear infinite; }
.pill:not(.is-live) .pill__live { display: none; }
.pill__live { --rot: 0deg; height: 20px; font-size: 11px; }
.pill__label { display: none; }
.pill__title { display: none; }
@media (max-width: 767px) { .pill { padding: 0 10px; justify-content: center; } }
@media (min-width: 768px) { .pill__label { display: inline; } }
@media (min-width: 1280px) {
  .pill.is-live .pill__title {
    display: block;
    width: 200px;
    overflow: hidden;
    font-weight: 400;
    color: var(--fg);
  }
  .pill__title-inner { display: inline-block; white-space: nowrap; }
  .pill:not(.is-scrolling) .pill__title-inner { max-width: 200px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
}

/* ---------- Directory ---------- */
dialog.directory {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--bg);
  color: var(--fg);
  overflow-y: auto;
  overscroll-behavior: contain;
}
dialog.directory::backdrop { background-color: var(--ink); }
.directory__inner { padding-block: var(--space-4) var(--space-9); }
.directory__top { display: flex; align-items: center; justify-content: space-between; height: calc(var(--header-h) - var(--space-4)); }
.directory__mark { width: 63px; height: 40px; }
.directory__groups { display: grid; gap: var(--space-7); margin-top: var(--space-7); }
@media (min-width: 768px) { .directory__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .directory__groups { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.directory__h { color: var(--muted); padding-bottom: var(--space-3); border-bottom: var(--border-hair) solid var(--rule); margin-bottom: var(--space-3); }
.directory__link {
  display: inline-block;
  padding-block: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  text-decoration: none;
}
.directory__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
@media (hover: hover) { .directory__link:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; } }

/* ---------- The door ---------- */
dialog.door {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  overflow: hidden;
  perspective: var(--perspective-door);
}
dialog.door::backdrop { background-color: var(--ink); }
dialog.door.is-clear::backdrop { background-color: transparent; }
.door__panel {
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow-y: auto;
  background-color: var(--bg);
  color: var(--fg);
  transform-origin: left center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.door__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--grain-url);
  background-size: var(--grain-tile) var(--grain-tile);
  opacity: var(--grain-opacity);
}
.door__jamb {
  position: absolute;
  inset: 16px;
  z-index: 1;
  border: var(--border-hair) solid rgb(var(--paper-rgb) / 0.5);
  pointer-events: none;
}
.door__sign {
  position: relative;
  z-index: 2;
  width: min(520px, calc(100% - 32px));
  margin: 10vh auto var(--space-8);
  perspective: var(--perspective-flip);
  transform-origin: 50% -10vh;
}
.door__sign::before, .door__sign::after {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 1px;
  height: 10vh;
  background-color: var(--paper);
}
.door__sign::before { left: 22%; }
.door__sign::after { right: 22%; }
@media (min-width: 640px) {
  .door__sign { margin-top: 14vh; transform-origin: 50% -14vh; }
  .door__sign::before, .door__sign::after { height: 14vh; }
}
:root.motion-on .door__sign.is-swinging { animation: door-swing 1.2s var(--ease-out) both; }
@keyframes door-swing {
  0% { transform: rotate(4deg); }
  30% { transform: rotate(-2.5deg); }
  55% { transform: rotate(1.2deg); }
  78% { transform: rotate(-0.5deg); }
  100% { transform: rotate(0deg); }
}
.door__card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform var(--dur-settle) var(--ease-in-out);
}
.door__card.is-flipped { transform: rotateY(180deg); }
.door__face {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-6) var(--space-6);
  background-color: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-paper-3);
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.door__face--back {
  position: absolute;
  inset: 0;
  align-content: center;
  transform: rotateY(180deg) translateZ(1px);
}
.door__beard { width: 88px; height: 88px; color: var(--ink); }
.door__q { font-size: var(--fs-lead); font-weight: var(--weight-strong); line-height: 1.3; }
.door__q:focus-visible { outline-offset: 6px; }
.door__actions { display: grid; gap: var(--space-3); width: 100%; }
@media (min-width: 640px) { .door__actions { grid-template-columns: 1fr 1fr; } }
.door__declined { display: grid; justify-items: center; gap: var(--space-5); }
.door__open {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  padding: 0.1em 0.3em 0.02em;
  border: 6px solid currentColor;
}

/* ---------- The needle drop ---------- */
.needle {
  position: fixed;
  inset: 0;
  z-index: var(--z-transition);
  overflow: hidden;
  pointer-events: none;
}
.needle__disc {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--needle-d, 3000px);
  height: var(--needle-d, 3000px);
  border-radius: var(--radius-round);
  background-color: var(--ink);
  overflow: hidden;
  transform: translate(-50%, -50%) scale(0);
  will-change: transform;
}
.needle__grooves {
  position: absolute;
  inset: 0;
  background-image: url("../assets/groove-rings.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.needle__grain {
  position: absolute;
  inset: 0;
  background-image: url("../assets/grain-on-ink.png");
  background-size: var(--grain-tile) var(--grain-tile);
  opacity: 0.5;
}
.needle__label {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  padding: 12px;
  border-radius: var(--radius-round);
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: var(--weight-strong);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  text-align: center;
}
.needle__label::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: var(--radius-round);
  background-color: var(--ink);
}
.needle__name { transform: translateY(-14px); }

/* Vinyl on an ink section: the black disc needs a paper rim and brighter grooves to read against the ground. */
.section[data-ground="ink"] { --vinyl-groove: rgb(var(--paper-rgb) / 0.42); --vinyl-rim: rgb(var(--paper-rgb) / 0.72); }
/* ---------- Toast (placeholder links) ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  z-index: var(--z-dialog);
  max-width: calc(100vw - 32px);
  padding: var(--space-3) var(--space-5);
  border: var(--border) solid var(--fg);
  background-color: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  transform: translateX(-50%);
}

/* ---------- Marquee (Now Spinning band) ---------- */
.marquee {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  height: 48px;
  background-color: var(--bg);
  color: var(--fg);
  border-block: var(--border-hair) solid var(--rule);
  overflow: hidden;
}
.marquee__viewport { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; overflow: hidden; }
.marquee__track { display: flex; flex: none; white-space: nowrap; will-change: transform; }
.marquee__copy { display: flex; flex: none; align-items: center; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-right: 12px;
  font-family: var(--font-mono);
  font-weight: var(--weight-strong);
  font-size: var(--fs-mono-l);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}
.marquee__glyph { width: 12px; height: 12px; flex: none; }
.marquee__pause { width: 44px; height: 44px; border-width: 0 0 0 var(--border-hair); border-color: var(--rule); flex: none; }
.marquee.is-static .marquee__track { flex: 1; min-width: 0; }
.marquee.is-static .marquee__copy { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: var(--gutter); }
.marquee.is-static .marquee__item { display: inline; }
.marquee.is-static .marquee__glyph { display: inline-block; vertical-align: -1px; margin-left: 12px; }
.marquee.is-static .marquee__pause { display: none; }
@media (max-width: 639px) { .marquee { height: 40px; } }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--space-9) var(--space-7); }
.site-footer__grid { display: grid; gap: var(--space-7); }
.site-footer__brand { display: grid; gap: var(--space-3); align-content: start; }
.site-footer__logo { display: block; width: 138px; height: 88px; margin-bottom: var(--space-3); }
.site-footer__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--gutter); }
.foot-group__h { color: var(--muted); margin-bottom: var(--space-2); }
.foot-link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap);
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.foot-link .icon { width: 14px; height: 14px; }
@media (hover: hover) { .foot-link:hover { text-decoration: underline; text-underline-offset: 3px; } }
.foot-link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.foot-link--placeholder { color: var(--muted); }
.site-footer__legal {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: var(--border-hair) solid var(--rule);
}
.motion-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  justify-self: start;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--fg);
  font-family: var(--font-mono);
  font-weight: var(--weight-strong);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}
.motion-switch__track {
  position: relative;
  width: 44px;
  height: 24px;
  border: var(--border) solid var(--fg);
  border-radius: var(--radius-pill);
}
.motion-switch__knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 15px; height: 15px;
  border-radius: var(--radius-round);
  background-color: var(--fg);
  transition: transform var(--dur-micro) var(--ease-out);
}
.motion-switch[aria-checked="true"] .motion-switch__knob { transform: translateX(20px); }
/* The wordmark under the footer links (team review, 2026-10-21, after Nyc's Kraftify example; the Kraftify reference of 2026-10-23): the show name set edge to edge on one line, the last thing in the footer, cropped at the baseline and fading along its lower edge. */
.site-footer:has(.site-footer__wordmark) { padding-bottom: 0; }
.site-footer__wordmark { grid-column: 1 / -1; container-type: inline-size; overflow: hidden; margin-top: var(--space-5); border-top: var(--border-hair) solid var(--rule); }
/* "Adam Dunn Show" in Anton runs 6.80 em wide, so 14.4cqw fills the band (97.9%) at any width. */
.wordmark {
  display: block;
  padding-top: var(--space-5);
  margin-bottom: -0.16em;
  font-family: var(--font-display);
  font-size: 14.4cqw;
  line-height: 0.85;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, 0.35) 100%);
  mask-image: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, 0.35) 100%);
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .site-footer__brand { grid-column: 1 / 5; }
  .site-footer__groups { grid-column: 5 / 13; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__legal { grid-column: 1 / -1; grid-template-columns: 1fr auto auto; align-items: center; column-gap: var(--space-6); }
}
@media (min-width: 1280px) { .site-footer__groups { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ==========================================================================
   Shared pieces for Home and the simple views
   ========================================================================== */

/* Plan strip (three track cards) */
.plan-strip { display: grid; gap: 0; position: relative; }
.plan-strip > li + li { margin-top: -1px; }
.track {
  --lift: 0px;
  position: relative;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  height: 100%;
  padding: var(--space-5);
  border: var(--border-hair) solid var(--rule);
  background-color: var(--bg);
  color: var(--fg);
  transform: translateY(var(--lift));
  transition: transform var(--dur-settle) var(--ease-out), box-shadow var(--dur-micro) linear;
}
.track__no { color: var(--muted); }
.track__line { max-width: 40ch; }
@media (hover: hover) and (pointer: fine) {
  .track:hover { --lift: var(--lift-hover); box-shadow: var(--shadow-2); }
}
@media (min-width: 1024px) {
  .plan-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
  .plan-strip > li + li { margin-top: 0; }
}

/* Close band */
.close-band__cta { margin-top: var(--space-6); }

/* Numbers band */
.numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--border-hair) solid var(--rule); }
.numbers__cell { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5) var(--space-4) var(--space-5) 0; border-bottom: var(--border-hair) solid var(--rule); }
.numbers__cell:nth-child(2n) { padding-left: var(--space-4); border-left: var(--border-hair) solid var(--rule); }
.numbers__fig { font-family: var(--font-display); font-size: var(--fs-display-2); line-height: 0.95; text-transform: uppercase; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.numbers__label { font-family: var(--font-mono); font-weight: var(--weight-strong); font-size: var(--fs-mono-s); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--muted); }
.numbers__source { margin-top: var(--space-3); }
@media (min-width: 640px) {
  .numbers--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .numbers--4 .numbers__cell { padding-left: var(--space-4); border-left: var(--border-hair) solid var(--rule); }
  .numbers--4 .numbers__cell:first-child { padding-left: 0; border-left: 0; }
  .numbers--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .numbers--6 .numbers__cell { padding-left: var(--space-4); border-left: var(--border-hair) solid var(--rule); }
  .numbers--6 .numbers__cell:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
}

/* Outlined background numerals ("4:20", "'93", "2027") */
.numeral {
  position: absolute;
  z-index: 0;
  right: -0.04em;
  top: 50%;
  margin-top: -0.45em;
  font-family: var(--font-display);
  font-size: clamp(10rem, 4rem + 24vw, 30rem);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 2px var(--rule);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  transform: translate3d(0, var(--sy, 0px), 0);
}
/* The back room's '93 sits above the sleeves with a heavier stroke, so the 9 reads as a 9 (team review, 2026-10-21). */
.store-teaser .numeral { top: 0; margin-top: -0.1em; right: 0.02em; -webkit-text-stroke: 3px rgb(var(--ink-rgb) / 0.3); }

/* Label wall and label cards (partner logos, one tone through masks) */
.label-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); perspective: var(--perspective-card); }
@media (min-width: 640px) { .label-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .label-wall--strip { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
@media (max-width: 639px) { .label-wall--strip > li:nth-child(n + 13) { display: none; } }
.label-wall > li { perspective: var(--perspective-card); }
.label-card {
  --lift: 0px;
  display: grid;
  aspect-ratio: 3 / 2;
  padding: 16px;
  background-color: var(--bg);
  box-shadow: var(--shadow-1);
  translate: 0 var(--lift);
  transform: rotate(var(--rot, 0deg)) translateZ(var(--tz, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--dur-settle) var(--ease-out), translate var(--dur-settle) var(--ease-out);
}
.label-card.is-tilting { transition: translate var(--dur-settle) var(--ease-out); }
.section[data-ground="paper"] .label-card { border: var(--border-hair) solid var(--rule); }
.label-card__logo {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--ink);
  -webkit-mask-image: var(--logo);
  mask-image: var(--logo);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.label-card--link { color: inherit; text-decoration: none; cursor: pointer; }
.label-card--link:hover { --lift: calc(var(--lift-hover) * 2 / 3); }
/* The card carries its own paper ground, so the global ring would take the card's ink; keep the surrounding section's ring color instead. */
.label-wall, .label-stack { --label-ring: var(--focus-ring); }
.label-card--link:focus-visible { outline-color: var(--label-ring, currentColor); }
/* The wall since the team's review (2026-10-21): the active labels on top, the former ones below, smaller and faded, still clickable. A brand with no logo file yet shows its name. */
.labels__former { margin-top: var(--space-7); margin-bottom: var(--space-4); }
.label-wall--former { opacity: 0.55; transition: opacity var(--dur-micro) linear; }
.label-wall--former:hover, .label-wall--former:focus-within { opacity: 0.85; }
@media (min-width: 640px) { .label-wall--former { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-3); } }
@media (min-width: 1024px) { .label-wall--former.label-wall--strip { grid-template-columns: repeat(16, minmax(0, 1fr)); } }
.label-card--missing { align-content: center; justify-items: center; gap: var(--space-1); border: var(--border-hair) dashed var(--ink); text-align: center; }
.label-card__name { max-width: 100%; overflow-wrap: anywhere; font-family: var(--font-display); font-size: clamp(0.875rem, 0.7rem + 0.6vw, 1.25rem); line-height: 1; text-transform: uppercase; color: var(--ink); }
.label-card__note { font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--graphite); }
.label-wall--former .label-card__name { font-size: clamp(0.625rem, 0.5rem + 0.4vw, 0.875rem); }
.label-wall--former .label-card__note { display: none; }

/* Section heading rows */
.head-row { display: grid; gap: var(--space-4); align-items: end; margin-bottom: var(--space-7); }
@media (min-width: 1024px) {
  .head-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .head-row__main { grid-column: 1 / 8; }
  .head-row__aside { grid-column: 9 / 13; justify-self: end; }
}

/* Cards with lift (session, reason, tip, member, merch) */
.card {
  --lift: 0px;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-5);
  border: var(--border-hair) solid var(--rule);
  background-color: var(--bg);
  color: var(--fg);
  transform: translateY(var(--lift));
  transition: transform var(--dur-settle) var(--ease-out), box-shadow var(--dur-micro) linear;
}
@media (hover: hover) and (pointer: fine) {
  .card--lift:hover { --lift: var(--lift-hover); box-shadow: var(--shadow-2); }
}
.card-grid { display: grid; gap: var(--gutter); }
@media (min-width: 640px) { .card-grid--2, .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Generic vinyl inside sleeves */
.vinyl { display: block; width: 100%; height: 100%; }

/* Pointer parallax (app.js writes --ppx and --ppy; motion-on only) */
[data-parallax] { translate: var(--ppx, 0px) var(--ppy, 0px); }

/* ==========================================================================
   Home
   ========================================================================== */

/* Hero */
.hero {
  padding-block: 0;
  min-height: clamp(640px, calc(100svh - var(--header-h)), 960px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: clip;
}
.hero > .container { pointer-events: none; }
.hero__copy { pointer-events: auto; display: grid; gap: var(--space-5); padding-block: var(--space-9) var(--space-6); }
.hero__meta { color: var(--muted); }
.hero__live { justify-self: start; }
.section > .hero__stage {
  position: relative;
  z-index: 0;
  width: 100vw;
  height: 92vw;
  margin-top: var(--space-5);
  overflow: hidden;
}
@media (min-width: 640px) and (max-width: 1023px) { .section > .hero__stage { height: 70vw; } }
.hero__stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--dur-crossfade) linear;
}
.hero__stage canvas.is-on { opacity: 1; }
.hero__stage.is-touch canvas { pointer-events: none; touch-action: pan-y; }
.vinyl-fallback {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 115%;
  overflow: visible;
  translate: -50% -50%;
  transform: perspective(1200px) rotateX(54deg) rotateZ(10deg);
}
.vinyl-fallback__label { transform-box: view-box; transform-origin: 500px 500px; }
:root.motion-on .hero__stage:not(.is-stopped) .vinyl-fallback__label { animation: ads-spin 18s linear infinite; }
.hero__stop { position: absolute; right: var(--gutter); bottom: var(--space-4); z-index: 3; }
:root:not(.motion-on) .hero__stop { display: none; }
@media (min-width: 1024px) {
  .hero > .container { width: 100%; }
  .hero__copy { grid-column: 1 / 7; padding-block: var(--space-9); }
  .section > .hero__stage {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40%;
    right: 0;
    width: auto;
    height: auto;
    margin: 0;
  }
  .vinyl-fallback { left: 58%; top: 52%; width: min(70%, 112vh); transform: perspective(1200px) rotateX(49deg) rotateZ(10deg); }
}

/* This Friday's show card */
.showcard-sec { padding-top: 0; }
.showcard-sec > .container { margin-top: var(--section-y); }
.showcard__art {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  aspect-ratio: 16 / 9;
  padding: var(--space-5);
  background-color: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-3);
  padding-bottom: calc(var(--space-5) + 32px);
}
.showcard__lines { display: grid; gap: 6px; }
.showcard__lines li { font-family: var(--font-mono); font-weight: var(--weight-strong); font-size: clamp(0.6875rem, 0.6rem + 0.35vw, 0.9375rem); letter-spacing: var(--track-mono); line-height: 1.3; text-transform: uppercase; }
.showcard__lines li:first-child { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-3); letter-spacing: var(--track-display); line-height: 0.95; margin-bottom: var(--space-2); }
.showcard__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.showcard__stamp { position: absolute; right: var(--space-4); bottom: var(--space-4); }
.showcard__caption { margin-top: var(--space-3); color: var(--muted); font-size: var(--fs-small); }
.showcard__guests { margin-top: var(--space-2); color: var(--muted); font-size: var(--fs-small); }
.showcard__details { display: grid; gap: var(--space-4); align-content: start; }
.showcard__when { color: var(--muted); }
@media (min-width: 1024px) {
  .showcard__media { grid-column: 2 / 8; }
  .showcard__details { grid-column: 8 / 12; }
}

/* The problem */
.problem__h { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); }
.problem__lines { display: grid; gap: var(--space-4); }
@media (min-width: 1024px) {
  .problem__head { grid-column: 1 / 9; }
  .problem__lines { grid-column: 6 / 12; margin-top: var(--space-8); }
}

/* The guide */
.guide__portrait { --ratio: 1 / 1; box-shadow: var(--shadow-2); }
.guide__copy { display: grid; gap: var(--space-4); align-content: start; }
.guide__credits { color: var(--muted); }
.guide__numbers { margin-top: var(--space-8); }
@media (min-width: 640px) { .guide__portrait { --ratio: 4 / 5; } }
@media (min-width: 1024px) {
  .guide__media { grid-column: 1 / 6; }
  .guide__copy { grid-column: 7 / 13; }
}

/* The plan */
.plan__head { margin-bottom: var(--space-7); }
.plan__success { margin-top: var(--space-6); }

/* Crates teaser: sleeves */
.crate-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--gutter);
  padding-top: var(--space-7);
  perspective: var(--perspective-card);
}
@media (min-width: 640px) { .crate-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .crate-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.crate-row > li { transform: translate3d(0, var(--sy, 0px), 0); perspective: var(--perspective-card); }
.sleeve {
  --lift: 0px;
  position: relative;
  display: block;
  aspect-ratio: 1;
  min-width: 148px;
  color: inherit;
  text-decoration: none;
  translate: 0 var(--lift);
  transform: translateZ(var(--tz, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--dur-settle) var(--ease-out), translate var(--dur-settle) var(--ease-out);
}
@media (max-width: 359px) { .sleeve { min-width: 0; } }
.sleeve.is-tilting { transition: translate var(--dur-settle) var(--ease-out); }
.sleeve__vinyl {
  position: absolute;
  left: 2%;
  top: 2%;
  width: 96%;
  height: 96%;
  transform: translate3d(var(--px, 0px), 0, 0);
  transition: transform var(--dur-settle) var(--ease-out);
}
.sleeve__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: var(--border-hair) solid var(--rule);
  border-radius: var(--radius-sleeve);
  background-color: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-micro) linear;
}
.sleeve:focus-visible { outline-offset: 4px; }
.sleeve:focus-visible, .sleeve.is-pulled { --lift: var(--lift-pulled); }
.sleeve:focus-visible .sleeve__vinyl, .sleeve.is-pulled .sleeve__vinyl { transform: translate3d(var(--px, 0px), calc(var(--peek-pulled) * -1), 0); }
.sleeve:focus-visible .sleeve__face, .sleeve.is-pulled .sleeve__face { box-shadow: var(--shadow-2); }
@media (hover: hover) {
  .sleeve:hover { --lift: var(--lift-pulled); }
  .sleeve:hover .sleeve__vinyl { transform: translate3d(var(--px, 0px), calc(var(--peek-pulled) * -1), 0); }
  .sleeve:hover .sleeve__face { box-shadow: var(--shadow-2); }
}
.sleeve:active .sleeve__face { box-shadow: var(--shadow-1); }
.sv__title {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 10%;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  line-height: 1;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.sv__cat, .sv__date {
  position: absolute;
  bottom: 7%;
  font-family: var(--font-mono);
  font-weight: var(--weight-strong);
  font-size: 10px;
  letter-spacing: var(--track-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding: 3px 4px;
  background-color: var(--bg);
}
.sv__cat { left: 7%; }
.sv__date { right: 7%; font-weight: 400; }
.sv__genre { position: absolute; top: 7%; right: 7%; --rot: 2deg; height: 20px; font-size: 10px; background-color: var(--bg); }
.sv__wear { position: absolute; inset: 7%; border-radius: var(--radius-round); border: 1px solid var(--fg); opacity: 0.05; pointer-events: none; }
.sv__art { position: absolute; inset: 0; color: var(--fg); }
.sv__art svg { width: 100%; height: 100%; }
/* A, flag bars: the title knocked out of the middle bar */
.sv--a .sv__title { top: 42%; left: 0; right: 0; padding: 4px 10%; background-color: var(--fg); color: var(--bg); -webkit-line-clamp: 2; line-clamp: 2; transform: translateY(-50%); }
/* B, halftone over the lower 60% */
.sv--b .sv__art {
  top: 40%;
  background-color: var(--fg);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='3' cy='3' r='1.6' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='3' cy='3' r='1.6' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 6px 6px;
  mask-size: 6px 6px;
}
.sv--b .sv__title { right: 30%; }
/* C, the catalog number huge and cropped */
.sv__big {
  position: absolute;
  left: -4%;
  bottom: -6%;
  font-family: var(--font-mono);
  font-weight: var(--weight-strong);
  font-size: 330%;
  line-height: 0.8;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.sv--c .sv__title { font-size: 13px; right: 30%; }
/* D, grooves off the right edge */
.sv--d .sv__title { top: auto; bottom: 20%; right: 25%; }
/* E, type stack */
.sv--e .sv__title { font-size: clamp(1.25rem, 0.9rem + 1.1vw, 2rem); -webkit-line-clamp: 5; line-clamp: 5; right: 7%; left: 7%; top: 18%; line-height: 0.92; }
/* F, a straight 18 degree cut into the two tones */
.sv--f .sv__art { background-color: var(--fg); clip-path: polygon(0 74%, 100% 42%, 100% 100%, 0 100%); }
.sv--f .sv__title { top: 46%; left: 0; right: 0; padding: 4px 10%; background-color: var(--bg); color: var(--fg); -webkit-line-clamp: 2; line-clamp: 2; transform: translateY(-50%); }
.crates-teaser__note { margin-top: var(--space-6); }

/* Choice Cuts: a second shelf inside the crates teaser, one sleeve on the counter beside its copy */
.cut { margin-top: var(--space-8); padding-top: var(--space-7); border-top: var(--border-hair) solid var(--rule); }
.cut__grid { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 768px) { .cut__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gutter); } }
.cut__sleeve { max-width: 360px; }
.cut__grid .cut__sleeve { grid-template-columns: minmax(0, 1fr); }

/* Deals teaser: bin tags */
.deal-row { display: grid; gap: var(--gutter); }
@media (min-width: 640px) { .deal-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .deal-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 639px) { .deal-row > li:nth-child(n + 4) { display: none; } }
.deal-tag {
  --lift: 0px;
  position: relative;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-height: 232px;
  height: 100%;
  padding: var(--space-6) var(--space-5) var(--space-5);
  border: var(--border) solid var(--fg);
  background-color: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-1);
  transform: translateY(var(--lift));
  transition: transform var(--dur-settle) var(--ease-out), box-shadow var(--dur-micro) linear;
}
@media (hover: hover) { .deal-tag:hover { --lift: var(--lift-hover); box-shadow: var(--shadow-2); } }
.deal-tag__hole {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-round);
  background-color: var(--bg);
  box-shadow: inset 0 0 0 1px var(--fg);
}
.deal-tag__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding-left: var(--space-5); }
.deal-tag__brand { font-size: var(--fs-title); font-weight: var(--weight-strong); line-height: var(--lh-tight); }
.deal-tag__cat { font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--muted); }
.deal-tag__code {
  padding: var(--space-3) var(--space-4);
  border: 1.5px dashed var(--fg);
  font-family: var(--font-mono);
  font-weight: var(--weight-strong);
  font-size: var(--fs-mono-l);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}
.deal-tag__link { align-self: end; }
.deals-teaser__quote { margin-block: var(--space-5) 0; }
.deals-teaser__links { margin-top: var(--space-6); }

/* Labels strip */
.labels__head { margin-bottom: var(--space-7); }
.labels__link { margin-top: var(--space-6); }

/* Record Store teaser: the fan */
.fan { position: relative; height: clamp(240px, 18vw + 140px, 420px); margin-top: var(--space-8); }
.fan__sleeve {
  position: absolute;
  top: 20%;
  width: 50%;
  aspect-ratio: 1;
  transition: transform var(--dur-settle) var(--ease-out);
}
.fan__sleeve:nth-child(1) { left: 2%; transform: translateX(var(--fx, 0px)) rotate(-4deg); }
.fan__sleeve:nth-child(2) { left: 26%; top: 10%; z-index: 2; transform: translateY(-6px); }
.fan__sleeve:nth-child(3) { left: 50%; transform: translateX(calc(var(--fx, 0px) * -1)) rotate(5deg); z-index: 1; }
@media (hover: hover) and (pointer: fine) { .fan:hover { --fx: -8px; } }
/* The record fills the sleeve's width, as a 12-inch does (team review, 2026-10-21: scale the records up to match the cases). */
.fan__vinyl { position: absolute; left: 0; top: -28%; width: 100%; aspect-ratio: 1; }
.fan__face {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  padding: 10%;
  border: var(--border-hair) solid var(--rule);
  border-radius: var(--radius-sleeve);
  background-color: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.fan__face .sv__art { opacity: 1; }
/* The SageMasta artwork on the middle sleeve, whole, with ink bars above and below (Gabe, 2026-10-22). */
.fan__face--art { padding: 0; background-color: var(--ink); }
.fan__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fan__name { position: relative; font-family: var(--font-display); font-size: var(--fs-display-3); line-height: 0.95; text-transform: uppercase; }
@media (min-width: 1024px) {
  .store-teaser__copy { grid-column: 1 / 6; }
  .store-teaser__fan { grid-column: 6 / 13; }
  .fan { margin-top: 0; }
}

/* On Tour teaser */
.tour-teaser__graphic, .tour-rv__graphic { margin: 0; padding: var(--space-3); background-color: var(--bg); color: var(--fg); box-shadow: var(--shadow-2); }
/* The RV on the On Tour page sits under What it costs, beside the list of what shows up (Gabe, 2026-10-22); the hero keeps the laminate pass. */
.tour-rv__graphic { margin-top: var(--space-5); max-width: 520px; }
/* The SageMasta Select artwork under the Record Store hero, uncropped (Gabe, 2026-10-22: the sleeve crop cut it off). */
.rs-poster { margin: var(--space-7) 0 0; box-shadow: var(--shadow-2); }
.bill { display: grid; border-top: var(--border-hair) solid var(--rule); }
.bill li { padding-block: var(--space-4); border-bottom: var(--border-hair) solid var(--rule); font-family: var(--font-mono); font-weight: var(--weight-strong); font-size: var(--fs-mono-l); letter-spacing: var(--track-mono); text-transform: uppercase; }
@media (min-width: 1024px) {
  .tour-teaser__main { grid-column: 1 / 9; }
  .tour-teaser__aside { grid-column: 9 / 13; align-self: end; }
}

/* Record Club call to action: the punch card */
.punch {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: var(--space-5);
  aspect-ratio: 1.6;
  padding: var(--space-5);
  border-radius: var(--radius-sleeve);
  background-color: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-paper-3);
  transform: rotate(-2deg);
}
.punch__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.punch__mark { width: 79px; height: 50px; }
.punch__holes { display: flex; gap: 8%; }
.punch__holes span { width: 18px; height: 18px; border-radius: var(--radius-round); border: var(--border) solid var(--fg); }
.punch__holes span.is-punched { background-color: var(--paper); border-color: var(--paper); }
.punch__name { font-family: var(--font-display); font-size: var(--fs-display-3); line-height: 0.95; text-transform: uppercase; }
.punch__line { border-bottom: var(--border-hair) solid var(--rule); padding-bottom: var(--space-2); }
@media (min-width: 1024px) {
  .club-teaser__card { grid-column: 1 / 6; }
  .club-teaser__copy { grid-column: 7 / 13; }
}

/* Release Notes */
.newsletter__form { max-width: none; }
.newsletter__row { display: grid; gap: var(--space-4); align-items: end; }
@media (min-width: 640px) { .newsletter__row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .newsletter__head { grid-column: 1 / 6; }
  .newsletter__body { grid-column: 7 / 13; }
  .newsletter__row { grid-template-columns: 4fr 3fr; }
}

/* ==========================================================================
   The simple views
   ========================================================================== */

/* View heroes */
.view-hero { padding-block: var(--space-9) var(--section-y); }
.view-hero__copy { display: grid; gap: var(--space-5); align-content: start; }
.view-hero__stamps { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
@media (min-width: 1024px) {
  .view-hero__copy { grid-column: 1 / 9; }
  .view-hero__aside { grid-column: 9 / 13; align-self: center; }
}
@media (max-width: 639px) { .view-hero__aside--deco { display: none; } }

/* Label Partners: the decorative label stack */
.label-stack { position: relative; height: 320px; }
.label-stack .label-card { position: absolute; width: 72%; }
.label-stack .label-card:nth-child(1) { left: 0; top: 10%; --rot: -6deg; }
.label-stack .label-card:nth-child(2) { left: 22%; top: 34%; --rot: 4deg; z-index: 1; box-shadow: var(--shadow-ink-2); }
.label-stack .label-card:nth-child(3) { left: 8%; top: 60%; --rot: -2deg; z-index: 2; box-shadow: var(--shadow-ink-3); }
.partners-hero__plan { margin-top: var(--space-8); }

/* Tier cards */
.tiers { display: grid; gap: var(--space-8) var(--gutter); perspective: var(--perspective-card); }
@media (min-width: 640px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tier { display: grid; gap: var(--space-3); align-content: start; }
.tier__shelf {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 1;
  max-height: 220px;
  border-bottom: 3px solid var(--fg);
  padding-bottom: 6px;
  perspective: var(--perspective-card);
}
@media (min-width: 640px) { .tier__shelf { max-height: none; } }
.tier__sleeve {
  --lift: 0px;
  position: relative;
  width: var(--size, 100%);
  aspect-ratio: 1;
  display: grid;
  align-content: end;
  padding: 10%;
  background-color: var(--bg);
  color: var(--fg);
  border-radius: var(--radius-sleeve);
  box-shadow: var(--shadow-2);
  translate: 0 var(--lift);
  transform: translateZ(var(--tz, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--dur-settle) var(--ease-out), translate var(--dur-settle) var(--ease-out);
  transform-style: preserve-3d;
}
.tier__sleeve.is-tilting { transition: translate var(--dur-settle) var(--ease-out); }
@media (max-width: 639px) {
  .tier--single .tier__sleeve { width: 128px; }
  .tier--ep .tier__sleeve { width: 183px; }
  .tier--lp .tier__sleeve, .tier--headliner .tier__sleeve { width: 220px; }
}
@media (hover: hover) and (pointer: fine) { .tier:hover .tier__sleeve { --lift: var(--lift-hover); } }
.tier__name { position: relative; z-index: 1; font-family: var(--font-display); font-size: var(--fs-display-3); line-height: 0.95; text-transform: uppercase; }
.tier__picked { position: absolute; top: 10%; right: 8%; z-index: 2; --rot: 5deg; }
.tier__format { color: var(--muted); }
.tier__price { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-size: var(--fs-display-3); line-height: 1; text-transform: uppercase; }
.tier--headliner .tier__sleeve { background-color: transparent; box-shadow: none; padding: 0; }
.gatefold__back, .gatefold__front {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  padding: 10%;
  border-radius: var(--radius-sleeve);
  background-color: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-2);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.gatefold__back { transform: translateX(4%) translateZ(-1px); border: var(--border-hair) solid var(--rule); }
.gatefold__front {
  transform-origin: left center;
  transition: transform var(--dur-settle) var(--ease-out);
  border-right: 2px solid var(--rule);
}
:root.motion-on .tier--headliner:is(:hover, :focus-within) .gatefold__front { transform: rotateY(-18deg); }
.gets__table { width: 100%; border-collapse: collapse; }
.gets__table th, .gets__table td { text-align: left; vertical-align: top; padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: var(--border-hair) solid var(--rule); }
.gets__table th { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-3); text-transform: uppercase; line-height: 1; }
.gets__list { display: grid; gap: var(--space-3); }
.gets__list li { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-2); }
.gets__list .icon { width: 20px; height: 20px; margin-top: 3px; }
.gets__acc { display: grid; gap: 0; }
.gets__acc details { border-bottom: var(--border-hair) solid var(--rule); }
.gets__acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-display-3);
  text-transform: uppercase;
}
.gets__acc summary::-webkit-details-marker { display: none; }
.gets__acc summary .icon { transition: transform var(--dur-micro) linear; }
.gets__acc details[open] summary .icon { transform: rotate(90deg); }
.gets__acc details > ul { padding-bottom: var(--space-5); }
.gets__desktop { display: none; }
@media (min-width: 1024px) { .gets__desktop { display: table; } .gets__acc { display: none; } }
.dividers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--gutter); }
@media (min-width: 1024px) { .dividers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.divider-tag {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 10px var(--space-4) 0;
  background-color: var(--fg);
  color: var(--bg);
  clip-path: polygon(0 8px, 4% 0, 56% 0, 60% 8px, 100% 8px, 100% 100%, 0 100%);
  font-family: var(--font-mono);
  font-weight: var(--weight-strong);
  font-size: var(--fs-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  line-height: 1.2;
}

/* Two-column head and form layout (ink form sections) */
.split__head { display: grid; gap: var(--space-4); align-content: start; }
@media (min-width: 1024px) {
  .split__head { grid-column: 1 / 5; }
  .split__body { grid-column: 6 / 13; }
}

/* On Tour: laminate pass */
.laminate {
  position: relative;
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  max-width: 300px;
  margin-inline: auto;
  padding: var(--space-8) var(--space-5) var(--space-5);
  border-radius: 10px;
  background-color: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-paper-3);
  transform: rotate(4deg);
}
.laminate::before {
  content: "";
  position: absolute;
  top: var(--space-4);
  left: 50%;
  width: 64px;
  height: 12px;
  margin-left: -32px;
  border-radius: var(--radius-pill);
  background-color: var(--paper);
}
.laminate__mark { width: 138px; height: 88px; }
.laminate__text { font-family: var(--font-mono); font-weight: var(--weight-strong); font-size: var(--fs-mono-s); letter-spacing: var(--track-stamp); text-transform: uppercase; line-height: 1.6; }

/* On Tour: ticket stubs */
.stubs { display: grid; gap: var(--gutter); }
@media (min-width: 640px) { .stubs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stub {
  --lift: 0px;
  position: relative;
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: var(--space-6) var(--space-5) var(--space-5) var(--space-7);
  background-color: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-2);
  transform: translateY(var(--lift));
  transition: transform var(--dur-settle) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .stub:hover { --lift: var(--lift-hover); } }
.stub::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: var(--space-5);
  border-left: 2px dashed var(--rule);
}
.stub__notch { position: absolute; left: calc(var(--space-5) - 9px); width: 20px; height: 20px; border-radius: var(--radius-round); background-color: var(--ink); }
.stub__notch--top { top: -10px; }
.stub__notch--bottom { bottom: -10px; }
.stub__price { font-family: var(--font-display); font-size: var(--fs-display-3); line-height: 1; text-transform: uppercase; }
.stub__picked { position: absolute; top: var(--space-4); right: var(--space-4); --rot: 4deg; }
.rv-list { display: grid; counter-reset: rv; border-top: var(--border-hair) solid var(--rule); }
.rv-list li { counter-increment: rv; display: grid; grid-template-columns: 3.5ch 1fr; gap: var(--space-3); padding-block: var(--space-3); border-bottom: var(--border-hair) solid var(--rule); font-size: var(--fs-lead); }
.rv-list li::before { content: counter(rv, decimal-leading-zero); font-family: var(--font-mono); font-weight: var(--weight-strong); font-size: var(--fs-mono); color: var(--muted); padding-top: 0.35em; }
@media (min-width: 1024px) {
  .rv__list { grid-column: 1 / 7; }
  .rv__pricing { grid-column: 7 / 13; }
}

/* On Tour: gig poster */
.poster {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-6);
  background-color: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-paper-3);
  overflow: hidden;
}
.poster::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--fg);
  opacity: 0.16;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='2' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='2' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 8px 8px;
  mask-size: 8px 8px;
}
.poster__bill { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font-family: var(--font-mono); font-weight: var(--weight-strong); letter-spacing: var(--track-stamp); text-transform: uppercase; }
@media (min-width: 1024px) { .poster-wrap { grid-column: 2 / 12; } }
.when-block { display: grid; gap: var(--space-3); justify-items: start; margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border-hair) solid var(--rule); }

/* Studio Time: session cards (track sheet) */
.session__head { display: flex; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: var(--border-hair) solid var(--fg); }
.session__rules { display: grid; gap: var(--space-4); margin-top: var(--space-2); }
.session__rules span { display: block; height: 1px; background-color: var(--rule); }
.studio__who { margin-bottom: var(--space-7); }
.studio__now { margin-top: var(--space-7); }

/* Liner Notes */
.liner-story { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) {
  .liner-story { grid-column: 2 / 12; grid-template-columns: 1fr 1fr; column-gap: var(--space-8); }
}
.pull {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-block: var(--border) solid var(--fg);
}
.pull__q { font-size: var(--fs-lead); line-height: 1.45; font-weight: var(--weight-medium); }
@media (min-width: 1024px) { .pull-wrap { grid-column: 2 / 12; } }
.timeline { border-top: var(--border-hair) solid var(--rule); }
.timeline__row {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-bottom: var(--border-hair) solid var(--rule);
  color: var(--muted);
  transition: color var(--dur-micro) linear;
}
.timeline__row.is-current, :root:not(.motion-on) .timeline__row { color: var(--fg); }
.timeline__when { font-family: var(--font-mono); font-weight: var(--weight-strong); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; }
@media (min-width: 1024px) {
  .timeline__row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; }
  .timeline__when { grid-column: 1 / 3; }
  .timeline__title { grid-column: 3 / 9; }
  .timeline__line { grid-column: 9 / 13; }
}
/* The Residents on Liner Notes: six headshots with name and role; the bios live on Cast and Team. */
.residents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--gutter); }
@media (min-width: 640px) { .residents { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .residents { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.resident { display: grid; gap: var(--space-3); align-content: start; }
.resident__photo { aspect-ratio: 1 / 1; object-fit: cover; object-position: center top; }

/* Cast and Team: one row per person, headshot beside the paragraph bio. */
.cast { display: grid; border-top: var(--border-hair) solid var(--rule); }
.cast__person { display: grid; gap: var(--space-4); padding-block: var(--space-7); border-bottom: var(--border-hair) solid var(--rule); }
.cast__photo { aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; width: 100%; max-width: 320px; }
.cast__bio { font-size: var(--fs-lead); line-height: 1.5; max-width: 60ch; }
@media (min-width: 640px) {
  .cast__person { grid-template-columns: minmax(160px, 1fr) 2fr; column-gap: var(--gutter); align-items: start; }
}
@media (min-width: 1024px) {
  .cast__person { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cast__photo { grid-column: 1 / 4; }
  .cast__copy { grid-column: 5 / 12; }
}

/* Guest Spot */
.guests-run { font-family: var(--font-display); font-size: var(--fs-display-3); line-height: 1; text-transform: uppercase; max-width: 30ch; margin-top: var(--space-4); }
.tips { display: grid; gap: var(--space-5) var(--gutter); counter-reset: tip; }
@media (min-width: 640px) { .tips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tip { counter-increment: tip; display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3) var(--space-4); padding-block: var(--space-4); border-top: var(--border-hair) solid var(--rule); }
.tip__box { width: 24px; height: 24px; margin-top: 2px; border: var(--border) solid var(--fg); }
.tip__no::before { content: counter(tip, decimal-leading-zero) " "; color: var(--muted); }
.guest-hero__plan { margin-top: var(--space-6); }

/* Record Club and Merch */
.perks { display: grid; counter-reset: perk; border-top: var(--border-hair) solid var(--rule); }
.perks li { counter-increment: perk; display: grid; grid-template-columns: 3.5ch 1fr; align-items: center; gap: var(--space-3); padding-block: var(--space-4); border-bottom: var(--border-hair) solid var(--rule); }
.perks li::before { content: counter(perk, decimal-leading-zero); font-family: var(--font-mono); font-weight: var(--weight-strong); font-size: var(--fs-mono); color: var(--muted); }
.perks__line { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; font-size: var(--fs-lead); }
@media (min-width: 1024px) { .perks-wrap { grid-column: 2 / 10; } }
.member { position: relative; gap: var(--space-4); padding: var(--space-6); box-shadow: var(--shadow-2); }
.member__holes { display: flex; gap: var(--space-3); }
.member__holes span { width: 14px; height: 14px; border-radius: var(--radius-round); border: var(--border) solid var(--fg); }
.member__no { font-family: var(--font-mono); font-size: var(--fs-mono-s); color: var(--muted); letter-spacing: var(--track-mono); text-transform: uppercase; }
.member__price { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-size: var(--fs-display-3); line-height: 1; text-transform: uppercase; }
.member__stamp { position: absolute; top: var(--space-5); right: var(--space-5); --rot: 4deg; }
@media (min-width: 1024px) { .members { grid-column: 2 / 12; } }
.merch-card__photo { --ratio: 1 / 1; }
.merch-card__photo:not(.placeholder-slot) { aspect-ratio: var(--ratio); overflow: hidden; }
.merch-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.merch-card__price { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.merch-store { display: block; width: 100%; min-height: 1100px; border: 0; background: var(--paper); }
@media (max-width: 639px) { .merch-store { min-height: 1400px; } }

/* 12-column placement at 1024 px and up (below that, grid children span the row) */
@media (min-width: 1024px) {
  .col-1-1 { grid-column: 1 / 2; }
  .col-1-2 { grid-column: 1 / 3; }
  .col-1-3 { grid-column: 1 / 4; }
  .col-1-4 { grid-column: 1 / 5; }
  .col-1-5 { grid-column: 1 / 6; }
  .col-1-6 { grid-column: 1 / 7; }
  .col-1-7 { grid-column: 1 / 8; }
  .col-1-8 { grid-column: 1 / 9; }
  .col-1-9 { grid-column: 1 / 10; }
  .col-1-10 { grid-column: 1 / 11; }
  .col-1-11 { grid-column: 1 / 12; }
  .col-1-12 { grid-column: 1 / 13; }
  .col-2-2 { grid-column: 2 / 3; }
  .col-2-3 { grid-column: 2 / 4; }
  .col-2-4 { grid-column: 2 / 5; }
  .col-2-5 { grid-column: 2 / 6; }
  .col-2-6 { grid-column: 2 / 7; }
  .col-2-7 { grid-column: 2 / 8; }
  .col-2-8 { grid-column: 2 / 9; }
  .col-2-9 { grid-column: 2 / 10; }
  .col-2-10 { grid-column: 2 / 11; }
  .col-2-11 { grid-column: 2 / 12; }
  .col-2-12 { grid-column: 2 / 13; }
  .col-3-3 { grid-column: 3 / 4; }
  .col-3-4 { grid-column: 3 / 5; }
  .col-3-5 { grid-column: 3 / 6; }
  .col-3-6 { grid-column: 3 / 7; }
  .col-3-7 { grid-column: 3 / 8; }
  .col-3-8 { grid-column: 3 / 9; }
  .col-3-9 { grid-column: 3 / 10; }
  .col-3-10 { grid-column: 3 / 11; }
  .col-3-11 { grid-column: 3 / 12; }
  .col-3-12 { grid-column: 3 / 13; }
  .col-4-4 { grid-column: 4 / 5; }
  .col-4-5 { grid-column: 4 / 6; }
  .col-4-6 { grid-column: 4 / 7; }
  .col-4-7 { grid-column: 4 / 8; }
  .col-4-8 { grid-column: 4 / 9; }
  .col-4-9 { grid-column: 4 / 10; }
  .col-4-10 { grid-column: 4 / 11; }
  .col-4-11 { grid-column: 4 / 12; }
  .col-4-12 { grid-column: 4 / 13; }
  .col-5-5 { grid-column: 5 / 6; }
  .col-5-6 { grid-column: 5 / 7; }
  .col-5-7 { grid-column: 5 / 8; }
  .col-5-8 { grid-column: 5 / 9; }
  .col-5-9 { grid-column: 5 / 10; }
  .col-5-10 { grid-column: 5 / 11; }
  .col-5-11 { grid-column: 5 / 12; }
  .col-5-12 { grid-column: 5 / 13; }
  .col-6-6 { grid-column: 6 / 7; }
  .col-6-7 { grid-column: 6 / 8; }
  .col-6-8 { grid-column: 6 / 9; }
  .col-6-9 { grid-column: 6 / 10; }
  .col-6-10 { grid-column: 6 / 11; }
  .col-6-11 { grid-column: 6 / 12; }
  .col-6-12 { grid-column: 6 / 13; }
  .col-7-7 { grid-column: 7 / 8; }
  .col-7-8 { grid-column: 7 / 9; }
  .col-7-9 { grid-column: 7 / 10; }
  .col-7-10 { grid-column: 7 / 11; }
  .col-7-11 { grid-column: 7 / 12; }
  .col-7-12 { grid-column: 7 / 13; }
  .col-8-8 { grid-column: 8 / 9; }
  .col-8-9 { grid-column: 8 / 10; }
  .col-8-10 { grid-column: 8 / 11; }
  .col-8-11 { grid-column: 8 / 12; }
  .col-8-12 { grid-column: 8 / 13; }
  .col-9-9 { grid-column: 9 / 10; }
  .col-9-10 { grid-column: 9 / 11; }
  .col-9-11 { grid-column: 9 / 12; }
  .col-9-12 { grid-column: 9 / 13; }
  .col-10-10 { grid-column: 10 / 11; }
  .col-10-11 { grid-column: 10 / 12; }
  .col-10-12 { grid-column: 10 / 13; }
  .col-11-11 { grid-column: 11 / 12; }
  .col-11-12 { grid-column: 11 / 13; }
  .col-12-12 { grid-column: 12 / 13; }
}