/* ══════════════════════════════════════════════════════════
   LOFISPO.ME — Unified stylesheet
   index.html · lofispo.html · heroConcepts.html
   ══════════════════════════════════════════════════════════ */

/* ─── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img, svg { display: block; }

/* ─── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --ink: #1E2022;
  --ink-80: rgba(30, 32, 34, 0.8);
  --ink-50: rgba(30, 32, 34, 0.5);
  --ink-30: rgba(30, 32, 34, 0.3);
  --ink-20: rgba(30, 32, 34, 0.2);
  --ink-10: rgba(30, 32, 34, 0.1);
  --cream: #F7F4EB;
  --cream-2: #EDE9DC;
  --cream-3: #E3DECE;
  --cream-4: #D8D1BE;
  --cream-dim: rgba(247, 244, 235, 0.82);
  --cream-mid: rgba(247, 244, 235, 0.62);
  --cream-low: rgba(247, 244, 235, 0.5);
  --cream-ghost: rgba(247, 244, 235, 0.4);
  --tan: #C9B99A;
  --amber: #C8944A;
  --amber-bright: #D9A55A;
  --amber-dim: rgba(200, 148, 74, 0.35);
  --sienna: #9E7E5C;
  --rust: #7A4B2A;
  --sage: #8A9471;
  --dusk: #5A5A6E;
  --dark-bg: #1A1A1A;
  --darker-bg: #111111;
  --dark-1: #0f0d09;
  --dark-2: #141109;
  --dark-3: #1a1610;
  --dark-4: #211c14;
  --dark-border: rgba(247, 244, 235, 0.07);
  --dark-border-2: rgba(247, 244, 235, 0.12);
  --deep: #18140e;
  --deep-2: #1f1a12;
  --deep-3: #241e14;
  --font-display: 'Unbounded', sans-serif;
  --font-serif: 'Fraunces', serif;
  --font-body: 'Libre Baskerville', serif;
  --font-ui: 'Jost', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --font-italic: 'Cormorant Garamond', serif;
  --section-pad-x: 5rem;
  --section-pad-y: 7rem;
  /* player.html aliases */
  --cream-trace: rgba(247, 244, 235, 0.1);
  --amber-trace: rgba(200, 148, 74, 0.12);
  --border: rgba(247, 244, 235, 0.07);
  --border-2: rgba(247, 244, 235, 0.12);
}

/* ─── PAGE BASE ─────────────────────────────────────────── */
body.page-index {
  background-color: var(--dark-1);
  color: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  cursor: none;
}
body.page-index button { border: none; background: none; cursor: none; font: inherit; color: inherit; }

body.page-index .page-grain {
  opacity: 0.22;
}

body.page-lofispo {
  background: var(--deep);
  color: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: none;
}
body.page-lofispo button { cursor: none; border: none; background: none; font: inherit; color: inherit; }

body.page-player button {
  border: none;
  background: none;
  cursor: none;
  font: inherit;
  color: inherit;
}

body.page-player input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: none;
}

html:has(body.page-player),
body.page-player {
  height: 100%;
  background: var(--dark-1);
  color: var(--cream);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  cursor: none;
}

body.page-concepts {
  background: #0e0e0e;
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.page-concepts button { cursor: pointer; border: none; background: none; font: inherit; }

/* ─── SHARED ANIMATIONS ─────────────────────────────────── */
@keyframes disc-spin { to { transform: rotate(360deg); } }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(200, 148, 74, 0.5); }
  50% { opacity: 0.7; transform: scale(0.85); box-shadow: 0 0 0 6px rgba(200, 148, 74, 0); }
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes wave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.4); }
}
@keyframes bounce-y {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(4px); }
}

/* ─── SHARED COMPONENTS ─────────────────────────────────── */
.grain-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.grain-overlay--heavy { opacity: 0.65; }
.grain-overlay--medium { opacity: 0.45; }

.concept { position: relative; min-height: 100vh; overflow: hidden; }

.btn-heavy {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 3rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 3px solid currentColor;
  transition: background 0.25s, color 0.25s, transform 0.15s, box-shadow 0.25s;
  white-space: nowrap;
}
.btn-heavy:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.btn-heavy:active { transform: translateY(0); }
.btn-heavy__arrow { font-size: 1.2rem; transition: transform 0.25s; }
.btn-heavy:hover .btn-heavy__arrow { transform: translateX(6px); }
.btn-heavy--warm { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.btn-heavy--warm:hover { background: var(--rust); border-color: var(--rust); color: var(--cream); }
.btn-heavy--dark { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-heavy--dark:hover { background: var(--rust); border-color: var(--rust); }
.btn-heavy--cream { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn-heavy--cream:hover { background: transparent; color: var(--cream); }
.btn-heavy--outlined { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn-heavy--outlined:hover { background: var(--cream); color: var(--ink); }
.btn-heavy--amber { background: transparent; color: var(--amber); border-color: var(--amber); }
.btn-heavy--amber:hover { background: var(--amber); color: var(--ink); }

.section-break {
  background: var(--ink);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 2rem 4rem;
}
.section-break__line { height: 1px; background: rgba(247, 244, 235, 0.15); }
.section-break__label { display: flex; align-items: center; gap: 1.2rem; white-space: nowrap; }
.section-break__num {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 100;
  color: var(--amber);
  line-height: 1;
  opacity: 0.5;
}
.section-break__name {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(247, 244, 235, 0.4);
}

/* Lofispo page cursor */
body.page-lofispo .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 38px; height: 38px;
  border: 2px solid var(--amber);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, border-color 0.2s, opacity 0.2s;
  mix-blend-mode: screen;
  opacity: 0.85;
}
body.page-lofispo .cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 6px; height: 6px;
  background: var(--amber);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
}
body.page-lofispo:has(a:hover) .cursor-ring,
body.page-lofispo:has(button:hover) .cursor-ring {
  width: 56px; height: 56px;
  border-color: var(--cream);
}

/* ─── PAGE-WIDE GRAIN ────────────────────────────────────── */
.page-grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.38;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ─── CUSTOM CURSOR ──────────────────────────────────────── */
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1.5px solid var(--amber);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: transform 0.08s ease, width 0.25s ease, height 0.25s ease,
              border-color 0.25s ease, opacity 0.3s ease;
  opacity: 0;
  mix-blend-mode: normal;
}
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 5px; height: 5px;
  background: var(--amber);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10001;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cursor-ring.visible,
.cursor-dot.visible { opacity: 1; }
.cursor-ring.hovering {
  width: 56px; height: 56px;
  border-color: var(--cream);
  border-width: 1px;
}
.cursor-ring.pressing {
  width: 28px; height: 28px;
}

/* ─── SHARED UTILITIES ───────────────────────────────────── */
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--amber-bright);
}
.section-rule {
  flex: 1;
  height: 1px;
  background: var(--dark-border-2);
}

/* Reveal animation base state */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal][data-reveal-delay="1"] { transition-delay: 0.12s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 0.24s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 0.36s; }


/* ══════════════════════════════════════════════════════════
   HERO SECTION
   ══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--dark-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Ambient glows */
.hero__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  filter: blur(90px);
}
.hero__glow--main {
  width: 90vw; height: 90vw;
  max-width: 900px; max-height: 900px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(200,148,74,0.09) 0%, transparent 65%);
}
.hero__glow--left {
  width: 40vw; height: 60vh;
  top: 0; left: -10%;
  background: radial-gradient(ellipse, rgba(158,126,92,0.05) 0%, transparent 70%);
}
.hero__glow--bottom {
  width: 60vw; height: 40vh;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(200,148,74,0.05) 0%, transparent 70%);
}

/* ── Navigation ── */
.hero__nav {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.2rem var(--section-pad-x);
  border-bottom: 1px solid var(--dark-border);
  flex-shrink: 0;
}
.hero__nav-left {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.hero__logo {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--cream);
  letter-spacing: -0.01em;
  line-height: 1;
}
.hero__logo-accent { color: var(--amber); }
.hero__nav-sep {
  font-family: var(--font-serif);
  font-weight: 100;
  font-size: 1.6rem;
  color: var(--cream-ghost);
  line-height: 1;
}
.hero__nav-sub {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-low);
}
.hero__nav-center {
  display: flex;
  gap: 2.5rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.hero__nav-center a {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.73rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream-low);
  transition: color 0.25s;
}
.hero__nav-center a:hover { color: var(--cream); }
.hero__nav-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.hero__nav-ghost {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.73rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-low);
  transition: color 0.25s;
}
.hero__nav-ghost:hover { color: var(--cream-dim); }
.btn-cta {
  display: inline-block;
  padding: 0.7rem 1.8rem;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.25s, transform 0.15s;
  border: 2px solid var(--amber);
}
.btn-cta:hover {
  background: var(--amber-bright);
  border-color: var(--amber-bright);
  transform: translateY(-1px);
}

/* Hamburger */
.hero__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  z-index: 60;
}
.hero__hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--cream-dim);
  border-radius: 1px;
  transition: transform 0.3s, opacity 0.3s;
}
.hero__hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hero__hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hero__hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 5, 0.97);
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-nav.open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.mobile-nav__link {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 300;
  color: var(--cream-dim);
  letter-spacing: 0.05em;
  transition: color 0.2s;
}
.mobile-nav__link:hover { color: var(--cream); }
.mobile-nav__cta {
  margin-top: 1rem;
  display: inline-block;
  padding: 1rem 3rem;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ── Hero body ── */
.hero__body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
  padding: 3rem var(--section-pad-x) 2rem;
  position: relative;
  z-index: 10;
}

/* Type column */
.hero__type-col {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}
.hero__kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--amber);
}
.hero__live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--amber);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(200,148,74,0.5); }
  50% { opacity: 0.6; box-shadow: 0 0 0 8px rgba(200,148,74,0); }
}

/* Massive title */
.hero__title {
  display: flex;
  flex-direction: column;
  line-height: 0.88;
  letter-spacing: -0.04em;
}
.hero__title-line {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.5rem, 6.5vw, 7.8rem);
}
.hero__title-line--solid { color: var(--cream); }
.hero__title-line--ghost {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(247,244,235,0.3);
}
.hero__title-line--amber { color: var(--amber); }

/* Right sub-column stacked below title lines */
.hero__right-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.hero__body-text {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.95;
  color: var(--cream-mid);
  max-width: 44ch;
}

/* Hero CTA button — heavy & physical */
.btn-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.3rem 3rem;
  background: transparent;
  color: var(--cream);
  border: 2.5px solid var(--cream-low);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.28s, border-color 0.28s, color 0.28s, transform 0.15s, box-shadow 0.28s;
  max-width: fit-content;
}
.btn-hero-cta:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(200,148,74,0.25);
}
.btn-hero-cta__arrow {
  font-size: 1.2rem;
  transition: transform 0.28s;
  display: inline-block;
}
.btn-hero-cta:hover .btn-hero-cta__arrow { transform: translateX(5px); }

/* Genre tags */
.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.tag {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 1.2rem;
  border: 1.5px solid var(--dark-border-2);
  color: var(--cream-low);
  border-radius: 2px;
  transition: background 0.22s, color 0.22s, border-color 0.22s, transform 0.15s;
}
.tag:hover {
  border-color: var(--cream-low);
  color: var(--cream-dim);
  transform: translateY(-1px);
}
.tag--active {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink);
}

/* Vinyl column */
.hero__vinyl-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  position: relative;
  z-index: 5;
}

/* Vinyl stage */
.hero__vinyl-stage {
  position: relative;
  width: min(55vh, 460px);
  height: min(55vh, 460px);
}
.hero__vinyl-shadow {
  position: absolute;
  bottom: -8%;
  left: 8%; right: 8%;
  height: 30%;
  background: radial-gradient(ellipse, rgba(200,148,74,0.18) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(24px);
  z-index: 0;
}

/* Outer disc — slow spin */
.hero__disc-outer {
  width: 100%; height: 100%;
  border-radius: 50%;
  position: relative;
  animation: disc-spin 26s linear infinite;
  will-change: transform;
}
.hero__disc-outer.paused { animation-play-state: paused; }

.hero__disc-base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #252320, #0d0c0a);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 30px 80px rgba(0,0,0,0.55),
    0 6px 20px rgba(0,0,0,0.35);
}

/* Impressionist paint-wash layers */
.hero__paint {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.hero__paint--1 {
  background: conic-gradient(
    from 0deg,
    transparent 0deg 38deg,
    rgba(200,148,74,0.09) 38deg 80deg,
    transparent 80deg 155deg,
    rgba(158,126,92,0.06) 155deg 200deg,
    transparent 200deg 275deg,
    rgba(200,148,74,0.08) 275deg 320deg,
    transparent 320deg 360deg
  );
}
.hero__paint--2 {
  background: conic-gradient(
    from 60deg,
    transparent 0deg 50deg,
    rgba(122,75,42,0.05) 50deg 90deg,
    transparent 90deg 180deg,
    rgba(200,148,74,0.04) 180deg 230deg,
    transparent 230deg 360deg
  );
}
.hero__paint--3 {
  background: repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0, transparent 18px,
    rgba(200,148,74,0.04) 18px, rgba(200,148,74,0.04) 19px,
    transparent 19px, transparent 32px,
    rgba(255,255,255,0.025) 32px, rgba(255,255,255,0.025) 33px
  );
}

/* Groove rings */
.hero__grooves {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0, transparent 14px,
    rgba(255,255,255,0.04) 14px, rgba(255,255,255,0.04) 15px
  );
  pointer-events: none;
}

.hero__inner-disc {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 44% 40%, #2a2825, #0f0e0c);
}
.hero__inner-grooves {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0, transparent 8px,
    rgba(255,255,255,0.035) 8px, rgba(255,255,255,0.035) 9px
  );
}

/* Label */
.hero__label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 28%; height: 28%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #d4a04e, #7A4B2A);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 0 50px rgba(200,148,74,0.22), 0 2px 12px rgba(0,0,0,0.5);
  gap: 0.05rem;
  padding: 1rem;
  text-align: center;
}
.hero__label-brand {
  font-family: var(--font-mono);
  font-size: 0.3rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247,244,235,0.55);
  line-height: 1;
}
.hero__label-title {
  font-family: var(--font-serif);
  font-size: 0.5rem;
  font-weight: 700;
  font-style: italic;
  color: var(--cream);
  line-height: 1.2;
}
.hero__label-rpm {
  font-family: var(--font-mono);
  font-size: 0.28rem;
  letter-spacing: 0.1em;
  color: rgba(247,244,235,0.4);
}
.hero__label-hole {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 12%; height: 12%;
  border-radius: 50%;
  background: #060504;
  z-index: 15;
}

/* Disc glow rings (static, no-spin) */
.hero__disc-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(200,148,74,0.08);
  pointer-events: none;
  z-index: 20;
}
.hero__disc-glow--1 { width: 110%; height: 110%; box-shadow: 0 0 40px rgba(200,148,74,0.04); }
.hero__disc-glow--2 { width: 125%; height: 125%; border-color: rgba(200,148,74,0.04); }

/* Now playing */
.hero__now-playing {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--cream-mid);
  letter-spacing: 0.05em;
}
.hero__np-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
  animation: pulse-dot 2.5s ease-in-out infinite;
  animation-delay: 0.5s;
}
.hero__np-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  opacity: 0.7;
  flex-shrink: 0;
}
.hero__np-track { color: var(--cream-low); }

/* Status bar */
.hero__status-bar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem var(--section-pad-x);
  border-top: 1px solid var(--dark-border);
  background: rgba(10, 8, 5, 0.5);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}
.hero__status-left {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.hero__status-tag {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  flex-shrink: 0;
}
.hero__status-text {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  color: rgba(247,244,235,0.35);
  letter-spacing: 0.05em;
}
.hero__status-genres {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: rgba(247,244,235,0.2);
}
.hero__status-sep { color: rgba(247,244,235,0.1); margin: 0 0.4rem; }


/* ══════════════════════════════════════════════════════════
   SECTION 02 · THE SOUNDSCAPE PHILOSOPHY
   ══════════════════════════════════════════════════════════ */
.philosophy {
  position: relative;
  background: var(--dark-2);
  padding: var(--section-pad-y) var(--section-pad-x);
  overflow: hidden;
}
.philosophy__glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 0;
}
.philosophy__glow--tl {
  width: 50vw; height: 50vw;
  top: -15%; left: -10%;
  background: radial-gradient(circle, rgba(158,126,92,0.06) 0%, transparent 70%);
}
.philosophy__glow--br {
  width: 40vw; height: 40vw;
  bottom: -10%; right: -5%;
  background: radial-gradient(circle, rgba(200,148,74,0.05) 0%, transparent 70%);
}

/* Label bar */
.philosophy__label-bar {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 5rem;
  position: relative;
  z-index: 5;
}

/* Asymmetric grid */
.philosophy__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 5rem;
  align-items: start;
  position: relative;
  z-index: 5;
}

/* Visual frame */
.philosophy__visual {
  position: relative;
  z-index: 5;
}
.philosophy__visual-frame {
  position: relative;
  border: 1px solid var(--dark-border-2);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.philosophy__scene {
  width: 100%;
  height: auto;
  display: block;
}

/* Overlay chips */
.philosophy__visual-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(10,8,5,0.75);
  border: 1px solid var(--dark-border-2);
  backdrop-filter: blur(8px);
  padding: 0.6rem 1rem;
}
.philosophy__visual-chip--tl { top: 1.2rem; left: 1.2rem; }
.philosophy__visual-chip--br {
  bottom: 1.2rem; right: 1.2rem;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}
.chip__label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
}
.chip__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--amber);
  animation: pulse-dot 2s ease-in-out infinite;
}
.chip__num {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--cream);
  line-height: 1;
}
.chip__unit {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-low);
}

/* Copy */
.philosophy__copy {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-top: 1rem;
}
.philosophy__heading {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.philosophy__heading-line {
  display: block;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(3rem, 5.5vw, 6rem);
  color: var(--cream);
}
.philosophy__heading-line--italic {
  font-style: italic;
  font-weight: 300;
  color: var(--amber);
}
.philosophy__heading-line--light {
  font-size: clamp(1.4rem, 2.5vw, 2.8rem);
  font-weight: 300;
  font-style: italic;
  color: var(--cream-low);
  letter-spacing: -0.01em;
}

.philosophy__body-block {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.philosophy__p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.95;
  color: var(--cream-mid);
}
.philosophy__p--lead {
  font-size: 1.1rem;
  color: var(--cream-dim);
  line-height: 1.8;
}
.philosophy__p em {
  font-style: italic;
  color: var(--cream-dim);
}

/* Stats grid */
.philosophy__stats-grid {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2rem 0;
  border-top: 1px solid var(--dark-border);
  border-bottom: 1px solid var(--dark-border);
}
.philosophy__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0 1.5rem;
}
.philosophy__stat:first-child { padding-left: 0; }
.philosophy__stat-divider {
  width: 1px;
  height: 3rem;
  background: var(--dark-border-2);
  flex-shrink: 0;
}
.philosophy__stat-num {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 700;
  color: var(--cream);
  line-height: 1;
  letter-spacing: -0.02em;
}
.philosophy__stat-label {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream-low);
}

/* Philosophy CTA */
.btn-philosophy {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.35rem 3.2rem;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 2.5px solid var(--cream);
  transition: background 0.28s, border-color 0.28s, color 0.28s, transform 0.15s, box-shadow 0.28s;
  max-width: fit-content;
}
.btn-philosophy:hover {
  background: transparent;
  color: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.3);
}
.btn-philosophy__arrow {
  font-size: 1.2rem;
  transition: transform 0.28s;
  display: inline-block;
}
.btn-philosophy:hover .btn-philosophy__arrow { transform: translateX(5px); }


/* ══════════════════════════════════════════════════════════
   SECTION 03 · CRAFTED FEATURES
   ══════════════════════════════════════════════════════════ */
.features {
  position: relative;
  background: var(--dark-1);
  padding: var(--section-pad-y) var(--section-pad-x);
  overflow: hidden;
}
.features__glow--center {
  position: absolute;
  width: 60vw; height: 50vw;
  top: -5%; left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(200,148,74,0.06) 0%, transparent 70%);
}

/* Section header */
.features__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 4rem;
  position: relative;
  z-index: 5;
}
.features__header-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.features__heading {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(2.8rem, 5vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--cream);
}
.features__heading em {
  font-style: italic;
  font-weight: 300;
  color: var(--amber);
}
.features__subhead {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.85;
  color: var(--cream-mid);
  max-width: 44ch;
  align-self: end;
}

/* Feature card grid */
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  position: relative;
  z-index: 5;
  border: 1px solid var(--dark-border);
}

/* Feature card */
.feature-card {
  background: var(--dark-3);
  border: none;
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  position: relative;
  overflow: hidden;
  transition: background 0.35s, transform 0.3s;
  border: 1px solid var(--dark-border);
}
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200,148,74,0.06) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.feature-card:hover { background: var(--dark-4); transform: translateY(-3px); }
.feature-card:hover::before { opacity: 1; }

/* Amber card variant */
.feature-card--amber {
  background: var(--amber);
}
.feature-card--amber * { color: var(--ink) !important; }
.feature-card--amber .feature-card__num { opacity: 0.5; }
.feature-card--amber .feature-card__desc { opacity: 0.75; }
.feature-card--amber .feature-card__genres span {
  border-color: rgba(30,32,34,0.25);
}
.feature-card--amber::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.12) 0%, transparent 60%);
}

/* Calm card variant */
.feature-card--calm { background: var(--dark-4); }

.feature-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.feature-card__num {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  color: var(--amber);
  opacity: 0.7;
}
.feature-card--amber .feature-card__num { color: var(--ink); }

/* Vinyl icon */
.feature-card__icon {
  width: 52px; height: 52px;
  position: relative;
}
.feature-card__vinyl {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: #0d0c0a;
  position: relative;
  animation: disc-spin 14s linear infinite;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.feature-card--amber .feature-card__vinyl { background: rgba(30,32,34,0.25); }
.feature-card__vinyl-grooves {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0, transparent 6px,
    rgba(255,255,255,0.06) 6px, rgba(255,255,255,0.06) 7px
  );
}
.feature-card__vinyl-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 35%; height: 35%;
  border-radius: 50%;
  background: var(--amber);
  z-index: 2;
}
.feature-card--amber .feature-card__vinyl-label { background: var(--ink); }
.feature-card__vinyl-hole {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 30%; height: 30%;
  border-radius: 50%;
  background: #0d0c0a;
  z-index: 3;
}
.feature-card--amber .feature-card__vinyl-hole { background: var(--amber); }

/* Wave icon */
.feature-card__icon--wave { align-items: flex-end; display: flex; }
.feature-card__wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 36px;
  width: 100%;
}
.feature-card__wave span {
  flex: 1;
  background: var(--ink);
  border-radius: 1px;
  animation: wave-bar 1.6s ease-in-out infinite;
}
.feature-card__wave span:nth-child(1)  { height: 35%; animation-delay: 0s; }
.feature-card__wave span:nth-child(2)  { height: 70%; animation-delay: 0.1s; }
.feature-card__wave span:nth-child(3)  { height: 50%; animation-delay: 0.2s; }
.feature-card__wave span:nth-child(4)  { height: 90%; animation-delay: 0.3s; }
.feature-card__wave span:nth-child(5)  { height: 60%; animation-delay: 0.4s; }
.feature-card__wave span:nth-child(6)  { height: 80%; animation-delay: 0.5s; }
.feature-card__wave span:nth-child(7)  { height: 45%; animation-delay: 0.6s; }
.feature-card__wave span:nth-child(8)  { height: 75%; animation-delay: 0.7s; }
.feature-card__wave span:nth-child(9)  { height: 55%; animation-delay: 0.8s; }
.feature-card__wave span:nth-child(10) { height: 65%; animation-delay: 0.9s; }
.feature-card__wave span:nth-child(11) { height: 40%; animation-delay: 1.0s; }
.feature-card__wave span:nth-child(12) { height: 72%; animation-delay: 1.1s; }
@keyframes wave-bar {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(0.35); }
}

/* UI grid icon */
.feature-card__icon--ui { align-items: center; justify-content: center; display: flex; }
.feature-card__ui-grid {
  display: grid;
  grid-template-columns: repeat(3, 12px);
  grid-template-rows: repeat(3, 12px);
  gap: 4px;
}
.feature-card__ui-grid span {
  border-radius: 1px;
  background: var(--cream-low);
  transition: background 0.3s;
}
.feature-card__ui-active {
  background: var(--amber) !important;
}
.feature-card:hover .feature-card__ui-grid span { background: var(--cream-ghost); }
.feature-card:hover .feature-card__ui-active { background: var(--amber) !important; }

.feature-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.feature-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 2.5vw, 2.6rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--cream);
}
.feature-card__desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.9;
  color: var(--cream-mid);
}
.feature-card__desc em {
  font-style: italic;
  color: var(--cream-dim);
}

.feature-card__foot {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--dark-border);
}
.feature-card--amber .feature-card__foot { border-top-color: rgba(30,32,34,0.2); }
.feature-card__genres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.feature-card__genres span {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--dark-border-2);
  color: var(--cream-low);
  border-radius: 2px;
}
.feature-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber);
  transition: gap 0.22s, color 0.22s;
}
.feature-card--amber .feature-card__link { color: var(--ink); }
.feature-card:hover .feature-card__link { gap: 0.9rem; }

/* CTA strip */
.features__cta-strip {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3.5rem;
  padding: 2rem 3rem;
  border: 1px solid var(--dark-border-2);
  background: var(--dark-3);
}
.features__cta-text {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1rem;
  color: var(--cream-mid);
}
.btn-features-cta {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 3rem;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 2.5px solid var(--amber);
  transition: background 0.28s, transform 0.15s, box-shadow 0.28s;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-features-cta:hover {
  background: var(--amber-bright);
  border-color: var(--amber-bright);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(200,148,74,0.28);
}
.btn-features-cta__arrow {
  font-size: 1.2rem;
  transition: transform 0.28s;
  display: inline-block;
}
.btn-features-cta:hover .btn-features-cta__arrow { transform: translateX(5px); }


/* ══════════════════════════════════════════════════════════
   SECTION 04 · FOOTER
   ══════════════════════════════════════════════════════════ */
.site-footer {
  position: relative;
  background: #0a0806;
  padding: 5rem var(--section-pad-x) 3rem;
  overflow: hidden;
}
.site-footer__glow {
  position: absolute;
  width: 50vw; height: 30vh;
  top: 0; left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  filter: blur(80px);
  background: radial-gradient(circle, rgba(200,148,74,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Footer top */
.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 3rem;
  gap: 3rem;
  flex-wrap: wrap;
}
.site-footer__top-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.site-footer__logo {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--cream);
  letter-spacing: -0.01em;
  line-height: 1;
  transition: color 0.2s;
}
.site-footer__logo:hover { color: var(--cream-dim); }
.site-footer__logo-accent { color: var(--amber); }
.site-footer__tagline {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--cream-low);
}
.site-footer__tagline em {
  font-style: italic;
  color: var(--cream-mid);
}

/* Live stat — prominent, amber accent */
.site-footer__live-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 2rem;
  border: 1px solid rgba(200,148,74,0.25);
  background: rgba(200,148,74,0.05);
  flex-shrink: 0;
  max-width: fit-content;
  align-self: flex-start;
}
.site-footer__live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
  display: none; /* hidden — dot already in text string */
}
.site-footer__live-num {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.15em;
  color: var(--amber);
  white-space: nowrap;
}

/* Rule */
.site-footer__rule {
  height: 1px;
  background: var(--dark-border);
  margin-bottom: 3rem;
}

/* Nav grid */
.site-footer__nav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  margin-bottom: 3rem;
}
.site-footer__nav-heading {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--amber-bright);
  margin-bottom: 1.5rem;
}
.site-footer__nav-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.site-footer__nav-col a {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.82rem;
  color: var(--cream-low);
  letter-spacing: 0.04em;
  transition: color 0.2s, padding-left 0.2s;
  display: inline-block;
}
.site-footer__nav-col a:hover {
  color: var(--cream);
  padding-left: 4px;
}

/* Bottom bar */
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--dark-border);
}
.site-footer__copyright {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.72rem;
  color: rgba(247, 244, 235, 0.58);
  letter-spacing: 0.04em;
}
.site-footer__bottom-links {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.site-footer__bottom-links a {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.72rem;
  color: rgba(247, 244, 235, 0.55);
  transition: color 0.2s;
}
.site-footer__bottom-links a:hover { color: var(--cream-dim); }
.site-footer__bottom-sep { color: rgba(247, 244, 235, 0.35); font-size: 0.7rem; }


/* ══════════════════════════════════════════════════════════
   LOFISPO PAGE — lofispo.html (Concept 05 production)
   ══════════════════════════════════════════════════════════ */
body.page-lofispo #hero {
      background: #18140e;
      min-height: 100vh;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* Ambient glows */
    body.page-lofispo #hero .c05__ambient-glow {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 2;
      filter: blur(80px);
    }

    body.page-lofispo #hero .c05__ambient-glow--main {
      width: 80vw; height: 80vw;
      top: -10%; left: 50%;
      transform: translateX(-50%);
      background: radial-gradient(circle, rgba(200,148,74,0.15) 0%, transparent 65%);
    }

    body.page-lofispo #hero .c05__ambient-glow--secondary {
      width: 50vw; height: 50vw;
      bottom: -10%; right: -10%;
      background: radial-gradient(circle, rgba(158,126,92,0.08) 0%, transparent 60%);
    }

    /* VINYL CANVAS */
    body.page-lofispo #hero .c05__vinyl-canvas {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5;
    }

    body.page-lofispo #hero .c05__vinyl-mega {
      width: min(100vh, 90vw);
      height: min(100vh, 90vw);
      position: relative;
      animation: disc-spin 40s linear infinite;
      opacity: 0.9;
    }
}

    body.page-lofispo #hero .c05__vinyl-mega-body {
      width: 100%; height: 100%;
      border-radius: 50%;
      background: conic-gradient(
        #141414 0deg,#1c1c1c 3deg,#141414 6deg,#1c1c1c 9deg,
        #141414 12deg,#1c1c1c 15deg,#141414 18deg,#1c1c1c 21deg,
        #141414 24deg,#1c1c1c 27deg,#141414 30deg,#1c1c1c 33deg,
        #141414 36deg,#1c1c1c 39deg,#141414 42deg,#1c1c1c 45deg,
        #141414 48deg,#1c1c1c 51deg,#141414 54deg,#1c1c1c 57deg,
        #141414 60deg,#1c1c1c 63deg,#141414 66deg,#1c1c1c 69deg,
        #141414 72deg,#1c1c1c 75deg,#141414 78deg,#1c1c1c 81deg,
        #141414 84deg,#1c1c1c 87deg,#141414 90deg,#1c1c1c 93deg,
        #141414 96deg,#1c1c1c 99deg,#141414 102deg,#1c1c1c 105deg,
        #141414 108deg,#1c1c1c 111deg,#141414 114deg,#1c1c1c 117deg,
        #141414 120deg,#1c1c1c 123deg,#141414 126deg,#1c1c1c 129deg,
        #141414 132deg,#1c1c1c 135deg,#141414 138deg,#1c1c1c 141deg,
        #141414 144deg,#1c1c1c 147deg,#141414 150deg,#1c1c1c 153deg,
        #141414 156deg,#1c1c1c 159deg,#141414 162deg,#1c1c1c 165deg,
        #141414 168deg,#1c1c1c 171deg,#141414 174deg,#1c1c1c 177deg,
        #141414 180deg,#1c1c1c 183deg,#141414 186deg,#1c1c1c 189deg,
        #141414 192deg,#1c1c1c 195deg,#141414 198deg,#1c1c1c 201deg,
        #141414 204deg,#1c1c1c 207deg,#141414 210deg,#1c1c1c 213deg,
        #141414 216deg,#1c1c1c 219deg,#141414 222deg,#1c1c1c 225deg,
        #141414 228deg,#1c1c1c 231deg,#141414 234deg,#1c1c1c 237deg,
        #141414 240deg,#1c1c1c 243deg,#141414 246deg,#1c1c1c 249deg,
        #141414 252deg,#1c1c1c 255deg,#141414 258deg,#1c1c1c 261deg,
        #141414 264deg,#1c1c1c 267deg,#141414 270deg,#1c1c1c 273deg,
        #141414 276deg,#1c1c1c 279deg,#141414 282deg,#1c1c1c 285deg,
        #141414 288deg,#1c1c1c 291deg,#141414 294deg,#1c1c1c 297deg,
        #141414 300deg,#1c1c1c 303deg,#141414 306deg,#1c1c1c 309deg,
        #141414 312deg,#1c1c1c 315deg,#141414 318deg,#1c1c1c 321deg,
        #141414 324deg,#1c1c1c 327deg,#141414 330deg,#1c1c1c 333deg,
        #141414 336deg,#1c1c1c 339deg,#141414 342deg,#1c1c1c 345deg,
        #141414 348deg,#1c1c1c 351deg,#141414 354deg,#1c1c1c 357deg,
        #141414 360deg);
      position: relative;
    }

    body.page-lofispo #hero .c05__vinyl-mega-grooves {
      position: absolute; inset: 0;
      border-radius: 50%;
      background: repeating-radial-gradient(circle at 50% 50%,
        transparent 0, transparent 10px,
        rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 11px);
    }

    body.page-lofispo #hero .c05__glow-rings { position: absolute; inset: 0; border-radius: 50%; }

    body.page-lofispo #hero .c05__glow-ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(200,148,74,0.12);
    }

    body.page-lofispo #hero .c05__glow-ring--1 { inset: 15%; box-shadow: 0 0 30px rgba(200,148,74,0.06); }
    body.page-lofispo #hero .c05__glow-ring--2 { inset: 30%; box-shadow: 0 0 40px rgba(200,148,74,0.08); }
    body.page-lofispo #hero .c05__glow-ring--3 { inset: 42%; box-shadow: 0 0 60px rgba(200,148,74,0.12); }

    body.page-lofispo #hero .c05__vinyl-mega-label {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 18%; height: 18%;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 35%, var(--amber), var(--rust));
      z-index: 2;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 40px rgba(200,148,74,0.25);
    }

    body.page-lofispo #hero .c05__mega-label-inner {
      display: flex; flex-direction: column; align-items: center;
      position: relative; width: 100%; height: 100%;
    }

    body.page-lofispo #hero .c05__mega-brand {
      position: absolute; top: 30%;
      font-family: 'Space Mono', monospace;
      font-size: 0.5rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(247,244,235,0.6);
    }

    body.page-lofispo #hero .c05__mega-hole {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 22%; height: 22%;
      border-radius: 50%; background: #0a0808; z-index: 5;
    }

    /* HERO HEADER */
    body.page-lofispo #hero .c05__header {
      position: relative; z-index: 50;
      display: flex; align-items: center; justify-content: space-between;
      padding: 2rem 4rem;
      border-bottom: 1px solid rgba(247,244,235,0.08);
      flex-shrink: 0;
    }

    body.page-lofispo #hero .c05__header-left { display: flex; align-items: center; gap: 1rem; }

    body.page-lofispo #hero .c05__header-logo {
      font-family: 'Fraunces', serif;
      font-weight: 700; font-size: 1.2rem;
      color: var(--cream); letter-spacing: -0.01em;
    }

    body.page-lofispo #hero .c05__header-slash {
      font-family: 'Fraunces', serif;
      font-weight: 100; font-size: 1.5rem;
      color: rgba(247,244,235,0.2);
    }

    body.page-lofispo #hero .c05__header-sub {
      font-family: 'Jost', sans-serif;
      font-weight: 300; font-size: 0.68rem;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(247,244,235,0.3);
    }

    body.page-lofispo #hero .c05__header-nav { display: flex; gap: 2.5rem; }

    body.page-lofispo #hero .c05__header-nav a {
      font-family: 'Jost', sans-serif;
      font-weight: 300; font-size: 0.72rem;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(247,244,235,0.4); transition: color 0.2s;
    }

    body.page-lofispo #hero .c05__header-nav a:hover { color: var(--cream); }

    body.page-lofispo #hero .c05__header-cta {
      font-family: 'Jost', sans-serif;
      font-size: 0.72rem; font-weight: 500;
      letter-spacing: 0.14em; text-transform: uppercase;
      padding: 0.6rem 1.6rem;
      border: 1.5px solid rgba(247,244,235,0.25);
      color: var(--cream);
      transition: background 0.2s, border-color 0.2s;
    }

    body.page-lofispo #hero .c05__header-cta:hover {
      background: rgba(247,244,235,0.08);
      border-color: rgba(247,244,235,0.5);
    }

    /* HERO TYPE OVERLAY */
    body.page-lofispo #hero .c05__type-overlay {
      position: relative; z-index: 20;
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      padding: 0 4rem; gap: 4rem;
    }

    body.page-lofispo #hero .c05__type-left {
      display: flex; flex-direction: column; gap: 2rem;
      justify-self: start;
    }

    body.page-lofispo #hero .c05__type-tag {
      display: flex; align-items: center; gap: 0.8rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.62rem; letter-spacing: 0.25em; text-transform: uppercase;
      color: var(--amber);
    }

    body.page-lofispo #hero .c05__type-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--amber);
      animation: pulse 2s ease-in-out infinite;
    }
50% { opacity:0.7; transform:scale(0.85); box-shadow: 0 0 0 6px rgba(200,148,74,0); }
    }

    body.page-lofispo #hero .c05__mega-title { display: flex; flex-direction: column; gap: 0; }

    body.page-lofispo #hero .c05__mega-line {
      display: block;
      font-family: 'Unbounded', sans-serif;
      font-weight: 900; line-height: 0.9; letter-spacing: -0.04em;
    }

    body.page-lofispo #hero .c05__mega-line--1 { font-size: clamp(4rem,9vw,10rem); color: var(--cream); }
    body.page-lofispo #hero .c05__mega-line--2 { font-size: clamp(4rem,9vw,10rem); color: transparent; -webkit-text-stroke: 2px rgba(247,244,235,0.35); }
    body.page-lofispo #hero .c05__mega-line--3 { font-size: clamp(4rem,9vw,10rem); color: var(--amber); }

    body.page-lofispo #hero .c05__type-right {
      display: flex; flex-direction: column; gap: 2.5rem;
      justify-self: end;
      align-items: flex-end;
      text-align: right;
      max-width: 36ch;
    }

    body.page-lofispo #hero .c05__type-body {
      font-family: 'Libre Baskerville', serif;
      font-size: 1.05rem; line-height: 1.9;
      color: rgba(247,244,235,0.45);
    }

    /* GENRE TAGS */
    body.page-lofispo #hero .c05__genre-tags {
      display: flex; flex-wrap: wrap; gap: 0.75rem;
    }

    body.page-lofispo #hero .c05__gtag {
      font-family: 'Jost', sans-serif;
      font-size: 0.65rem; font-weight: 400;
      letter-spacing: 0.14em; text-transform: uppercase;
      padding: 0.5rem 1.1rem;
      border: 1.5px solid rgba(247,244,235,0.18);
      color: rgba(247,244,235,0.4);
      border-radius: 2px;
      transition: all 0.25s; cursor: pointer;
    }

    body.page-lofispo #hero .c05__gtag:hover, body.page-lofispo #hero .c05__gtag--active {
      border-color: var(--amber);
      color: var(--amber);
      background: rgba(200,148,74,0.06);
    }

    /* STATUS BAR */
    body.page-lofispo #hero .c05__status-bar {
      position: relative; z-index: 50;
      display: flex; align-items: center; justify-content: space-between;
      padding: 1rem 4rem;
      border-top: 1px solid rgba(247,244,235,0.08);
      background: rgba(20,16,10,0.6);
      backdrop-filter: blur(10px);
      flex-shrink: 0;
    }

    body.page-lofispo #hero .c05__status-left { display: flex; align-items: center; gap: 1.5rem; }

    body.page-lofispo #hero .c05__status-tag {
      font-family: 'Space Mono', monospace;
      font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--amber); flex-shrink: 0;
    }

    body.page-lofispo #hero .c05__status-track {
      font-family: 'Jost', sans-serif;
      font-size: 0.72rem; color: rgba(247,244,235,0.4);
    }

    body.page-lofispo #hero .c05__status-genres {
      display: flex; align-items: center; gap: 0.8rem;
      font-family: 'Jost', sans-serif;
      font-size: 0.68rem; letter-spacing: 0.1em;
      color: rgba(247,244,235,0.25);
    }

    body.page-lofispo #hero .c05__sep { color: rgba(247,244,235,0.15); }


    /* ═══════════════════════════════════════════════
     SECTION 02 — THE SOUNDSCAPE PHILOSOPHY
     Asymmetric split: pullquote + manifesto column left,
     illustrated stat pillars right
     ═══════════════════════════════════════════════ */

    body.page-index #philosophy, body.page-lofispo #philosophy {
      background: var(--deep);
      position: relative;
      overflow: hidden;
    }

    body.page-index #philosophy > .grain-overlay, body.page-lofispo #philosophy > .grain-overlay {
      z-index: 1;
    }

    /* Persistent ambient glow continuation */
    body.page-index #philosophy .phil__bg-glow, body.page-lofispo #philosophy .phil__bg-glow {
      position: absolute;
      pointer-events: none;
      border-radius: 50%;
      filter: blur(100px);
    }

    body.page-index #philosophy .phil__bg-glow--1, body.page-lofispo #philosophy .phil__bg-glow--1 {
      width: 60vw; height: 60vw;
      top: -20%; left: -10%;
      background: radial-gradient(circle, rgba(200,148,74,0.07) 0%, transparent 70%);
    }

    body.page-index #philosophy .phil__bg-glow--2, body.page-lofispo #philosophy .phil__bg-glow--2 {
      width: 40vw; height: 40vw;
      bottom: -15%; right: 5%;
      background: radial-gradient(circle, rgba(122,75,42,0.09) 0%, transparent 70%);
    }

    /* Horizontal rule */
    body.page-index #philosophy .phil__rule, body.page-lofispo #philosophy .phil__rule {
      height: 1px;
      background: rgba(247,244,235,0.06);
      position: relative; z-index: 10;
    }

    /* Section eyebrow strip */
    body.page-index #philosophy .phil__eyebrow-strip, body.page-lofispo #philosophy .phil__eyebrow-strip {
      position: relative; z-index: 10;
      display: flex; align-items: center;
      padding: 2.5rem 4rem;
      gap: 2rem;
      border-bottom: 1px solid rgba(247,244,235,0.06);
    }

    body.page-index #philosophy .phil__eyebrow-num, body.page-lofispo #philosophy .phil__eyebrow-num {
      font-family: 'Fraunces', serif;
      font-size: 5rem; font-weight: 100;
      line-height: 1; color: var(--amber);
      opacity: 0.2; flex-shrink: 0;
    }

    body.page-index #philosophy .phil__eyebrow-text, body.page-lofispo #philosophy .phil__eyebrow-text {
      display: flex; flex-direction: column; gap: 0.3rem;
    }

    body.page-index #philosophy .phil__eyebrow-label, body.page-lofispo #philosophy .phil__eyebrow-label {
      font-family: 'Space Mono', monospace;
      font-size: 0.58rem; letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--amber); opacity: 0.7;
    }

    body.page-index #philosophy .phil__eyebrow-title, body.page-lofispo #philosophy .phil__eyebrow-title {
      font-family: 'Fraunces', serif;
      font-size: 1.3rem; font-weight: 300;
      font-style: italic;
      color: rgba(247,244,235,0.72);
      letter-spacing: -0.01em;
    }

    body.page-index #philosophy .phil__eyebrow-line, body.page-lofispo #philosophy .phil__eyebrow-line {
      flex: 1; height: 1px;
      background: rgba(247,244,235,0.06);
    }

    /* Main grid layout */
    body.page-index #philosophy .phil__grid, body.page-lofispo #philosophy .phil__grid {
      position: relative; z-index: 10;
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 80vh;
    }

    /* LEFT COLUMN */
    body.page-index #philosophy .phil__left, body.page-lofispo #philosophy .phil__left {
      padding: 5rem 4rem 5rem 4rem;
      display: flex; flex-direction: column;
      gap: 4rem;
      border-right: 1px solid rgba(247,244,235,0.06);
    }

    /* Giant pull-quote */
    body.page-index #philosophy .phil__pullquote, body.page-lofispo #philosophy .phil__pullquote {
      position: relative;
    }

    body.page-index #philosophy .phil__pq-mark, body.page-lofispo #philosophy .phil__pq-mark {
      font-family: 'Fraunces', serif;
      font-size: 8rem; line-height: 0.7;
      color: var(--amber); opacity: 0.2;
      font-weight: 900;
      position: absolute; top: -1.5rem; left: -1.5rem;
      pointer-events: none;
    }

    body.page-index #philosophy .phil__pq-text, body.page-lofispo #philosophy .phil__pq-text {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 3.2vw, 3.4rem);
      font-weight: 300; font-style: italic;
      line-height: 1.25;
      color: rgba(247,244,235,0.9);
      letter-spacing: -0.01em;
      padding-left: 1rem;
    }

    body.page-index #philosophy .phil__pq-text em, body.page-lofispo #philosophy .phil__pq-text em {
      font-style: normal; font-weight: 600;
      color: var(--amber);
    }

    body.page-index #philosophy .phil__pq-attr, body.page-lofispo #philosophy .phil__pq-attr {
      margin-top: 2rem;
      display: flex; align-items: center; gap: 1rem;
      padding-left: 1rem;
    }

    body.page-index #philosophy .phil__pq-line, body.page-lofispo #philosophy .phil__pq-line {
      width: 2.5rem; height: 1px;
      background: var(--amber); opacity: 0.5;
    }

    body.page-index #philosophy .phil__pq-source, body.page-lofispo #philosophy .phil__pq-source {
      font-family: 'Space Mono', monospace;
      font-size: 0.55rem; letter-spacing: 0.25em;
      text-transform: uppercase;
      color: rgba(247,244,235,0.55);
    }

    /* Body paragraphs */
    body.page-index #philosophy .phil__body, body.page-lofispo #philosophy .phil__body {
      display: flex; flex-direction: column; gap: 1.8rem;
    }

    body.page-index #philosophy .phil__body-p, body.page-lofispo #philosophy .phil__body-p {
      font-family: 'Libre Baskerville', serif;
      font-size: 0.95rem; line-height: 1.95;
      color: rgba(247,244,235,0.72);
      max-width: 54ch;
    }

    body.page-index #philosophy .phil__body-p strong, body.page-lofispo #philosophy .phil__body-p strong {
      font-weight: 700;
      color: rgba(247,244,235,0.92);
    }

    /* Principles list */
    body.page-index #philosophy .phil__principles, body.page-lofispo #philosophy .phil__principles {
      display: flex; flex-direction: column; gap: 1.5rem;
    }

    body.page-index #philosophy .phil__principle, body.page-lofispo #philosophy .phil__principle {
      display: flex; gap: 1.5rem; align-items: flex-start;
    }

    body.page-index #philosophy .phil__principle-num, body.page-lofispo #philosophy .phil__principle-num {
      font-family: 'Space Mono', monospace;
      font-size: 0.55rem; letter-spacing: 0.2em;
      color: var(--amber); opacity: 0.85;
      padding-top: 0.2rem; flex-shrink: 0;
      min-width: 2.5ch;
    }

    body.page-index #philosophy .phil__principle-body, body.page-lofispo #philosophy .phil__principle-body {
      display: flex; flex-direction: column; gap: 0.3rem;
    }

    body.page-index #philosophy .phil__principle-title, body.page-lofispo #philosophy .phil__principle-title {
      font-family: 'Jost', sans-serif;
      font-size: 0.8rem; font-weight: 500;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: rgba(247,244,235,0.85);
    }

    body.page-index #philosophy .phil__principle-desc, body.page-lofispo #philosophy .phil__principle-desc {
      font-family: 'Libre Baskerville', serif;
      font-size: 0.85rem; line-height: 1.75;
      color: rgba(247,244,235,0.62);
    }

    /* RIGHT COLUMN */
    body.page-index #philosophy .phil__right, body.page-lofispo #philosophy .phil__right {
      display: flex; flex-direction: column;
    }

    /* Top right — stacked stat pillars */
    body.page-index #philosophy .phil__stat-tower, body.page-lofispo #philosophy .phil__stat-tower {
      flex: 1;
      display: grid;
      grid-template-rows: 1fr 1fr 1fr;
      position: relative;
    }

    body.page-index #philosophy .phil__stat-cell, body.page-lofispo #philosophy .phil__stat-cell {
      padding: 2.5rem 3.5rem;
      border-bottom: 1px solid rgba(247,244,235,0.06);
      display: flex; flex-direction: column;
      justify-content: center; gap: 0.8rem;
      position: relative;
      overflow: hidden;
      transition: background 0.3s;
    }

    body.page-index #philosophy .phil__stat-cell:last-child, body.page-lofispo #philosophy .phil__stat-cell:last-child { border-bottom: none; }

    body.page-index #philosophy .phil__stat-cell::before, body.page-lofispo #philosophy .phil__stat-cell::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0;
      width: 2px;
      background: linear-gradient(to bottom, transparent, var(--amber), transparent);
      opacity: 0;
      transition: opacity 0.3s;
    }

    body.page-index #philosophy .phil__stat-cell:hover, body.page-lofispo #philosophy .phil__stat-cell:hover { background: rgba(200,148,74,0.03); }
    body.page-index #philosophy .phil__stat-cell:hover::before, body.page-lofispo #philosophy .phil__stat-cell:hover::before { opacity: 0.6; }

    body.page-index #philosophy .phil__stat-number, body.page-lofispo #philosophy .phil__stat-number {
      font-family: 'Unbounded', sans-serif;
      font-weight: 900;
      font-size: clamp(2.5rem, 4vw, 4.5rem);
      line-height: 1; letter-spacing: -0.04em;
      color: var(--cream);
    }

    body.page-index #philosophy .phil__stat-number sup, body.page-lofispo #philosophy .phil__stat-number sup {
      font-size: 0.45em; letter-spacing: 0; font-weight: 400;
      color: var(--amber); vertical-align: super;
    }

    body.page-index #philosophy .phil__stat-label, body.page-lofispo #philosophy .phil__stat-label {
      font-family: 'Jost', sans-serif;
      font-size: 0.65rem; font-weight: 300;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: rgba(247,244,235,0.55);
    }

    body.page-index #philosophy .phil__stat-sublabel, body.page-lofispo #philosophy .phil__stat-sublabel {
      font-family: 'Libre Baskerville', serif;
      font-size: 0.78rem; font-style: italic;
      color: rgba(247,244,235,0.48);
      margin-top: -0.3rem;
    }

    /* Bottom right — vinyl illustration panel */
    body.page-index #philosophy .phil__vinyl-panel, body.page-lofispo #philosophy .phil__vinyl-panel {
      height: 260px;
      background: var(--deep-2);
      border-top: 1px solid rgba(247,244,235,0.06);
      position: relative;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }

    body.page-index #philosophy .phil__vinyl-bg-glow, body.page-lofispo #philosophy .phil__vinyl-bg-glow {
      position: absolute; inset: -30%;
      background: radial-gradient(circle at 50% 50%, rgba(200,148,74,0.12) 0%, transparent 60%);
      border-radius: 50%;
    }

    body.page-index #philosophy .phil__small-vinyl, body.page-lofispo #philosophy .phil__small-vinyl {
      width: 200px; height: 200px;
      border-radius: 50%;
      background: conic-gradient(
        #161616 0deg,#1e1e1e 3deg,#161616 6deg,#1e1e1e 9deg,
        #161616 12deg,#1e1e1e 15deg,#161616 18deg,#1e1e1e 21deg,
        #161616 24deg,#1e1e1e 27deg,#161616 30deg,#1e1e1e 33deg,
        #161616 36deg,#1e1e1e 39deg,#161616 42deg,#1e1e1e 45deg,
        #161616 48deg,#1e1e1e 51deg,#161616 54deg,#1e1e1e 57deg,
        #161616 60deg,#1e1e1e 360deg
      );
      position: relative;
      animation: disc-spin 18s linear infinite;
      flex-shrink: 0;
      box-shadow: 0 0 60px rgba(200,148,74,0.12);
    }

    body.page-index #philosophy .phil__small-vinyl::after, body.page-lofispo #philosophy .phil__small-vinyl::after {
      content: '';
      position: absolute; inset: 0;
      border-radius: 50%;
      background: repeating-radial-gradient(circle at 50% 50%,
        transparent 0, transparent 8px,
        rgba(255,255,255,0.025) 8px, rgba(255,255,255,0.025) 9px);
    }

    body.page-index #philosophy .phil__small-vinyl-label, body.page-lofispo #philosophy .phil__small-vinyl-label {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 32%; height: 32%;
      border-radius: 50%;
      background: radial-gradient(circle at 38% 35%, var(--amber), var(--rust));
      display: flex; align-items: center; justify-content: center;
      z-index: 2;
      box-shadow: 0 0 20px rgba(200,148,74,0.3);
    }

    body.page-index #philosophy .phil__small-vinyl-hole, body.page-lofispo #philosophy .phil__small-vinyl-hole {
      width: 20%; height: 20%; border-radius: 50%;
      background: #0a0808; z-index: 3;
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
    }

    body.page-index #philosophy .phil__vinyl-panel-text, body.page-lofispo #philosophy .phil__vinyl-panel-text {
      position: absolute;
      right: 3.5rem;
      display: flex; flex-direction: column; gap: 0.5rem;
      text-align: right;
    }

    body.page-index #philosophy .phil__vp-eyebrow, body.page-lofispo #philosophy .phil__vp-eyebrow {
      font-family: 'Space Mono', monospace;
      font-size: 0.52rem; letter-spacing: 0.25em;
      text-transform: uppercase;
      color: rgba(247,244,235,0.25);
    }

    body.page-index #philosophy .phil__vp-title, body.page-lofispo #philosophy .phil__vp-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem; font-weight: 300; font-style: italic;
      color: rgba(247,244,235,0.55);
      line-height: 1.2;
    }

    body.page-index #philosophy .phil__vp-meta, body.page-lofispo #philosophy .phil__vp-meta {
      font-family: 'Jost', sans-serif;
      font-size: 0.62rem; font-weight: 300;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--amber); opacity: 0.6;
    }

    /* Ambient tape-echo band between sections */
    body.page-index #philosophy .phil__tape-band, body.page-lofispo #philosophy .phil__tape-band {
      position: relative; z-index: 10;
      background: var(--deep-3);
      border-top: 1px solid rgba(247,244,235,0.06);
      border-bottom: 1px solid rgba(247,244,235,0.06);
      padding: 1.1rem 4rem;
      overflow: hidden;
      display: flex; align-items: center; gap: 2rem;
    }

    body.page-index #philosophy .phil__tape-label, body.page-lofispo #philosophy .phil__tape-label {
      font-family: 'Space Mono', monospace;
      font-size: 0.52rem; letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--amber); opacity: 0.55;
      flex-shrink: 0;
    }

    body.page-index #philosophy .phil__tape-ticker, body.page-lofispo #philosophy .phil__tape-ticker {
      overflow: hidden; flex: 1;
    }

    body.page-index #philosophy .phil__tape-ticker span, body.page-lofispo #philosophy .phil__tape-ticker span {
      display: inline-block;
      font-family: 'Jost', sans-serif;
      font-weight: 200; font-size: 0.7rem;
      letter-spacing: 0.14em;
      color: rgba(247,244,235,0.45);
      white-space: nowrap;
      animation: ticker-scroll var(--phil-ticker-duration, 90s) linear infinite;
    }


    /* ═══════════════════════════════════════════════
     SECTION 03 — FOOTER
     ═══════════════════════════════════════════════ */

    body.page-lofispo #footer {
      background: #0f0c07;
      position: relative;
      overflow: hidden;
    }

    body.page-lofispo #footer .footer__bg-texture {
      position: absolute; inset: 0;
      background:
        repeating-linear-gradient(-45deg,
          transparent 0px, transparent 40px,
          rgba(255,255,255,0.008) 40px, rgba(255,255,255,0.008) 41px);
      pointer-events: none;
    }

    body.page-lofispo #footer .footer__glow {
      position: absolute;
      width: 50vw; height: 30vw;
      top: 0; left: 50%; transform: translateX(-50%);
      background: radial-gradient(ellipse, rgba(200,148,74,0.05) 0%, transparent 65%);
      pointer-events: none;
      filter: blur(40px);
    }

    /* Top border accent */
    body.page-lofispo #footer .footer__top-rule {
      height: 2px;
      background: linear-gradient(to right,
        transparent,
        rgba(200,148,74,0.25) 20%,
        rgba(200,148,74,0.5) 50%,
        rgba(200,148,74,0.25) 80%,
        transparent);
    }

    /* Main footer body */
    body.page-lofispo #footer .footer__body {
      position: relative; z-index: 10;
      padding: 4rem 4rem 3rem;
    }

    /* STAT HERO ROW */
    body.page-lofispo #footer .footer__stat-hero {
      display: flex; align-items: center; justify-content: center;
      padding: 3rem 0 4rem;
      border-bottom: 1px solid rgba(247,244,235,0.06);
      gap: 1.5rem;
    }

    body.page-lofispo #footer .footer__stat-dot {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--amber);
      animation: pulse 2s ease-in-out infinite;
      flex-shrink: 0;
    }

    body.page-lofispo #footer .footer__stat-text {
      font-family: 'Unbounded', sans-serif;
      font-weight: 400;
      font-size: clamp(1.4rem, 3vw, 2.4rem);
      letter-spacing: -0.02em;
      color: var(--cream);
    }

    body.page-lofispo #footer .footer__stat-text .stat-num {
      color: var(--amber);
      font-weight: 700;
    }

    body.page-lofispo #footer .footer__stat-text .stat-unit {
      font-weight: 300;
      color: rgba(247,244,235,0.5);
      font-size: 0.8em;
    }

    /* FOOTER COLUMNS GRID */
    body.page-lofispo #footer .footer__cols {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 4rem;
      padding: 4rem 0 3rem;
      border-bottom: 1px solid rgba(247,244,235,0.06);
    }

    /* Brand column */
    body.page-lofispo #footer .footer__brand {
      display: flex; flex-direction: column; gap: 1.8rem;
    }

    body.page-lofispo #footer .footer__logo {
      font-family: 'Fraunces', serif;
      font-weight: 700; font-size: 1.5rem;
      color: var(--cream); letter-spacing: -0.01em;
    }

    body.page-lofispo #footer .footer__logo span {
      font-weight: 300; font-style: italic;
      color: var(--amber);
    }

    body.page-lofispo #footer .footer__brand-desc {
      font-family: 'Libre Baskerville', serif;
      font-size: 0.85rem; line-height: 1.85;
      color: rgba(247,244,235,0.55);
      max-width: 32ch;
    }

    body.page-lofispo #footer .footer__brand-cta {
      display: inline-flex; align-items: center; gap: 0.8rem;
      font-family: 'Jost', sans-serif;
      font-size: 0.72rem; font-weight: 500;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--amber);
      border-bottom: 1px solid rgba(200,148,74,0.3);
      padding-bottom: 0.2rem;
      transition: border-color 0.2s, color 0.2s;
      width: fit-content;
    }

    body.page-lofispo #footer .footer__brand-cta:hover { color: var(--cream); border-color: rgba(247,244,235,0.5); }
    body.page-lofispo #footer .footer__brand-cta-arrow { font-size: 1rem; transition: transform 0.2s; }
    body.page-lofispo #footer .footer__brand-cta:hover body.page-lofispo #footer .footer__brand-cta-arrow { transform: translateX(5px); }

    /* Nav columns */
    body.page-lofispo #footer .footer__col { display: flex; flex-direction: column; gap: 1.5rem; }

    body.page-lofispo #footer .footer__col-heading {
      font-family: 'Space Mono', monospace;
      font-size: 0.55rem; letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--amber-bright);
    }

    body.page-lofispo #footer .footer__col-links {
      display: flex; flex-direction: column; gap: 1rem;
    }

    body.page-lofispo #footer .footer__col-links a {
      font-family: 'Jost', sans-serif;
      font-size: 0.78rem; font-weight: 300;
      letter-spacing: 0.06em;
      color: rgba(247,244,235,0.55);
      transition: color 0.2s;
    }

    body.page-lofispo #footer .footer__col-links a:hover { color: rgba(247,244,235,0.92); }

    /* BOTTOM BAR */
    body.page-lofispo #footer .footer__bottom {
      display: flex; align-items: center; justify-content: space-between;
      padding-top: 2.5rem;
      flex-wrap: wrap; gap: 1.5rem;
    }

    body.page-lofispo #footer .footer__copy {
      font-family: 'Space Mono', monospace;
      font-size: 0.55rem; letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(247,244,235,0.58);
    }

    body.page-lofispo #footer .footer__bottom-links {
      display: flex; gap: 2.5rem;
    }

    body.page-lofispo #footer .footer__bottom-links a {
      font-family: 'Jost', sans-serif;
      font-size: 0.65rem; font-weight: 300;
      letter-spacing: 0.1em;
      color: rgba(247,244,235,0.55);
      transition: color 0.2s;
    }

    body.page-lofispo #footer .footer__bottom-links a:hover { color: rgba(247,244,235,0.85); }

    body.page-lofispo #footer .footer__made-with {
      font-family: 'Space Mono', monospace;
      font-size: 0.52rem; letter-spacing: 0.15em;
      color: rgba(247,244,235,0.45);
    }

    body.page-lofispo #footer .footer__made-with em {
      font-style: normal;
      color: rgba(200,148,74,0.4);
    }


/* ══════════════════════════════════════════════════════════
   LOFISPO PAGE — RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* HERO */
  body.page-lofispo #hero .c05__header { padding: 1.5rem 1.5rem; }
  body.page-lofispo #hero .c05__header-nav,
  body.page-lofispo #hero .c05__header-sub,
  body.page-lofispo #hero .c05__header-slash { display: none; }
  body.page-lofispo #hero .c05__type-overlay {
    grid-template-columns: 1fr;
    padding: 2rem 1.5rem;
    gap: 2.5rem;
    align-items: flex-start;
  }
  body.page-lofispo #hero .c05__mega-line--1,
  body.page-lofispo #hero .c05__mega-line--2,
  body.page-lofispo #hero .c05__mega-line--3 {
    font-size: clamp(3rem, 14vw, 6rem);
  }
  body.page-lofispo #hero .c05__status-bar { padding: 1rem 1.5rem; }
  body.page-lofispo #hero .c05__status-right { display: none; }
  body.page-lofispo #hero .c05__type-right {
    justify-self: stretch;
    align-items: flex-start;
    text-align: left;
    max-width: none;
  }
  body.page-lofispo #hero .c05__vinyl-mega {
    width: 130vw;
    height: 130vw;
    opacity: 0.35;
  }
  /* PHILOSOPHY */
  body.page-index #philosophy .phil__eyebrow-strip, body.page-lofispo #philosophy .phil__eyebrow-strip { padding: 2rem 1.5rem; }
  body.page-index #philosophy .phil__eyebrow-num, body.page-lofispo #philosophy .phil__eyebrow-num { font-size: 3.5rem; }
  body.page-index #philosophy .phil__grid, body.page-lofispo #philosophy .phil__grid { grid-template-columns: 1fr; }
  body.page-index #philosophy .phil__left, body.page-lofispo #philosophy .phil__left {
    padding: 3rem 1.5rem;
    border-right: none;
    border-bottom: 1px solid rgba(247,244,235,0.06);
    gap: 3rem;
  }
  body.page-index #philosophy .phil__pq-text, body.page-lofispo #philosophy .phil__pq-text { font-size: clamp(1.6rem, 6.5vw, 2.4rem); }
  body.page-index #philosophy .phil__right, body.page-lofispo #philosophy .phil__right { flex-direction: column; }
  body.page-index #philosophy .phil__stat-tower, body.page-lofispo #philosophy .phil__stat-tower { grid-template-rows: auto auto auto; }
  body.page-index #philosophy .phil__stat-cell, body.page-lofispo #philosophy .phil__stat-cell { padding: 2rem 1.5rem; }
  body.page-index #philosophy .phil__stat-number, body.page-lofispo #philosophy .phil__stat-number { font-size: clamp(2.2rem, 10vw, 3.5rem); }
  body.page-index #philosophy .phil__vinyl-panel, body.page-lofispo #philosophy .phil__vinyl-panel { height: 200px; }
  body.page-index #philosophy .phil__small-vinyl, body.page-lofispo #philosophy .phil__small-vinyl { width: 150px; height: 150px; }
  body.page-index #philosophy .phil__vinyl-panel-text, body.page-lofispo #philosophy .phil__vinyl-panel-text { right: 1.5rem; }
  body.page-index #philosophy .phil__tape-band, body.page-lofispo #philosophy .phil__tape-band { padding: 1rem 1.5rem; }
  /* FOOTER */
  body.page-lofispo #footer .footer__body { padding: 3rem 1.5rem 2rem; }
  body.page-lofispo #footer .footer__stat-hero {
    padding: 2rem 0 3rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  body.page-lofispo #footer .footer__stat-text {
    font-size: clamp(1.1rem, 5vw, 1.6rem);
    text-align: center;
  }
  body.page-lofispo #footer .footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    padding: 2.5rem 0 2rem;
  }
  body.page-lofispo #footer .footer__brand { grid-column: 1 / -1; }
  body.page-lofispo #footer .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding-top: 2rem;
  }
  body.page-lofispo #footer .footer__bottom-links { flex-wrap: wrap; gap: 1.5rem; }
  body.page-lofispo .btn-heavy { padding: 1.1rem 2rem; }
}

@media (max-width: 600px) {
  body.page-lofispo #footer .footer__cols { grid-template-columns: 1fr; }
  body.page-lofispo #footer .footer__brand { grid-column: auto; }
}


/* ══════════════════════════════════════════════════════════
   HERO CONCEPTS — heroConcepts.html
   ══════════════════════════════════════════════════════════ */
body.page-concepts #c01 {
    background: var(--cream);
    display: flex;
    flex-direction: column;
  }

  /* NAV */
  body.page-concepts #c01 .c01__nav {
    position: relative;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 4rem;
    flex-shrink: 0;
  }

  body.page-concepts #c01 .c01__nav-logo {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--ink);
    letter-spacing: -0.01em;
  }

  body.page-concepts #c01 .c01__nav-logo span {
    color: var(--sienna);
  }

  body.page-concepts #c01 .c01__nav-links {
    display: flex;
    gap: 2.5rem;
  }

  body.page-concepts #c01 .c01__nav-links a {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.55;
    transition: opacity 0.2s;
  }

  body.page-concepts #c01 .c01__nav-links a:hover {
    opacity: 1;
  }

  body.page-concepts #c01 .c01__nav-cta {
    font-family: 'Jost', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.6rem 1.6rem;
    border: 1.5px solid var(--ink);
    color: var(--ink);
    transition: background 0.2s, color 0.2s;
  }

  body.page-concepts #c01 .c01__nav-cta:hover {
    background: var(--ink);
    color: var(--cream);
  }

  /* MAIN EDITORIAL GRID */
  body.page-concepts #c01 .c01__grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 44%;
    grid-template-rows: 1fr auto auto;
    grid-template-areas:
      "headline  sleeve"
      "body      sleeve"
      "ticker    ticker";
    position: relative;
    min-height: 0;
  }

  /* HEADLINE — spans left, massive, overlaps sleeve */
  body.page-concepts #c01 .c01__headline-block {
    grid-area: headline;
    padding: 3rem 0 1rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    z-index: 10;
  }

  body.page-concepts #c01 .c01__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--sienna);
    margin-bottom: 1.5rem;
  }

  body.page-concepts #c01 .c01__live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--amber);
    animation: pulse 2s ease-in-out infinite;
  }
50% {
      opacity: 0.7;
      transform: scale(0.85);
      box-shadow: 0 0 0 6px rgba(200, 148, 74, 0);
    }
  }

  body.page-concepts #c01 .c01__title {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--ink);
    display: flex;
    flex-direction: column;
  }

  body.page-concepts #c01 .c01__title-line {
    display: block;
  }

  body.page-concepts #c01 .c01__title-line--1 {
    font-size: clamp(5rem, 10vw, 10rem);
  }

  body.page-concepts #c01 .c01__title-line--2 {
    font-size: clamp(5rem, 10vw, 10rem);
    position: relative;
    z-index: 20;
    /* bleeds forward over sleeve */
  }

  body.page-concepts #c01 .c01__title-line--2 em {
    font-style: italic;
    font-weight: 300;
    color: var(--sienna);
  }

  body.page-concepts #c01 .c01__title-line--3 {
    font-size: clamp(5rem, 10vw, 10rem);
    color: var(--cream-3);
    -webkit-text-stroke: 2px var(--ink-30);
  }

  /* VINYL SLEEVE — right column, full height */
  body.page-concepts #c01 .c01__sleeve-col {
    grid-area: sleeve;
    grid-row: 1 / 3;
    position: relative;
    z-index: 5;
  }

  body.page-concepts #c01 .c01__sleeve {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #2A1F14 0%, #1a1208 60%, #2e2416 100%);
    overflow: hidden;
  }

  body.page-concepts #c01 .c01__sleeve-texture {
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(-45deg,
        transparent 0px,
        transparent 8px,
        rgba(255, 255, 255, 0.018) 8px,
        rgba(255, 255, 255, 0.018) 9px),
      repeating-linear-gradient(45deg,
        transparent 0px,
        transparent 8px,
        rgba(255, 255, 255, 0.01) 8px,
        rgba(255, 255, 255, 0.01) 9px);
  }

  body.page-concepts #c01 .c01__sleeve-label {
    position: absolute;
    bottom: 3rem;
    left: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 5;
  }

  body.page-concepts #c01 .c01__sleeve-catalog {
    font-family: 'Space Mono', monospace;
    font-size: 0.58rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(247, 244, 235, 0.3);
  }

  body.page-concepts #c01 .c01__sleeve-title {
    font-family: 'Fraunces', serif;
    font-size: 1.8rem;
    font-weight: 300;
    font-style: italic;
    color: rgba(247, 244, 235, 0.7);
    line-height: 1.2;
  }

  body.page-concepts #c01 .c01__sleeve-sub {
    font-family: 'Space Mono', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--amber);
    opacity: 0.7;
  }

  /* Vinyl disc peeking from sleeve top-right */
  body.page-concepts #c01 .c01__disc-peek {
    position: absolute;
    top: -6%;
    right: -12%;
    width: 85%;
    aspect-ratio: 1;
    z-index: 3;
    filter: drop-shadow(-20px 20px 40px rgba(0, 0, 0, 0.5));
  }

  body.page-concepts #c01 .c01__disc {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #111;
    position: relative;
    animation: disc-spin 20s linear infinite;
  }
}

  body.page-concepts #c01 .c01__disc-grooves {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at 50% 50%,
        transparent 0, transparent 13px,
        rgba(255, 255, 255, 0.04) 13px, rgba(255, 255, 255, 0.04) 14px);
  }

  body.page-concepts #c01 .c01__disc-label-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, var(--amber) 0%, var(--rust) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  body.page-concepts #c01 .c01__disc-label-ring span {
    font-family: 'Space Mono', monospace;
    font-size: 0.4rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cream);
    opacity: 0.8;
  }

  body.page-concepts #c01 .c01__disc-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14%;
    height: 14%;
    border-radius: 50%;
    background: #0a0a0a;
    z-index: 5;
  }

  /* BODY COL — bottom left */
  body.page-concepts #c01 .c01__body-col {
    grid-area: body;
    padding: 0 4rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    position: relative;
    z-index: 10;
  }

  body.page-concepts #c01 .c01__body-text {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--ink);
    opacity: 0.6;
    max-width: 46ch;
  }

  body.page-concepts #c01 .c01__cta-block {
    display: flex;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
  }

  body.page-concepts #c01 .c01__stats {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  body.page-concepts #c01 .c01__stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  body.page-concepts #c01 .c01__stat strong {
    font-family: 'Fraunces', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
  }

  body.page-concepts #c01 .c01__stat span {
    font-family: 'Jost', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.4;
  }

  body.page-concepts #c01 .c01__stat-sep {
    width: 1px;
    height: 2.5rem;
    background: var(--ink-30);
  }

  /* TICKER BAR */
  body.page-concepts #c01 .c01__ticker-bar {
    grid-area: ticker;
    display: flex;
    align-items: center;
    gap: 2rem;
    background: var(--ink);
    padding: 0.85rem 4rem;
    overflow: hidden;
    z-index: 20;
  }

  body.page-concepts #c01 .c01__ticker-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    color: var(--amber);
    white-space: nowrap;
    flex-shrink: 0;
  }

  body.page-concepts #c01 .c01__ticker-track {
    overflow: hidden;
    flex: 1;
  }

  body.page-concepts #c01 .c01__ticker-track span {
    display: inline-block;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: rgba(247, 244, 235, 0.45);
    white-space: nowrap;
    animation: ticker-scroll 28s linear infinite;
  }
to {
      transform: translateX(-50%);
    }
  }


  /* ═══════════════════════════════════════════════
   CONCEPT 02 · THE TEXTURED BENTO DECK
   ═══════════════════════════════════════════════ */
  body.page-concepts #c02 {
    background: var(--cream-2);
    display: flex;
    flex-direction: column;
  }

  /* BENTO HEADER */
  body.page-concepts #c02 .c02__header {
    position: relative;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.4rem 3rem;
    border-bottom: 1.5px solid var(--ink-10);
    flex-shrink: 0;
    background: var(--cream);
  }

  body.page-concepts #c02 .c02__header-logo {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ink);
    flex-shrink: 0;
  }

  body.page-concepts #c02 .c02__dot {
    color: var(--amber);
  }

  body.page-concepts #c02 .c02__header-status {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
  }

  body.page-concepts #c02 .c02__live-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(200, 148, 74, 0.12);
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-family: 'Space Mono', monospace;
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--amber);
  }

  body.page-concepts #c02 .c02__live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amber);
    animation: pulse 2s ease-in-out infinite;
  }

  body.page-concepts #c02 .c02__listener-count {
    font-family: 'Jost', sans-serif;
    font-size: 0.72rem;
    color: var(--ink);
    opacity: 0.45;
    letter-spacing: 0.05em;
  }

  body.page-concepts #c02 .c02__header-nav {
    margin-left: auto;
    display: flex;
    gap: 2rem;
  }

  body.page-concepts #c02 .c02__header-nav a {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.45;
    transition: opacity 0.2s;
  }

  body.page-concepts #c02 .c02__header-nav a:hover {
    opacity: 1;
  }

  /* BENTO GRID */
  body.page-concepts #c02 .c02__bento {
    flex: 1;
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.7fr;
    grid-template-rows: 1.5fr 1fr;
    gap: 12px;
    padding: 12px 3rem 3rem;
    min-height: 0;
  }

  /* All bento cells share base styles */
  body.page-concepts #c02 .c02__cell {
    background: var(--cream);
    border: 1.5px solid var(--ink-10);
    position: relative;
    overflow: hidden;
  }

  body.page-concepts #c02 .c02__cell-tag {
    position: absolute;
    top: 1.2rem;
    left: 1.5rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.3;
  }

  /* CELL A: HEADLINE — col 1, row 1 */
  body.page-concepts #c02 .c02__cell--headline {
    grid-column: 1;
    grid-row: 1;
    background: var(--ink);
  }

  body.page-concepts #c02 .c02__cell-inner {
    position: absolute;
    inset: 0;
    padding: 3rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  body.page-concepts #c02 .c02__tagline {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(247, 244, 235, 0.35);
  }

  body.page-concepts #c02 .c02__big-heading {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: clamp(3rem, 5vw, 5.5rem);
    line-height: 0.92;
    letter-spacing: -0.03em;
    color: var(--cream);
  }

  body.page-concepts #c02 .c02__italic-word {
    font-style: italic;
    font-weight: 300;
    color: var(--amber);
  }

  /* CELL B: VINYL — col 2, row 1+2 */
  body.page-concepts #c02 .c02__cell--vinyl {
    grid-column: 2;
    grid-row: 1 / 3;
    background: var(--cream-3);
  }

  body.page-concepts #c02 .c02__vinyl-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.page-concepts #c02 .c02__turntable-base {
    position: relative;
    width: 85%;
    aspect-ratio: 1;
  }

  body.page-concepts #c02 .c02__platter {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 40%, #2a2a2a, #0d0d0d);
    position: relative;
    box-shadow: 0 20px 60px rgba(30, 32, 34, 0.35), 0 4px 15px rgba(30, 32, 34, 0.2);
  }

  body.page-concepts #c02 .c02__platter-mat {
    position: absolute;
    inset: 2%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #1e1e1e, #0a0a0a);
  }

  body.page-concepts #c02 .c02__vinyl {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 2;
    animation: disc-spin 18s linear infinite;
    animation-play-state: paused;
  }

  body.page-concepts #c02 .c02__vinyl.playing {
    animation-play-state: running;
  }

  body.page-concepts #c02 .c02__vinyl-body {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(#161616 0deg, #1e1e1e 5deg, #161616 10deg, #1e1e1e 15deg,
        #161616 20deg, #1e1e1e 25deg, #161616 30deg, #1e1e1e 35deg,
        #161616 40deg, #1e1e1e 45deg, #161616 50deg, #1e1e1e 55deg,
        #161616 60deg, #1e1e1e 65deg, #161616 70deg, #1e1e1e 75deg,
        #161616 80deg, #1e1e1e 85deg, #161616 90deg, #1e1e1e 95deg,
        #161616 100deg, #1e1e1e 105deg, #161616 110deg, #1e1e1e 115deg,
        #161616 120deg, #1e1e1e 125deg, #161616 130deg, #1e1e1e 135deg,
        #161616 140deg, #1e1e1e 145deg, #161616 150deg, #1e1e1e 155deg,
        #161616 160deg, #1e1e1e 165deg, #161616 170deg, #1e1e1e 175deg,
        #161616 180deg, #1e1e1e 185deg, #161616 190deg, #1e1e1e 195deg,
        #161616 200deg, #1e1e1e 205deg, #161616 210deg, #1e1e1e 215deg,
        #161616 220deg, #1e1e1e 225deg, #161616 230deg, #1e1e1e 235deg,
        #161616 240deg, #1e1e1e 245deg, #161616 250deg, #1e1e1e 255deg,
        #161616 260deg, #1e1e1e 265deg, #161616 270deg, #1e1e1e 275deg,
        #161616 280deg, #1e1e1e 285deg, #161616 290deg, #1e1e1e 295deg,
        #161616 300deg, #1e1e1e 305deg, #161616 310deg, #1e1e1e 315deg,
        #161616 320deg, #1e1e1e 325deg, #161616 330deg, #1e1e1e 335deg,
        #161616 340deg, #1e1e1e 345deg, #161616 350deg, #1e1e1e 355deg,
        #161616 360deg);
    position: relative;
  }

  body.page-concepts #c02 .c02__vinyl-grooves {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at 50% 50%,
        transparent 0, transparent 11px,
        rgba(255, 255, 255, 0.03) 11px, rgba(255, 255, 255, 0.03) 12px);
  }

  body.page-concepts #c02 .c02__vinyl-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, var(--amber), var(--rust));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
  }

  body.page-concepts #c02 .c02__vinyl-label-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
  }

  body.page-concepts #c02 .c02__vinyl-brand {
    font-family: 'Space Mono', monospace;
    font-size: 0.42rem;
    letter-spacing: 0.15em;
    color: rgba(247, 244, 235, 0.7);
  }

  body.page-concepts #c02 .c02__vinyl-side {
    font-family: 'Fraunces', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cream);
    line-height: 1;
  }

  body.page-concepts #c02 .c02__vinyl-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12%;
    height: 12%;
    border-radius: 50%;
    background: #080808;
    z-index: 5;
  }

  /* Tonearm */
  body.page-concepts #c02 .c02__arm-pivot {
    position: absolute;
    top: 5%;
    right: 5%;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #bbb, #555);
    z-index: 10;
    transform-origin: 50% 50%;
    transform: rotate(-30deg);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body.page-concepts #c02 .c02__arm-pivot.engaged {
    transform: rotate(15deg);
  }

  body.page-concepts #c02 .c02__arm-shaft {
    position: absolute;
    top: 100%;
    left: 50%;
    transform-origin: top center;
    transform: translateX(-50%);
    width: 2px;
    height: 110px;
    background: linear-gradient(to bottom, #aaa, #666);
  }

  body.page-concepts #c02 .c02__arm-head {
    position: absolute;
    bottom: 0;
    left: -4px;
    width: 10px;
    height: 6px;
    background: #999;
    border-radius: 1px;
  }

  body.page-concepts #c02 .c02__arm-needle {
    position: absolute;
    bottom: -4px;
    left: 4px;
    width: 1px;
    height: 5px;
    background: #ddd;
  }

  /* Play overlay */
  body.page-concepts #c02 .c02__play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1.5rem;
    z-index: 15;
  }

  body.page-concepts #c02 .c02__play-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--amber);
    color: var(--ink);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(200, 148, 74, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
  }

  body.page-concepts #c02 .c02__play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(200, 148, 74, 0.5);
  }

  body.page-concepts #c02-play-icon {
    padding-left: 2px;
  }

  /* CELL C: TRACK */
  body.page-concepts #c02 .c02__cell--track {
    grid-column: 3;
    grid-row: 1;
    background: var(--cream-2);
  }

  body.page-concepts #c02 .c02__track-info {
    position: absolute;
    inset: 0;
    padding: 3.5rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.6rem;
  }

  body.page-concepts #c02 .c02__track-waveform {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 2.5rem;
    margin-bottom: 0.5rem;
  }

  body.page-concepts #c02 .c02__track-waveform span {
    flex: 1;
    background: var(--ink);
    opacity: 0.2;
    border-radius: 1px;
    animation: wave 1.8s ease-in-out infinite;
  }

  body.page-concepts #c02 .c02__track-waveform span:nth-child(1) {
    height: 40%;
    animation-delay: 0s;
  }

  body.page-concepts #c02 .c02__track-waveform span:nth-child(2) {
    height: 75%;
    animation-delay: 0.15s;
  }

  body.page-concepts #c02 .c02__track-waveform span:nth-child(3) {
    height: 55%;
    animation-delay: 0.3s;
  }

  body.page-concepts #c02 .c02__track-waveform span:nth-child(4) {
    height: 90%;
    animation-delay: 0.45s;
  }

  body.page-concepts #c02 .c02__track-waveform span:nth-child(5) {
    height: 65%;
    animation-delay: 0.6s;
  }

  body.page-concepts #c02 .c02__track-waveform span:nth-child(6) {
    height: 80%;
    animation-delay: 0.75s;
  }

  body.page-concepts #c02 .c02__track-waveform span:nth-child(7) {
    height: 50%;
    animation-delay: 0.9s;
  }

  body.page-concepts #c02 .c02__track-waveform span:nth-child(8) {
    height: 70%;
    animation-delay: 1.05s;
  }

  body.page-concepts #c02 .c02__track-waveform span:nth-child(9) {
    height: 45%;
    animation-delay: 1.2s;
  }

  body.page-concepts #c02 .c02__track-waveform span:nth-child(10) {
    height: 60%;
    animation-delay: 1.35s;
  }

  body.page-concepts #c02 .c02__cell--track.playing body.page-concepts #c02 .c02__track-waveform span {
    opacity: 0.7;
  }

  @keyframes wave {

    0%,
    100% {
      transform: scaleY(1);
    }

    50% {
      transform: scaleY(0.4);
    }
  }

  body.page-concepts #c02 .c02__track-title {
    font-family: 'Fraunces', serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
  }

  body.page-concepts #c02 .c02__track-channel {
    font-family: 'Jost', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: var(--ink);
    opacity: 0.45;
  }

  /* CELL D: CONTROLS */
  body.page-concepts #c02 .c02__cell--controls {
    grid-column: 1;
    grid-row: 2;
    background: var(--cream-3);
  }

  body.page-concepts #c02 .c02__knob-row {
    position: absolute;
    inset: 0;
    padding: 3.5rem 2.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  body.page-concepts #c02 .c02__knob-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
  }

  body.page-concepts #c02 .c02__knob {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #3a3a3a, #111);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    cursor: pointer;
    transition: box-shadow 0.2s;
  }

  body.page-concepts #c02 .c02__knob:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 0 2px var(--amber);
  }

  body.page-concepts #c02 .c02__knob-dial {
    width: 3px;
    height: 14px;
    background: var(--amber);
    border-radius: 2px;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: bottom center;
  }

  body.page-concepts #c02 .c02__knob-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.52rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.4;
  }

  /* CELL E: GENRES */
  body.page-concepts #c02 .c02__cell--genres {
    grid-column: 3;
    grid-row: 2;
  }

  body.page-concepts #c02 .c02__genre-list {
    position: absolute;
    inset: 0;
    padding: 3.5rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0;
  }

  body.page-concepts #c02 .c02__genre-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--ink-10);
    cursor: pointer;
    transition: padding-left 0.2s;
  }

  body.page-concepts #c02 .c02__genre-item:last-child {
    border-bottom: none;
  }

  body.page-concepts #c02 .c02__genre-item:hover {
    padding-left: 0.4rem;
  }

  body.page-concepts #c02 .c02__genre-item--active body.page-concepts #c02 .c02__genre-name {
    opacity: 1;
    color: var(--amber);
  }

  body.page-concepts #c02 .c02__genre-num {
    font-family: 'Space Mono', monospace;
    font-size: 0.52rem;
    color: var(--sienna);
    opacity: 0.6;
    flex-shrink: 0;
  }

  body.page-concepts #c02 .c02__genre-name {
    font-family: 'Jost', sans-serif;
    font-size: 0.72rem;
    color: var(--ink);
    opacity: 0.55;
    flex: 1;
    transition: opacity 0.2s;
  }

  body.page-concepts #c02 .c02__genre-item:hover body.page-concepts #c02 .c02__genre-name {
    opacity: 1;
  }

  body.page-concepts #c02 .c02__genre-count {
    font-family: 'Space Mono', monospace;
    font-size: 0.52rem;
    color: var(--ink);
    opacity: 0.25;
  }

  /* CELL F: STAT */
  body.page-concepts #c02 .c02__cell--stat {
    background: var(--amber);
  }

  body.page-concepts #c02 .c02__big-stat {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  body.page-concepts #c02 .c02__stat-number {
    font-family: 'Fraunces', serif;
    font-size: clamp(3.5rem, 5vw, 6rem);
    font-weight: 900;
    color: var(--ink);
    line-height: 1;
  }

  body.page-concepts #c02 .c02__stat-label {
    font-family: 'Jost', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.6;
    text-align: center;
    line-height: 1.5;
  }


  /* ═══════════════════════════════════════════════
   CONCEPT 03 · THE CINEMATIC FULL-SCREEN LANDSCAPE
   ═══════════════════════════════════════════════ */
  body.page-concepts #c03 {
    background: var(--cream-2);
    display: flex;
    flex-direction: column;
  }

  body.page-concepts #c03 .c03__bg-wash {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 70% 60% at 70% 50%, rgba(200, 148, 74, 0.1) 0%, transparent 70%),
      radial-gradient(ellipse 40% 50% at 20% 80%, rgba(158, 126, 92, 0.07) 0%, transparent 60%),
      radial-gradient(ellipse 30% 40% at 80% 10%, rgba(201, 185, 154, 0.12) 0%, transparent 60%);
    pointer-events: none;
  }

  /* HEADER: horizontal rule-based */
  body.page-concepts #c03 .c03__header {
    position: relative;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.8rem 4rem;
    flex-shrink: 0;
  }

  body.page-concepts #c03 .c03__header-logo {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ink);
    flex-shrink: 0;
  }

  body.page-concepts #c03 .c03__header-rule {
    flex: 1;
    height: 1px;
    background: var(--ink-20, rgba(30, 32, 34, 0.2));
  }

  body.page-concepts #c03 .c03__header-nav {
    display: flex;
    gap: 2rem;
    flex-shrink: 0;
  }

  body.page-concepts #c03 .c03__header-nav a {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.45;
    transition: opacity 0.2s;
  }

  body.page-concepts #c03 .c03__header-nav a:hover {
    opacity: 1;
  }

  body.page-concepts #c03 .c03__header-freq {
    font-family: 'Space Mono', monospace;
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--amber);
    opacity: 0.7;
    flex-shrink: 0;
  }

  /* DASHBOARD BODY */
  body.page-concepts #c03 .c03__dashboard {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 45%;
    min-height: 0;
  }

  /* LEFT */
  body.page-concepts #c03 .c03__left {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: 2rem 0 3rem 4rem;
    border-right: 1px solid var(--ink-10);
  }

  body.page-concepts #c03 .c03__left-inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
  }

  body.page-concepts #c03 .c03__label-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  body.page-concepts #c03 .c03__label-tag {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--sienna);
    flex-shrink: 0;
  }

  body.page-concepts #c03 .c03__label-line {
    flex: 1;
    height: 1px;
    background: var(--sienna);
    opacity: 0.25;
  }

  body.page-concepts #c03 .c03__giant-title {
    display: flex;
    flex-direction: column;
    font-family: 'Fraunces', serif;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: var(--ink);
    line-height: 0.88;
  }

  body.page-concepts #c03 .c03__giant-title span {
    font-size: clamp(4rem, 7.5vw, 8.5rem);
    display: block;
  }

  body.page-concepts #c03 .c03__title-amp {
    font-size: clamp(2rem, 4vw, 4.5rem) !important;
    font-style: italic;
    font-weight: 300;
    color: var(--sienna);
    line-height: 1 !important;
    padding: 0.1em 0;
  }

  body.page-concepts #c03 .c03__title-sub {
    font-size: clamp(1.2rem, 2.2vw, 2.5rem) !important;
    font-weight: 300;
    font-style: italic;
    color: var(--ink-50);
    letter-spacing: -0.01em;
    line-height: 1.3 !important;
  }

  body.page-concepts #c03 .c03__body {
    font-family: 'Libre Baskerville', serif;
    font-size: 0.95rem;
    line-height: 1.9;
    color: var(--ink);
    opacity: 0.55;
    max-width: 44ch;
  }

  body.page-concepts #c03 .c03__cta-row {
    display: flex;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
  }

  body.page-concepts #c03 .c03__secondary-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  body.page-concepts #c03 .c03__sec-num {
    font-family: 'Fraunces', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
  }

  body.page-concepts #c03 .c03__sec-text {
    font-family: 'Jost', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.4;
  }

  /* Mini player */
  body.page-concepts #c03 .c03__mini-player {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: var(--ink);
    max-width: fit-content;
  }

  body.page-concepts #c03 .c03__mini-art {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: conic-gradient(#2a2a2a 0deg, #1a1a1a 180deg, #2a2a2a 360deg);
    flex-shrink: 0;
    animation: disc-spin 12s linear infinite;
  }

  body.page-concepts #c03 .c03__mini-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }

  body.page-concepts #c03 .c03__mini-now {
    font-family: 'Jost', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: rgba(247, 244, 235, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.page-concepts #c03 .c03__mini-bar {
    height: 2px;
    background: rgba(247, 244, 235, 0.15);
    width: 200px;
    max-width: 100%;
    border-radius: 1px;
    overflow: hidden;
  }

  body.page-concepts #c03 .c03__mini-progress {
    height: 100%;
    width: 38%;
    background: var(--amber);
    border-radius: 1px;
  }

  /* RIGHT: full-height turntable */
  body.page-concepts #c03 .c03__right {
    position: relative;
    overflow: hidden;
  }

  body.page-concepts #c03 .c03__turntable {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
  }

  /* Wood plinth */
  body.page-concepts #c03 .c03__plinth {
    flex: 1;
    background: linear-gradient(170deg, #2c1f12 0%, #1a1108 40%, #241a0d 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.page-concepts #c03 .c03__plinth-wood-grain {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(92deg,
        transparent 0px, transparent 18px,
        rgba(255, 255, 255, 0.012) 18px, rgba(255, 255, 255, 0.012) 19px),
      repeating-linear-gradient(88deg,
        transparent 0px, transparent 35px,
        rgba(255, 255, 255, 0.008) 35px, rgba(255, 255, 255, 0.008) 36px);
  }

  /* TT Platter */
  body.page-concepts #c03 .c03__tt-platter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(72%, 340px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #333, #111);
    box-shadow: 0 0 0 6px #1a1a1a, 0 0 0 8px #222, 0 30px 60px rgba(0, 0, 0, 0.5);
  }

  body.page-concepts #c03 .c03__tt-disc {
    position: absolute;
    inset: 3%;
    border-radius: 50%;
    background: #111;
    animation: disc-spin 22s linear infinite;
  }

  body.page-concepts #c03 .c03__tt-grooves {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at 50% 50%,
        transparent 0, transparent 10px,
        rgba(255, 255, 255, 0.04) 10px, rgba(255, 255, 255, 0.04) 11px);
  }

  body.page-concepts #c03 .c03__tt-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, var(--amber), var(--rust));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    gap: 0.2rem;
  }

  body.page-concepts #c03 .c03__tt-brand {
    font-family: 'Space Mono', monospace;
    font-size: 0.38rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(247, 244, 235, 0.7);
  }

  body.page-concepts #c03 .c03__tt-rpm {
    font-family: 'Fraunces', serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--cream);
  }

  body.page-concepts #c03 .c03__tt-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14%;
    height: 14%;
    border-radius: 50%;
    background: #080808;
    z-index: 5;
  }

  /* Tonearm assembly */
  body.page-concepts #c03 .c03__tt-arm-assy {
    position: absolute;
    top: 10%;
    right: 10%;
    z-index: 10;
  }

  body.page-concepts #c03 .c03__tt-arm-base {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #bbb, #444);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }

  body.page-concepts #c03 .c03__tt-arm {
    position: absolute;
    top: 9px;
    left: 9px;
    transform-origin: 0 0;
    transform: rotate(-30deg);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body.page-concepts #c03 .c03__tt-arm.playing {
    transform: rotate(15deg);
  }

  body.page-concepts #c03 .c03__tt-arm-bar {
    width: 2px;
    height: 100px;
    background: linear-gradient(to bottom, #bbb, #777);
  }

  body.page-concepts #c03 .c03__tt-arm-head {
    position: absolute;
    bottom: 0;
    left: -5px;
    width: 12px;
    height: 8px;
    background: #aaa;
    border-radius: 2px;
  }

  /* Speed buttons */
  body.page-concepts #c03 .c03__speed-btns {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    gap: 0.5rem;
  }

  body.page-concepts #c03 .c03__speed-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1e1e1e;
    border: 1px solid #333;
    color: rgba(247, 244, 235, 0.3);
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  body.page-concepts #c03 .c03__speed-btn--active {
    background: var(--amber);
    border-color: var(--amber);
    color: var(--ink);
  }

  /* Speaker grille fills the bottom */
  body.page-concepts #c03 .c03__speaker-grille {
    height: 100px;
    background: linear-gradient(180deg, #181808 0%, #1a1a0a 100%);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }

  body.page-concepts #c03 .c03__grille-dot-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(247, 244, 235, 0.12) 1px, transparent 1px);
    background-size: 12px 12px;
    background-position: 6px 6px;
  }


  /* ═══════════════════════════════════════════════
   CONCEPT 04 · THE TYPOGRAPHIC SPLIT TENSION
   ═══════════════════════════════════════════════ */
  body.page-concepts #c04 {
    display: flex;
    flex-direction: column;
  }

  body.page-concepts #c04 .c04__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
  }

  /* LEFT PANEL — dark ink */
  body.page-concepts #c04 .c04__left {
    background: var(--ink);
    position: relative;
    overflow: hidden;
  }

  body.page-concepts #c04 .c04__left::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
        transparent 0px, transparent 59px,
        rgba(255, 255, 255, 0.025) 59px, rgba(255, 255, 255, 0.025) 60px);
    pointer-events: none;
  }

  body.page-concepts #c04 .c04__left-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 3rem 4rem;
  }

  /* Left top bar */
  body.page-concepts #c04 .c04__top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(247, 244, 235, 0.1);
    flex-shrink: 0;
  }

  body.page-concepts #c04 .c04__logo {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--cream);
    letter-spacing: -0.01em;
  }

  body.page-concepts #c04 .c04__est {
    font-family: 'Space Mono', monospace;
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(247, 244, 235, 0.25);
  }

  /* Giant stacked type */
  body.page-concepts #c04 .c04__type-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }

  body.page-concepts #c04 .c04__type-row {
    font-family: 'Bebas Neue', sans-serif;
    line-height: 0.88;
    color: var(--cream);
    display: block;
  }

  body.page-concepts #c04 .c04__type-row--1 {
    font-size: clamp(5rem, 9vw, 10rem);
  }

  body.page-concepts #c04 .c04__type-row--2 {
    font-size: clamp(5rem, 9vw, 10rem);
    color: transparent;
    -webkit-text-stroke: 2px rgba(247, 244, 235, 0.25);
  }

  body.page-concepts #c04 .c04__type-row--2 em {
    font-style: italic;
  }

  body.page-concepts #c04 .c04__type-row--3 {
    font-size: clamp(5rem, 9vw, 10rem);
    color: var(--amber);
  }

  body.page-concepts #c04 .c04__type-divider {
    width: 4rem;
    height: 2px;
    background: var(--amber);
    margin: 1.5rem 0;
  }

  body.page-concepts #c04 .c04__sub-type {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.1rem, 1.8vw, 2rem);
    color: rgba(247, 244, 235, 0.45);
    line-height: 1.4;
  }

  /* CTA block */
  body.page-concepts #c04 .c04__cta-block {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(247, 244, 235, 0.1);
  }

  body.page-concepts #c04 .c04__bottom-nav {
    display: flex;
    gap: 2rem;
  }

  body.page-concepts #c04 .c04__bottom-nav a {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(247, 244, 235, 0.3);
    transition: color 0.2s;
  }

  body.page-concepts #c04 .c04__bottom-nav a:hover {
    color: rgba(247, 244, 235, 0.8);
  }

  /* RIGHT PANEL — cream, vinyl interactive */
  body.page-concepts #c04 .c04__right {
    background: var(--cream);
    position: relative;
    overflow: hidden;
  }

  body.page-concepts #c04 .c04__right::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(200, 148, 74, 0.06) 0%, transparent 70%);
    pointer-events: none;
  }

  body.page-concepts #c04 .c04__right-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 3rem 3.5rem;
  }

  /* Meta top */
  body.page-concepts #c04 .c04__record-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }

  body.page-concepts #c04 .c04__meta-live {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Jost', sans-serif;
    font-size: 0.72rem;
    color: var(--ink);
    opacity: 0.45;
  }

  body.page-concepts #c04 .c04__meta-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--amber);
    animation: pulse 2s ease-in-out infinite;
  }

  body.page-concepts #c04 .c04__meta-side {
    font-family: 'Space Mono', monospace;
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.3;
  }

  /* Vinyl arena */
  body.page-concepts #c04 .c04__vinyl-arena {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  body.page-concepts #c04 .c04__vinyl-disc {
    width: min(75%, 400px);
    aspect-ratio: 1;
    border-radius: 50%;
    position: relative;
    cursor: grab;
    user-select: none;
    filter: drop-shadow(0 20px 50px rgba(30, 32, 34, 0.25));
    transition: filter 0.3s;
  }

  body.page-concepts #c04 .c04__vinyl-disc:hover {
    filter: drop-shadow(0 28px 60px rgba(30, 32, 34, 0.35));
  }

  body.page-concepts #c04 .c04__vinyl-disc:active {
    cursor: grabbing;
  }

  body.page-concepts #c04 .c04__vinyl-surface {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(#161616 0deg, #1e1e1e 4deg, #161616 8deg, #1e1e1e 12deg,
        #161616 16deg, #1e1e1e 20deg, #161616 24deg, #1e1e1e 28deg,
        #161616 32deg, #1e1e1e 36deg, #161616 40deg, #1e1e1e 44deg,
        #161616 48deg, #1e1e1e 52deg, #161616 56deg, #1e1e1e 60deg,
        #161616 64deg, #1e1e1e 68deg, #161616 72deg, #1e1e1e 76deg,
        #161616 80deg, #1e1e1e 84deg, #161616 88deg, #1e1e1e 92deg,
        #161616 96deg, #1e1e1e 100deg, #161616 104deg, #1e1e1e 108deg,
        #161616 112deg, #1e1e1e 116deg, #161616 120deg, #1e1e1e 124deg,
        #161616 128deg, #1e1e1e 132deg, #161616 136deg, #1e1e1e 140deg,
        #161616 144deg, #1e1e1e 148deg, #161616 152deg, #1e1e1e 156deg,
        #161616 160deg, #1e1e1e 164deg, #161616 168deg, #1e1e1e 172deg,
        #161616 176deg, #1e1e1e 180deg, #161616 184deg, #1e1e1e 188deg,
        #161616 192deg, #1e1e1e 196deg, #161616 200deg, #1e1e1e 204deg,
        #161616 208deg, #1e1e1e 212deg, #161616 216deg, #1e1e1e 220deg,
        #161616 224deg, #1e1e1e 228deg, #161616 232deg, #1e1e1e 236deg,
        #161616 240deg, #1e1e1e 244deg, #161616 248deg, #1e1e1e 252deg,
        #161616 256deg, #1e1e1e 260deg, #161616 264deg, #1e1e1e 268deg,
        #161616 272deg, #1e1e1e 276deg, #161616 280deg, #1e1e1e 284deg,
        #161616 288deg, #1e1e1e 292deg, #161616 296deg, #1e1e1e 300deg,
        #161616 304deg, #1e1e1e 308deg, #161616 312deg, #1e1e1e 316deg,
        #161616 320deg, #1e1e1e 324deg, #161616 328deg, #1e1e1e 332deg,
        #161616 336deg, #1e1e1e 340deg, #161616 344deg, #1e1e1e 348deg,
        #161616 352deg, #1e1e1e 356deg, #161616 360deg);
    position: relative;
  }

  body.page-concepts #c04 .c04__vinyl-groove-rings {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at 50% 50%,
        transparent 0, transparent 13px,
        rgba(255, 255, 255, 0.04) 13px, rgba(255, 255, 255, 0.04) 14px);
  }

  body.page-concepts #c04 .c04__vinyl-label-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32%;
    height: 32%;
    z-index: 2;
  }

  body.page-concepts #c04 .c04__vinyl-label-disc {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, var(--amber), var(--rust));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    position: relative;
  }

  body.page-concepts #c04 .c04__vinyl-cat {
    font-family: 'Space Mono', monospace;
    font-size: 0.38rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(247, 244, 235, 0.55);
  }

  body.page-concepts #c04 .c04__vinyl-name {
    font-family: 'Fraunces', serif;
    font-size: 0.68rem;
    font-weight: 700;
    font-style: italic;
    color: var(--cream);
    text-align: center;
    line-height: 1.1;
  }

  body.page-concepts #c04 .c04__vinyl-center-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12%;
    height: 12%;
    border-radius: 50%;
    background: #0a0a0a;
    z-index: 5;
  }

  /* Scroll hint */
  body.page-concepts #c04 .c04__scroll-hint {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.3;
    animation: bounce-y 2s ease-in-out infinite;
  }

  @keyframes bounce-y {

    0%,
    100% {
      transform: translateX(-50%) translateY(0);
    }

    50% {
      transform: translateX(-50%) translateY(4px);
    }
  }

  /* Tag cloud */
  body.page-concepts #c04 .c04__tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    flex-shrink: 0;
  }

  body.page-concepts #c04 .c04__tag {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.45rem 1.1rem;
    border: 1.5px solid var(--ink-30);
    color: var(--ink);
    opacity: 0.5;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s;
  }

  body.page-concepts #c04 .c04__tag:hover {
    opacity: 1;
    border-color: var(--ink);
  }

  body.page-concepts #c04 .c04__tag--filled {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
    opacity: 1;
  }


  /* ═══════════════════════════════════════════════
   CONCEPT 05 · THE INTERACTIVE AMBIENT OVERLAY
   ═══════════════════════════════════════════════ */
  body.page-index #c05, body.page-concepts #c05 {
    background: #18140e;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Ambient glows */
  body.page-index #c05 .c05__ambient-glow, body.page-concepts #c05 .c05__ambient-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    filter: blur(80px);
  }

  body.page-index #c05 .c05__ambient-glow--main, body.page-concepts #c05 .c05__ambient-glow--main {
    width: 80vw;
    height: 80vw;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(200, 148, 74, 0.15) 0%, transparent 65%);
  }

  body.page-index #c05 .c05__ambient-glow--secondary, body.page-concepts #c05 .c05__ambient-glow--secondary {
    width: 50vw;
    height: 50vw;
    bottom: -10%;
    right: -10%;
    background: radial-gradient(circle, rgba(158, 126, 92, 0.08) 0%, transparent 60%);
  }

  /* LAYER 0: Vinyl canvas — massive, bleeds edges */
  body.page-index #c05 .c05__vinyl-canvas, body.page-concepts #c05 .c05__vinyl-canvas {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
  }

  body.page-index #c05 .c05__vinyl-mega, body.page-concepts #c05 .c05__vinyl-mega {
    width: min(100vh, 90vw);
    height: min(100vh, 90vw);
    position: relative;
    animation: disc-spin 40s linear infinite;
    opacity: 0.9;
  }

  body.page-index #c05 .c05__vinyl-mega-body, body.page-concepts #c05 .c05__vinyl-mega-body {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(#141414 0deg, #1c1c1c 3deg, #141414 6deg, #1c1c1c 9deg,
        #141414 12deg, #1c1c1c 15deg, #141414 18deg, #1c1c1c 21deg,
        #141414 24deg, #1c1c1c 27deg, #141414 30deg, #1c1c1c 33deg,
        #141414 36deg, #1c1c1c 39deg, #141414 42deg, #1c1c1c 45deg,
        #141414 48deg, #1c1c1c 51deg, #141414 54deg, #1c1c1c 57deg,
        #141414 60deg, #1c1c1c 63deg, #141414 66deg, #1c1c1c 69deg,
        #141414 72deg, #1c1c1c 75deg, #141414 78deg, #1c1c1c 81deg,
        #141414 84deg, #1c1c1c 87deg, #141414 90deg, #1c1c1c 93deg,
        #141414 96deg, #1c1c1c 99deg, #141414 102deg, #1c1c1c 105deg,
        #141414 108deg, #1c1c1c 111deg, #141414 114deg, #1c1c1c 117deg,
        #141414 120deg, #1c1c1c 123deg, #141414 126deg, #1c1c1c 129deg,
        #141414 132deg, #1c1c1c 135deg, #141414 138deg, #1c1c1c 141deg,
        #141414 144deg, #1c1c1c 147deg, #141414 150deg, #1c1c1c 153deg,
        #141414 156deg, #1c1c1c 159deg, #141414 162deg, #1c1c1c 165deg,
        #141414 168deg, #1c1c1c 171deg, #141414 174deg, #1c1c1c 177deg,
        #141414 180deg, #1c1c1c 183deg, #141414 186deg, #1c1c1c 189deg,
        #141414 192deg, #1c1c1c 195deg, #141414 198deg, #1c1c1c 201deg,
        #141414 204deg, #1c1c1c 207deg, #141414 210deg, #1c1c1c 213deg,
        #141414 216deg, #1c1c1c 219deg, #141414 222deg, #1c1c1c 225deg,
        #141414 228deg, #1c1c1c 231deg, #141414 234deg, #1c1c1c 237deg,
        #141414 240deg, #1c1c1c 243deg, #141414 246deg, #1c1c1c 249deg,
        #141414 252deg, #1c1c1c 255deg, #141414 258deg, #1c1c1c 261deg,
        #141414 264deg, #1c1c1c 267deg, #141414 270deg, #1c1c1c 273deg,
        #141414 276deg, #1c1c1c 279deg, #141414 282deg, #1c1c1c 285deg,
        #141414 288deg, #1c1c1c 291deg, #141414 294deg, #1c1c1c 297deg,
        #141414 300deg, #1c1c1c 303deg, #141414 306deg, #1c1c1c 309deg,
        #141414 312deg, #1c1c1c 315deg, #141414 318deg, #1c1c1c 321deg,
        #141414 324deg, #1c1c1c 327deg, #141414 330deg, #1c1c1c 333deg,
        #141414 336deg, #1c1c1c 339deg, #141414 342deg, #1c1c1c 345deg,
        #141414 348deg, #1c1c1c 351deg, #141414 354deg, #1c1c1c 357deg,
        #141414 360deg);
    position: relative;
  }

  body.page-index #c05 .c05__vinyl-mega-grooves, body.page-concepts #c05 .c05__vinyl-mega-grooves {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at 50% 50%,
        transparent 0, transparent 10px,
        rgba(255, 255, 255, 0.03) 10px, rgba(255, 255, 255, 0.03) 11px);
  }

  /* Concentric glow rings */
  body.page-index #c05 .c05__glow-rings, body.page-concepts #c05 .c05__glow-rings {
    position: absolute;
    inset: 0;
    border-radius: 50%;
  }

  body.page-index #c05 .c05__glow-ring, body.page-concepts #c05 .c05__glow-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(200, 148, 74, 0.12);
  }

  body.page-index #c05 .c05__glow-ring--1, body.page-concepts #c05 .c05__glow-ring--1 {
    inset: 15%;
    box-shadow: 0 0 30px rgba(200, 148, 74, 0.06);
  }

  body.page-index #c05 .c05__glow-ring--2, body.page-concepts #c05 .c05__glow-ring--2 {
    inset: 30%;
    box-shadow: 0 0 40px rgba(200, 148, 74, 0.08);
  }

  body.page-index #c05 .c05__glow-ring--3, body.page-concepts #c05 .c05__glow-ring--3 {
    inset: 42%;
    box-shadow: 0 0 60px rgba(200, 148, 74, 0.12);
  }

  body.page-index #c05 .c05__vinyl-mega-label, body.page-concepts #c05 .c05__vinyl-mega-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18%;
    height: 18%;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, var(--amber), var(--rust));
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 40px rgba(200, 148, 74, 0.25);
  }

  body.page-index #c05 .c05__mega-label-inner, body.page-concepts #c05 .c05__mega-label-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
  }

  body.page-index #c05 .c05__mega-brand, body.page-concepts #c05 .c05__mega-brand {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  body.page-index #c05 .c05__mega-brand text, body.page-concepts #c05 .c05__mega-brand text {
    fill: rgba(247, 244, 235, 0.7);
    font-family: 'Space Mono', monospace;
    font-size: 5.75px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  body.page-index #c05 .c05__mega-hole, body.page-concepts #c05 .c05__mega-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22%;
    height: 22%;
    border-radius: 50%;
    background: #0a0808;
    z-index: 5;
  }

  /* LAYER 1: Header */
  body.page-index #c05 .c05__header, body.page-concepts #c05 .c05__header {
    position: relative;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 4rem;
    border-bottom: 1px solid rgba(247, 244, 235, 0.08);
    flex-shrink: 0;
  }

  body.page-index #c05 .c05__header-left, body.page-concepts #c05 .c05__header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  body.page-index #c05 .c05__header-logo, body.page-concepts #c05 .c05__header-logo {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--cream);
    letter-spacing: -0.01em;
  }

  body.page-index #c05 .c05__header-slash, body.page-concepts #c05 .c05__header-slash {
    font-family: 'Fraunces', serif;
    font-weight: 100;
    font-size: 1.5rem;
    color: rgba(247, 244, 235, 0.2);
  }

  body.page-index #c05 .c05__header-sub, body.page-concepts #c05 .c05__header-sub {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(247, 244, 235, 0.55);
  }

  body.page-index #c05 .c05__header-nav, body.page-concepts #c05 .c05__header-nav {
    display: flex;
    gap: 2.5rem;
  }

  body.page-index #c05 .c05__header-nav a, body.page-concepts #c05 .c05__header-nav a {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(247, 244, 235, 0.58);
    transition: color 0.2s;
  }

  body.page-index #c05 .c05__header-nav a:hover, body.page-concepts #c05 .c05__header-nav a:hover {
    color: var(--cream);
  }

  body.page-index #c05 .c05__header-cta, body.page-concepts #c05 .c05__header-cta {
    font-family: 'Jost', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.6rem 1.6rem;
    border: 1.5px solid rgba(247, 244, 235, 0.25);
    color: var(--cream);
    transition: background 0.2s, border-color 0.2s;
  }

  body.page-index #c05 .c05__header-cta, body.page-concepts #c05 .c05__header-cta:hover {
    background: rgba(247, 244, 235, 0.08);
    border-color: rgba(247, 244, 235, 0.5);
  }

  /* LAYER 2: Giant type overlay */
  body.page-index #c05 .c05__type-overlay, body.page-concepts #c05 .c05__type-overlay {
    position: relative;
    z-index: 20;
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 0 4rem;
    gap: 4rem;
  }

  body.page-index #c05 .c05__type-left, body.page-concepts #c05 .c05__type-left {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-self: start;
  }

  body.page-index #c05 .c05__type-tag, body.page-concepts #c05 .c05__type-tag {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--amber);
  }

  body.page-index #c05 .c05__type-dot, body.page-concepts #c05 .c05__type-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--amber);
    animation: pulse 2s ease-in-out infinite;
  }

  body.page-index #c05 .c05__mega-title, body.page-concepts #c05 .c05__mega-title {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  body.page-index #c05 .c05__mega-line, body.page-concepts #c05 .c05__mega-line {
    display: block;
    font-family: 'Unbounded', sans-serif;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.04em;
  }

  body.page-index #c05 .c05__mega-line--1, body.page-concepts #c05 .c05__mega-line--1 {
    font-size: clamp(4rem, 9vw, 10rem);
    color: var(--cream);
  }

  body.page-index #c05 .c05__mega-line--2, body.page-concepts #c05 .c05__mega-line--2 {
    font-size: clamp(4rem, 9vw, 10rem);
    color: transparent;
    -webkit-text-stroke: 2px rgba(247, 244, 235, 0.35);
  }

  body.page-index #c05 .c05__mega-line--3, body.page-concepts #c05 .c05__mega-line--3 {
    font-size: clamp(4rem, 9vw, 10rem);
    color: var(--amber);
  }

  body.page-index #c05 .c05__type-right, body.page-concepts #c05 .c05__type-right {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    justify-self: end;
    align-items: flex-end;
    text-align: right;
    max-width: 43ch;
  }

  body.page-index #c05 .c05__type-body, body.page-concepts #c05 .c05__type-body {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.05rem;
    line-height: 1.9;
    color: rgba(247, 244, 235, 0.45);
  }

  /* LAYER 3: Status bar */
  body.page-index #c05 .c05__status-bar, body.page-concepts #c05 .c05__status-bar {
    position: relative;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 4rem;
    border-top: 1px solid rgba(247, 244, 235, 0.08);
    background: rgba(20, 16, 10, 0.6);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
  }

  body.page-index #c05 .c05__status-left, body.page-concepts #c05 .c05__status-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  body.page-index #c05 .c05__status-tag, body.page-concepts #c05 .c05__status-tag {
    font-family: 'Space Mono', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--amber);
    flex-shrink: 0;
  }

  body.page-index #c05 .c05__status-track, body.page-concepts #c05 .c05__status-track {
    font-family: 'Jost', sans-serif;
    font-size: 0.72rem;
    color: rgba(247, 244, 235, 0.62);
  }

  body.page-index #c05 .c05__status-genres, body.page-concepts #c05 .c05__status-genres {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-family: 'Jost', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: rgba(247, 244, 235, 0.5);
  }

  body.page-index #c05 .c05__sep, body.page-concepts #c05 .c05__sep {
    color: rgba(247, 244, 235, 0.38);
  }


/* ══════════════════════════════════════════════════════════
   HERO CONCEPTS — RESPONSIVE < 1024px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
/* ── CONCEPT 01 ── */
    body.page-concepts #c01 .c01__grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto auto;
      grid-template-areas:
        "headline"
        "sleeve"
        "body"
        "ticker";
    }

    body.page-concepts #c01 .c01__nav {
      padding: 1.5rem 1.5rem;
    }

    body.page-concepts #c01 .c01__nav-links {
      display: none;
    }

    body.page-concepts #c01 .c01__headline-block {
      padding: 2rem 1.5rem 0;
    }

    body.page-concepts #c01 .c01__title-line--1,
    body.page-concepts #c01 .c01__title-line--2,
    body.page-concepts #c01 .c01__title-line--3 {
      font-size: clamp(4rem, 18vw, 6rem);
    }

    body.page-concepts #c01 .c01__sleeve-col {
      grid-row: auto;
      min-height: 65vw;
    }

    body.page-concepts #c01 .c01__sleeve {
      position: relative;
      height: 65vw;
    }

    body.page-concepts #c01 .c01__disc-peek {
      width: 65%;
      top: -5%;
      right: -5%;
    }

    body.page-concepts #c01 .c01__body-col {
      padding: 2rem 1.5rem;
    }

    body.page-concepts #c01 .c01__cta-block {
      flex-direction: column;
      align-items: flex-start;
      gap: 2rem;
    }

    body.page-concepts #c01 .c01__ticker-bar {
      padding: 0.75rem 1.5rem;
    }

    /* ── CONCEPT 02 ── */
    body.page-concepts #c02 .c02__header {
      padding: 1.2rem 1.5rem;
      flex-wrap: wrap;
      gap: 1rem;
    }

    body.page-concepts #c02 .c02__header-nav {
      display: none;
    }

    body.page-concepts #c02 .c02__bento {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      padding: 8px 1rem 2rem;
      gap: 8px;
    }

    body.page-concepts #c02 .c02__cell--headline {
      min-height: 55vw;
    }

    body.page-concepts #c02 .c02__cell--vinyl {
      min-height: 80vw;
      grid-column: auto;
      grid-row: auto;
    }

    body.page-concepts #c02 .c02__cell--track {
      min-height: 38vw;
    }

    body.page-concepts #c02 .c02__cell--controls {
      min-height: 35vw;
    }

    body.page-concepts #c02 .c02__cell--genres {
      min-height: 50vw;
    }

    body.page-concepts #c02 .c02__cell--stat {
      min-height: 30vw;
    }

    body.page-concepts #c02 .c02__cell-inner {
      padding: 2rem 2rem;
    }

    body.page-concepts #c02 .c02__big-heading {
      font-size: clamp(2.5rem, 11vw, 4.5rem);
    }

    /* ── CONCEPT 03 ── */
    body.page-concepts #c03 .c03__header {
      padding: 1.5rem 1.5rem;
      flex-wrap: wrap;
      gap: 0.8rem;
    }

    body.page-concepts #c03 .c03__header-rule {
      display: none;
    }

    body.page-concepts #c03 .c03__header-nav {
      margin-left: 0;
    }

    body.page-concepts #c03 .c03__header-freq {
      display: none;
    }

    body.page-concepts #c03 .c03__dashboard {
      grid-template-columns: 1fr;
    }

    body.page-concepts #c03 .c03__left {
      padding: 2rem 1.5rem;
      border-right: none;
      border-bottom: 1px solid var(--ink-10);
    }

    body.page-concepts #c03 .c03__giant-title span {
      font-size: clamp(3.5rem, 14vw, 6rem);
    }

    body.page-concepts #c03 .c03__cta-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
    }

    body.page-concepts #c03 .c03__right {
      min-height: 85vw;
    }

    body.page-concepts #c03 .c03__plinth {
      min-height: 85vw;
    }

    body.page-concepts #c03 .c03__tt-platter {
      width: min(65%, 280px);
    }

    body.page-concepts #c03 .c03__speaker-grille {
      height: 60px;
    }

    /* ── CONCEPT 04 ── */
    body.page-concepts #c04 .c04__split {
      grid-template-columns: 1fr;
    }

    body.page-concepts #c04 .c04__left {
      min-height: auto;
    }

    body.page-concepts #c04 .c04__left-inner {
      position: relative;
      padding: 2rem 1.5rem;
    }

    body.page-concepts #c04 .c04__type-row--1,
    body.page-concepts #c04 .c04__type-row--2,
    body.page-concepts #c04 .c04__type-row--3 {
      font-size: clamp(4rem, 18vw, 7rem);
    }

    body.page-concepts #c04 .c04__right {
      min-height: 90vw;
    }

    body.page-concepts #c04 .c04__right-inner {
      position: relative;
      padding: 2rem 1.5rem;
    }

    body.page-concepts #c04 .c04__vinyl-arena {
      min-height: 70vw;
    }

    body.page-concepts #c04 .c04__vinyl-disc {
      width: min(70%, 300px);
    }

    /* ── CONCEPT 05 ── */
    body.page-index #c05 .c05__header, body.page-concepts #c05 .c05__header {
      padding: 1.5rem 1.5rem;
    }

    body.page-index #c05 .c05__header-nav, body.page-concepts #c05 .c05__header-nav {
      display: none;
    }

    body.page-index #c05 .c05__header-sub, body.page-concepts #c05 .c05__header-sub {
      display: none;
    }

    body.page-index #c05 .c05__header-slash, body.page-concepts #c05 .c05__header-slash {
      display: none;
    }

    body.page-index #c05 .c05__type-overlay, body.page-concepts #c05 .c05__type-overlay {
      grid-template-columns: 1fr;
      padding: 2rem 1.5rem;
      gap: 3rem;
      align-items: flex-start;
    }

    body.page-index #c05 .c05__mega-line--1, body.page-concepts #c05 .c05__mega-line--1,
    body.page-index #c05 .c05__mega-line--2, body.page-concepts #c05 .c05__mega-line--2,
    body.page-index #c05 .c05__mega-line--3, body.page-concepts #c05 .c05__mega-line--3 {
      font-size: clamp(3rem, 14vw, 6rem);
    }

    body.page-index #c05 .c05__status-bar, body.page-concepts #c05 .c05__status-bar {
      padding: 1rem 1.5rem;
    }

    body.page-index #c05 .c05__status-right, body.page-concepts #c05 .c05__status-right {
      display: none;
    }

    body.page-index #c05 .c05__type-right, body.page-concepts #c05 .c05__type-right {
      justify-self: stretch;
      align-items: flex-start;
      text-align: left;
      max-width: none;
    }

    body.page-index #c05 .c05__vinyl-mega, body.page-concepts #c05 .c05__vinyl-mega {
      width: 130vw;
      height: 130vw;
      opacity: 0.4;
    }
  }

/* ══════════════════════════════════════════════════════════
   FULLY RESPONSIVE — MOBILE < 1024px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  :root {
    --section-pad-x: 1.5rem;
    --section-pad-y: 4rem;
  }

  /* ── CURSOR: hide custom cursor, restore native ── */
  body.page-index { cursor: auto; }
  body.page-index button { cursor: pointer; }
  body.page-index a { cursor: pointer; }
  body.page-index .cursor-ring,
  body.page-index .cursor-dot { display: none; }

  /* ── NAV ── */
  .hero__nav-center,
  .hero__nav-right,
  .hero__nav-sep,
  .hero__nav-sub { display: none; }
  .hero__hamburger { display: flex; }
  .hero__nav { padding: 1.5rem var(--section-pad-x); }

  /* ── HERO BODY ── */
  .hero__body {
    grid-template-columns: 1fr;
    padding: 2.5rem var(--section-pad-x) 2rem;
    gap: 2.5rem;
  }

  /* Vinyl first on mobile */
  .hero__vinyl-col { order: -1; }
  .hero__vinyl-stage {
    width: min(78vw, 340px);
    height: min(78vw, 340px);
    margin: 0 auto;
  }

  .hero__title-line { font-size: clamp(3rem, 15vw, 5.5rem); }

  .hero__tags { gap: 0.45rem; }
  .tag { font-size: 0.62rem; padding: 0.45rem 1rem; }

  .hero__status-bar { display: none; }

  /* ── PHILOSOPHY ── */
  .philosophy { padding: var(--section-pad-y) var(--section-pad-x); }
  .philosophy__label-bar { margin-bottom: 3rem; }
  .philosophy__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .philosophy__visual { order: 2; }
  .philosophy__copy { order: 1; gap: 2rem; }
  .philosophy__heading-line { font-size: clamp(2.5rem, 12vw, 4.5rem); }
  .philosophy__heading-line--light { font-size: clamp(1.1rem, 5vw, 2rem); }
  .philosophy__stats-grid { flex-direction: column; gap: 0; }
  .philosophy__stat {
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--dark-border);
  }
  .philosophy__stat:last-child { border-bottom: none; }
  .philosophy__stat-divider { display: none; }

  /* ── FEATURES ── */
  .features__header {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }
  .features__heading { font-size: clamp(2.5rem, 10vw, 4rem); }
  .features__grid {
    grid-template-columns: 1fr;
    gap: 0;
    border: none;
  }
  .feature-card {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--dark-border);
    border-bottom: 1px solid var(--dark-border);
    padding: 2.5rem var(--section-pad-x);
  }
  .feature-card:hover { transform: none; }
  .feature-card__title { font-size: clamp(2rem, 8vw, 3rem); }
  .features__cta-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    margin-top: 2rem;
    padding: 1.5rem var(--section-pad-x);
  }
  .btn-features-cta { width: 100%; justify-content: center; }

  /* ── FOOTER ── */
  .site-footer { padding: 4rem var(--section-pad-x) 2.5rem; }
  .site-footer__top { flex-direction: column; gap: 2rem; }
  .site-footer__nav-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .site-footer__live-stat { width: 100%; max-width: 100%; }

}

@media (max-width: 480px) {
  .site-footer__nav-grid { grid-template-columns: 1fr; }
  .hero__title-line { font-size: clamp(2.6rem, 14vw, 4rem); }
  .btn-hero-cta { width: 100%; justify-content: center; }
  .btn-philosophy { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════
   PLAYER PAGE — player.html
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  html:has(body.page-player),
  body.page-player { overflow-y: auto; cursor: auto; }
  body.page-player button { cursor: pointer; }
  body.page-player input[type="range"] { cursor: pointer; }
}

/* ══════════════════════════════════════════════════════════
   CUSTOM CURSOR — player
    ══════════════════════════════════════════════════════════ */
    body.page-player .cursor-ring {
      position: fixed; top: 0; left: 0;
      width: 36px; height: 36px;
      border: 1.5px solid var(--amber);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%,-50%);
      transition: width .22s ease, height .22s ease, border-color .22s ease, opacity .3s ease, transform .06s ease;
      opacity: 0;
      mix-blend-mode: normal;
      will-change: transform;
    }
    body.page-player .cursor-dot {
      position: fixed; top: 0; left: 0;
      width: 5px; height: 5px;
      background: var(--amber);
      border-radius: 50%;
      pointer-events: none;
      z-index: 10000;
      transform: translate(-50%,-50%);
      opacity: 0;
      transition: opacity .3s ease;
    }
    body.page-player .cursor-ring.vis,
    body.page-player .cursor-dot.vis { opacity: 1; }
    body.page-player .cursor-ring.hover { width: 52px; height: 52px; border-color: var(--cream); border-width: 1px; }
    body.page-player .cursor-ring.press { width: 24px; height: 24px; }
    @media (max-width:1023px) {
      body.page-player .cursor-ring,
      body.page-player .cursor-dot { display: none; }
    }

    /* ══════════════════════════════════════════════════════════
       FILM GRAIN — page-wide
    ══════════════════════════════════════════════════════════ */
    body.page-player .page-grain {
      position: fixed; inset: 0;
      z-index: 9998;
      pointer-events: none;
      opacity: .28;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
      background-repeat: repeat;
    }

    /* ══════════════════════════════════════════════════════════
       AMBIENT BACKGROUND GLOWS
    ══════════════════════════════════════════════════════════ */
    .bg-glow {
      position: fixed;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
      transition: opacity 2.5s ease, transform 3s ease;
    }
    .bg-glow--main {
      width: 90vw; height: 90vw;
      top: 50%; left: 50%;
      transform: translate(-50%,-50%) scale(0.6);
      background: radial-gradient(circle, rgba(200,148,74,0.10) 0%, transparent 65%);
      filter: blur(80px);
      opacity: 0;
    }
    .bg-glow--tl {
      width: 60vw; height: 60vw;
      top: -20%; left: -15%;
      background: radial-gradient(circle, rgba(158,126,92,0.06) 0%, transparent 70%);
      filter: blur(100px);
    }
    .bg-glow--br {
      width: 50vw; height: 50vw;
      bottom: -15%; right: -10%;
      background: radial-gradient(circle, rgba(200,148,74,0.05) 0%, transparent 65%);
      filter: blur(90px);
    }
    body.page-player.playing .bg-glow--main {
      opacity: 1;
      transform: translate(-50%,-50%) scale(1);
    }

    /* ══════════════════════════════════════════════════════════
       LAYOUT GRID — 3-column asymmetric
       [left-strip | center-stage | right-strip]
    ══════════════════════════════════════════════════════════ */
    .player-shell {
      position: relative;
      width: 100vw;
      min-height: 100vh;
      height: 100vh;
      display: grid;
      grid-template-columns: 5rem 1fr 5rem;
      grid-template-rows: auto minmax(0, 1fr) auto;
      grid-template-areas:
        "hd-l  header  hd-r"
        "lft   stage   rgt"
        "ft-l  footer  ft-r";
      z-index: 10;
      overflow: hidden;
    }

    /* ── HEADER ── */
    .pl-header {
      grid-area: header;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.8rem 3rem;
      border-bottom: 1px solid var(--border);
      position: relative;
      z-index: 20;
    }
    .pl-header__left { display: flex; align-items: center; gap: 1rem; }
    .pl-header__logo {
      font-family: var(--font-serif);
      font-weight: 700;
      font-size: 1.1rem;
      letter-spacing: -0.01em;
      color: var(--cream-dim);
    }
    .pl-header__logo-accent { color: var(--amber); }
    .pl-header__sep {
      font-family: var(--font-serif);
      font-weight: 100;
      font-size: 1.4rem;
      color: var(--cream-trace);
      line-height: 1;
    }
    .pl-header__sub {
      font-family: var(--font-mono);
      font-size: 0.52rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--cream-ghost);
    }
    .pl-header__right { display: flex; align-items: center; gap: 1.5rem; }
    .pl-header__back {
      font-family: var(--font-ui);
      font-weight: 300;
      font-size: 0.66rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--cream-ghost);
      display: flex; align-items: center; gap: 0.5rem;
      transition: color .25s;
    }
    .pl-header__back:hover { color: var(--cream-mid); }
    .pl-header__status {
      display: flex; align-items: center; gap: 0.55rem;
      font-family: var(--font-mono);
      font-size: 0.52rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--cream-ghost);
      transition: color .5s;
    }
    .pl-header__status-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: rgba(247,244,235,0.18);
      flex-shrink: 0;
      transition: background .5s, box-shadow .5s;
    }
    body.page-player.playing .pl-header__status-dot {
      background: var(--amber);
      box-shadow: 0 0 0 0 rgba(200,148,74,0.5);
      animation: header-dot-pulse 2.5s ease-in-out infinite;
    }
    body.page-player.playing .pl-header__status { color: var(--amber); opacity: 0.8; }
    @keyframes header-dot-pulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(200,148,74,0.4); }
      50%      { box-shadow: 0 0 0 6px rgba(200,148,74,0); }
    }
    .pl-header__status-text::before { content: 'STANDBY'; }
    body.page-player.playing .pl-header__status-text::before { content: 'ON AIR'; }
    body.page-player.session-started:not(.playing) .pl-header__status-text::before { content: 'PAUSED'; }

    .pl-header__library {
      font-family: var(--font-ui);
      font-weight: 300;
      font-size: 0.66rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--cream-ghost);
      background: rgba(247, 244, 235, 0.04);
      border: 1px solid var(--border);
      padding: 0.45rem 0.85rem;
      cursor: pointer;
      transition: color 0.25s, border-color 0.25s, background 0.25s;
    }
    .pl-header__library:hover,
    body.page-player.library-open .pl-header__library {
      color: var(--amber);
      border-color: rgba(200, 148, 74, 0.35);
      background: rgba(200, 148, 74, 0.06);
    }

    /* ── DECK SELECTOR (record picker) ── */
    body.page-player.library-open {
      overflow: hidden;
      cursor: auto;
    }
    body.page-player.library-open .cursor-ring,
    body.page-player.library-open .cursor-dot {
      display: none !important;
    }
    body.page-player.library-open .deck-panel button,
    body.page-player.library-open .deck-panel input {
      cursor: pointer;
    }

    .deck-panel {
      position: fixed;
      inset: 0;
      z-index: 500;
      pointer-events: none;
      visibility: hidden;
      transition: visibility 0.35s;
    }
    .deck-panel.is-open {
      pointer-events: auto;
      visibility: visible;
    }
    .deck-panel__backdrop {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: min(380px, 94vw);
      width: auto;
      height: auto;
      border: none;
      padding: 0;
      background: rgba(8, 6, 4, 0.75);
      opacity: 0;
      z-index: 1;
      transition: opacity 0.35s ease;
      cursor: pointer;
    }
    .deck-panel.is-open .deck-panel__backdrop {
      opacity: 1;
    }
    .deck-panel__inner {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(380px, 94vw);
      z-index: 2;
      background:
        linear-gradient(165deg, #1a1610 0%, #0e0c09 55%, #12100c 100%);
      border-left: 1px solid rgba(200, 148, 74, 0.15);
      box-shadow: -20px 0 60px rgba(0, 0, 0, 0.55), inset 1px 0 0 rgba(247, 244, 235, 0.04);
      display: grid;
      grid-template-rows: auto auto auto minmax(0, 1fr);
      transform: translateX(100%);
      transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
      overflow: hidden;
      pointer-events: auto;
    }
    .deck-panel.is-open .deck-panel__inner {
      transform: translateX(0);
    }
    .deck-panel__header {
      flex-shrink: 0;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.35rem 1.15rem 1rem;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(200, 148, 74, 0.06) 0%, transparent 100%);
    }
    .deck-panel__eyebrow {
      font-family: var(--font-mono);
      font-size: 0.48rem;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: rgba(200, 148, 74, 0.55);
      margin: 0 0 0.35rem;
    }
    .deck-panel__title {
      font-family: var(--font-serif);
      font-weight: 700;
      font-size: 1.2rem;
      color: var(--cream-dim);
      margin: 0;
      line-height: 1.1;
    }
    .deck-panel__count {
      display: block;
      margin-top: 0.35rem;
      font-family: var(--font-mono);
      font-size: 0.48rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--cream-ghost);
    }
    .deck-panel__close {
      flex-shrink: 0;
      width: 2.1rem;
      height: 2.1rem;
      border: 1px solid var(--border);
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.25);
      color: var(--cream-ghost);
      font-size: 1.2rem;
      line-height: 1;
      cursor: pointer;
      transition: color 0.2s, border-color 0.2s, background 0.2s;
    }
    .deck-panel__close:hover {
      color: var(--cream);
      border-color: rgba(200, 148, 74, 0.4);
      background: rgba(200, 148, 74, 0.08);
    }
    .deck-panel__section {
      flex-shrink: 0;
      padding: 0.85rem 1.15rem 0;
    }
    .deck-panel__section--compact {
      padding-bottom: 0.65rem;
      border-bottom: 1px solid var(--border);
    }
    .deck-panel__label {
      font-family: var(--font-mono);
      font-size: 0.46rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(247, 244, 235, 0.28);
      margin: 0 0 0.55rem;
    }
    .deck-panel__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }
    .deck-tag {
      font-family: var(--font-ui);
      font-size: 0.62rem;
      font-weight: 400;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(247, 244, 235, 0.45);
      background: rgba(0, 0, 0, 0.35);
      border: 1px solid rgba(247, 244, 235, 0.1);
      border-radius: 999px;
      padding: 0.38rem 0.65rem;
      cursor: pointer;
      transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }
    .deck-tag:hover {
      border-color: rgba(200, 148, 74, 0.35);
      color: var(--cream-mid);
    }
    .deck-tag.is-active {
      color: var(--amber);
      border-color: rgba(200, 148, 74, 0.5);
      background: rgba(200, 148, 74, 0.12);
      box-shadow: 0 0 12px rgba(200, 148, 74, 0.15);
    }
    .deck-tag__n {
      font-family: var(--font-mono);
      font-size: 0.42rem;
      opacity: 0.55;
    }
    .deck-panel__search {
      width: 100%;
      font-family: var(--font-ui);
      font-size: 0.76rem;
      font-weight: 300;
      color: var(--cream-dim);
      background: rgba(0, 0, 0, 0.35);
      border: 1px solid var(--border);
      border-radius: 2px;
      padding: 0.6rem 0.75rem;
      outline: none;
    }
    .deck-panel__search:focus {
      border-color: rgba(200, 148, 74, 0.45);
    }
    .deck-panel__search::placeholder {
      color: rgba(247, 244, 235, 0.25);
    }
    .deck-panel__tracks {
      min-height: 0;
      overflow-x: hidden;
      overflow-y: scroll;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      padding: 0.65rem 0.85rem 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }
    .deck-track {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      width: 100%;
      text-align: left;
      padding: 0.55rem 0.6rem;
      border: 1px solid rgba(247, 244, 235, 0.06);
      border-radius: 2px;
      background: rgba(0, 0, 0, 0.28);
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s, transform 0.15s;
    }
    .deck-track:hover {
      border-color: rgba(200, 148, 74, 0.28);
      background: rgba(200, 148, 74, 0.06);
    }
    .deck-track.is-active {
      border-color: rgba(200, 148, 74, 0.5);
      background: rgba(200, 148, 74, 0.1);
      box-shadow: inset 0 0 0 1px rgba(200, 148, 74, 0.12);
    }
    .deck-track__thumb {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      object-fit: cover;
      border: 1px solid var(--border);
      background: radial-gradient(circle at 50% 50%, rgba(200, 148, 74, 0.15), rgba(0, 0, 0, 0.4));
    }
    .deck-track__thumb--empty {
      display: block;
      border-radius: 50%;
    }
    .deck-track__info {
      flex: 1;
      min-width: 0;
    }
    .deck-track__title {
      display: block;
      font-family: var(--font-serif);
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--cream-dim);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .deck-track__moods {
      display: block;
      margin-top: 0.2rem;
      font-family: var(--font-mono);
      font-size: 0.42rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(247, 244, 235, 0.32);
    }
    .deck-panel__empty {
      font-family: var(--font-ui);
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      color: rgba(247, 244, 235, 0.35);
      text-align: center;
      padding: 2rem 1rem;
    }

    .track-band__prompt {
      font-family: var(--font-ui);
      font-size: 0.62rem;
      font-weight: 300;
      line-height: 1.55;
      letter-spacing: 0.04em;
      color: rgba(247, 244, 235, 0.38);
      margin: 0.35rem 0 0.5rem;
      max-width: 36rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .vinyl-disc__label-inner.has-cover {
      background-size: cover;
      background-position: center;
    }
    .vinyl-disc__label-inner.has-cover .vinyl-disc__ring {
      opacity: 0.35;
    }

    /* Side strips — header/footer anchor cells */
    .hd-l, .hd-r, .ft-l, .ft-r {
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
    }
    .hd-l, .hd-r { grid-row: 1; }
    .ft-l { grid-area: ft-l; border-top: 1px solid var(--border); border-bottom: none; }
    .ft-r { grid-area: ft-r; border-top: 1px solid var(--border); border-bottom: none; }
    .hd-l { grid-area: hd-l; }
    .hd-r { grid-area: hd-r; }

    /* ── LEFT STRIP ── */
    .pl-left {
      grid-area: lft;
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2.5rem;
      padding: 2rem 0;
      position: relative;
      z-index: 15;
    }
    .pl-left__label {
      writing-mode: vertical-lr;
      transform: rotate(180deg);
      font-family: var(--font-mono);
      font-size: 0.48rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: rgba(247,244,235,0.15);
      white-space: nowrap;
    }
    .pl-left__rule {
      flex: 1;
      max-height: 40%;
      width: 1px;
      background: linear-gradient(to bottom, transparent, rgba(247,244,235,0.08), transparent);
    }

    /* ── RIGHT STRIP ── */
    .pl-right {
      grid-area: rgt;
      border-left: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 2.5rem 0;
      position: relative;
      z-index: 15;
    }
    /* Volume slider — vertical, right strip */
    .vol-assembly {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.2rem;
      flex: 1;
      justify-content: center;
    }
    .vol-label {
      font-family: var(--font-mono);
      font-size: 0.45rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: rgba(247,244,235,0.2);
      writing-mode: vertical-lr;
    }
    .vol-track-wrap {
      position: relative;
      height: 180px;
      width: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* Custom vertical range */
    input.vol-slider {
      writing-mode: vertical-lr;
      direction: rtl;
      width: 180px;
      height: 4px;
      transform: rotate(180deg);
      outline: none;
      border-radius: 2px;
      background: transparent;
    }
    input.vol-slider::-webkit-slider-runnable-track {
      width: 4px;
      background: var(--border-2);
      border-radius: 2px;
    }
    input.vol-slider::-moz-range-track {
      width: 4px;
      background: var(--border-2);
      border-radius: 2px;
    }
    input.vol-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 14px; height: 14px;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 35%, var(--amber-bright), var(--rust));
      box-shadow: 0 0 0 2px rgba(200,148,74,0.25), 0 2px 8px rgba(0,0,0,0.6);
      border: none;
      cursor: none;
      transition: transform .15s, box-shadow .15s;
      margin-left: -5px;
    }
    input.vol-slider::-moz-range-thumb {
      width: 14px; height: 14px;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 35%, var(--amber-bright), var(--rust));
      box-shadow: 0 0 0 2px rgba(200,148,74,0.25), 0 2px 8px rgba(0,0,0,0.6);
      border: none;
      cursor: pointer;
    }
    input.vol-slider:hover::-webkit-slider-thumb {
      transform: scale(1.25);
      box-shadow: 0 0 0 4px rgba(200,148,74,0.2), 0 4px 12px rgba(0,0,0,0.7);
    }
    .vol-val {
      font-family: var(--font-mono);
      font-size: 0.5rem;
      letter-spacing: 0.1em;
      color: rgba(247,244,235,0.22);
      writing-mode: vertical-lr;
    }

    /* ── CENTRE STAGE ── */
    .pl-stage {
      grid-area: stage;
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      container-type: size;
      container-name: pl-stage;
    }

    .pl-stage__inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 100%;
      margin: auto;
      padding: 1.25rem 1.5rem 1.5rem;
      gap: 1.75rem;
      flex-shrink: 0;
      box-sizing: border-box;
    }

    /* ══════════════════════════════════════════════════════════
       VINYL DISC — the centrepiece
    ══════════════════════════════════════════════════════════ */
    .vinyl-arena {
      position: relative;
      width: min(52vh, 420px);
      height: min(52vh, 420px);
      flex-shrink: 0;
    }

    /* Diffuse warmth behind disc */
    .vinyl-arena__glow {
      position: absolute;
      inset: -15%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(200,148,74,0.14) 0%, transparent 65%);
      filter: blur(40px);
      opacity: 0;
      transition: opacity 2s ease;
      pointer-events: none;
    }
    body.page-player.playing .vinyl-arena__glow { opacity: 1; }

    /* Shadow pool beneath disc */
    .vinyl-arena__shadow {
      position: absolute;
      bottom: -8%;
      left: 8%; right: 8%;
      height: 28%;
      background: radial-gradient(ellipse, rgba(200,148,74,0.12) 0%, transparent 70%);
      border-radius: 50%;
      filter: blur(22px);
      z-index: 0;
    }

    /* Outer record — spins when playing */
    .vinyl-disc {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      animation: disc-spin 36s linear infinite;
      animation-play-state: paused;
      will-change: transform;
      transition: filter 1.5s ease;
    }
    body.page-player.playing .vinyl-disc {
      animation-play-state: running;
      filter: drop-shadow(0 0 28px rgba(200,148,74,0.18));
    }

    @keyframes disc-spin { to { transform: rotate(360deg); } }

    /* Record body */
    .vinyl-disc__body {
      position: absolute; inset: 0;
      border-radius: 50%;
      background: conic-gradient(
        #141414 0deg, #1c1c1c 3deg, #141414 6deg, #1c1c1c 9deg,
        #141414 12deg, #1c1c1c 15deg, #141414 18deg, #1c1c1c 21deg,
        #141414 24deg, #1c1c1c 27deg, #141414 30deg, #1c1c1c 33deg,
        #141414 36deg, #1c1c1c 39deg, #141414 42deg, #1c1c1c 45deg,
        #141414 48deg, #1c1c1c 51deg, #141414 54deg, #1c1c1c 57deg,
        #141414 60deg, #1c1c1c 63deg, #141414 66deg, #1c1c1c 69deg,
        #141414 72deg, #1c1c1c 75deg, #141414 78deg, #1c1c1c 81deg,
        #141414 84deg, #1c1c1c 87deg, #141414 90deg, #1c1c1c 93deg,
        #141414 96deg, #1c1c1c 99deg, #141414 102deg, #1c1c1c 105deg,
        #141414 108deg, #1c1c1c 111deg, #141414 114deg, #1c1c1c 117deg,
        #141414 120deg, #1c1c1c 123deg, #141414 126deg, #1c1c1c 129deg,
        #141414 132deg, #1c1c1c 135deg, #141414 138deg, #1c1c1c 141deg,
        #141414 144deg, #1c1c1c 147deg, #141414 150deg, #1c1c1c 153deg,
        #141414 156deg, #1c1c1c 159deg, #141414 162deg, #1c1c1c 165deg,
        #141414 168deg, #1c1c1c 171deg, #141414 174deg, #1c1c1c 177deg,
        #141414 180deg, #1c1c1c 183deg, #141414 186deg, #1c1c1c 189deg,
        #141414 192deg, #1c1c1c 195deg, #141414 198deg, #1c1c1c 201deg,
        #141414 204deg, #1c1c1c 207deg, #141414 210deg, #1c1c1c 213deg,
        #141414 216deg, #1c1c1c 219deg, #141414 222deg, #1c1c1c 225deg,
        #141414 228deg, #1c1c1c 231deg, #141414 234deg, #1c1c1c 237deg,
        #141414 240deg, #1c1c1c 243deg, #141414 246deg, #1c1c1c 249deg,
        #141414 252deg, #1c1c1c 255deg, #141414 258deg, #1c1c1c 261deg,
        #141414 264deg, #1c1c1c 267deg, #141414 270deg, #1c1c1c 273deg,
        #141414 276deg, #1c1c1c 279deg, #141414 282deg, #1c1c1c 285deg,
        #141414 288deg, #1c1c1c 291deg, #141414 294deg, #1c1c1c 297deg,
        #141414 300deg, #1c1c1c 303deg, #141414 306deg, #1c1c1c 309deg,
        #141414 312deg, #1c1c1c 315deg, #141414 318deg, #1c1c1c 321deg,
        #141414 324deg, #1c1c1c 327deg, #141414 330deg, #1c1c1c 333deg,
        #141414 336deg, #1c1c1c 339deg, #141414 342deg, #1c1c1c 345deg,
        #141414 348deg, #1c1c1c 351deg, #141414 354deg, #1c1c1c 357deg,
        #141414 360deg
      );
    }
    /* Fine groove rings */
    .vinyl-disc__grooves {
      position: absolute; inset: 0;
      border-radius: 50%;
      background: repeating-radial-gradient(
        circle at 50% 50%,
        transparent 0, transparent 10px,
        rgba(255,255,255,0.028) 10px, rgba(255,255,255,0.028) 11px
      );
    }
    /* Impressionist colour wash */
    .vinyl-disc__paint {
      position: absolute; inset: 0;
      border-radius: 50%;
      background: conic-gradient(
        from 0deg,
        transparent 0deg 38deg,
        rgba(200,148,74,0.09) 38deg 80deg,
        transparent 80deg 155deg,
        rgba(158,126,92,0.06) 155deg 200deg,
        transparent 200deg 275deg,
        rgba(200,148,74,0.08) 275deg 320deg,
        transparent 320deg 360deg
      );
    }

    /* Inner groove ring */
    .vinyl-disc__inner {
      position: absolute;
      inset: 12%;
      border-radius: 50%;
      background: radial-gradient(circle at 44% 40%, #2a2825, #0f0e0c);
    }
    .vinyl-disc__inner-grooves {
      position: absolute; inset: 0;
      border-radius: 50%;
      background: repeating-radial-gradient(
        circle at 50% 50%,
        transparent 0, transparent 8px,
        rgba(255,255,255,0.028) 8px, rgba(255,255,255,0.028) 9px
      );
    }

    /* Label — circular brand ring + center meta (matches index hero vinyl) */
    .vinyl-disc__label {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 28%;
      height: 28%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 42%, #d4a04e, #7A4B2A 72%, #5c3a22 100%);
      z-index: 10;
      box-shadow: 0 0 50px rgba(200,148,74,0.22), 0 2px 12px rgba(0,0,0,0.5);
      overflow: visible;
    }

    .vinyl-disc__label-inner {
      position: absolute;
      inset: 0;
      border-radius: 50%;
    }

    .vinyl-disc__ring {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
      pointer-events: none;
    }

    .vinyl-disc__ring text {
      fill: rgba(247, 244, 235, 0.82);
      font-family: 'Cormorant Garamond', serif;
      font-size: 5.25px;
      font-weight: 400;
      font-style: italic;
      letter-spacing: 0.06em;
    }

    .vinyl-disc__hole {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20%;
      height: 20%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: #060504;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
      z-index: 15;
      pointer-events: none;
    }

    /* Glow rings around disc — static */
    .vinyl-glow-ring {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%,-50%);
      border-radius: 50%;
      border: 1px solid rgba(200,148,74,0.06);
      pointer-events: none;
      opacity: 0;
      transition: opacity 2s ease;
    }
    body.page-player.playing .vinyl-glow-ring { opacity: 1; }
    .vinyl-glow-ring--1 { width: 112%; height: 112%; }
    .vinyl-glow-ring--2 { width: 130%; height: 130%; border-color: rgba(200,148,74,0.03); }

    /* ══════════════════════════════════════════════════════════
       TONEARM — overlaid on vinyl, interactive
    ══════════════════════════════════════════════════════════ */
    .tonearm-assy {
      position: absolute;
      top: 6%;
      right: 2%;
      z-index: 30;
      pointer-events: none;
    }
    .tonearm-pivot {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #d0c0a8, #2a2620, #1a1612);
      box-shadow: 0 0 0 1.5px rgba(200,148,74,0.2), 0 3px 12px rgba(0,0,0,0.7), inset 0 1px 2px rgba(255,255,255,0.1);
      position: relative; z-index: 3;
    }
    .tonearm-pivot__inner {
      position: absolute; inset: 25%;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 35%, #b8a888, #1c1814);
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
    }
    .tonearm-tube {
      position: absolute;
      top: 11px; left: 11px;
      transform-origin: 0 0;
      transform: rotate(-32deg);
      transition: transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    body.page-player.playing .tonearm-tube { transform: rotate(14deg); }
    .tonearm-shaft {
      width: 2.5px; height: 90px;
      background: linear-gradient(to bottom, rgba(205,185,155,0.92), rgba(130,115,95,0.8));
      border-radius: 2px 2px 1px 1px;
      box-shadow: 1px 0 3px rgba(0,0,0,0.5);
    }
    .tonearm-scurve {
      position: absolute;
      top: 85px; left: -2px;
      width: 6px; height: 14px;
      background: linear-gradient(115deg, rgba(180,162,132,0.9), rgba(100,88,72,0.85));
      border-radius: 0 4px 4px 0;
      transform: rotate(6deg);
    }
    .tonearm-headshell {
      position: absolute;
      top: 98px; left: -6px;
      width: 14px; height: 20px;
      border-radius: 2px 2px 5px 5px;
      background: linear-gradient(170deg, #3a3530, #1e1b17, #141210);
      box-shadow: 0 2px 8px rgba(0,0,0,0.65), 0 0 0 1px rgba(200,148,74,0.12), inset 0 1px 1px rgba(255,255,255,0.06);
    }
    .tonearm-stylus {
      position: absolute;
      bottom: -9px; left: 5px;
      width: 1.5px; height: 11px;
      background: linear-gradient(to bottom, rgba(180,160,120,0.9), rgba(200,148,74,0.7));
      border-radius: 0 0 1px 1px;
      transform: rotate(4deg);
    }
    .tonearm-stylus::after {
      content: '';
      position: absolute;
      bottom: -2px; left: -1px;
      width: 3px; height: 3px;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      background: radial-gradient(circle at 40% 30%, rgba(255,220,120,0.95), rgba(200,148,74,0.85));
      box-shadow: 0 1px 4px rgba(200,148,74,0.5);
    }
    body.page-player.playing .tonearm-stylus::after {
      animation: stylus-pulse 2.2s ease-in-out infinite;
    }
    @keyframes stylus-pulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(200,148,74,0); }
      50%      { box-shadow: 0 0 0 4px rgba(200,148,74,0.22); }
    }
    .tonearm-cw {
      position: absolute;
      top: 6px; left: 12px;
      width: 16px; height: 16px;
      border-radius: 50%;
      background: radial-gradient(circle at 38% 32%, #c0b09a, #2e2820);
      box-shadow: 0 2px 6px rgba(0,0,0,0.7);
      pointer-events: none;
    }

    /* ══════════════════════════════════════════════════════════
       TRACK METADATA BAND — below vinyl
    ══════════════════════════════════════════════════════════ */
    .track-band {
      width: 100%;
      max-width: 560px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.7rem;
      padding: 0 2rem;
      position: relative;
      z-index: 20;
      flex-shrink: 0;
    }

    .track-band__top {
      display: flex; align-items: center; gap: 0.8rem;
      width: 100%; justify-content: center;
    }
    .track-band__live-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: rgba(247,244,235,0.18);
      flex-shrink: 0;
      transition: background .5s, box-shadow .5s;
    }
    body.page-player.playing .track-band__live-dot {
      background: var(--amber);
      animation: header-dot-pulse 2.5s ease-in-out infinite;
    }
    .track-band__stream-tag {
      font-family: var(--font-mono);
      font-size: 0.5rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(247,244,235,0.22);
      transition: color .5s;
    }
    body.page-player.playing .track-band__stream-tag { color: rgba(200,148,74,0.6); }

    .track-band__title {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 300;
      font-size: clamp(1.3rem, 2.5vw, 1.9rem);
      color: var(--cream-low);
      text-align: center;
      line-height: 1.25;
      letter-spacing: -0.01em;
      transition: color .8s ease, opacity .8s ease;
      min-height: 2.5em;
      display: flex; align-items: center; justify-content: center;
    }
    body.page-player.playing .track-band__title { color: var(--cream-dim); }
    .track-band__title.transitioning { opacity: 0; }

    .track-band__meta {
      display: flex; align-items: center; gap: 0.6rem;
      font-family: var(--font-mono);
      font-size: 0.5rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(247,244,235,0.2);
    }
    .track-band__meta-sep { opacity: 0.4; }

    /* Progress bar — thin, atmospheric */
    .track-progress {
      width: 100%;
      height: 8px;
      padding: 3px 0;
      margin-top: 0.5rem;
      margin-bottom: 0.15rem;
      background: transparent;
      border-radius: 4px;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.6s ease;
      touch-action: none;
    }
    body.page-player.session-started .track-progress {
      opacity: 1;
      pointer-events: auto;
    }
    .track-progress::before {
      content: '';
      display: block;
      height: 2px;
      margin-top: 3px;
      background: rgba(247,244,235,0.08);
      border-radius: 1px;
    }
    .track-progress__fill {
      position: relative;
      height: 2px;
      width: 0%;
      margin-top: -2px;
      background: linear-gradient(to right, rgba(200,148,74,0.45), var(--amber));
      border-radius: 1px;
      transition: none;
      pointer-events: none;
    }
    .track-progress.is-seeking .track-progress__fill {
      background: var(--amber-bright);
    }

    /* ══════════════════════════════════════════════════════════
       CONTROLS ROW — below track band
    ══════════════════════════════════════════════════════════ */
    .controls-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2.75rem;
      margin-top: 2.25rem;
      position: relative;
      z-index: 50;
      isolation: isolate;
      flex-shrink: 0;
    }

    .ctrl-btn {
      position: relative;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
      cursor: pointer;
      pointer-events: auto;
    }
    .ctrl-btn:hover { transform: scale(1.06); }
    .ctrl-btn:active { transform: scale(0.96); }

    /* Play / pause — primary control */
    .ctrl-btn--play {
      width: 88px;
      height: 88px;
      background: radial-gradient(circle at 42% 38%, rgba(200,148,74,0.35), rgba(30,24,16,0.85));
      border: 2px solid rgba(217,165,90,0.75);
      box-shadow:
        0 8px 32px rgba(0,0,0,0.55),
        0 0 28px rgba(200,148,74,0.2),
        0 0 0 10px rgba(200,148,74,0.08);
    }
    body.page-player.playing .ctrl-btn--play {
      border-color: var(--amber-bright);
      box-shadow:
        0 8px 36px rgba(0,0,0,0.55),
        0 0 36px rgba(200,148,74,0.28),
        0 0 0 12px rgba(200,148,74,0.1);
    }
    .ctrl-btn--play:hover {
      border-color: var(--cream);
      box-shadow:
        0 10px 40px rgba(0,0,0,0.6),
        0 0 40px rgba(200,148,74,0.32),
        0 0 0 14px rgba(200,148,74,0.12);
    }

    .play-icon {
      position: relative;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .play-icon__play {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 12px 0 12px 22px;
      border-color: transparent transparent transparent var(--amber-bright);
      margin-left: 4px;
      transition: opacity .2s, transform .2s;
      filter: drop-shadow(0 0 10px rgba(200,148,74,0.65));
    }
    .play-icon__pause {
      position: absolute;
      display: flex;
      gap: 6px;
      opacity: 0;
      transition: opacity .2s;
    }
    .play-icon__pause span {
      display: block;
      width: 5px;
      height: 22px;
      background: var(--amber-bright);
      border-radius: 2px;
      box-shadow: 0 0 10px rgba(200,148,74,0.55);
    }
    body.page-player.playing .play-icon__play { opacity: 0; transform: scale(0); }
    body.page-player.playing .play-icon__pause { opacity: 1; }

    /* Previous / next */
    .ctrl-btn--skip {
      width: 64px;
      height: 64px;
      background: rgba(247,244,235,0.06);
      border: 1.5px solid rgba(247,244,235,0.28);
      box-shadow: 0 4px 18px rgba(0,0,0,0.45);
    }
    .ctrl-btn--skip:hover {
      background: rgba(200,148,74,0.12);
      border-color: rgba(217,165,90,0.65);
      box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 0 16px rgba(200,148,74,0.15);
    }

    .skip-icon,
    .skip-icon * {
      pointer-events: none;
    }
    .skip-icon {
      display: flex;
      align-items: center;
      gap: 3px;
    }
    .play-icon,
    .play-icon * {
      pointer-events: none;
    }
    .skip-icon__tri {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 9px 0 9px 14px;
      border-color: transparent transparent transparent rgba(247,244,235,0.75);
      transition: border-color .2s;
      filter: drop-shadow(0 0 6px rgba(247,244,235,0.2));
    }
    .skip-icon__bar {
      width: 3px;
      height: 18px;
      background: rgba(247,244,235,0.75);
      border-radius: 1px;
      transition: background .2s;
    }
    .skip-icon--prev { flex-direction: row-reverse; }
    .skip-icon--prev .skip-icon__tri {
      border-width: 9px 14px 9px 0;
      border-color: transparent rgba(247,244,235,0.75) transparent transparent;
    }
    .ctrl-btn--skip:hover .skip-icon__tri {
      border-color: transparent transparent transparent var(--amber-bright);
      filter: drop-shadow(0 0 8px rgba(200,148,74,0.5));
    }
    .ctrl-btn--skip:hover .skip-icon--prev .skip-icon__tri {
      border-color: transparent var(--amber-bright) transparent transparent;
    }
    .ctrl-btn--skip:hover .skip-icon__bar {
      background: var(--amber-bright);
    }

    .ctrl-btn--skip.flash { animation: ctrl-skip-flash .4s ease; }
    .ctrl-btn--skip[aria-disabled='true'] {
      opacity: 0.35;
      cursor: not-allowed;
    }
    @keyframes ctrl-skip-flash {
      0%,100% { transform: scale(1); }
      50% { transform: scale(0.92); border-color: rgba(217,165,90,0.85); }
    }

    /* ── FOOTER ── */
    .pl-footer {
      grid-area: footer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.1rem 3rem;
      border-top: 1px solid var(--border);
      position: relative;
      z-index: 20;
    }
    .pl-footer__left {
      display: flex; align-items: center; gap: 1.2rem;
    }
    .pl-footer__session-tag {
      font-family: var(--font-mono);
      font-size: 0.5rem;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: rgba(247,244,235,0.18);
    }
    .pl-footer__session-counter {
      font-family: var(--font-mono);
      font-size: 0.52rem;
      letter-spacing: 0.15em;
      color: rgba(200,148,74,0.4);
    }
    .pl-footer__center {
      display: flex; align-items: center; gap: 0.5rem;
    }
    .pl-footer__genre-tag {
      font-family: var(--font-ui);
      font-weight: 300;
      font-size: 0.6rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(247,244,235,0.16);
      padding: 0.3rem 0.7rem;
      border: 1px solid rgba(247,244,235,0.06);
      border-radius: 1px;
      transition: color .3s, border-color .3s;
    }
    body.page-player.playing .pl-footer__genre-tag { color: rgba(247,244,235,0.28); border-color: rgba(247,244,235,0.1); }
    .pl-footer__right {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--font-mono);
      font-size: 0.48rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(247,244,235,0.1);
    }

    .pl-footer__license {
      color: rgba(247,244,235,0.22);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .pl-footer__license:hover {
      color: rgba(200, 148, 74, 0.65);
    }

    .pl-footer__sep {
      opacity: 0.5;
    }

    /* ══════════════════════════════════════════════════════════
       WAVEFORM VIZ — subtle ambient bars below controls
    ══════════════════════════════════════════════════════════ */
    .waveform {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      height: 28px;
      opacity: 0;
      transition: opacity 1.5s ease;
      position: relative;
      z-index: 20;
      flex-shrink: 0;
    }
    body.page-player.playing .waveform { opacity: 1; }
    .waveform__bar {
      width: 2px;
      border-radius: 1px;
      background: rgba(200,148,74,0.3);
      animation: waveform-dance 1.2s ease-in-out infinite;
      animation-play-state: paused;
    }
    body.page-player.playing .waveform__bar { animation-play-state: running; }
    @keyframes waveform-dance {
      0%,100% { transform: scaleY(0.3); opacity: 0.25; }
      50%      { transform: scaleY(1);   opacity: 0.55; }
    }

    /* ══════════════════════════════════════════════════════════
       STANDBY SCREEN OVERLAY — pure silence entrance
    ══════════════════════════════════════════════════════════ */
    .standby-overlay {
      position: fixed;
      inset: 0;
      background: var(--dark-1);
      z-index: 200;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1), pointer-events 0s 1.4s;
    }
    .standby-overlay.dismissed {
      opacity: 0;
      pointer-events: none;
    }
    .standby-overlay__grain {
      position: absolute; inset: 0;
      opacity: .5;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      pointer-events: none;
    }
    .standby-overlay__content {
      position: relative; z-index: 5;
      display: flex; flex-direction: column;
      align-items: center; gap: 2.5rem;
      text-align: center;
      padding: 0 2rem;
      animation: standby-entrance .9s cubic-bezier(0.22, 1, 0.36, 1) both;
      animation-delay: .3s;
    }
    @keyframes standby-entrance {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .standby-overlay__logo {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 300;
      font-size: 1rem;
      letter-spacing: 0.06em;
      color: rgba(247,244,235,0.28);
    }
    .standby-overlay__logo strong {
      font-style: normal;
      font-weight: 700;
      color: var(--amber);
    }
    .standby-overlay__headline {
      font-family: var(--font-display);
      font-weight: 900;
      font-size: clamp(2.8rem, 7vw, 6rem);
      line-height: 0.92;
      letter-spacing: -0.04em;
      color: var(--cream-dim);
    }
    .standby-overlay__headline span {
      display: block;
      color: transparent;
      -webkit-text-stroke: 1.5px rgba(247,244,235,0.22);
    }
    .standby-overlay__sub {
      font-family: var(--font-body);
      font-size: 0.88rem;
      line-height: 1.85;
      color: rgba(247,244,235,0.32);
      max-width: 34ch;
    }
    /* The big initiation button on standby */
    .standby-overlay__cta {
      position: relative;
      width: 100px; height: 100px;
      border-radius: 50%;
      background: radial-gradient(circle at 42% 38%, rgba(200,148,74,0.15), rgba(15,13,9,0.5));
      border: 1.5px solid rgba(200,148,74,0.4);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 0.4rem;
      cursor: none;
      box-shadow:
        0 0 0 14px rgba(200,148,74,0.04),
        0 0 0 32px rgba(200,148,74,0.02),
        0 12px 40px rgba(0,0,0,0.55);
      transition: transform .2s ease, border-color .25s, box-shadow .25s;
      animation: standby-cta-breathe 3.5s ease-in-out infinite;
    }
    @keyframes standby-cta-breathe {
      0%,100% { box-shadow: 0 0 0 14px rgba(200,148,74,0.04), 0 0 0 32px rgba(200,148,74,0.015), 0 12px 40px rgba(0,0,0,0.55); }
      50%      { box-shadow: 0 0 0 20px rgba(200,148,74,0.08), 0 0 0 44px rgba(200,148,74,0.03), 0 18px 50px rgba(0,0,0,0.55); }
    }
    .standby-overlay__cta:hover {
      transform: scale(1.07);
      border-color: rgba(200,148,74,0.7);
    }
    .standby-overlay__cta:active { transform: scale(0.95); }
    .standby-overlay__cta::before, .standby-overlay__cta::after {
      content: '';
      position: absolute;
      inset: -18px;
      border-radius: 50%;
      border: 1px solid rgba(200,148,74,0.12);
      animation: trigger-ring-expand 3.5s ease-out infinite;
    }
    .standby-overlay__cta::after { inset: -38px; animation-delay: 1.4s; }
    .standby-overlay__cta-icon {
      width: 0; height: 0;
      border-style: solid;
      border-width: 12px 0 12px 20px;
      border-color: transparent transparent transparent var(--amber);
      margin-left: 5px;
      filter: drop-shadow(0 0 8px rgba(200,148,74,0.5));
    }
    .standby-overlay__cta-label {
      font-family: var(--font-mono);
      font-size: 0.42rem;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: rgba(200,148,74,0.6);
    }
    .standby-overlay__guarantee {
      display: flex; align-items: center; gap: 1.2rem;
      font-family: var(--font-mono);
      font-size: 0.48rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(247,244,235,0.15);
    }
    .standby-overlay__guarantee-sep { opacity: 0.3; }

    /* ══════════════════════════════════════════════════════════
       STAGGER REVEAL — page elements fade in
    ══════════════════════════════════════════════════════════ */
    .reveal-item {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity .9s cubic-bezier(0.22,1,0.36,1), transform .9s cubic-bezier(0.22,1,0.36,1);
    }
    .reveal-item.revealed {
      opacity: 1;
      transform: translateY(0);
    }

    /* Stage height — shrink vinyl & tighten gaps before clipping */
    @container pl-stage (max-height: 780px) {
      .pl-stage__inner {
        gap: 1.15rem;
        padding: 1rem 1.25rem 1.25rem;
      }

      .vinyl-arena {
        width: min(52vh, 420px, 40cqh);
        height: min(52vh, 420px, 40cqh);
      }

      .controls-row {
        margin-top: 1.75rem;
      }

      .track-band__prompt {
        -webkit-line-clamp: 1;
      }
    }

    @container pl-stage (max-height: 640px) {
      .pl-stage__inner {
        gap: 0.85rem;
        padding: 0.75rem 1rem 1rem;
      }

      .vinyl-arena {
        width: min(52vh, 320px, 34cqh);
        height: min(52vh, 320px, 34cqh);
      }

      .controls-row {
        gap: 1.75rem;
        margin-top: 1.5rem;
      }

      .ctrl-btn--play {
        width: 72px;
        height: 72px;
      }

      .ctrl-btn--skip {
        width: 54px;
        height: 54px;
      }

      .waveform {
        display: none;
      }

      .track-band__title {
        min-height: 1.25em;
        font-size: clamp(1.05rem, 2.2vw, 1.5rem);
      }
    }

    /* ══════════════════════════════════════════════════════════
       MOBILE — alternate stacked layout < 1024px
    ══════════════════════════════════════════════════════════ */
    @media (max-width: 1023px) {
      html:has(body.page-player),
      body.page-player {
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
      }

      .player-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
          "header"
          "stage"
          "mobile-controls"
          "footer";
        height: auto;
        min-height: 100dvh;
        overflow: visible;
      }

      .pl-stage {
        container-type: normal;
        overflow-y: visible;
      }

      .pl-stage__inner {
        margin: 0;
        padding: 1.5rem 1.25rem 1.25rem;
        gap: 1.25rem;
      }

      .vinyl-arena {
        width: min(68vw, 280px);
        height: min(68vw, 280px);
      }

      .controls-row {
        gap: 1.75rem;
        margin-top: 1.75rem;
      }

      .ctrl-btn--play {
        width: 76px;
        height: 76px;
      }

      .ctrl-btn--skip {
        width: 56px;
        height: 56px;
      }

      .track-band {
        padding: 0 0.5rem;
      }

      .track-band__title {
        min-height: 1.35em;
        font-size: clamp(1.15rem, 4.5vw, 1.65rem);
      }

      .pl-header {
        padding: 1.15rem 1.25rem;
      }
      .hd-l, .hd-r, .ft-l, .ft-r { display: none; }
      .pl-left { display: none; }
      .pl-right { display: none; }

      /* Mobile controls panel replaces right strip volume */
      .mobile-controls-panel {
        display: flex !important;
        grid-area: mobile-controls;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        padding: 1.25rem 1.5rem 1rem;
        border-top: 1px solid var(--border);
      }
      .mobile-vol-row {
        display: flex; align-items: center; gap: 1.2rem;
        width: 100%;
      }
      .mobile-vol-label {
        font-family: var(--font-mono);
        font-size: 0.5rem;
        letter-spacing: 0.26em;
        text-transform: uppercase;
        color: rgba(247,244,235,0.22);
        flex-shrink: 0;
      }
      input.mobile-vol-slider {
        flex: 1;
        -webkit-appearance: none; appearance: none;
        height: 3px;
        background: rgba(247,244,235,0.1);
        border-radius: 2px;
        outline: none;
        cursor: pointer;
      }
      input.mobile-vol-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 16px; height: 16px;
        border-radius: 50%;
        background: radial-gradient(circle at 40% 35%, var(--amber-bright), var(--rust));
        box-shadow: 0 0 0 2px rgba(200,148,74,0.25);
        cursor: pointer;
      }
      input.mobile-vol-slider::-moz-range-thumb {
        width: 16px; height: 16px;
        border-radius: 50%;
        background: radial-gradient(circle at 40% 35%, var(--amber-bright), var(--rust));
        box-shadow: 0 0 0 2px rgba(200,148,74,0.25);
        border: none; cursor: pointer;
      }
      .mobile-vol-val {
        font-family: var(--font-mono);
        font-size: 0.52rem;
        letter-spacing: 0.12em;
        color: rgba(247,244,235,0.25);
        width: 2.5rem;
        text-align: right;
        flex-shrink: 0;
      }

      .tonearm-assy { top: 4%; right: 0%; }
      .pl-header__sub { display: none; }
      .pl-footer { padding: 0.85rem 1.25rem; flex-wrap: wrap; gap: 0.6rem; }
      .pl-footer__right { display: none; }
      .pl-footer__center { flex-wrap: wrap; justify-content: center; }

      /* Standby CTA on mobile */
      .standby-overlay__cta { cursor: pointer; }
    }

    @media (max-width: 480px) {
      .pl-header__status { display: none; }
      .pl-header__library {
        padding: 0.4rem 0.65rem;
        font-size: 0.6rem;
      }

      .pl-stage__inner {
        padding: 1.15rem 1rem 1rem;
        gap: 1rem;
      }

      .vinyl-arena {
        width: min(72vw, 220px);
        height: min(72vw, 220px);
      }

      .ctrl-btn--play {
        width: 68px;
        height: 68px;
      }

      .ctrl-btn--skip {
        width: 50px;
        height: 50px;
      }
    }
    @media (max-width: 1023px) {
      .standby-overlay__cta, .ctrl-btn { cursor: pointer; }
    }

    /* Desktop hides mobile panel */
    .mobile-controls-panel { display: none; }

    /* ══════════════════════════════════════════════════════════
       SUBTLE ENTRANCE ANIMATIONS — page first load
    ══════════════════════════════════════════════════════════ */
    .pl-header    { animation: fade-down .7s cubic-bezier(0.22,1,0.36,1) .1s both; }
    .pl-footer    { animation: fade-up   .7s cubic-bezier(0.22,1,0.36,1) .15s both; }
    .pl-left      { animation: fade-right .7s cubic-bezier(0.22,1,0.36,1) .2s both; }
    .pl-right     { animation: fade-left  .7s cubic-bezier(0.22,1,0.36,1) .2s both; }
    @keyframes fade-down  { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
    @keyframes fade-up    { from { opacity:0; transform:translateY(8px); }  to { opacity:1; transform:translateY(0); } }
    @keyframes fade-right { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }
    @keyframes fade-left  { from { opacity:0; transform:translateX(8px); }  to { opacity:1; transform:translateX(0); } }

/* ══════════════════════════════════════════════════════════
   LICENSE PAGE
   ══════════════════════════════════════════════════════════ */
html:has(body.page-license),
body.page-license {
  min-height: 100%;
  background: var(--ink-deep, #0e0b09);
  color: var(--cream, #f7f4eb);
  cursor: auto;
}

body.page-license .page-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
}

body.page-license .bg-glow--main {
  position: fixed;
  width: 70vw;
  height: 50vh;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(200, 148, 74, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

body.page-license .lic-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem clamp(1.25rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(247, 244, 235, 0.06);
}

body.page-license .lic-header__logo {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--cream);
}

body.page-license .lic-header__accent {
  color: var(--amber, #c8944a);
}

body.page-license .lic-header__nav {
  display: flex;
  gap: 1.5rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.page-license .lic-header__nav a {
  color: rgba(247, 244, 235, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}

body.page-license .lic-header__nav a:hover {
  color: var(--cream-mid, #e8e0d0);
}

body.page-license .lic-main {
  position: relative;
  z-index: 5;
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 2rem) 4rem;
}

body.page-license .lic-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--amber, #c8944a);
  opacity: 0.7;
  margin: 0 0 1rem;
}

body.page-license .lic-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 300;
  line-height: 1.15;
  margin: 0 0 1.25rem;
  color: var(--cream);
}

body.page-license .lic-lead {
  font-family: 'Libre Baskerville', serif;
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(247, 244, 235, 0.78);
  margin: 0 0 0.75rem;
}

body.page-license .lic-updated {
  font-family: 'Jost', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: rgba(247, 244, 235, 0.35);
  margin: 0 0 2.5rem;
}

body.page-license .lic-block {
  margin-bottom: 2.25rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid rgba(247, 244, 235, 0.06);
}

body.page-license .lic-block:last-of-type {
  border-bottom: none;
}

body.page-license .lic-block__title {
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber, #c8944a);
  margin: 0 0 1rem;
}

body.page-license .lic-list {
  margin: 0;
  padding: 0 0 0 1.1rem;
  font-family: 'Libre Baskerville', serif;
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(247, 244, 235, 0.72);
}

body.page-license .lic-list li {
  margin-bottom: 0.65rem;
}

body.page-license .lic-list a,
body.page-license .lic-prose a {
  color: var(--amber, #c8944a);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.page-license .lic-prose {
  font-family: 'Libre Baskerville', serif;
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(247, 244, 235, 0.72);
  margin: 0 0 1rem;
}

body.page-license .lic-prose--muted {
  color: rgba(247, 244, 235, 0.45);
  font-size: 0.88rem;
}

body.page-license .lic-credit {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 1rem 1.25rem;
  margin: 0.5rem 0 0;
  background: rgba(200, 148, 74, 0.06);
  border: 1px solid rgba(200, 148, 74, 0.18);
  color: rgba(247, 244, 235, 0.65);
}

body.page-license code {
  font-family: 'Space Mono', monospace;
  font-size: 0.78em;
  color: rgba(247, 244, 235, 0.55);
}

body.page-license .lic-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  margin-top: 2.5rem;
}

body.page-license .lic-back {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 244, 235, 0.45);
  text-decoration: none;
}

body.page-license .lic-back:hover {
  color: var(--cream-mid, #e8e0d0);
}

body.page-license .lic-footer {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.5rem clamp(1.25rem, 4vw, 3rem);
  border-top: 1px solid rgba(247, 244, 235, 0.06);
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: rgba(247, 244, 235, 0.35);
}

body.page-license .lic-footer a {
  color: rgba(247, 244, 235, 0.45);
  text-decoration: none;
}

body.page-license .lic-footer a:hover {
  color: var(--amber, #c8944a);
}