/* =============================================================
 * Red Plastic Records, canonical stylesheet (v3)
 * Mobile-first. Brand-coherent. Audit-cleared.
 *
 * Sources:
 *   1. CD v1 brand spec (handoff/Red Plastic Records - Design Spec.html)
 *   2. Travis Design Canon (CODE/memory/design-canon.md). § refs match.
 *   3. CD component ports: spinning-record.jsx, landing.jsx, spider-logo.jsx
 *
 * Em-dash count: 0. Mobile-first via min-width breakpoints.
 * ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Patrick+Hand&family=Caveat:wght@500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* §0 Design tokens */
:root {
  /* Brand colors (CD spec v1) */
  --red:           #d12d23;
  --red-bright:    #c8483e;
  --red-deep:      #9a1e16;
  /* §a11y AA-safe body-text-link variant of --red (~5.0:1 on cream).
   * Use for any text-link role; keep --red for accents, marks, large display. */
  --red-link:      #b1241c;
  --cream:         #f5e9d0;
  --paper:         #f0eadb;
  --cream-soft:    #fbf6ea;
  --ink:           #2b1d14;
  --yellow:        #f3c530;
  --baby-blue:     #9cc7d8;
  --mint:          #a8d3b5;

  /* Secondary warm */
  --bone:          #b8afa0;

  /* Glows (atmosphere, focus, hover dust) */
  --red-glow:        rgba(209, 45, 35, 0.18);
  --red-glow-soft:   rgba(209, 45, 35, 0.08);
  --yellow-glow:     rgba(243, 197, 48, 0.25);
  --baby-blue-glow:  rgba(156, 199, 216, 0.4);
  --mint-glow:       rgba(168, 211, 181, 0.4);
  --ink-glow:        rgba(43, 29, 20, 0.15);

  /* Surfaces */
  --bg:              var(--paper);
  --panel:           var(--cream-soft);
  --hairline:        rgba(43, 29, 20, 0.12);
  --hairline-strong: rgba(43, 29, 20, 0.22);

  /* Text roles.
   * §a11y --text-secondary raised from 0.7 -> 0.85 to clear 4.5:1 AA on cream.
   * --text-dim is DECORATIVE-ONLY (caption-on-art, placeholder labels over
   * imagery, hairline-adjacent flourishes). Never on body copy. */
  --text-primary:   var(--ink);
  --text-secondary: rgba(43, 29, 20, 0.85);
  --text-dim:       rgba(43, 29, 20, 0.45);

  /* Type stack */
  --font-display: 'Caprasimo', Georgia, 'Times New Roman', serif;
  --font-label:   'Patrick Hand', 'Comic Sans MS', cursive;
  --font-aside:   'Caveat', 'Patrick Hand', cursive;
  --font-body:    'Lora', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --max-w:          1100px;
  --page-gutter:    clamp(22px, 5vw, 56px);
  --section-rhythm: clamp(60px, 8vw, 96px);
  --grid-gap:       clamp(16px, 2vw, 28px);
  --radius:         10px;
  --radius-card:    16px;
  --radius-pill:    999px;
  --radius-sleeve:  4px;

  /* Shadows */
  --shadow-card:  0 8px 20px rgba(0, 0, 0, 0.22);
  --shadow-hover: 0 18px 34px rgba(0, 0, 0, 0.28);
  --shadow-hard:  4px 4px 0 rgba(43, 29, 20, 0.85);

  /* Motion (§9d butter ease canon) */
  --ease-butter:     cubic-bezier(0.45, 0, 0.55, 1);
  --transition-base: 0.16s var(--ease-butter);
  --transition-slow: 0.32s var(--ease-butter);

  /* Record spin (45 RPM real-time per CD spec) */
  --spin-sec: 1.33s;

  /* Sticky header height (referenced by audience-bar offset) */
  --header-height: 57px;
}

/* §0 Base reset + body + cursor canon */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: crosshair; /* §0 body cursor canon */
  position: relative;
  overflow-x: hidden;
}

a, button, [role="button"], summary { cursor: pointer; }
input, textarea { cursor: text; }

/* §canon-base Custom ::selection, red-tinted */
::selection {
  background: rgba(209, 45, 35, 0.22);
  color: var(--ink);
}

/* Headings (Caprasimo display) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(40px, 8vw, 88px); margin-bottom: 0.4em; }
h2 { font-size: clamp(28px, 5vw, 48px); margin-bottom: 0.5em; }
h3 { font-size: clamp(20px, 3vw, 28px); margin-bottom: 0.4em; }
h4 { font-size: clamp(17px, 2vw, 21px); margin-bottom: 0.4em; }

p {
  margin-bottom: 1em;
  color: var(--text-primary);
  text-wrap: pretty;
}

/* §6e italic emphasis.
 * §a11y --bone (#b8afa0) is 1.68:1 on cream and is now DECORATIVE-ONLY.
 * Body-text em uses --text-secondary (AA-cleared). */
em { color: var(--text-secondary); font-style: italic; }
.narrative em { color: rgba(43, 29, 20, 0.85); }

a {
  /* §a11y body-text-link uses --red-link (~5.0:1 on cream) not --red. */
  color: var(--red-link);
  text-decoration: none;
  border-bottom: 1px solid var(--red-glow);
  transition: color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-base);
}

a:hover {
  color: var(--red-deep);
  border-bottom-color: var(--red-deep);
}

/* §7b Focus rings, 3px ink + 3px offset.
 * §a11y was yellow on cream (1.5:1, fails AA non-text 3:1). Ink on cream
 * lands at ~11.5:1. Brand-safe and meets WCAG 2.4.11 focus-not-obscured. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* §hover-lift canon: a/button hover lift (touch-gated) */
@media (hover: hover) {
  a:hover { transform: translateY(-1px); }
}

/* §a11y Skip-to-content link, off-canvas until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 18px;
  font: 700 13px var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  outline: 2px solid var(--cream);
}

/* -------------------------------------------------------------
 * §1a SVG fractalNoise grain overlay.
 * Implementation: data-URI in background-image (one class, no
 * inline SVG required in HTML). Opacity 0.035, blend multiply.
 * ------------------------------------------------------------- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .12 0 0 0 0 .08 0 0 0 .65 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 320px 320px;
}

/* -------------------------------------------------------------
 * §2a Scroll progress bar (top edge gradient)
 * JS updates width on scroll.
 * ------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--red), var(--yellow), var(--mint));
  box-shadow: 0 0 12px var(--red-glow), 0 0 6px var(--yellow-glow);
  z-index: 1000;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* -------------------------------------------------------------
 * §1e Atmosphere spheres (warm-light). Aliases: a-blue / a-mint,
 * atmosphere-sphere-1 / -2, .warm-light (legacy HTML supported).
 * ------------------------------------------------------------- */
.atmosphere-sphere {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 0;
  opacity: 0.4;
  mix-blend-mode: multiply;
}

.atmosphere-sphere.a-blue,
.atmosphere-sphere-1 {
  width: 420px;
  height: 420px;
  top: -120px;
  left: -100px;
  background: var(--baby-blue-glow);
  animation: float-1 16s var(--ease-butter) infinite alternate;
}

.atmosphere-sphere.a-mint,
.atmosphere-sphere-2,
.atmosphere-sphere.warm-light {
  width: 360px;
  height: 360px;
  bottom: -140px;
  right: -120px;
  background: var(--mint-glow);
  animation: float-2 19s var(--ease-butter) infinite alternate;
}

@keyframes float-1 {
  0%   { transform: translate(0, 0)       scale(1); }
  100% { transform: translate(50px, -30px) scale(1.05); }
}
@keyframes float-2 {
  0%   { transform: translate(0, 0)         scale(1); }
  100% { transform: translate(-50px, 30px)  scale(1.05); }
}

/* §3a Word-stagger reveal (hero tagline cascade) */
.hero-tagline .w,
.word-stagger .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s var(--ease-butter),
              transform 0.6s var(--ease-butter);
}
.hero-tagline.lit .w,
.word-stagger.lit  .w { opacity: 1; transform: translateY(0); }
.lit .w:nth-child(1) { transition-delay: 0.00s; }
.lit .w:nth-child(2) { transition-delay: 0.10s; }
.lit .w:nth-child(3) { transition-delay: 0.20s; }
.lit .w:nth-child(4) { transition-delay: 0.30s; }
.lit .w:nth-child(5) { transition-delay: 0.40s; }
.lit .w:nth-child(6) { transition-delay: 0.52s; }
.lit .w:nth-child(7) { transition-delay: 0.64s; }
.lit .w:nth-child(8) { transition-delay: 0.78s; }

/* §9b Generic reveal, gated by .js on <html> */
.js .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease-butter),
              transform 0.5s var(--ease-butter);
}
.js .reveal.lit { opacity: 1; transform: translateY(0); }

/* §3b Magnetic CTA. JS sets transform on mousemove; CSS carries
 * the ease. Touch-gated. */
.magnetic { transition: transform var(--transition-base); }
@media (hover: none) {
  .magnetic { transform: none !important; }
}

/* Layout shell */
.shell {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.5rem var(--page-gutter);
  position: relative;
}
@media (min-width: 640px)  { .shell { padding: 2rem var(--page-gutter); } }
@media (min-width: 1024px) { .shell { padding: 3rem var(--page-gutter); } }

/* -------------------------------------------------------------
 * Site header / nav (sticky cream backdrop + blur, hairline bottom)
 * ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(240, 234, 219, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.site-header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0.85rem var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Brand wordmark: SpiderLogo + Caprasimo "RED PLASTIC RECORDS" stacked */
.brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  border-bottom: none;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 0.95;
}
.brand:hover { color: var(--red); border-bottom: none; transform: none; }

.brand-stack {
  display: inline-flex;
  flex-direction: column;
  line-height: 0.95;
}
.brand-stack .top { color: var(--red); }
.brand-stack .bot { color: var(--ink); }

/* §14 .brand-pip: the small ✦ mid-glyph in wordmark */
.brand-dot,
.brand-pip {
  color: var(--red);
  font-size: 0.7em;
  vertical-align: 0.08em;
  margin: 0 0.1em;
}

/* Site nav: Patrick Hand, uppercase, tracked */
nav.site-nav {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  font-family: var(--font-label);
}

nav.site-nav a {
  color: var(--ink);
  border-bottom: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  padding-bottom: 2px;
  transition: opacity var(--transition-base), color var(--transition-base);
}

@media (hover: hover) {
  nav.site-nav a:hover { opacity: 0.62; transform: translateY(-1px); }
}
nav.site-nav a.active { color: var(--red); }

@media (min-width: 1024px) {
  nav.site-nav { gap: 1.6rem; }
  nav.site-nav a { font-size: 14px; letter-spacing: 0.06em; }
}

/* -------------------------------------------------------------
 * Hero (audit fix: no border-bottom; pip divider separates blocks)
 * ------------------------------------------------------------- */
.hero {
  padding: clamp(40px, 8vw, 80px) 0 clamp(48px, 9vw, 96px);
  position: relative;
}
@media (min-width: 1024px) {
  .hero { padding: clamp(56px, 8vw, 96px) 0 clamp(64px, 9vw, 112px); }
}

.hero-eyebrow {
  font-family: var(--font-label);
  font-size: 14px;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* §3c Breathing eyebrow lines, flank the hero label */
.eyebrow-line {
  display: inline-block;
  height: 1px;
  background: var(--red);
  opacity: 0.65;
  vertical-align: middle;
  animation: breathe-line 24s var(--ease-butter) infinite alternate;
}
.eyebrow-line.right { animation-delay: -3.2s; }
@keyframes breathe-line {
  0%   { width: 12px; }
  100% { width: clamp(40px, 22vw, 120px); }
}

/* Hero tagline (the BIG Caprasimo display headline) */
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 88px);
  color: var(--ink);
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin-bottom: 0.4em;
  text-wrap: balance;
}

/* §15 Misregistration text effect (port from CD MisregText).
 * Wrapper .misreg; child .misreg-shadow sits offset + skewed. */
.misreg {
  position: relative;
  display: inline-block;
}
.misreg-shadow {
  position: absolute;
  left: 4px;
  top: 4px;
  color: var(--red);
  transform: skewY(-1.5deg);
  z-index: -1;
  pointer-events: none;
  user-select: none;
}
.misreg.heavy .misreg-shadow { left: 6px; top: 6px; }

/* Hero aside (Caveat tagline under the headline) */
.hero-aside {
  font-family: var(--font-aside);
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  margin-top: 22px;
  max-width: 64ch;
  line-height: 1.3;
}

/* Hero lede (Lora body paragraph) */
.hero-lede {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 380px;
  margin-top: 14px;
}

/* Hero CTA row */
.hero-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
  align-items: center;
}

/* §36 CTA pill buttons (ink + red + outline) */
.cta-ink,
.cta-red,
.cta-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background var(--transition-base),
              color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
  text-decoration: none;
}

.cta-ink {
  background: var(--ink);
  color: var(--cream);
}
.cta-ink:hover {
  background: var(--ink);
  color: var(--cream);
  border-bottom: none;
}

.cta-red {
  background: var(--red);
  color: var(--cream);
}
.cta-red:hover {
  background: var(--red-bright);
  color: var(--cream);
  border-bottom: none;
}

.cta-outline {
  background: transparent;
  color: var(--red);
  border: 2px solid var(--red);
  padding: 12px 24px;
}
.cta-outline:hover {
  background: var(--red-glow-soft);
  color: var(--red);
  border-bottom-color: var(--red);
}

@media (hover: hover) {
  .cta-ink:hover,
  .cta-red:hover,
  .cta-outline:hover { transform: translateY(-2px); }
}

/* -------------------------------------------------------------
 * §12 section.block (audit fix: token rhythm + pip divider between)
 * ------------------------------------------------------------- */
section.block {
  padding: var(--section-rhythm) 0;
  position: relative;
}

section.block + section.block::before {
  content: '\2726  \2726  \2726';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--red);
  letter-spacing: 16px;
  padding-left: 16px;
  font-size: 14px;
  background: var(--bg);
  padding-right: 16px;
}

.block-eyebrow {
  font-family: var(--font-label);
  font-size: 13px;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 0.85rem;
  display: inline-block;
}

/* §13 .eyebrow: plain text (NO double-pip; HTML controls prefix) */
.eyebrow {
  font-family: var(--font-label);
  font-size: 13px;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 0.85rem;
  display: inline-block;
  font-weight: 400;
}

/* §33 Divider pip (✦ ✦ ✦) */
.divider-pip {
  text-align: center;
  padding: 2rem 0;
  color: var(--red);
  letter-spacing: 16px;
  padding-left: 16px;
  font-size: 14px;
}
.divider-pip::before { content: '\2726 \2726 \2726'; }

/* §16 Hand-drawn divider (port from CD Divider): lines + ✦ + dots */
.hand-divider {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--red);
  opacity: 0.9;
}
.hand-divider::before,
.hand-divider::after {
  content: '';
  display: inline-block;
  width: 36px;
  height: 2px;
  background: currentColor;
}
.hand-divider .pip      { font-size: 18px; line-height: 1; }
.hand-divider .dot-md   { font-size: 8px;  line-height: 1; }
.hand-divider .dot-sm   { font-size: 6px;  line-height: 1; }

/* Narrative blocks */
.narrative {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  max-width: 64ch;
  color: var(--text-primary);
}
.narrative p { margin-bottom: 1.2em; }

/* §32 Drop-cap: limited to first ¶ of first credo block in long-form */
body.long-form .credo-prose:first-of-type p:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 4em;
  color: var(--red);
  float: left;
  line-height: 0.85;
  margin: 8px 14px 0 0;
}

/* §6d Marginalia (parent must be position: relative) */
.marginalia {
  position: absolute;
  font-family: var(--font-aside);
  font-size: 14px;
  color: var(--red);
  opacity: 0.75;
  transform: rotate(-2deg);
  pointer-events: none;
  max-width: 18ch;
  line-height: 1.2;
}
.marginalia.right { right: 24px; top: 24px; transform: rotate(8deg); }
.marginalia.left  { left:  24px; top: 24px; transform: rotate(-8deg); }

/* §6g Gradient-clipped text utility */
.gradient-text {
  background: linear-gradient(90deg, var(--red), var(--yellow));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* §6f Sign-off (em-dash glyph carried by HTML, not by CSS) */
.signoff {
  font-family: var(--font-aside);
  font-size: 22px;
  color: var(--ink);
  opacity: 0.85;
  margin-top: 2rem;
  display: block;
}

/* -------------------------------------------------------------
 * §17 Spider Logo / Glyph (port from CD spider-logo.jsx)
 * ------------------------------------------------------------- */
.spider-logo  { display: block; }
.spider-glyph { display: inline-block; vertical-align: middle; }

/* Wobble: per-blade rotation for hand-cut feel (blade-A/B/C groups) */
.spider-logo.wobble .blade-A { transform: rotate(-1.4deg); transform-origin: 50% 50%; }
.spider-logo.wobble .blade-B { transform: rotate(0.8deg);  transform-origin: 50% 50%; }
.spider-logo.wobble .blade-C { transform: rotate(-0.6deg); transform-origin: 50% 50%; }

/* -------------------------------------------------------------
 * §18 SPINNING RECORD ANIMATION (port from CD spinning-record.jsx).
 * 45 RPM real-time: 1.33s per revolution.
 * ------------------------------------------------------------- */
@keyframes rpr-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

.rpr-record {
  animation: rpr-spin var(--spin-sec) linear infinite;
  transform-origin: 50% 50%;
  display: block;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.32));
}
.rpr-record.paused { animation-play-state: paused; }
.rpr-record.slow   { animation-duration: 3s; }

/* Hero divider glyph — sequential bloom: dot → star-diamond → dot. Three
   glyphs stagger via inline animation-delay (0s / .93s / 1.87s) over a 2.8s
   cycle. Uses transform:scale() (GPU-accelerated, smoothly interpolated)
   on a stable 18px base font-size.

   Small ornamental motion, scoped + sanctioned to survive prefers-reduced-
   motion (see override at the bottom of this file). Stars stay clearly
   visible at rest size even when animation is paused. */
@keyframes rpr-divider-bloom {
  0%, 100% { transform: scale(0.7) rotate(0deg);   opacity: 0.55; }
  35%      { transform: scale(0.9) rotate(60deg);  opacity: 0.8;  }
  50%      { transform: scale(1.5) rotate(180deg); opacity: 1;    }
  65%      { transform: scale(0.9) rotate(300deg); opacity: 0.8;  }
}
.rpr-divider-glyph {
  display: inline-block;
  line-height: 1;
  color: currentColor;
  font-size: 18px;
  animation: rpr-divider-bloom 2.8s ease-in-out infinite;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* -------------------------------------------------------------
 * §19 TOY PLAYER LAYOUT (port from CD ToyPlayer; CSS-only).
 * ------------------------------------------------------------- */
.toy-player {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1.05 / 1;
}

.toy-player-body {
  position: absolute;
  inset: 0;
  background: var(--red);
  border-radius: 28px 28px 40px 40px;
  box-shadow: inset 0 -28px 0 rgba(0,0,0,0.12), inset 0 18px 0 rgba(255,255,255,0.08), 0 32px 60px -10px rgba(0,0,0,0.35), 0 6px 12px rgba(0,0,0,0.18);
}

/* Top handle lip */
.toy-player-handle {
  position: absolute;
  top: -18px;
  left: 24%;
  right: 24%;
  height: 36px;
  background: var(--red);
  border-radius: 20px 20px 8px 8px;
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.18), 0 -6px 14px rgba(0,0,0,0.15);
}

/* Platter well (cream inset where the record sits) */
.toy-player-platter-well {
  position: absolute;
  top: 11%;
  left: 8%;
  right: 32%;
  bottom: 20%;
  background: var(--cream);
  border-radius: 14px;
  box-shadow: inset 0 6px 18px rgba(0,0,0,0.18), inset 0 -2px 0 rgba(0,0,0,0.06);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Right ridged control panel */
.toy-player-control-panel {
  position: absolute;
  top: 11%;
  right: 8%;
  width: 22%;
  bottom: 20%;
  background: repeating-linear-gradient(90deg, #ead9be 0 6px, #d8c7ac 6px 10px);
  border-radius: 14px;
  box-shadow: inset 0 6px 16px rgba(0, 0, 0, 0.18);
}

/* Tone arm (cream stick from top-right) */
.toy-player-tone-arm {
  position: absolute;
  top: -6%;
  right: 40%;
  width: 38px;
  height: 78%;
  background: var(--cream);
  border-radius: 8px;
  transform: rotate(8deg);
  transform-origin: top right;
  box-shadow: inset -3px 0 0 rgba(0,0,0,0.08), 0 8px 12px rgba(0,0,0,0.18);
}
.toy-player-tone-arm-head {
  position: absolute;
  bottom: -6px;
  left: -10px;
  width: 58px;
  height: 26px;
  background: var(--cream);
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
}
.toy-player-tone-arm-pivot {
  position: absolute;
  top: -6px;
  left: 4px;
  width: 30px;
  height: 30px;
  background: var(--cream);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}
.toy-player-tone-arm-pivot::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 10px;
  height: 10px;
  background: var(--ink);
  border-radius: 50%;
}

/* Speed switch */
.toy-player-speed-switch {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 14px;
  height: 30px;
  background: var(--ink);
  border-radius: 4px;
}

/* Hand crank (bottom) */
.toy-player-crank {
  position: absolute;
  bottom: -10px;
  left: 38%;
  width: 24%;
  height: 64px;
  background: var(--cream);
  border-radius: 12px;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.toy-player-crank-flower {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.2);
  position: relative;
}
.toy-player-crank-flower::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
}

/* SOUND FOREVER stamp (circular SVG renders inside this slot) */
.toy-player-stamp {
  position: absolute;
  bottom: 14px;
  right: 18px;
  width: 64px;
  height: 64px;
  color: var(--cream);
  opacity: 0.9;
}

/* Gold sprig (decorative leaf SVG renders inside) */
.toy-player-sprig {
  position: absolute;
  bottom: 16px;
  width: 90px;
  color: var(--yellow);
  opacity: 0.85;
  pointer-events: none;
}
.toy-player-sprig.left,
.toy-player-sprig-left  { left: 6%; }
.toy-player-sprig.right,
.toy-player-sprig-right { right: 6%; transform: scaleX(-1); }

/* Corner stars inside platter well (class names match HTML markup) */
.toy-player-corner-star {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--red);
  opacity: 0.6;
}
.toy-player-corner-star.tl,
.toy-player-corner-star-tl { top: 10px;    left: 12px; }
.toy-player-corner-star.br,
.toy-player-corner-star-br { bottom: 10px; right: 12px; }

/* Hero grid + hero-player wrapper (missing declarations the toy player needed) */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
@media (min-width: 768px) {
  .hero-grid { grid-template-columns: 5fr 7fr; gap: 32px; }
}
.hero-copy { min-width: 0; }
.hero-player {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  order: -1;
}
@media (min-width: 768px) {
  .hero-player { order: 0; max-width: 100%; transform: rotate(-2deg); }
}

/* Record center slot inside the platter well (constrains the spinning SVG) */
.toy-player-record-center {
  position: relative;
  width: 66%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toy-player-record-center .rpr-record {
  width: 100%;
  height: 100%;
}

/* Constrain the tone arm so it doesn't stick out the bottom of the player */
.toy-player-tone-arm {
  height: 68%;
  pointer-events: none;
}

/* Callouts (annotation labels) hidden on mobile, shown only at desktop scale */
.callout { display: none; }
@media (min-width: 1024px) {
  .callout {
    display: block;
    position: absolute;
    font-family: var(--font-aside);
    font-size: 14px;
    color: var(--ink);
    opacity: 0.75;
    pointer-events: none;
    white-space: nowrap;
  }
  .callout-tl { top: 12%; left: -4%; transform: rotate(-12deg); }
  .callout-tr { top: -8%; right: -6%; transform: rotate(6deg); }
  .callout-br { bottom: 6%; right: -2%; transform: rotate(-3deg); }
  .callout-line { display: none; }
}

/* Hide decorative parts on small screens (audit fix: declutter mobile) */
@media (max-width: 639px) {
  .toy-player-sprig,
  .toy-player-stamp,
  .toy-player-corner-star { display: none; }
}

/* -------------------------------------------------------------
 * §20 SLEEVE CARDS (port from CD ReleaseCard).
 * ------------------------------------------------------------- */
.release-sleeve {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: var(--radius-sleeve);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-card), 0 1px 0 rgba(255,255,255,0.4) inset;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* Subtle alternating tilt by nth-child */
.release-sleeve:nth-child(odd)  { transform: rotate(-0.6deg); }
.release-sleeve:nth-child(even) { transform: rotate(0.8deg); }

@media (hover: hover) {
  .release-sleeve:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-hover);
  }
}

/* Sleeve color variants */
.release-sleeve.color-red    { background: #ead9be; }
.release-sleeve.color-yellow { background: var(--yellow); }
.release-sleeve.color-blue   { background: var(--baby-blue); }
.release-sleeve.color-mint   { background: var(--mint); }

/* The peeking record (positioned absolute, peeks half-out the side) */
.release-sleeve-record {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--red) 0 56%, transparent 56%), repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,0.15) 0 1px, transparent 1px 6px);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.3);
}
.release-sleeve-record.peek-right { right: -30%; }
.release-sleeve-record.peek-left  { left:  -30%; }

/* The cream center label inside the peeking record */
.release-sleeve-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  text-align: center;
  padding: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.05em;
  line-height: 1.1;
}
.release-sleeve-label .cat { font-size: 7px; opacity: 0.6; }

/* Corner label on the sleeve (cat + year) */
.release-sleeve-corner {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: var(--font-label);
  font-size: 11px;
  color: var(--ink);
  opacity: 0.8;
}

/* Title block at the bottom of the sleeve */
.release-sleeve-title {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink);
  line-height: 1.05;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* -------------------------------------------------------------
 * §21 CANONICAL CARD BOTTOM-CTA FLEXBOX.
 * Pattern: flex column on card, flex 1 on body, margin-top auto on
 * cta. CTA bottom-justified. Proven at travismakes-org/index.html.
 * Applied: .card, .release-card, .catalog-card.
 * ------------------------------------------------------------- */
.card,
.release-card,
.catalog-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card-body { flex: 1; }

.card-cta {
  margin-top: auto;
  font-family: var(--font-label);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* §a11y body-text-link role -> --red-link */
  color: var(--red-link);
  border-bottom: 1px solid var(--red-glow);
  align-self: flex-start;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.card-cta:hover {
  color: var(--red-deep);
  border-bottom-color: var(--red-deep);
}

/* -------------------------------------------------------------
 * §22 RELEASE CARD (homepage preview; flex col for bottom-CTA)
 * ------------------------------------------------------------- */
.release-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  margin-top: 2rem;
}
@media (min-width: 640px)  { .release-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .release-grid { grid-template-columns: repeat(3, 1fr); } }

.release-card {
  background: var(--cream-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.4rem;
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--transition-base);
}

@media (hover: hover) {
  .release-card:hover {
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red-glow-soft);
    transform: translateY(-2px);
  }
}

.release-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}

.release-art {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--cream);
  margin-bottom: 0.5rem;
  border-radius: var(--radius-sleeve);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-label);
  /* §a11y was --text-dim (1.5:1, fails). Bumped to --text-secondary. */
  color: var(--text-secondary);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--hairline-strong);
}

.release-meta {
  font-family: var(--font-label);
  font-size: 13px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.release-card-cta {
  margin-top: auto;
  font-family: var(--font-label);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* §a11y body-text-link role -> --red-link */
  color: var(--red-link);
  align-self: flex-start;
  transition: color var(--transition-base);
}
.release-card-cta:hover { color: var(--red-deep); }

/* §23 TRACK LIST (EP page) */
.tracklist {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.track-row {
  background: var(--cream-soft);
  border: 1px solid var(--hairline-strong);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 1.1rem;
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--transition-base);
}

@media (hover: hover) {
  .track-row:hover {
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red-glow-soft);
    transform: translateY(-2px);
  }
}

.track-number {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--red);
  width: 2.2rem;
  flex-shrink: 0;
  line-height: 1;
}

.track-info { flex: 1; min-width: 0; }
.track-info h3 { font-size: 1.1rem; margin: 0; font-family: var(--font-display); }
.track-info .track-meta {
  font-family: var(--font-label);
  font-size: 13px;
  /* §a11y was --text-dim. Body-readable -> --text-secondary. */
  color: var(--text-secondary);
  margin-top: 0.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* §24 DSP BUTTONS */
.dsp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.dsp-button {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.2rem;
  background: var(--cream-soft);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-family: var(--font-label);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: background var(--transition-base),
              color var(--transition-base),
              transform var(--transition-base),
              border-color var(--transition-base);
}

.dsp-button:hover {
  background: var(--cream-soft);
  color: var(--red);
  border-color: var(--red);
  border-bottom-color: var(--red);
}
@media (hover: hover) {
  .dsp-button:hover { transform: translateY(-2px); }
}

/* §25 LYRICS + BIO EXPANDERS */
.lyrics-section { margin-top: 2rem; }

details.lyrics,
details.bio {
  background: var(--cream-soft);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: border-color var(--transition-base);
}

details.lyrics[open],
details.bio[open] { border-color: var(--red); }

details.lyrics summary,
details.bio summary {
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  color: var(--ink);
}

details.lyrics summary::-webkit-details-marker,
details.bio summary::-webkit-details-marker { display: none; }

details.lyrics summary::after,
details.bio summary::after {
  content: '+';
  color: var(--red);
  font-family: var(--font-display);
  font-size: 1.5rem;
  transition: transform 0.2s var(--ease-butter);
}

details.lyrics[open] summary::after,
details.bio[open]    summary::after { content: '\2212'; }

details.lyrics pre,
details.bio pre {
  padding: 0 1.25rem 1.4rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-primary);
  white-space: pre-wrap;
  line-height: 1.7;
}

details.bio .bio-body {
  padding: 0 1.25rem 1.4rem;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-primary);
}

/* -------------------------------------------------------------
 * §26 MANIFESTO BANNER (port from CD landing.jsx).
 * Red field, cream type, faint texture overlay, two-col grid.
 * ------------------------------------------------------------- */
.manifesto-banner {
  position: relative;
  background: var(--red);
  color: var(--cream);
  border-radius: var(--radius-card);
  padding: clamp(36px, 5vw, 60px);
  margin: 0 var(--page-gutter);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  text-align: center;
}

.manifesto-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(
    circle at 0 0,
    rgba(255, 255, 255, 0.04) 0 2px,
    transparent 2px 6px
  );
  pointer-events: none;
}

.manifesto-banner > * { position: relative; z-index: 1; }

.manifesto-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 44px);
  color: var(--cream);
  margin-bottom: 14px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.manifesto-banner p {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--cream);
  opacity: 0.92;
  max-width: 720px;
  margin: 0 auto;
}

.manifesto-banner .ai-angle-note {
  margin-top: 18px;
  font-family: var(--font-label);
  font-size: 15px;
  line-height: 1.5;
  color: var(--yellow);
  letter-spacing: 0.04em;
  opacity: 1;
}

@media (min-width: 1024px) {
  .manifesto-banner {
    grid-template-columns: 160px 1fr;
    gap: 36px;
    text-align: left;
  }
  .manifesto-banner p { margin: 0; }
}

/* -------------------------------------------------------------
 * §27 EMBEDDED PLAYER (port from CD EmbeddedPlayer).
 * Ink field. 3-col desktop: record + info + buttons.
 * ------------------------------------------------------------- */
.embedded-player {
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius-card);
  padding: clamp(24px, 4vw, 36px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
  justify-items: center;
  text-align: center;
}

@media (min-width: 1024px) {
  .embedded-player {
    grid-template-columns: 180px 1fr auto;
    gap: 32px;
    justify-items: stretch;
    text-align: left;
  }
}

.embedded-player-eyebrow {
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--yellow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.embedded-player-title {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--cream);
  margin-bottom: 6px;
  line-height: 1.1;
}

.embedded-player-meta {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--cream);
  opacity: 0.7;
}

.embedded-player-scrubber {
  position: relative;
  margin-top: 22px;
  height: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.embedded-player-scrubber-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(245, 233, 208, 0.2);
  border-radius: 2px;
}
.embedded-player-scrubber-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  width: 0;
  background: var(--red);
  border-radius: 2px;
}
.embedded-player-scrubber-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: var(--yellow);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--yellow-glow);
}

.embedded-player-times {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--cream);
  opacity: 0.6;
  letter-spacing: 0.08em;
}

.embedded-player-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
}

.embedded-player-play-btn,
.embedded-player-secondary-btn {
  padding: 14px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: transform var(--transition-base), background var(--transition-base);
  text-decoration: none;
  display: inline-block;
}

.embedded-player-play-btn {
  background: var(--red);
  color: var(--cream);
}
.embedded-player-play-btn:hover { background: var(--red-bright); color: var(--cream); }

.embedded-player-secondary-btn {
  background: transparent;
  color: var(--cream);
  border: 2px solid var(--cream);
}
.embedded-player-secondary-btn:hover {
  color: var(--cream);
  background: rgba(245, 233, 208, 0.08);
  border-bottom-color: var(--cream);
}

@media (hover: hover) {
  .embedded-player-play-btn:hover,
  .embedded-player-secondary-btn:hover { transform: translateY(-2px); }
}

/* §28 SHOP + SUBMISSIONS card pair */
.duo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 0 var(--page-gutter);
}
@media (min-width: 1024px) {
  .duo-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

.shop-card,
.submissions-card {
  position: relative;
  padding: clamp(28px, 4vw, 36px);
  border-radius: var(--radius-card);
  color: var(--ink);
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shop-card { background: var(--yellow); }
.submissions-card {
  background: var(--cream-soft);
  border: 2px dashed var(--ink);
}

.shop-card .eyebrow,
.submissions-card .eyebrow { margin-bottom: 4px; }

.shop-card h3,
.submissions-card h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
  margin-bottom: 6px;
}

.shop-card p,
.submissions-card p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.8;
  max-width: 460px;
}

.shop-card .card-cta,
.submissions-card .card-cta { margin-top: auto; }

/* Bag-of-spiders illustration in shop card (bottom-right) */
.shop-card-spider-bag {
  position: absolute;
  right: -20px;
  bottom: -10px;
  width: 220px;
  height: 200px;
  opacity: 0.9;
  pointer-events: none;
}
.shop-card-spider-bag .spider-logo {
  position: absolute;
}
.shop-card-spider-bag .spider-logo:nth-child(1) {
  right: 30px;  bottom: 30px; transform: rotate(-18deg);
}
.shop-card-spider-bag .spider-logo:nth-child(2) {
  right: 90px;  bottom: 90px; transform: rotate(28deg);
}
.shop-card-spider-bag .spider-logo:nth-child(3) {
  right: 130px; bottom: 10px; transform: rotate(-46deg);
}

/* Submissions card "no DMs" marginalia */
.submissions-card-note {
  position: absolute;
  right: 24px;
  top: 24px;
  transform: rotate(8deg);
  font-family: var(--font-label);
  font-size: 14px;
  color: var(--red);
  opacity: 0.7;
  text-align: right;
  line-height: 1.2;
  max-width: 14ch;
  pointer-events: none;
}

@media (max-width: 639px) {
  .shop-card-spider-bag,
  .submissions-card-note { display: none; }
}

/* -------------------------------------------------------------
 * §29 NEWSLETTER BAND (port from CD landing.jsx).
 * Ink field, cream pill form with red submit pill.
 * ------------------------------------------------------------- */
.newsletter-band {
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius-card);
  padding: clamp(28px, 5vw, 56px);
  margin: 0 var(--page-gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .newsletter-band { grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
}

.newsletter-eyebrow {
  font-family: var(--font-label);
  font-size: 13px;
  color: var(--yellow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.newsletter-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 56px);
  line-height: 0.95;
  color: var(--cream);
}

.newsletter-band p {
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--cream);
  opacity: 0.82;
  max-width: 460px;
}

.newsletter-form {
  display: flex;
  background: var(--cream);
  border-radius: var(--radius-pill);
  padding: 6px;
  max-width: 460px;
  gap: 6px;
}

.newsletter-form input[type="email"] {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  padding: 14px 20px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  min-width: 0;
}

.newsletter-form button {
  padding: 12px 22px;
  background: var(--red);
  color: var(--cream);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background var(--transition-base);
  white-space: nowrap;
}
.newsletter-form button:hover { background: var(--red-bright); }

.newsletter-meta {
  margin-top: 14px;
  font-family: var(--font-label);
  font-size: 13px;
  color: var(--cream);
  opacity: 0.55;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* -------------------------------------------------------------
 * §30 4-COL FOOTER (port from CD landing.jsx).
 * Brand 2fr + Listen / Catalog / Hi (1fr each) on desktop.
 * ------------------------------------------------------------- */
.site-footer {
  padding: clamp(40px, 6vw, 56px) var(--page-gutter);
  border-top: 1px solid var(--hairline);
  margin: 0 var(--page-gutter);
  background: transparent;
  color: var(--ink);
}

.site-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  font-family: var(--font-body);
}
@media (min-width: 1024px) {
  .site-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; }
}

.site-footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.site-footer-brand .brand-name {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
  line-height: 1;
}
.site-footer-tagline {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.65;
  max-width: 320px;
}

.site-footer-col-title {
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--red);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.site-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 2;
  color: var(--ink);
}
.site-footer-col a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: none;
}
.site-footer-col a:hover { color: var(--red-link); }

.site-footer-bottom {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px dashed rgba(43, 29, 20, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--ink);
  opacity: 0.55;
  letter-spacing: 0.04em;
}
.site-footer-bottom .brand-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* §7a Submit-feedback inline swap */
.form-success {
  font-family: var(--font-aside);
  font-size: 24px;
  color: var(--red);
  padding: 1rem 0;
}

/* Pre-launch banner (red field, cream type) */
.banner {
  background: var(--red);
  color: var(--cream);
  padding: 0.7rem 1rem;
  text-align: center;
  font-family: var(--font-label);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* TODO marker pill */
.todo {
  display: inline-block;
  background: var(--red-glow);
  color: var(--red-bright);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Utility classes */
.muted  { color: var(--text-secondary); }
.dim    { color: var(--text-dim); }
.bone   { color: var(--bone); }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }
.mono   { font-family: var(--font-mono); }
.hand   { font-family: var(--font-label); }
.aside  { font-family: var(--font-aside); }

/* -------------------------------------------------------------
 * §39 AUDIENCE BAR (EPK page; sticky below header)
 * ------------------------------------------------------------- */
.audience-bar {
  position: sticky;
  top: var(--header-height);
  z-index: 40;
  background: rgba(251, 246, 234, 0.92);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.audience-bar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0.6rem var(--page-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.audience-btn {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--transition-base),
              border-color var(--transition-base),
              background var(--transition-base);
}
.audience-btn:hover,
.audience-btn[aria-pressed="true"] {
  color: var(--red);
  border-color: var(--red);
  background: var(--red-glow-soft);
}

/* §41 EPK main: flex column so order properties can drive sync mode */
.epk-main {
  display: flex;
  flex-direction: column;
  gap: var(--section-rhythm);
}

/* §41 thesis page (body class for /why-the-label/) */
.thesis-page .narrative { max-width: 72ch; }
.thesis-page .narrative p { margin-bottom: 1.4em; }

/* §41 long-form (body class for /craft/, /why-the-label/, /changelog/) */
.long-form section.block { padding: clamp(48px, 6vw, 80px) 0; }
.long-form .narrative p { margin-bottom: 1.3em; }

/* §40 Optional scan-line for dark sections */
.scanline {
  position: relative;
  overflow: hidden;
}
.scanline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cream), transparent);
  animation: scan-line 12s linear infinite;
  pointer-events: none;
}
@keyframes scan-line {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* §8b Console banner: JS handles colored ASCII + window.help()/info().
 * No CSS hook needed. */

/* -------------------------------------------------------------
 * §37 Mobile-first responsive tuning
 * ------------------------------------------------------------- */
@media (min-width: 640px) {
  body { font-size: 17px; }
  .hero-aside { font-size: 24px; }
}

@media (min-width: 1024px) {
  .release-grid { gap: var(--grid-gap); }
}

/* -------------------------------------------------------------
 * §9a prefers-reduced-motion kill switch (MANDATORY).
 * All motion to 0.01ms; spheres + record + scanline killed.
 * ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:    0.01ms !important;
    animation-iteration-count: 1   !important;
    transition-duration:   0.01ms !important;
    scroll-behavior:       auto   !important;
  }
  .atmosphere-sphere   { display: none !important; }
  .eyebrow-line        { width: clamp(40px, 22vw, 120px) !important; }
  .hero-tagline .w,
  .word-stagger .w     { opacity: 1 !important; transform: none !important; }
  .js .reveal          { opacity: 1 !important; transform: none !important; }
  .rpr-record          { animation: none !important; }
  .scanline::after     { animation: none !important; }

  /* Sanctioned exception: divider glyph keeps its small ornamental pulse.
     ~18px → 27px (1.5x scale at peak), in-place, no horizontal motion.
     Well within "subtle ornamental motion that doesn't trigger vestibular
     issues" per WCAG SC 2.3.3 (Animation from Interactions, AAA). */
  .rpr-divider-glyph   { animation-duration: 2.8s !important;
                          animation-iteration-count: infinite !important; }
}