:root {
  --ink: oklch(96% 0.018 92);
  --muted: oklch(76% 0.035 86);
  --subtle: oklch(60% 0.04 78);
  --void: oklch(12% 0.025 40);
  --panel: oklch(18% 0.035 42 / 0.82);
  --panel-solid: oklch(20% 0.04 42);
  --line: oklch(89% 0.045 89 / 0.22);
  --amber: oklch(83% 0.17 77);
  --red: oklch(61% 0.21 29);
  --green: oklch(80% 0.21 146);
  --blue: oklch(70% 0.16 220);
  --purple: oklch(61% 0.17 310);
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: clamp(4rem, 8vw, 7rem);
  --radius: 8px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Mobile: an always-open, compact section rail inspired by the supplied fluid menu. */
.mobile-section-dock {
  display: none;
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: calc(var(--mobile-header-height) + 4.2rem);
  }

  .site-header .nav-toggle,
  .site-header .main-nav.vintage-nav {
    display: none !important;
  }

  .mobile-section-dock {
    position: sticky;
    top: var(--mobile-header-height);
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 3.55rem;
    padding: 0.45rem 0.7rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border-bottom: 1px solid oklch(82% 0.1 76 / 0.24);
    background: oklch(9% 0.026 43 / 0.97);
    box-shadow: 0 0.7rem 1.4rem oklch(0% 0 0 / 0.2);
    scrollbar-width: none;
  }

  .mobile-section-dock::-webkit-scrollbar { display: none; }

  .mobile-section-dock-label {
    flex: 0 0 auto;
    padding-right: 0.15rem;
    color: var(--amber);
    font: 800 0.56rem/1 "IBM Plex Mono", monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .mobile-section-dock a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.32rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.68rem;
    border: 1px solid oklch(78% 0.08 72 / 0.34);
    border-radius: 999px;
    background: linear-gradient(180deg, oklch(24% 0.038 48), oklch(12% 0.025 42));
    color: oklch(91% 0.04 82);
    font: 800 0.66rem/1 "IBM Plex Mono", monospace;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mobile-section-dock a b {
    display: grid;
    width: 1.2rem;
    height: 1.2rem;
    place-items: center;
    border: 1px solid oklch(81% 0.13 76 / 0.52);
    border-radius: 50%;
    color: var(--amber);
    font-size: 0.47rem;
  }

  main > #tour { order: 2; }
  main > #music { order: 3; }

  .hero .compact-cassette {
    min-height: 24rem;
  }

  #spotify-hero-embed {
    height: 352px;
    min-height: 352px;
  }

  .site-footer .footer-reels:has(.footer-cassette-player) {
    min-height: 0;
    padding: 0;
    background: none;
  }

  .site-footer .footer-cassette-player {
    width: 100%;
    min-height: 352px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .site-footer .footer-cassette-player .cassette-art,
  .site-footer .footer-cassette-player .cassette-reels,
  .site-footer .footer-cassette-player .cassette-window {
    display: none;
  }

  .site-footer .footer-cassette-player .cassette-embed {
    position: relative;
    inset: auto;
    width: 100%;
    height: 352px;
    min-height: 352px;
    transform: none;
  }
}

/* On phones, the section rail is the persistent navigation.  The larger brand
   header stays in the normal page flow so it does not compete for the top edge. */
@media (max-width: 760px) {
  :root { --mobile-header-height: 3.55rem; }

  html { scroll-padding-top: calc(var(--mobile-header-height) + 0.7rem); }

  body {
    padding-top: 0;
    touch-action: auto;
  }

  /* `hidden` creates a scroll container in some mobile engines and breaks
     sticky descendants. `clip` keeps horizontal overflow out of view without
     taking ownership of vertical scrolling. */
  html,
  body {
    overflow-x: clip;
    overflow-y: visible;
  }

  .site-header {
    position: relative;
    inset: auto;
    z-index: 54;
  }

  .mobile-section-dock {
    top: 0;
    z-index: 100;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }

  /* Live sets are intentionally desktop-only; the hero player remains available. */
  #music,
  .mobile-section-dock a[href="#music"] {
    display: none;
  }
}

/* Vintage navigation console — adapted from the supplied navigation-menu pattern. */
.site-header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(0.8rem, 1.6vw, 1.35rem);
  padding-block: 0.75rem;
  background:
    linear-gradient(180deg, oklch(15% 0.035 55 / 0.98), oklch(7% 0.024 42 / 0.96)),
    repeating-linear-gradient(90deg, transparent 0 22px, oklch(100% 0 0 / 0.025) 23px 24px);
  border-bottom: 1px solid oklch(82% 0.1 76 / 0.32);
  box-shadow: 0 12px 44px oklch(0% 0 0 / 0.42), inset 0 -1px oklch(0% 0 0 / 0.72);
}

.vintage-nav {
  position: relative;
  display: block;
  min-width: 0;
  padding: 1.2rem 0.42rem 0.42rem;
  border: 1px solid oklch(72% 0.055 67 / 0.32);
  border-radius: 0.62rem;
  background:
    linear-gradient(180deg, oklch(25% 0.034 58 / 0.8), oklch(10% 0.022 44 / 0.94)),
    repeating-linear-gradient(0deg, transparent 0 3px, oklch(100% 0 0 / 0.022) 4px);
  box-shadow: inset 0 1px oklch(100% 0 0 / 0.09), inset 0 -8px 18px oklch(0% 0 0 / 0.3);
  overflow: visible;
}

.nav-console-label {
  position: absolute;
  top: 0.22rem;
  left: 0.65rem;
  color: oklch(74% 0.045 72 / 0.7);
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
}

.nav-menu-list {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.35rem;
}

.nav-menu-item {
  position: relative;
}

.nav-menu-trigger,
.nav-direct-link,
.nav-toggle {
  min-height: 42px;
  border: 1px solid oklch(72% 0.055 68 / 0.34);
  border-radius: 0.38rem;
  color: var(--ink);
  background:
    linear-gradient(180deg, oklch(29% 0.035 58 / 0.94), oklch(12% 0.024 45 / 0.98));
  box-shadow: inset 0 1px oklch(100% 0 0 / 0.08), 0 3px 8px oklch(0% 0 0 / 0.28);
  font-family: Urbanist, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.nav-menu-trigger,
.nav-direct-link {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  padding: 0.55rem 0.72rem;
  cursor: pointer;
  white-space: nowrap;
}

.nav-menu-trigger:hover,
.nav-menu-trigger[aria-expanded="true"],
.nav-direct-link:hover {
  border-color: oklch(86% 0.14 78 / 0.82);
  background: linear-gradient(180deg, oklch(42% 0.075 60), oklch(18% 0.04 46));
  color: var(--amber);
  transform: translateY(-1px);
}

.nav-channel {
  display: grid;
  place-items: center;
  min-width: 1.45rem;
  min-height: 1.45rem;
  padding-top: 0.05rem;
  border: 1px solid oklch(81% 0.13 76 / 0.5);
  border-radius: 999px;
  color: var(--amber);
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.58rem;
  box-shadow: inset 0 0 0.45rem oklch(79% 0.12 72 / 0.14);
}

.nav-chevron {
  width: 0.42rem;
  height: 0.42rem;
  margin-left: 0.05rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
  transition: transform 180ms var(--ease);
}

.nav-menu-trigger[aria-expanded="true"] .nav-chevron {
  transform: translateY(0.1rem) rotate(225deg);
}

.nav-menu-content {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.65rem);
  left: 0;
  width: min(25rem, calc(100vw - 2rem));
  padding: 0.7rem;
  border: 1px solid oklch(80% 0.08 74 / 0.42);
  border-radius: 0.55rem;
  background:
    linear-gradient(150deg, oklch(19% 0.035 53 / 0.99), oklch(7% 0.02 42 / 0.995)),
    repeating-linear-gradient(0deg, transparent 0 5px, oklch(100% 0 0 / 0.025) 6px);
  box-shadow: 0 24px 70px oklch(0% 0 0 / 0.62), inset 0 1px oklch(100% 0 0 / 0.08);
  transform-origin: top left;
  animation: nav-panel-in 180ms var(--ease) both;
}

.nav-menu-item:nth-child(3) .nav-menu-content {
  left: auto;
  right: 0;
}

.nav-menu-item:nth-child(4) .nav-menu-content {
  left: auto;
  right: 0;
}

.nav-menu-kicker {
  margin: 0 0 0.55rem;
  padding: 0.25rem 0.35rem 0.55rem;
  border-bottom: 1px solid oklch(80% 0.08 74 / 0.2);
  color: var(--amber);
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.main-nav .nav-menu-content a {
  display: grid;
  gap: 0.2rem;
  padding: 0.72rem;
  border: 0;
  border-radius: 0.36rem;
  background: transparent;
  text-transform: none;
}

.main-nav .nav-menu-content a + a {
  border-top: 1px solid oklch(80% 0.07 74 / 0.12);
}

.main-nav .nav-menu-content a:hover,
.main-nav .nav-menu-content a:focus-visible {
  background: linear-gradient(90deg, oklch(73% 0.14 68 / 0.18), transparent);
  transform: none;
}

.nav-menu-content strong {
  color: var(--ink);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.nav-menu-content span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.35;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.72rem;
  cursor: pointer;
}

.nav-toggle-led {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0.7rem var(--red);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-led {
  background: var(--green);
  box-shadow: 0 0 0.7rem var(--green);
}

@keyframes nav-panel-in {
  from { opacity: 0; transform: translateY(-0.4rem) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1120px) {
  .site-header {
    grid-template-columns: auto auto 1fr;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .vintage-nav {
    position: absolute;
    top: calc(100% - 0.35rem);
    left: clamp(0.8rem, 3vw, 2rem);
    right: clamp(0.8rem, 3vw, 2rem);
    display: none;
    padding: 1.35rem 0.65rem 0.65rem;
  }

  .vintage-nav.is-open {
    display: block;
  }

  .nav-menu-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .nav-menu-trigger,
  .nav-direct-link {
    width: 100%;
    justify-content: center;
  }

  .header-actions {
    justify-self: end;
  }
}

@media (max-width: 700px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .brand-mark img {
    width: clamp(6.6rem, 31vw, 8.2rem);
  }

  .nav-toggle {
    grid-column: 2;
    grid-row: 1;
  }

  .header-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  .header-epk,
  .sound-toggle {
    flex: 1;
  }

  .nav-menu-list {
    grid-template-columns: 1fr;
  }

  .nav-menu-content,
  .nav-menu-item:nth-child(3) .nav-menu-content,
  .nav-menu-item:nth-child(4) .nav-menu-content {
    position: static;
    width: 100%;
    margin-top: 0.4rem;
  }
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 12% 10%, oklch(38% 0.12 28 / 0.28), transparent 28rem),
    radial-gradient(circle at 88% 16%, oklch(33% 0.13 144 / 0.18), transparent 24rem),
    linear-gradient(115deg, oklch(9% 0.026 45), oklch(15% 0.035 33) 55%, oklch(11% 0.03 60));
  color: var(--ink);
  font-family: Urbanist, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, oklch(91% 0.04 90 / 0.05), transparent);
  mix-blend-mode: screen;
  transform: translateX(var(--light-x, -40vw));
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

#kaoz-canvas {
  position: fixed;
  inset: 0;
  z-index: -3;
}

.noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(transparent 50%, oklch(100% 0 0 / 0.035) 50%),
    repeating-linear-gradient(90deg, oklch(100% 0 0 / 0.04) 0 1px, transparent 1px 5px);
  background-size: 100% 4px, 6px 100%;
}

.laser-overlay {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

.flyer-preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 30;
  width: min(18rem, 30vw);
  max-height: 56vh;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.92);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}

.flyer-preview.is-visible {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

.flyer-preview img {
  width: 100%;
  max-height: 56vh;
  object-fit: contain;
  border: 1px solid oklch(94% 0.04 84 / 0.42);
  border-radius: var(--radius);
  background: oklch(8% 0.025 42);
  box-shadow: 0 28px 90px oklch(0% 0 0 / 0.72);
}

.laser-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--laser-x, 50%) var(--laser-y, 50%), oklch(96% 0.2 150 / 0.22), transparent 32%);
  opacity: var(--laser-flash, 0);
  transition: opacity 240ms var(--ease);
}

.room-laser {
  position: absolute;
  left: 50%;
  bottom: -12vh;
  width: 0.42rem;
  height: 130vh;
  border-radius: 999px;
  background: linear-gradient(to top, transparent, var(--laser-color), oklch(100% 0 0), var(--laser-color), transparent);
  box-shadow:
    0 0 18px var(--laser-color),
    0 0 55px var(--laser-color),
    0 0 120px var(--laser-color);
  transform-origin: 50% 100%;
  animation: laser-sweep 760ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes laser-sweep {
  0% {
    opacity: 0;
    transform: translateX(var(--laser-offset)) rotate(var(--laser-angle)) scaleY(0.1);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(var(--laser-offset)) rotate(calc(var(--laser-angle) + 12deg)) scaleY(1);
  }
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 20;
  transform: translateY(-150%);
  padding: 0.7rem 1rem;
  background: var(--amber);
  color: var(--void);
  border-radius: var(--radius);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md) clamp(1rem, 3vw, 2rem);
  background: linear-gradient(to bottom, oklch(10% 0.025 44 / 0.86), transparent);
  backdrop-filter: blur(14px);
}

.brand-mark img {
  width: clamp(7rem, 15vw, 12rem);
  filter: drop-shadow(0 0 22px oklch(90% 0.16 78 / 0.24));
}

.main-nav {
  display: flex;
  justify-content: center;
  gap: clamp(0.55rem, 2vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 0.82rem;
  font-weight: 900;
}

.main-nav a,
.quick-board a,
.contact-links a,
.button,
.header-epk,
.sound-toggle,
.icon-button,
.gear-list button,
.timeline button,
.answers button {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition:
    transform 220ms var(--ease),
    border-color 220ms var(--ease),
    background 220ms var(--ease),
    color 220ms var(--ease);
}

.main-nav a {
  padding: 0.55rem 0.8rem;
  background: oklch(12% 0.03 45 / 0.42);
}

.main-nav a:hover,
.quick-board a:hover,
.button:hover,
.header-epk:hover,
.sound-toggle:hover,
.icon-button:hover,
.gear-list button:hover,
.timeline button:hover,
.answers button:hover,
.contact-links a:hover {
  transform: translateY(-2px);
  border-color: oklch(88% 0.14 82 / 0.75);
}

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

.header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: end;
  gap: var(--space-sm);
}

.header-epk {
  position: relative;
  display: inline-grid;
  min-height: 44px;
  gap: 0.16rem;
  place-items: center;
  padding: 0.52rem 1rem 0.48rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--amber), oklch(66% 0.16 43)),
    repeating-linear-gradient(90deg, transparent 0 10px, oklch(10% 0.03 42 / 0.08) 11px);
  color: var(--void);
  font-size: 0.8rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.1), 0 12px 32px oklch(83% 0.17 77 / 0.22);
}

.header-epk::after {
  content: "2026";
  display: block;
  padding: 0.12rem 0.34rem;
  border: 1px solid oklch(8% 0.025 42 / 0.38);
  border-radius: 999px;
  font-size: 0.62rem;
}

.header-epk.is-denied {
  animation: archive-denied-shake 420ms var(--ease);
}

.sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  gap: 0.55rem;
  padding: 0.6rem 0.9rem;
  background: var(--panel);
  cursor: pointer;
}


.sound-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 18px var(--red);
}

.sound-toggle[aria-pressed="true"] .sound-dot {
  background: var(--green);
  box-shadow: 0 0 20px var(--green);
}

.hero {
  position: relative;
  min-height: 96svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(25rem, 0.68fr);
  align-items: end;
  gap: var(--space-xl);
  padding: clamp(7rem, 13vw, 10rem) clamp(1rem, 4vw, 4rem) var(--space-2xl);
}

.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -2;
}

.tape-gif {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  filter: saturate(0.88) contrast(1.15) brightness(0.72);
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, oklch(8% 0.02 42 / 0.78), transparent 55%),
    linear-gradient(0deg, oklch(9% 0.025 45) 2%, transparent 42%);
}

.reel {
  position: absolute;
  width: clamp(8rem, 18vw, 17rem);
  aspect-ratio: 1;
  border: 1px solid oklch(86% 0.08 80 / 0.28);
  border-radius: 999px;
  background:
    repeating-conic-gradient(from 0deg, oklch(82% 0.06 78 / 0.24) 0 6deg, transparent 6deg 22deg),
    radial-gradient(circle, transparent 0 20%, oklch(10% 0.02 48 / 0.75) 21% 100%);
  animation: reel-spin 8s linear infinite;
  opacity: 0.55;
}

.reel.left {
  top: 23%;
  right: 26%;
}

.reel.right {
  top: 23%;
  right: 6%;
  animation-duration: 7s;
}

.scanline {
  position: absolute;
  inset: auto 0 17%;
  height: 1px;
  background: var(--green);
  box-shadow: 0 0 32px var(--green);
  opacity: 0.5;
}

@keyframes reel-spin {
  to {
    transform: rotate(1turn);
  }
}

.hero-copy {
  max-width: 58rem;
}

.eyebrow,
.section-kicker,
.panel-label {
  margin: 0 0 var(--space-sm);
  color: var(--amber);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.section-kicker {
  font-family: "Bitcount Prop Single", Urbanist, sans-serif;
  font-size: clamp(0.86rem, 1vw, 1.08rem);
  font-weight: 700;
  line-height: 1;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 0.92;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(5.5rem, 18vw, 18rem);
  text-wrap: balance;
  color: oklch(94% 0.05 82);
  text-shadow:
    0 0 28px oklch(83% 0.17 77 / 0.22),
    0.05em 0.03em 0 oklch(25% 0.13 28 / 0.62);
}

h2 {
  font-size: clamp(3.2rem, 7vw, 7.8rem);
  max-width: 11ch;
}

h3 {
  font-size: clamp(2rem, 4vw, 3.8rem);
}

.hero-lede,
.section-heading p,
.label-section p {
  max-width: 58ch;
  margin: var(--space-md) 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.85rem 1.05rem;
  font-weight: 900;
  text-transform: uppercase;
}

.button.primary {
  background: var(--amber);
  color: oklch(14% 0.03 48);
  border-color: transparent;
}

.button.ghost {
  background: oklch(15% 0.035 45 / 0.62);
}

.now-panel {
  align-self: end;
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--panel), oklch(16% 0.05 30 / 0.72));
  box-shadow: 0 24px 90px oklch(0% 0 0 / 0.34);
}

.now-panel strong {
  display: block;
  font-size: 1.65rem;
  line-height: 1.1;
}

.now-panel a {
  color: var(--green);
  font-weight: 900;
}

.spotify-console {
  gap: 0.9rem;
  width: min(100%, 44rem);
  justify-self: end;
  padding: 1rem;
  background:
    linear-gradient(145deg, oklch(14% 0.045 42 / 0.92), oklch(7% 0.024 42 / 0.96)),
    repeating-linear-gradient(90deg, oklch(90% 0.05 80 / 0.04) 0 1px, transparent 1px 18px);
}

.spotify-console-top {
  padding: 0.2rem 0.35rem 0;
}

.spotify-console-top strong {
  color: var(--paper);
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 400;
  text-transform: uppercase;
}

.spotify-shell {
  position: relative;
  overflow: hidden;
  padding: 3.8rem 0.7rem 0.7rem;
  border: 1px solid oklch(84% 0.11 76 / 0.28);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 2.1rem, oklch(82% 0.13 76 / 0.16), transparent 8rem),
    linear-gradient(180deg, oklch(22% 0.045 42), oklch(8% 0.025 42));
  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.24), 0 22px 54px oklch(0% 0 0 / 0.32);
}

.spotify-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, oklch(100% 0 0 / 0.05) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 50% 62%, transparent 0 60%, oklch(0% 0 0 / 0.28));
  mix-blend-mode: screen;
  opacity: 0.5;
}

.spotify-reels {
  position: absolute;
  top: 0.64rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  pointer-events: none;
}

.spotify-reels span {
  width: 2.5rem;
  aspect-ratio: 1;
  border: 1px solid oklch(86% 0.08 76 / 0.45);
  border-radius: 999px;
  background:
    radial-gradient(circle, oklch(7% 0.02 42) 0 14%, transparent 14% 28%, oklch(84% 0.08 76 / 0.12) 29% 31%, transparent 32%),
    repeating-conic-gradient(from 20deg, oklch(88% 0.06 78 / 0.28) 0 8deg, transparent 8deg 22deg);
  animation: reel-spin 8s linear infinite;
}

.spotify-reels span:nth-child(2) {
  animation-duration: 6.5s;
  animation-direction: reverse;
}

.spotify-shell iframe {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: min(352px, 44vh);
  min-height: 19rem;
  border: 0;
  border-radius: calc(var(--radius) * 0.8);
  background: oklch(3% 0.01 42);
}

.spotify-link {
  justify-self: start;
  padding: 0.56rem 0.72rem;
  border: 1px solid oklch(83% 0.1 76 / 0.24);
  border-radius: var(--radius);
  background: oklch(7% 0.025 42 / 0.68);
  text-transform: uppercase;
}

.cassette-player {
  position: relative;
  isolation: isolate;
  min-height: clamp(33rem, 56vw, 43rem);
  width: 100%;
  overflow: hidden;
  border-radius: calc(var(--radius) * 1.25);
  background:
    radial-gradient(circle at 50% 50%, oklch(84% 0.05 78 / 0.14), transparent 18rem),
    linear-gradient(180deg, oklch(13% 0.035 42), oklch(5% 0.02 42));
  box-shadow: inset 0 0 0 1px oklch(84% 0.1 76 / 0.18), 0 30px 74px oklch(0% 0 0 / 0.36);
}

.cassette-art {
  position: absolute;
  left: 50%;
  bottom: -2%;
  z-index: 2;
  width: 112%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  filter: sepia(0.1) saturate(0.92) contrast(1.08) brightness(0.86);
  transform: translateX(-48.3%);
  transform-origin: center bottom;
}

.cassette-embed {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 0.85rem;
  width: 90%;
  height: 282px;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: oklch(6% 0.02 42);
  box-shadow: 0 10px 30px oklch(0% 0 0 / 0.38);
  transform: translateX(-50%);
}

.cassette-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
  filter: sepia(0.04) saturate(0.96) contrast(1.02);
}

@media (min-width: 761px) {
  .hero {
    min-height: calc(100dvh - 5.6rem);
    max-height: 57rem;
    align-items: center;
    padding-top: clamp(4.5rem, 8vh, 7rem);
    padding-bottom: clamp(2rem, 4vh, 3.5rem);
  }

  .cassette-player.compact-cassette {
    min-height: clamp(30rem, 48vw, 36rem);
  }
}

.cassette-reels {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.cassette-reels span {
  position: absolute;
  top: 67.2%;
  width: 10.1%;
  aspect-ratio: 1;
  margin-top: -5.05%;
  margin-left: -5.05%;
  border-radius: 999px;
  background:
    radial-gradient(circle, oklch(97% 0.02 90 / 0.65) 0 15%, transparent 16%),
    repeating-conic-gradient(from 20deg, oklch(96% 0.025 85 / 0.42) 0 12deg, transparent 12deg 28deg),
    radial-gradient(circle, transparent 0 54%, oklch(100% 0 0 / 0.22) 55% 61%, transparent 62%);
  mix-blend-mode: screen;
  animation: reel-spin 5.7s linear infinite;
  opacity: 0.72;
}

.cassette-reels .left {
  left: 32.9%;
}

.cassette-reels .right {
  left: 67.3%;
  animation-duration: 4.6s;
}

.cassette-window {
  position: absolute;
  z-index: 4;
  left: 40.9%;
  top: 63.2%;
  width: 22%;
  height: 8.2%;
  overflow: hidden;
  border-radius: 3px;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.52;
}

.cassette-window span {
  position: absolute;
  inset: 50% -40% auto;
  height: 2px;
  background: repeating-linear-gradient(90deg, oklch(96% 0.06 82) 0 0.9rem, transparent 0.9rem 1.3rem);
  animation: tape-run 1.8s linear infinite;
}

.cassette-player::after {
  content: "";
  position: absolute;
  inset: 6% 7% 11%;
  z-index: 6;
  pointer-events: none;
  border-radius: 12px;
  background:
    linear-gradient(115deg, transparent 0 26%, oklch(100% 0 0 / 0.12) 27% 28%, transparent 31% 100%),
    repeating-linear-gradient(0deg, oklch(100% 0 0 / 0.04) 0 1px, transparent 1px 4px);
  opacity: 0.46;
}

@keyframes tape-run {
  from { transform: translateX(-12%); }
  to { transform: translateX(12%); }
}

.quick-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  padding: 0 clamp(1rem, 4vw, 4rem);
  transform: translateY(-1px);
}

.quick-board a {
  min-height: 4.4rem;
  display: grid;
  place-items: center;
  background: oklch(18% 0.04 42 / 0.88);
  color: var(--muted);
  font-weight: 900;
}

.quick-board.social-board {
  display: block;
  padding: 1.15rem clamp(1rem, 4vw, 4rem) 1.35rem;
  border-block: 1px solid oklch(77% 0.1 70 / 0.16);
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, oklch(88% 0.05 78 / 0.025) 19px),
    linear-gradient(180deg, oklch(9% 0.025 42), oklch(5% 0.018 42));
  transform: none;
}

.social-console {
  position: relative;
  width: min(100%, 76rem);
  margin-inline: auto;
  padding: 0.58rem 0.72rem 0.72rem;
  border: 1px solid oklch(70% 0.08 70 / 0.28);
  border-radius: 0.42rem;
  background:
    linear-gradient(145deg, oklch(17% 0.035 45 / 0.96), oklch(8% 0.025 42 / 0.98)),
    repeating-linear-gradient(0deg, transparent 0 3px, oklch(100% 0 0 / 0.025) 4px);
  box-shadow:
    0 18px 38px oklch(0% 0 0 / 0.42),
    inset 0 1px 0 oklch(100% 0 0 / 0.08),
    inset 0 -1px 0 oklch(0% 0 0 / 0.72);
}

.social-console::before,
.social-console::after {
  content: "";
  position: absolute;
  top: 0.56rem;
  width: 0.28rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: oklch(47% 0.025 70);
  box-shadow: inset 0 1px 1px oklch(100% 0 0 / 0.28), 0 0 0 1px oklch(0% 0 0 / 0.65);
}

.social-console::before { left: 0.48rem; }
.social-console::after { right: 0.48rem; }

.social-console-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-bottom: 0.5rem;
  width: 100%;
  color: oklch(65% 0.05 72);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
}

.social-console-head i {
  width: 0.36rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px oklch(58% 0.22 29 / 0.8);
}

.social-icon-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.4rem, 1fr));
  gap: 0.42rem;
}

.quick-board.social-board .social-icon-row a {
  width: auto;
  min-height: 3rem;
  border-color: oklch(72% 0.08 70 / 0.2);
  border-radius: 0.28rem;
  background: linear-gradient(180deg, oklch(20% 0.04 45), oklch(11% 0.028 42));
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.06), inset 0 -5px 12px oklch(0% 0 0 / 0.25);
}

.quick-board.social-board img {
  width: clamp(1rem, 1.5vw, 1.25rem);
  height: clamp(1rem, 1.5vw, 1.25rem);
  object-fit: contain;
  transition: transform 220ms var(--ease), filter 220ms var(--ease);
}

.quick-board.social-board a:hover img,
.quick-board.social-board a:focus-visible img {
  filter: drop-shadow(0 0 8px currentColor);
  transform: scale(1.1);
}

.reel-hero-break {
  position: relative;
  min-height: clamp(32rem, 72vw, 58rem);
  overflow: hidden;
  background: oklch(5% 0.02 42);
}

.reel-break-link {
  position: absolute;
  inset: 0;
  display: block;
  color: var(--paper);
  text-decoration: none;
}

.reel-break-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.05) brightness(0.74);
  transform: scale(1.02);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), filter 500ms var(--ease);
}

.reel-break-link::before,
.reel-break-link::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.reel-break-link::before {
  z-index: 1;
  background:
    radial-gradient(circle at 34% 58%, transparent 0 18rem, oklch(0% 0 0 / 0.18) 25rem),
    linear-gradient(180deg, oklch(0% 0 0 / 0.1), oklch(0% 0 0 / 0.48));
}

.reel-break-link::after {
  z-index: 2;
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, oklch(100% 0 0 / 0.03) 4px 5px),
    linear-gradient(90deg, oklch(0% 0 0 / 0.58), transparent 44%, oklch(0% 0 0 / 0.18));
  mix-blend-mode: screen;
  opacity: 0.48;
}

.reel-break-copy {
  position: absolute;
  z-index: 3;
  left: clamp(1.1rem, 4vw, 4.5rem);
  bottom: clamp(1.4rem, 4vw, 4rem);
  display: grid;
  gap: 0.5rem;
  max-width: min(38rem, 78vw);
  text-transform: uppercase;
}

.reel-break-copy:has(> em:only-child) {
  max-width: none;
}

.reel-break-copy small,
.reel-break-copy em {
  font-family: "Bitcount Prop Single", "IBM Plex Mono", monospace;
  color: var(--amber);
  font-size: clamp(0.76rem, 1.2vw, 1rem);
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.reel-break-copy strong {
  color: oklch(96% 0.035 82);
  font-size: clamp(3rem, 8vw, 8.5rem);
  line-height: 0.82;
  max-width: 12ch;
  text-shadow: 0.035em 0.035em 0 oklch(30% 0.11 38 / 0.65), 0 0 3rem oklch(82% 0.16 76 / 0.12);
}

.reel-break-copy em {
  width: max-content;
  padding-bottom: 0.38rem;
  border-bottom: 1px solid currentColor;
}

.reel-break-copy:has(> em:only-child) em {
  padding: 0.58rem 0.78rem 0.48rem;
  border: 1px solid currentColor;
  background: oklch(4% 0.018 42 / 0.58);
  box-shadow: 0 0 1.2rem oklch(78% 0.16 76 / 0.18);
}

.reel-break-link:hover img,
.reel-break-link:focus-visible img {
  filter: saturate(1.04) contrast(1.08) brightness(0.86);
  transform: scale(1.055);
}

.section {
  padding: var(--space-3xl) clamp(1rem, 4vw, 4rem);
}

@supports (content-visibility: auto) {
  .section:not(.tour-section):not(.label-section) {
    content-visibility: auto;
    contain-intrinsic-size: 900px;
  }

  .gallery-section,
  .archive-section {
    contain-intrinsic-size: 1400px;
  }
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.7fr);
  gap: var(--space-xl);
  align-items: end;
  margin-bottom: var(--space-xl);
}

.machine-grid,
.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: var(--space-md);
}

.machine-stack {
  display: grid;
  gap: var(--space-xl);
}

.machine-stack > article {
  min-height: clamp(26rem, 62vh, 44rem);
}

.next-show-board {
  display: grid;
  grid-template-columns: minmax(13rem, 0.48fr) minmax(0, 1.52fr) auto;
  gap: 1px;
  align-items: stretch;
  margin-bottom: 0;
  border: 1px solid oklch(83% 0.1 76 / 0.34);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 20%, oklch(78% 0.16 74 / 0.16), transparent 18rem),
    linear-gradient(135deg, oklch(12% 0.035 42), oklch(4% 0.02 42));
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.06),
    0 1.2rem 3rem oklch(0% 0 0 / 0.32);
}

.next-show-flyer,
.next-show-actions,
.next-show-ticket {
  background:
    linear-gradient(180deg, oklch(15% 0.04 42 / 0.94), oklch(7% 0.024 42 / 0.98)),
    repeating-linear-gradient(0deg, transparent 0 5px, oklch(100% 0 0 / 0.025) 5px 6px);
}

.next-show-flyer {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: clamp(0.75rem, 1.3vw, 1rem);
}

.next-show-flyer img {
  width: min(100%, 15rem);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid oklch(83% 0.1 76 / 0.32);
  border-radius: 6px;
  background: oklch(8% 0.024 42);
  box-shadow:
    0 0 0 1px oklch(0% 0 0 / 0.35),
    0 1rem 2rem oklch(0% 0 0 / 0.34);
}

.split-flap-board {
  --flap-cols: 22;
  display: grid;
  grid-template-columns: repeat(var(--flap-cols), minmax(0, 1fr));
  gap: clamp(1px, 0.2vw, 3px);
  align-content: center;
  min-height: clamp(9rem, 16vw, 13rem);
  padding: clamp(0.8rem, 1.55vw, 1.4rem);
  background:
    linear-gradient(180deg, oklch(8% 0.02 42), oklch(2% 0.012 42)),
    repeating-linear-gradient(90deg, transparent 0 13px, oklch(100% 0 0 / 0.025) 13px 14px);
  perspective: 900px;
}

.split-flap-cell {
  position: relative;
  display: block;
  aspect-ratio: 1 / 0.64;
  overflow: hidden;
  border: 1px solid oklch(70% 0.04 76 / 0.22);
  border-radius: 3px;
  background: oklch(5% 0.018 42);
  color: var(--paper);
  font-family: "Bitcount Prop Single", "IBM Plex Mono", monospace;
  font-size: clamp(0.62rem, 1.45vw, 1.35rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  transform-style: preserve-3d;
  will-change: transform;
}

.split-flap-cell::before,
.split-flap-cell::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  pointer-events: none;
}

.split-flap-cell::before {
  top: 50%;
  z-index: 2;
  height: 1px;
  background: oklch(0% 0 0 / 0.62);
  box-shadow: 0 -1px 0 oklch(100% 0 0 / 0.08);
}

.split-flap-cell::after {
  inset-block: 0;
  background:
    linear-gradient(180deg, oklch(100% 0 0 / 0.08), transparent 46%, oklch(0% 0 0 / 0.34) 52%, transparent),
    radial-gradient(circle at 50% 0%, oklch(84% 0.15 76 / 0.16), transparent 58%);
  opacity: 0.78;
}

.flap-half {
  position: absolute;
  inset-inline: 0;
  height: 50%;
  overflow: hidden;
  background:
    linear-gradient(180deg, oklch(20% 0.035 42), oklch(7% 0.02 42));
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.flap-half b {
  position: absolute;
  inset-inline: 0;
  height: 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  line-height: 1;
  text-align: center;
}

.flap-current-top,
.flap-previous-top {
  top: 0;
  border-bottom: 1px solid oklch(0% 0 0 / 0.62);
}

.flap-current-bottom,
.flap-next-bottom {
  bottom: 0;
  background:
    linear-gradient(180deg, oklch(5% 0.016 42), oklch(14% 0.032 42));
}

.flap-current-top b,
.flap-previous-top b {
  top: 0;
}

.flap-current-bottom b,
.flap-next-bottom b {
  bottom: 0;
}

.flap-previous-top,
.flap-next-bottom {
  z-index: 4;
  opacity: 0;
  will-change: transform, opacity;
}

.flap-previous-top {
  transform-origin: bottom;
}

.flap-next-bottom {
  transform-origin: top;
  transform: rotateX(88deg);
}

.split-flap-cell.is-flipping .flap-previous-top {
  opacity: 1;
  animation: split-flap-top 320ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
}

.split-flap-cell.is-flipping .flap-next-bottom {
  opacity: 1;
  animation: split-flap-bottom 260ms 145ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.split-flap-cell.is-accent {
  color: var(--void);
}

.split-flap-cell.is-accent .flap-half {
  background:
    linear-gradient(180deg, oklch(86% 0.16 76), oklch(63% 0.15 58));
}

.split-flap-cell.is-accent .flap-current-bottom,
.split-flap-cell.is-accent .flap-next-bottom {
  background:
    linear-gradient(180deg, oklch(42% 0.12 46), oklch(75% 0.15 70));
}

.split-flap-cell.is-blank {
  color: transparent;
}

.next-show-actions {
  min-width: 9.8rem;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: stretch;
  border-left: 1px solid oklch(83% 0.1 76 / 0.2);
}

.next-show-ticket {
  min-width: 8.5rem;
  display: grid;
  place-items: center;
  align-self: stretch;
  padding: 1rem;
  border: 0;
  border-radius: 0;
  color: var(--amber);
  font-family: "Bitcount Prop Single", "IBM Plex Mono", monospace;
  font-weight: 900;
  text-transform: uppercase;
  transition: background 220ms var(--ease), color 220ms var(--ease), transform 220ms var(--ease);
}

.next-show-ticket:hover {
  background: var(--amber);
  color: var(--void);
}

.show-share {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0 0.65rem 0.8rem;
  isolation: isolate;
}

.show-share-trigger,
.show-share-panel a,
.show-share-panel button {
  min-height: 2.35rem;
  border: 1px solid oklch(83% 0.1 76 / 0.28);
  border-radius: 999px;
  color: var(--paper);
  font-family: "Bitcount Prop Single", "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.show-share-trigger {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  width: 7.1rem;
  padding: 0 0.9rem;
  background:
    linear-gradient(180deg, oklch(17% 0.04 42 / 0.96), oklch(7% 0.02 42 / 0.98)),
    repeating-linear-gradient(90deg, transparent 0 6px, oklch(100% 0 0 / 0.035) 6px 7px);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.08),
    0 0.5rem 1.2rem oklch(0% 0 0 / 0.28);
  cursor: pointer;
  transition: border-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
}

.show-share-trigger span {
  display: grid;
  width: 1.05rem;
  height: 1.05rem;
  place-items: center;
  border-radius: 999px;
  background: var(--amber);
  color: var(--void);
  line-height: 1;
  transition: transform 260ms var(--ease);
}

.show-share.is-open .show-share-trigger,
.show-share-trigger:hover,
.show-share-trigger:focus-visible {
  border-color: oklch(83% 0.14 76 / 0.72);
  color: var(--amber);
  transform: translateY(-1px);
}

.show-share.is-open .show-share-trigger span {
  transform: rotate(45deg);
}

.show-share.is-open .show-share-trigger {
  opacity: 0;
  pointer-events: none;
}

.show-share-panel {
  position: absolute;
  right: 0.65rem;
  bottom: 0.55rem;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 0.3rem;
  width: max-content;
  max-width: min(23rem, calc(100vw - 2rem));
  padding: 0.25rem;
  border: 1px solid oklch(83% 0.1 76 / 0.28);
  border-radius: 999px;
  background:
    linear-gradient(180deg, oklch(10% 0.03 42 / 0.98), oklch(4% 0.018 42 / 0.98)),
    repeating-linear-gradient(90deg, transparent 0 9px, oklch(100% 0 0 / 0.025) 9px 10px);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.07),
    0 0.8rem 1.8rem oklch(0% 0 0 / 0.34);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0.25rem, 0, 0) scaleX(0.68);
  transform-origin: right center;
  transition: opacity 180ms var(--ease), transform 260ms var(--ease);
}

.show-share.is-open .show-share-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scaleX(1);
}

.show-share-panel a,
.show-share-panel button {
  display: grid;
  min-width: 2.35rem;
  place-items: center;
  padding: 0 0.65rem;
  background: oklch(14% 0.034 42 / 0.86);
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
}

.show-share-panel a:hover,
.show-share-panel a:focus-visible,
.show-share-panel button:hover,
.show-share-panel button:focus-visible {
  background: var(--amber);
  color: var(--void);
  transform: translateY(-1px);
}

.show-share-panel button.is-copied {
  background: oklch(76% 0.13 146);
  color: var(--void);
}

@keyframes split-flap-top {
  0% {
    filter: brightness(1.35);
    transform: rotateX(0deg);
  }
  100% {
    filter: brightness(0.7);
    transform: rotateX(-96deg);
  }
}

@keyframes split-flap-bottom {
  0% {
    filter: brightness(0.76);
    transform: rotateX(92deg);
  }
  100% {
    filter: brightness(1.06);
    transform: rotateX(0deg);
  }
}

@media (max-width: 760px) {
  .next-show-board {
    grid-template-columns: 1fr;
  }

  .split-flap-board {
    --flap-cols: 22;
    min-height: 9.5rem;
    padding: 0.65rem;
  }

  .split-flap-cell {
    font-size: clamp(0.5rem, 3.1vw, 0.82rem);
  }

  .next-show-ticket {
    min-height: 3.8rem;
    border-left: 0;
    border-top: 1px solid oklch(83% 0.1 76 / 0.2);
  }
}

/* Mobile navigation: reuse the full desktop menu as a readable, fixed drawer. */
@media (max-width: 760px) {
  .site-header .main-nav.vintage-nav {
    position: fixed;
    z-index: 60;
    top: calc(var(--mobile-header-height) + 0.45rem);
    left: 0.55rem;
    right: 0.55rem;
    display: none;
    max-height: calc(100dvh - var(--mobile-header-height) - 0.85rem);
    padding: 0.7rem;
    overflow-y: auto;
    border: 1px solid oklch(82% 0.1 76 / 0.34);
    border-radius: 0.55rem;
    background: linear-gradient(180deg, oklch(16% 0.04 48 / 0.99), oklch(6% 0.022 42 / 0.99));
    box-shadow: 0 1.25rem 3rem oklch(0% 0 0 / 0.58);
  }

  .site-header .main-nav.vintage-nav.is-open { display: block; }
  .site-header .nav-menu-list { display: grid; gap: 0.4rem; }
  .site-header .nav-menu-trigger { width: 100%; justify-content: flex-start; min-height: 3.1rem; }
  .site-header .nav-menu-content,
  .site-header .nav-menu-item:nth-child(3) .nav-menu-content,
  .site-header .nav-menu-item:nth-child(4) .nav-menu-content {
    position: static;
    width: auto;
    margin: 0.3rem 0 0;
  }

  .site-header .nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 5.7rem;
    min-height: 2.9rem;
    border-color: oklch(78% 0.1 76 / 0.42);
    background: oklch(14% 0.035 43 / 0.96);
    color: oklch(92% 0.04 80);
    font: 800 0.68rem/1 "IBM Plex Mono", monospace;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .hero-copy h1 {
    font-size: clamp(3.8rem, 17vw, 4.9rem);
    line-height: 0.84;
  }

  .hero-copy h1 span { display: block; }
  #spotify-hero-embed { height: 152px; }
}

/* Vintage micro-interactions */
:root {
  --micro-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.micro-ready :where(
  .button,
  .ticket-button,
  .set-roulette-button,
  .release-beatport-link,
  .spotify-link,
  .epk-button,
  .footer-link,
  .kaoz-mail button,
  .gallery-toolbar button,
  .record-controls button,
  .record-list button,
  .tribute-toolbar button,
  .archive-reading-order a,
  .archive-open-card summary,
  .quick-board.social-board .social-icon-row a,
  .footer-social,
  .kaoz-socials a,
  .retro-side-button,
  .retro-button
) {
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 180ms var(--micro-ease),
    filter 180ms var(--micro-ease),
    box-shadow 220ms var(--micro-ease),
    border-color 220ms var(--micro-ease),
    background-color 220ms var(--micro-ease);
}

.micro-ready :where(
  .button,
  .ticket-button,
  .set-roulette-button,
  .release-beatport-link,
  .spotify-link,
  .epk-button,
  .footer-link,
  .kaoz-mail button,
  .gallery-toolbar button,
  .record-controls button,
  .record-list button,
  .tribute-toolbar button,
  .archive-reading-order a,
  .archive-open-card summary,
  .quick-board.social-board .social-icon-row a,
  .footer-social,
  .kaoz-socials a,
  .retro-side-button,
  .retro-button
):hover {
  filter: brightness(1.12) saturate(1.12);
  box-shadow: 0 0 0 1px rgba(229, 176, 65, 0.35), 0 0 1.4rem rgba(229, 176, 65, 0.18);
}

.micro-ready :where(
  .button,
  .ticket-button,
  .set-roulette-button,
  .release-beatport-link,
  .spotify-link,
  .epk-button,
  .footer-link,
  .kaoz-mail button,
  .gallery-toolbar button,
  .record-controls button,
  .record-list button,
  .tribute-toolbar button,
  .archive-reading-order a,
  .archive-open-card summary,
  .quick-board.social-board .social-icon-row a,
  .footer-social,
  .kaoz-socials a,
  .retro-side-button,
  .retro-button
).is-pressed {
  transform: translateY(2px) scale(0.985);
  filter: brightness(1.18) contrast(1.05);
}

.micro-ready :where(
  .interview-card,
  .archive-era-card,
  .archive-open-card,
  .merch-card,
  .tv-card,
  .reel-break-link,
  .bio-panel,
  .next-show-board
) {
  --mx: 50%;
  --my: 50%;
  position: relative;
  overflow: hidden;
  transition:
    transform 280ms var(--micro-ease),
    filter 280ms var(--micro-ease),
    border-color 280ms var(--micro-ease),
    box-shadow 280ms var(--micro-ease);
}

.micro-ready :where(
  .interview-card,
  .archive-era-card,
  .archive-open-card,
  .merch-card,
  .tv-card,
  .reel-break-link,
  .bio-panel,
  .next-show-board
):hover {
  filter: brightness(1.07) sepia(0.04);
  border-color: rgba(229, 176, 65, 0.42);
  box-shadow: inset 0 0 0 1px rgba(229, 176, 65, 0.14), 0 1.2rem 3.8rem rgba(0, 0, 0, 0.28);
}

.micro-ready :where(.interview-card, .merch-card):hover {
  transform: translateY(-3px);
}

.micro-spotlight {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(229, 176, 65, 0.2), rgba(229, 176, 65, 0.08) 7rem, transparent 18rem),
    linear-gradient(115deg, transparent 12%, rgba(255, 244, 207, 0.08) 22%, transparent 32%);
  mix-blend-mode: screen;
  transition: opacity 180ms var(--micro-ease);
}

.micro-ready :where(
  .interview-card,
  .archive-era-card,
  .archive-open-card,
  .merch-card,
  .tv-card,
  .reel-break-link,
  .bio-panel,
  .next-show-board
):hover > .micro-spotlight,
.micro-ready :where(
  .interview-card,
  .archive-era-card,
  .archive-open-card,
  .merch-card,
  .tv-card,
  .reel-break-link,
  .bio-panel,
  .next-show-board
).is-spotlit > .micro-spotlight {
  opacity: 1;
}

.micro-ready .micro-reveal:not(.is-in-view) {
  opacity: 0.7;
  transform: translateY(12px);
}

.micro-ready .micro-reveal.is-in-view {
  animation: micro-rise 640ms var(--micro-ease) both;
}

.is-tape-flicker {
  animation: tape-flicker 360ms steps(2, end);
}

.micro-ready .record-list button:hover,
.micro-ready .interview-card:hover .interview-source {
  color: oklch(86% 0.13 76);
  text-shadow: 0 0 0.8rem rgba(229, 176, 65, 0.28);
}

.micro-ready .cassette-player:hover .cassette-reel,
.micro-ready .footer-cassette-player:hover .cassette-reel {
  filter: drop-shadow(0 0 0.65rem rgba(229, 176, 65, 0.28));
}

.micro-ready .reel-hero-break:hover .reel-break-media img {
  filter: contrast(1.08) saturate(1.08) sepia(0.06);
}

@keyframes micro-rise {
  from {
    opacity: 0.48;
    transform: translateY(16px);
    filter: blur(2px) sepia(0.06);
  }
  62% {
    filter: blur(0) sepia(0.06);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: none;
  }
}

@keyframes tape-flicker {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
  30% {
    opacity: 0.72;
    transform: translateY(-1px);
    filter: brightness(1.25) contrast(1.2);
  }
  55% {
    opacity: 0.9;
    transform: translateY(1px);
    filter: sepia(0.28) saturate(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .micro-ready .micro-reveal,
  .micro-ready .micro-reveal.is-in-view,
  .is-tape-flicker {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .micro-ready :where(
    .interview-card,
    .merch-card
  ):hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .split-flap-cell {
    animation: none;
  }
}

.show-console {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: oklch(10% 0.028 42 / 0.72);
}

.show-row {
  display: grid;
  grid-template-columns: 8.5rem 5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  min-height: 7.5rem;
  padding: var(--space-sm);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, oklch(22% 0.05 42 / 0.8), transparent),
    repeating-linear-gradient(90deg, transparent 0 18px, oklch(100% 0 0 / 0.025) 18px 19px);
  transition: transform 260ms var(--ease), background 260ms var(--ease);
}

.show-row.is-past-show {
  display: none !important;
}

.show-row:last-child {
  border-bottom: 0;
}

.show-row:last-child img {
  object-fit: contain;
  object-position: center;
  background: oklch(8% 0.024 42);
}

.show-row:hover {
  transform: translateX(0.45rem);
  background:
    linear-gradient(90deg, oklch(30% 0.08 52 / 0.95), oklch(13% 0.03 42 / 0.68)),
    repeating-linear-gradient(90deg, transparent 0 18px, oklch(100% 0 0 / 0.035) 18px 19px);
}

.show-row img {
  width: 8.5rem;
  height: 6.5rem;
  object-fit: cover;
  border-radius: 6px;
  background: oklch(9% 0.02 42);
}

.show-row time {
  display: grid;
  place-items: center;
  min-height: 5rem;
  padding: 0.5rem 0.35rem 0.42rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--amber);
  font-family: "Bebas Neue", sans-serif;
  font-size: 2.6rem;
  line-height: 0.92;
  overflow: visible;
}

.show-row time span {
  font-family: Urbanist, sans-serif;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.show-row h3 {
  font-family: Urbanist, sans-serif;
  font-size: clamp(1rem, 2vw, 1.45rem);
  font-weight: 900;
  line-height: 1.05;
}

.show-row p {
  margin: 0.35rem 0 0;
  color: var(--muted);
}

.flag {
  display: inline-block;
  margin-right: 0.35rem;
  font-size: 1.1rem;
}

.show-row a,
.show-sources a {
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--green);
  font-weight: 900;
}

.show-row .ticket-button {
  background: var(--amber);
  color: var(--void);
  border-color: transparent;
  text-transform: uppercase;
}

.show-sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.drum-machine,
.laser-harp,
.gear-drawer,
.piano-machine,
.timeline,
.trivia,
.archive-photo {
  position: relative;
  min-height: 18rem;
  padding: var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, oklch(21% 0.04 44 / 0.92), oklch(12% 0.03 38 / 0.86)),
    repeating-linear-gradient(0deg, transparent 0 11px, oklch(100% 0 0 / 0.03) 12px);
  overflow: hidden;
}

.drum-machine::after,
.laser-harp::after,
.gear-drawer::after {
  content: "";
  position: absolute;
  inset: auto var(--space-lg) var(--space-lg);
  height: 2px;
  background: linear-gradient(90deg, var(--amber), var(--green), transparent);
  opacity: 0.7;
}

.machine-note,
#gear-copy,
#trivia-result,
.timeline-display p {
  color: var(--muted);
}

.media-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}

.residency-section {
  padding-top: 0;
}

.residency-section .section-heading {
  grid-template-columns: minmax(0, 1.35fr) minmax(22rem, 0.65fr);
}

#residency-title {
  max-width: none;
  font-size: clamp(4rem, 8.4vw, 9rem);
}

.residency-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.media-tile {
  position: relative;
  min-height: 16rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-solid);
}

.media-tile.large {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 34rem;
}

.media-tile.wide {
  grid-column: span 2;
}

.media-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.08);
  transition: transform 500ms var(--ease), filter 500ms var(--ease);
}

.media-tile:hover img {
  transform: scale(1.045);
  filter: saturate(1.1) contrast(1.16);
}

.media-tile span {
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: var(--space-md);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: oklch(10% 0.02 42 / 0.82);
  backdrop-filter: blur(12px);
  font-weight: 900;
  text-transform: uppercase;
}

.machines {
  background:
    linear-gradient(180deg, transparent, oklch(19% 0.04 40 / 0.72) 22%, transparent),
    repeating-linear-gradient(90deg, oklch(90% 0.1 80 / 0.07) 0 1px, transparent 1px 9vw);
}

.machine-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.icon-button {
  min-width: 4.5rem;
  min-height: 44px;
  background: oklch(13% 0.03 40);
  cursor: pointer;
  font-weight: 900;
}

.gallery-section {
  background:
    radial-gradient(circle at 78% 12%, oklch(78% 0.13 72 / 0.11), transparent 28rem),
    linear-gradient(180deg, oklch(13% 0.036 44 / 0.94), oklch(7% 0.026 42 / 0.96));
}

.gallery-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.gallery-toolbar button,
.gallery-toolbar a {
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0.68rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: oklch(10% 0.03 42 / 0.82);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-transform: uppercase;
  transition: transform 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease);
}

.gallery-toolbar a,
.epk-button {
  background: var(--amber);
  color: var(--void);
}

.gallery-toolbar button:hover,
.gallery-toolbar button.active,
.gallery-toolbar a:hover {
  transform: translateY(-0.16rem);
}

.gallery-toolbar button.active {
  background: var(--green);
  color: var(--void);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(12rem, 16vw);
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid oklch(82% 0.08 76 / 0.2);
  background:
    repeating-linear-gradient(90deg, oklch(92% 0.04 84 / 0.045) 0 1px, transparent 1px 3.2rem),
    repeating-linear-gradient(0deg, oklch(92% 0.04 84 / 0.035) 0 1px, transparent 1px 3.2rem),
    oklch(8% 0.03 42 / 0.74);
}

.gallery-item {
  position: relative;
  grid-column: span 2;
  min-height: 14rem;
  overflow: hidden;
  border: 0.55rem solid oklch(91% 0.035 82);
  border-bottom-width: 1.55rem;
  border-radius: 2px;
  background: oklch(91% 0.035 82);
  box-shadow: 0 18px 40px oklch(0% 0 0 / 0.26);
  transform: rotate(var(--tilt, -0.35deg));
}

.gallery-item:nth-child(3n) { --tilt: 0.42deg; }
.gallery-item:nth-child(4n) { --tilt: -0.75deg; }
.gallery-item:nth-child(7n) { --tilt: 0.88deg; }

.gallery-item.hero-shot,
.gallery-item.wide {
  grid-column: span 3;
}

.gallery-item.tall {
  grid-row: span 2;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.12) saturate(0.82) contrast(1.08) brightness(0.82);
  transition: transform 650ms var(--ease), filter 220ms var(--ease), opacity 220ms var(--ease);
}

.gallery-item:hover img {
  transform: scale(1.055);
  filter: saturate(0.98) contrast(1.08) brightness(0.9);
}

.gallery-item span {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: -1.25rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: oklch(18% 0.035 44);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.video-thumb::before {
  content: "Play";
  position: absolute;
  z-index: 2;
  top: var(--space-sm);
  left: var(--space-sm);
  min-height: 2rem;
  display: inline-grid;
  place-items: center;
  padding: 0.35rem 0.62rem;
  border: 1px solid oklch(100% 0 0 / 0.24);
  border-radius: var(--radius);
  background: oklch(0% 0 0 / 0.68);
  color: var(--amber);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.gallery-item.is-hidden {
  display: none;
}

.icon-button.is-playing {
  background: var(--green);
  color: var(--void);
}

.steps {
  display: grid;
  grid-template-columns: repeat(8, minmax(1.8rem, 1fr));
  gap: 0.45rem;
}

.step {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: oklch(13% 0.03 42);
  cursor: pointer;
}

.step.active {
  background: var(--amber);
  box-shadow: 0 0 22px oklch(83% 0.17 77 / 0.42);
}

.step.playing {
  transform: translateY(-4px);
  border-color: var(--green);
}

.harp-stage {
  min-height: clamp(20rem, 46vh, 34rem);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.45rem;
  padding: var(--space-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: oklch(8% 0.025 40 / 0.66);
}

.harp-stage button {
  position: relative;
  min-height: clamp(18rem, 42vh, 31rem);
  border: 0;
  border-radius: 4px;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 0.75rem 0.35rem;
  color: oklch(96% 0.018 92);
  background: linear-gradient(
    to top,
    oklch(76% 0.2 calc(28 + var(--i) * 36) / 0.92),
    oklch(76% 0.2 calc(28 + var(--i) * 36) / 0.08)
  );
  box-shadow: 0 0 26px oklch(72% 0.18 calc(28 + var(--i) * 36) / 0.42);
  cursor: pointer;
  transform-origin: bottom;
  font-weight: 900;
  text-shadow: 0 0 12px oklch(0% 0 0 / 0.82);
}

.harp-stage button.is-hit {
  transform: scaleY(1.04);
  filter: brightness(1.45);
}

.piano {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.25rem;
  min-height: clamp(15rem, 34vh, 24rem);
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: oklch(8% 0.025 40);
}

.piano button {
  min-height: clamp(13rem, 30vh, 21rem);
  border: 1px solid oklch(14% 0.02 45 / 0.5);
  border-radius: 0 0 7px 7px;
  cursor: pointer;
  font-weight: 900;
  transition: transform 150ms var(--ease), filter 150ms var(--ease);
}

.white-key {
  align-self: stretch;
  background: linear-gradient(180deg, oklch(96% 0.018 90), oklch(78% 0.04 82));
  color: var(--void);
}

.black-key {
  align-self: start;
  min-height: clamp(9rem, 21vh, 15rem) !important;
  background: linear-gradient(180deg, oklch(20% 0.03 40), oklch(6% 0.02 38));
  color: var(--ink);
  box-shadow: 0 12px 22px oklch(0% 0 0 / 0.42);
}

.piano-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.piano-controls button {
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: oklch(12% 0.03 42 / 0.88);
  cursor: pointer;
  font-weight: 900;
  text-transform: uppercase;
}

.piano-controls button[aria-pressed="true"] {
  background: var(--green);
  color: var(--void);
}

.piano-controls span {
  color: var(--muted);
  font-weight: 900;
}

.piano button.is-hit {
  transform: translateY(5px);
  filter: brightness(1.28);
}

.meter {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--red);
  color: var(--ink);
  font-weight: 900;
}

.gear-list {
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}

.gear-preview {
  min-height: 13rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: oklch(8% 0.025 40);
}

.gear-preview img {
  width: 100%;
  height: 100%;
  min-height: 13rem;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.12);
}

.gear-list button,
.timeline button,
.answers button {
  min-height: 44px;
  padding: 0.7rem 0.85rem;
  background: oklch(12% 0.03 42 / 0.8);
  cursor: pointer;
  text-align: left;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

.archive-photo {
  display: grid;
  align-content: end;
  min-height: 24rem;
  padding: 0;
}

.archive-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.12) brightness(0.72);
}

.archive-photo div {
  position: relative;
  z-index: 1;
  padding: var(--space-lg);
  background: linear-gradient(0deg, oklch(8% 0.025 42 / 0.9), transparent);
}

.archive-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.archive-deck article {
  min-height: 17rem;
  padding: var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 18% 14%, oklch(80% 0.14 78 / 0.18), transparent 48%),
    linear-gradient(140deg, oklch(20% 0.04 42 / 0.92), oklch(11% 0.03 36 / 0.88));
}

.archive-deck span {
  display: inline-flex;
  margin-bottom: var(--space-sm);
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.archive-deck h3 {
  margin-bottom: var(--space-md);
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.archive-deck p {
  margin: 0;
  color: var(--muted);
}

.next-question {
  min-height: 44px;
  margin-top: var(--space-sm);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--amber);
  color: var(--void);
  cursor: pointer;
  font-weight: 900;
}

.timeline button.active,
.answers button.correct {
  background: var(--green);
  color: var(--void);
}

.timeline-display {
  grid-column: 1 / -1;
  align-self: end;
  padding-top: var(--space-xl);
}

.timeline-display span {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 0.9;
  color: var(--amber);
}

.answers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}

.label-section {
  display: grid;
  grid-template-columns: minmax(18rem, 0.48fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
  background: transparent;
}

.merch-section {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, oklch(84% 0.14 78 / 0.07) 1px, transparent 1px) 0 0 / 3.5rem 3.5rem,
    radial-gradient(circle at 18% 18%, oklch(78% 0.16 73 / 0.18), transparent 34rem),
    linear-gradient(180deg, oklch(16% 0.035 48 / 0.84), oklch(7% 0.025 35 / 0.92));
}

.merch-section::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px dashed oklch(72% 0.12 72 / 0.28);
  pointer-events: none;
}

.merch-section .section-heading {
  position: relative;
  z-index: 1;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

.merch-section .section-heading h2 {
  max-width: none;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: normal;
}

.merch-section .section-heading p {
  max-width: 58rem;
}

.merch-board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.35rem);
  margin-top: var(--space-lg);
}

.merch-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 31rem;
  border: 1px solid oklch(70% 0.1 71 / 0.32);
  background:
    linear-gradient(180deg, oklch(10% 0.025 42 / 0.84), oklch(5% 0.018 32 / 0.94)),
    var(--panel);
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.035), 0 1.2rem 3rem oklch(0% 0 0 / 0.28);
  transform: rotate(var(--tilt, -0.3deg));
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.merch-card:nth-child(2n) {
  --tilt: 0.45deg;
}

.merch-card:nth-child(3n) {
  --tilt: -0.6deg;
}

.merch-card::before {
  content: "OFFICIAL";
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 3;
  padding: 0.28rem 0.48rem;
  border: 1px solid oklch(82% 0.13 78 / 0.38);
  background: oklch(8% 0.02 32 / 0.72);
  color: var(--amber);
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.merch-card:hover {
  border-color: oklch(82% 0.15 78 / 0.7);
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.05), 0 1.6rem 4rem oklch(0% 0 0 / 0.42), 0 0 3.2rem oklch(78% 0.16 73 / 0.22);
}

.merch-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 22rem;
  overflow: hidden;
  border-bottom: 1px solid oklch(70% 0.1 71 / 0.22);
  background:
    radial-gradient(circle at 50% 42%, oklch(80% 0.12 78 / 0.2), transparent 12rem),
    repeating-linear-gradient(0deg, oklch(100% 0 0 / 0.025) 0 1px, transparent 1px 4px);
}

.merch-visual::after {
  content: "";
  position: absolute;
  inset: 1.1rem;
  border: 1px solid oklch(90% 0.06 80 / 0.12);
  pointer-events: none;
}

.merch-shirt {
  width: min(82%, 15rem);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 1.6rem 1.6rem oklch(0% 0 0 / 0.55));
}

.merch-art {
  position: absolute;
  top: 39%;
  left: 50%;
  width: 23%;
  max-height: 28%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0.35rem 0.45rem oklch(0% 0 0 / 0.32));
  mix-blend-mode: normal;
}

.merch-meta {
  display: grid;
  align-content: space-between;
  gap: 0.8rem;
  padding: 1rem;
}

.merch-meta span {
  color: var(--muted);
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.merch-meta h3 {
  margin: 0;
  color: var(--paper);
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.merch-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.merch-buy strong {
  color: var(--amber);
  font-family: "Bebas Neue", sans-serif;
  font-size: 2rem;
  line-height: 1;
}

.merch-buy a,
.merch-store-link {
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0.65rem 0.95rem;
  border: 1px solid oklch(80% 0.13 78 / 0.5);
  color: var(--paper);
  background: oklch(13% 0.035 45 / 0.72);
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.82rem;
  text-transform: uppercase;
}

.merch-buy a:hover,
.merch-store-link:hover {
  background: var(--amber);
  color: var(--void);
}

.merch-visual:focus-visible,
.merch-buy a:focus-visible,
.merch-store-link:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
}

.merch-store-link {
  position: relative;
  z-index: 1;
  width: max-content;
  margin-top: var(--space-lg);
}

@media (max-width: 1200px) {
  .merch-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.kaoz-profile {
  position: sticky;
  top: 7rem;
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  min-height: 42rem;
  padding: var(--space-xl);
  background: linear-gradient(180deg, oklch(0% 0 0 / 0.02), oklch(0% 0 0 / 0.86));
}

.kaoz-avatar {
  width: min(30rem, 100%);
  aspect-ratio: 1;
  object-fit: cover;
  background: oklch(96% 0.01 92);
}

.kaoz-profile h2 {
  max-width: none;
  font-family: Urbanist, sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
}

.kaoz-profile p {
  margin: 0;
  color: var(--ink);
  text-align: center;
}

.spotify-follow {
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  background: oklch(70% 0.21 145);
  color: var(--void);
  font-weight: 900;
  text-transform: uppercase;
}

.kaoz-socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}

.kaoz-socials a {
  width: 2.05rem;
  height: 2.05rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: oklch(18% 0.04 42 / 0.88);
  font-size: 0.72rem;
  font-weight: 900;
}

.kaoz-socials img {
  width: 1.05rem;
  height: 1.05rem;
}

.kaoz-mail {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border: 1px solid oklch(95% 0.02 90 / 0.34);
}

.kaoz-mail input,
.kaoz-mail button {
  min-height: 44px;
  border: 0;
  padding: 0.75rem 0.9rem;
  font: inherit;
}

.kaoz-mail input {
  min-width: 0;
  background: oklch(0% 0 0 / 0.62);
  color: var(--ink);
}

.kaoz-mail button {
  background: oklch(96% 0.01 92);
  color: var(--void);
  cursor: pointer;
  font-weight: 900;
  text-transform: uppercase;
}

.kaoz-catalog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.kaoz-release {
  position: relative;
  min-height: 18rem;
  overflow: hidden;
  background: oklch(92% 0.01 90);
}

.kaoz-release img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: opacity 220ms var(--ease), transform 500ms var(--ease);
}

.kaoz-release:hover img {
  opacity: 0.82;
  transform: scale(1.035);
}

.kaoz-release span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 0.15rem;
  padding: var(--space-sm);
  background: oklch(0% 0 0 / 0.62);
  color: var(--ink);
}

.kaoz-release strong {
  font-size: 1.02rem;
}

.contact-section {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(18rem, 1fr);
  gap: var(--space-xl);
}

.contact-links {
  display: grid;
  gap: var(--space-sm);
}

.contact-links a {
  min-height: 5.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--panel);
  font-weight: 900;
}

.contact-links span {
  color: var(--green);
  word-break: break-word;
}

.site-footer {
  position: relative;
  overflow: hidden;
  padding: var(--space-3xl) clamp(1rem, 4vw, 4rem) var(--space-xl);
  border-top: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 0%, oklch(82% 0.17 77 / 0.14), transparent 32rem),
    linear-gradient(180deg, oklch(9% 0.025 42), oklch(4% 0.018 42));
  color: var(--ink);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, oklch(100% 0 0 / 0.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg, transparent 0 19px, oklch(83% 0.17 77 / 0.035) 20px);
  opacity: 0.5;
}

.footer-heading {
  position: relative;
  z-index: 1;
  margin-bottom: var(--space-xl);
  text-align: center;
}

.footer-heading h2 {
  max-width: none;
  margin: 0 auto;
  font-size: clamp(3.6rem, 8vw, 8.8rem);
  line-height: 0.9;
}

.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  border: 1px solid var(--line);
}

.footer-link,
.footer-social,
.footer-social-stack,
.footer-contact-card,
.footer-description,
.footer-reels {
  min-height: 6rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.footer-link {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-md);
  overflow: hidden;
  color: var(--ink);
  font-weight: 900;
  text-transform: uppercase;
}

.footer-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: oklch(100% 0 0 / 0.1);
  transform: translateX(-101%);
  transition: transform 260ms var(--ease);
}

.footer-link:hover::before {
  transform: translateX(0);
}

.footer-link img,
.footer-link span,
.footer-link p {
  position: relative;
  z-index: 1;
}

.footer-social-stack {
  grid-column: span 2;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.footer-social {
  min-height: 50%;
}

.footer-social img {
  width: clamp(1.5rem, 2.6vw, 2.35rem);
  height: clamp(1.5rem, 2.6vw, 2.35rem);
}

.footer-reels {
  grid-column: span 8;
  position: relative;
  min-height: 12rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 50%, oklch(83% 0.17 77 / 0.16), transparent 11rem),
    radial-gradient(circle at 70% 50%, oklch(80% 0.21 146 / 0.1), transparent 11rem);
}

.footer-reels::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, oklch(83% 0.17 77 / 0.5) 0 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.34;
  animation: footer-dots 8s linear infinite;
}

.footer-reel {
  position: absolute;
  top: 50%;
  width: 7rem;
  aspect-ratio: 1;
  border: 1px solid oklch(96% 0.04 84 / 0.44);
  border-radius: 999px;
  background:
    repeating-conic-gradient(from 0deg, oklch(89% 0.08 80 / 0.72) 0 5deg, transparent 5deg 22deg),
    radial-gradient(circle, oklch(8% 0.02 45) 0 18%, oklch(38% 0.05 70 / 0.48) 19% 100%);
  transform: translateY(-50%);
  animation: reel-spin 4.5s linear infinite;
}

.footer-reel.left {
  left: 21%;
}

.footer-reel.right {
  right: 21%;
  animation-duration: 3.7s;
}

.footer-tape {
  position: absolute;
  left: calc(21% + 6rem);
  right: calc(21% + 6rem);
  top: 50%;
  height: 0.45rem;
  border-top: 1px solid oklch(83% 0.17 77 / 0.45);
  border-bottom: 1px solid oklch(83% 0.17 77 / 0.45);
  background: oklch(12% 0.04 54 / 0.82);
  transform: translateY(-50%);
  box-shadow: 0 0 26px oklch(83% 0.17 77 / 0.18);
}

.footer-description {
  grid-column: span 9;
  display: grid;
  align-items: center;
  padding: var(--space-lg);
  color: var(--muted);
}

.footer-description p {
  max-width: 86ch;
  margin: 0;
}

.footer-contact-card {
  grid-column: span 4;
  display: grid;
  place-items: center;
  gap: 0.55rem;
  min-height: 10rem;
  padding: var(--space-lg);
  text-align: center;
  font-family: "Bitcount Prop Single", "IBM Plex Mono", monospace;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.footer-contact-card span {
  color: var(--paper);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
}

.footer-contact-card strong {
  color: var(--paper);
  font-size: clamp(0.92rem, 1.2vw, 1.05rem);
}

.footer-contact-card a {
  position: relative;
  color: var(--paper);
  font-size: clamp(0.95rem, 1.35vw, 1.12rem);
  text-decoration: none;
}

.footer-contact-card a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.45rem;
  height: 1px;
  background: currentColor;
  opacity: 0.72;
}

.copy-email-button {
  min-height: 2.35rem;
  padding: 0.34rem 0.82rem;
  border: 1px solid oklch(82% 0.12 76 / 0.5);
  border-radius: 999px;
  color: var(--amber);
  background:
    linear-gradient(180deg, oklch(17% 0.045 46 / 0.88), oklch(8% 0.024 42 / 0.96)),
    repeating-linear-gradient(90deg, transparent 0 9px, oklch(100% 0 0 / 0.04) 9px 10px);
  font: 800 0.76rem/1 "Bitcount Prop Single", "IBM Plex Mono", monospace;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease);
}

.copy-email-button:hover,
.copy-email-button:focus-visible {
  transform: translateY(-1px);
  border-color: var(--amber);
  outline: 0;
}

.copy-email-button.is-copied {
  background: var(--amber);
  color: var(--void);
}

.tour-disclaimer {
  max-width: 58rem;
  margin: 0.65rem auto 0;
  padding: 0.8rem 1rem;
  border: 1px solid oklch(82% 0.12 76 / 0.28);
  border-radius: 6px;
  color: var(--subtle);
  background:
    linear-gradient(180deg, oklch(18% 0.04 42 / 0.62), oklch(9% 0.025 42 / 0.7)),
    repeating-linear-gradient(90deg, transparent 0 12px, oklch(100% 0 0 / 0.025) 12px 13px);
  font-size: 0.92rem;
  line-height: 1.55;
}

.legal-page-body {
  min-height: 100vh;
  padding: clamp(1rem, 3vw, 2rem);
  color: var(--cream);
  background:
    radial-gradient(circle at 20% 10%, oklch(68% 0.14 63 / 0.16), transparent 28rem),
    radial-gradient(circle at 90% 0%, oklch(55% 0.12 35 / 0.12), transparent 24rem),
    var(--void);
}

.legal-shell {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: clamp(1.1rem, 4vw, 2rem);
  border: 1px solid oklch(82% 0.12 76 / 0.32);
  border-radius: 8px;
  background:
    linear-gradient(180deg, oklch(14% 0.035 43 / 0.92), oklch(7% 0.02 38 / 0.95)),
    repeating-linear-gradient(0deg, transparent 0 3px, oklch(100% 0 0 / 0.018) 3px 4px);
  box-shadow: 0 1.2rem 4rem oklch(0% 0 0 / 0.42);
}

.legal-home-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  margin-bottom: var(--space-lg);
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--amber);
  text-decoration: none;
  font-family: "Bitcount Prop Single", monospace;
  text-transform: uppercase;
}

.legal-home-link:hover,
.legal-home-link:focus-visible {
  border-color: var(--amber);
  background: oklch(82% 0.12 76 / 0.1);
}

.legal-shell h1 {
  max-width: 100%;
  margin: 0 0 var(--space-sm);
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 0.92;
  letter-spacing: 0;
  color: var(--paper);
  text-transform: uppercase;
}

.legal-updated,
.legal-shell h2 {
  font-family: "Bitcount Prop Single", monospace;
  text-transform: uppercase;
}

.legal-updated {
  margin: 0 0 var(--space-xl);
  color: var(--amber);
}

.legal-shell h2 {
  margin: var(--space-xl) 0 var(--space-xs);
  color: var(--amber);
  font-size: 0.95rem;
}

.legal-shell p,
.legal-shell li {
  color: var(--subtle);
  font-size: 1rem;
  line-height: 1.65;
}

.legal-shell a {
  color: var(--paper);
}

.legal-shell ul {
  padding-left: 1.1rem;
}

.not-found-body {
  min-height: 100vh;
  color: var(--cream);
  background:
    radial-gradient(circle at 18% 12%, oklch(78% 0.16 74 / 0.16), transparent 25rem),
    radial-gradient(circle at 84% 72%, oklch(58% 0.12 35 / 0.12), transparent 30rem),
    repeating-linear-gradient(90deg, transparent 0 22px, oklch(100% 0 0 / 0.025) 23px 24px),
    var(--void);
  overflow-x: hidden;
}

.not-found-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, oklch(100% 0 0 / 0.025) 3px 4px),
    radial-gradient(circle at 50% 50%, transparent, oklch(0% 0 0 / 0.45));
  mix-blend-mode: screen;
  opacity: 0.36;
}

.not-found-shell {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - clamp(1.2rem, 4vw, 4rem)));
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(1.2rem, 4vw, 3rem) 0;
  display: grid;
  align-content: center;
  gap: var(--space-xl);
}

.not-found-brand {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  left: 0;
  display: inline-flex;
  width: clamp(8.5rem, 14vw, 13rem);
  filter: drop-shadow(0 0.8rem 1.4rem oklch(0% 0 0 / 0.42));
}

.not-found-brand img {
  width: 100%;
  height: auto;
}

.retro-phone-stage {
  display: grid;
  grid-template-columns: minmax(18rem, 0.82fr) minmax(19rem, 27rem);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
}

.phone-copy {
  padding-top: clamp(5rem, 10vw, 8rem);
}

.phone-copy h1 {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(8rem, 23vw, 18rem);
  line-height: 0.78;
  letter-spacing: 0;
  color: var(--paper);
  text-shadow: 0.08em 0.06em 0 oklch(0% 0 0 / 0.55);
}

.phone-copy p:last-child {
  max-width: 38rem;
  margin: var(--space-lg) 0 0;
  color: var(--subtle);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.55;
}

.retro-phone {
  position: relative;
  isolation: isolate;
  width: min(100%, 27rem);
  justify-self: center;
  padding: 2.2rem 1.15rem 1.25rem;
  border: 1px solid oklch(82% 0.1 76 / 0.35);
  border-radius: 2.1rem 2.1rem 1.25rem 1.25rem;
  background:
    linear-gradient(125deg, oklch(34% 0.035 60), oklch(14% 0.03 44) 45%, oklch(7% 0.02 36)),
    repeating-linear-gradient(90deg, transparent 0 7px, oklch(100% 0 0 / 0.035) 7px 8px);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.18),
    inset 0 -1.2rem 2.4rem oklch(0% 0 0 / 0.4),
    0 2rem 5rem oklch(0% 0 0 / 0.52);
  transform: rotate(1.2deg);
}

.retro-phone::before,
.retro-phone::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: inherit;
}

.retro-phone::before {
  inset: 0.45rem;
  border: 1px solid oklch(100% 0 0 / 0.08);
  background: radial-gradient(circle at 30% 10%, oklch(100% 0 0 / 0.08), transparent 14rem);
}

.retro-phone::after {
  inset: auto 8% -1.3rem;
  height: 2.4rem;
  background: radial-gradient(ellipse, oklch(0% 0 0 / 0.56), transparent 68%);
  filter: blur(0.2rem);
}

.phone-antenna {
  position: absolute;
  top: -5.3rem;
  right: 4rem;
  width: 0.45rem;
  height: 6rem;
  border-radius: 999px;
  background: linear-gradient(90deg, oklch(75% 0.04 80), oklch(22% 0.02 50));
  box-shadow: 0 0 0.8rem oklch(83% 0.17 77 / 0.18);
  transform: rotate(-7deg);
}

.phone-earpiece {
  width: 44%;
  height: 0.5rem;
  margin: 0 auto 1.1rem;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, oklch(3% 0.01 38) 0 0.32rem, oklch(69% 0.05 74 / 0.55) 0.34rem 0.38rem),
    oklch(4% 0.01 38);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.14);
}

.phone-screen {
  padding: 0.9rem;
  border: 0.42rem solid oklch(5% 0.014 38);
  border-radius: 0.95rem;
  color: oklch(19% 0.055 118);
  background:
    linear-gradient(180deg, oklch(82% 0.09 126), oklch(57% 0.075 117)),
    repeating-linear-gradient(0deg, transparent 0 2px, oklch(0% 0 0 / 0.08) 2px 3px);
  box-shadow:
    inset 0 0 1.8rem oklch(0% 0 0 / 0.34),
    0 0 1.4rem oklch(82% 0.13 120 / 0.12);
}

.phone-status,
.phone-softkeys {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.phone-lcd {
  min-height: 10.6rem;
  display: grid;
  align-content: center;
  gap: 0.35rem;
  padding: 1rem 0.35rem;
  text-align: center;
}

.phone-lcd-label {
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.phone-lcd strong {
  font-family: "Bitcount Prop Single", monospace;
  font-size: clamp(2rem, 8vw, 3.8rem);
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0.08em 0.08em 0 oklch(100% 0 0 / 0.18);
}

.phone-lcd p {
  min-height: 1.35rem;
  margin: 0;
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.phone-softkeys {
  border-top: 1px solid oklch(18% 0.055 118 / 0.34);
  padding-top: 0.45rem;
}

.phone-softkeys a {
  color: inherit;
  text-decoration: none;
}

.phone-nav-pad {
  width: 6.4rem;
  height: 4.35rem;
  margin: 1rem auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle, oklch(84% 0.12 76) 0 24%, transparent 25%),
    conic-gradient(from 45deg, oklch(8% 0.02 36), oklch(42% 0.045 66), oklch(10% 0.022 42), oklch(38% 0.04 62), oklch(8% 0.02 36));
  box-shadow: inset 0 0 1rem oklch(0% 0 0 / 0.65), 0 0.4rem 1rem oklch(0% 0 0 / 0.35);
}

.phone-nav-pad span {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(180deg, oklch(76% 0.13 76), oklch(33% 0.055 58));
  box-shadow: inset 0 1px oklch(100% 0 0 / 0.42);
}

.phone-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}

.phone-key {
  min-height: 3.65rem;
  display: grid;
  place-items: center;
  gap: 0.05rem;
  border: 1px solid oklch(82% 0.1 76 / 0.22);
  border-radius: 0.72rem;
  color: var(--paper);
  background:
    linear-gradient(180deg, oklch(28% 0.035 58), oklch(9% 0.02 42)),
    repeating-linear-gradient(90deg, transparent 0 8px, oklch(100% 0 0 / 0.03) 8px 9px);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.11),
    0 0.35rem 0 oklch(0% 0 0 / 0.42);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}

.phone-key span {
  font-family: "Bitcount Prop Single", monospace;
  font-size: 1.15rem;
  font-weight: 700;
}

.phone-key small {
  color: var(--subtle);
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.56rem;
  text-transform: uppercase;
}

.phone-key:hover,
.phone-key:focus-visible,
.phone-key.is-pressed {
  transform: translateY(0.18rem);
  border-color: var(--amber);
  color: var(--amber);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.11),
    0 0.12rem 0 oklch(0% 0 0 / 0.5),
    0 0 1.2rem oklch(83% 0.17 77 / 0.22);
  outline: 0;
}

@media (max-width: 820px) {
  .not-found-shell {
    align-content: start;
  }

  .not-found-brand {
    position: relative;
    top: auto;
    width: 10rem;
  }

  .retro-phone-stage {
    grid-template-columns: 1fr;
  }

  .phone-copy {
    padding-top: 0;
  }

  .phone-copy h1 {
    font-size: clamp(7rem, 38vw, 12rem);
  }

  .retro-phone {
    transform: none;
  }
}

.footer-bottom {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  color: var(--subtle);
}

.footer-bottom > span {
  justify-self: start;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  justify-self: center;
  gap: 0.45rem;
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.footer-legal-links a {
  color: var(--subtle);
  text-decoration: none;
  border-bottom: 1px solid oklch(82% 0.12 76 / 0.32);
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
  color: var(--amber);
  border-bottom-color: var(--amber);
}

.footer-link.compact {
  justify-self: end;
  min-height: 44px;
  border: 1px solid var(--line);
}

.footer-credit-link {
  display: inline-grid;
  place-items: center;
  min-height: 2rem;
  margin-left: 0.35rem;
  padding: 0.22rem 0.62rem;
  border: 1px solid oklch(82% 0.12 76 / 0.45);
  border-radius: 999px;
  color: var(--amber);
  background:
    linear-gradient(180deg, oklch(18% 0.045 46 / 0.86), oklch(9% 0.025 42 / 0.92)),
    repeating-linear-gradient(90deg, transparent 0 10px, oklch(100% 0 0 / 0.035) 10px 11px);
  text-decoration: none;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease);
}

.footer-credit-link:hover {
  transform: translateY(-1px);
  border-color: var(--amber);
  background: var(--amber);
  color: var(--void);
}

@keyframes footer-dots {
  to {
    background-position: 44px 22px;
  }
}

@media (max-width: 900px) {
  .site-header {
    position: sticky;
    grid-template-columns: 1fr auto;
  }

  .header-actions {
    gap: 0.45rem;
  }

  .main-nav {
    grid-column: 1 / -1;
    justify-content: start;
    overflow-x: auto;
    padding-bottom: 0.2rem;
  }

  .hero,
  .section-heading,
  .media-wall,
  .bio-feature,
  .label-section,
  .merch-board,
  .contact-section,
  .residency-section .section-heading {
    grid-template-columns: 1fr;
  }

  .bio-photo-card {
    position: relative;
    top: auto;
    min-height: clamp(24rem, 86vw, 36rem);
  }

  .merch-card {
    min-height: 28rem;
  }

  .merch-visual {
    min-height: 20rem;
  }

  .bio-feature {
    min-height: auto;
  }

  .bio-copy {
    min-height: auto;
  }

  #residency-title {
    font-size: clamp(3.3rem, 13vw, 6rem);
  }

  .kaoz-profile {
    position: relative;
    top: auto;
    min-height: auto;
  }

  .kaoz-catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero {
    min-height: auto;
    padding-top: var(--space-xl);
  }

  .quick-board {
    grid-template-columns: repeat(2, 1fr);
  }

  .media-tile.large {
    grid-column: auto;
    grid-row: auto;
    min-height: 24rem;
  }

  .media-tile.wide {
    grid-column: auto;
  }

  .media-wall {
    grid-template-columns: 1fr;
  }

  .residency-wall {
    grid-template-columns: 1fr;
  }

  .show-row {
    grid-template-columns: 5.5rem minmax(0, 1fr);
  }

  .show-row img {
    width: 5.5rem;
    height: 5.5rem;
    grid-row: span 2;
  }

  .show-row:last-child img {
    width: 5.5rem;
    height: 5.5rem;
  }

  .show-row time {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    min-height: 3.4rem;
    min-width: 4rem;
    padding: 0.42rem 0.42rem 0.36rem;
    font-size: 2rem;
  }

  .show-row div,
  .show-row a {
    grid-column: 1 / -1;
  }

  .harp-stage {
    grid-template-columns: repeat(3, 1fr);
  }

  .harp-stage button {
    min-height: 8rem;
  }

  .piano {
    overflow-x: auto;
    grid-template-columns: repeat(8, minmax(3.8rem, 1fr));
  }

  .flyer-preview {
    display: none;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-reels,
  .footer-description {
    grid-column: span 2;
  }

  .footer-reel.left {
    left: 14%;
  }

  .footer-reel.right {
    right: 14%;
  }

  .footer-tape {
    left: calc(14% + 5rem);
    right: calc(14% + 5rem);
  }
}

@media (max-width: 560px) {
  .header-epk {
    min-width: 4.2rem;
    padding: 0.55rem 0.65rem;
    font-size: 0;
  }

  .header-epk::before {
    content: "EPK";
    font-size: 0.78rem;
  }

  .header-epk::after {
    display: none;
  }

  .sound-toggle {
    width: 44px;
    padding: 0;
    font-size: 0;
  }

  .hero-actions,
  .contact-links a {
    flex-direction: column;
    align-items: stretch;
  }

  .button,
  .quick-board a {
    width: 100%;
  }

  .quick-board,
  .timeline,
  .answers,
  .kaoz-catalog {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: repeat(4, 1fr);
  }

  h1 {
    font-size: clamp(5rem, 28vw, 9rem);
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-social,
  .footer-reels,
  .footer-description {
    grid-column: auto;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    align-items: center;
    text-align: center;
  }

  .footer-bottom > span,
  .footer-legal-links,
  .footer-link.compact {
    justify-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* V5 / Interconnected machine studio */
.machines {
  --studio-orange: oklch(73% 0.17 56);
  --studio-green: oklch(78% 0.18 146);
  --studio-red: oklch(61% 0.23 31);
  --studio-metal: oklch(67% 0.025 76);
  background:
    radial-gradient(circle at 82% 12%, oklch(58% 0.14 55 / 0.09), transparent 26rem),
    repeating-linear-gradient(90deg, transparent 0 39px, oklch(90% 0.03 75 / 0.018) 40px),
    linear-gradient(180deg, oklch(10% 0.03 43 / 0.98), oklch(5% 0.019 42 / 0.99));
}

.machines .section-heading { margin-bottom: clamp(1.5rem, 3vw, 2.6rem); }
.machines .section-heading p { max-width: 48rem; }

.studio-master {
  position: sticky;
  z-index: 18;
  top: 6.2rem;
  display: grid;
  grid-template-columns: minmax(9rem, 1.1fr) auto repeat(3, minmax(9rem, 1fr)) auto;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.78rem;
  border: 1px solid oklch(75% 0.075 70 / 0.34);
  border-radius: 0.55rem;
  background:
    linear-gradient(180deg, oklch(21% 0.034 45 / 0.98), oklch(10% 0.024 42 / 0.98)),
    repeating-linear-gradient(90deg, transparent 0 11px, oklch(100% 0 0 / 0.025) 12px);
  box-shadow: 0 18px 48px oklch(0% 0 0 / 0.46), inset 0 1px oklch(100% 0 0 / 0.1);
  backdrop-filter: blur(14px);
}

.studio-master-id { display: grid; gap: 0.15rem; }
.studio-master-id strong { font-family: "IBM Plex Mono", monospace; font-size: 0.86rem; letter-spacing: 0.08em; }

.studio-transport,
.studio-patterns button,
.chord-controls button,
.piano-toolbar button,
.bass-toolbar button,
.eject-reels {
  min-height: 2.8rem;
  border: 1px solid oklch(75% 0.08 70 / 0.3);
  border-radius: 0.3rem;
  background: linear-gradient(180deg, oklch(27% 0.045 48), oklch(13% 0.03 43));
  color: oklch(90% 0.035 80);
  font: 800 0.68rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: inset 0 1px oklch(100% 0 0 / 0.08), 0 5px 12px oklch(0% 0 0 / 0.28);
}

.studio-transport { min-width: 7rem; color: var(--studio-orange); }
.studio-transport[aria-pressed="true"] { background: linear-gradient(180deg, oklch(56% 0.16 54), oklch(31% 0.11 48)); color: #fff7df; }

.studio-master label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.45rem;
  color: oklch(70% 0.04 75);
  font: 700 0.55rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-master input[type="range"] { width: 100%; accent-color: var(--studio-orange); }
.studio-master output { min-width: 2.4rem; color: oklch(91% 0.05 80); text-align: right; }

.studio-position {
  display: grid;
  grid-template-columns: auto auto 0.48rem;
  align-items: center;
  gap: 0.45rem;
  min-width: 6.8rem;
  padding: 0.58rem 0.7rem;
  border: 1px solid oklch(72% 0.08 70 / 0.23);
  border-radius: 0.25rem;
  background: #090705;
  font-family: "IBM Plex Mono", monospace;
}

.studio-position span { color: oklch(54% 0.04 74); font-size: 0.48rem; }
.studio-position strong { color: var(--studio-orange); font-size: 0.92rem; }
.studio-position i,
.studio-led { display: inline-block; width: 0.45rem; aspect-ratio: 1; border-radius: 50%; background: var(--studio-red); box-shadow: 0 0 8px var(--studio-red); }
.studio-stack .machine-head > .meter {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  width: auto;
  min-width: 5.2rem;
  height: auto;
  min-height: 2.15rem;
  padding: 0.48rem 0.7rem;
  border: 1px solid oklch(72% 0.06 72 / 0.24);
  border-radius: 0.25rem;
  background: linear-gradient(180deg, #17110d, #090705);
  color: oklch(87% 0.035 78);
  box-shadow: inset 0 1px oklch(100% 0 0 / 0.06), 0 0.35rem 0.8rem oklch(0% 0 0 / 0.24);
  font: 800 0.62rem/1.2 "IBM Plex Mono", monospace;
  letter-spacing: 0.035em;
  text-align: center;
  white-space: nowrap;
}
.studio-stack #studio-chord-note { min-width: 5.8rem; color: var(--studio-green); }
.studio-stack #tape-loop-status { min-width: 14rem; max-width: 22rem; justify-content: flex-start; color: var(--studio-orange); }
.studio-master.is-playing .studio-position i,
.studio-master.is-playing ~ .studio-stack .studio-led { animation: studio-led-pulse 520ms steps(2, end) infinite; }

.studio-patterns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid oklch(72% 0.06 70 / 0.18);
  border-radius: 0.35rem;
  background: oklch(10% 0.025 43 / 0.86);
}

.studio-patterns > span { margin-right: auto; color: oklch(62% 0.04 75); font: 700 0.58rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.studio-patterns button { min-height: 2.1rem; padding-inline: 0.75rem; font-size: 0.56rem; }
.studio-patterns button.is-active { border-color: var(--studio-orange); color: var(--studio-orange); }
.studio-patterns .studio-share {
  border-color: oklch(78% 0.16 148 / 0.54);
  background: linear-gradient(180deg, oklch(34% 0.09 145), oklch(15% 0.055 138));
  color: oklch(91% 0.11 147);
}
.studio-share-status {
  flex: 1 0 100%;
  min-height: 0;
  color: oklch(76% 0.07 145);
  font: 700 0.54rem/1.35 "IBM Plex Mono", monospace;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.studio-mixer {
  display: grid;
  grid-template-columns: auto repeat(4, minmax(8rem, 1fr));
  gap: 0.65rem;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 0.7rem;
  border: 1px solid oklch(72% 0.06 70 / 0.2);
  border-radius: 0.35rem;
  background: oklch(9% 0.022 42 / 0.9);
}

.studio-mixer > .panel-label { margin: 0; white-space: nowrap; }
.studio-mixer label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.45rem;
  color: oklch(68% 0.04 75);
  font: 700 0.55rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.studio-mixer input { width: 100%; accent-color: var(--studio-green); }
.studio-mixer output { min-width: 2.6rem; color: oklch(91% 0.05 80); text-align: right; }

.studio-stack { gap: 1rem; }
.machine-stack.studio-stack > article {
  min-height: 0;
  overflow: hidden;
  border: 1px solid oklch(74% 0.075 70 / 0.26);
  border-radius: 0.65rem;
  background:
    linear-gradient(135deg, oklch(19% 0.035 46 / 0.96), oklch(8% 0.022 42 / 0.98)),
    repeating-linear-gradient(0deg, transparent 0 3px, oklch(100% 0 0 / 0.022) 4px);
  box-shadow: 0 26px 60px oklch(0% 0 0 / 0.34), inset 0 1px oklch(100% 0 0 / 0.07);
}

.studio-module .machine-head { margin-bottom: 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid oklch(70% 0.06 70 / 0.2); }

.drum-sequencer {
  display: grid;
  gap: 0.42rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
}

.drum-track {
  display: grid;
  grid-template-columns: 5.5rem minmax(42rem, 1fr);
  gap: 0.55rem;
  align-items: center;
}

.track-mute {
  min-height: 2.5rem;
  border: 1px solid oklch(74% 0.075 70 / 0.28);
  border-radius: 0.24rem;
  background: #0b0907;
  color: var(--studio-metal);
  font: 800 0.61rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
}
.track-mute[aria-pressed="true"] { color: oklch(52% 0.02 75); text-decoration: line-through; opacity: 0.62; }

.track-steps { display: grid; grid-template-columns: repeat(16, minmax(2.1rem, 1fr)); gap: 0.28rem; }
.track-step {
  position: relative;
  min-height: 2.5rem;
  border: 1px solid oklch(70% 0.05 70 / 0.25);
  border-radius: 0.22rem;
  background: linear-gradient(180deg, oklch(24% 0.035 47), oklch(12% 0.025 43));
  color: oklch(55% 0.035 70);
  font: 700 0.48rem/1 "IBM Plex Mono", monospace;
}
.track-step:nth-child(4n + 1)::before { content: ""; position: absolute; inset: -0.28rem auto -0.28rem -0.18rem; width: 1px; background: oklch(76% 0.08 70 / 0.3); }
.track-step.active { border-color: var(--studio-orange); background: linear-gradient(180deg, oklch(64% 0.16 54), oklch(34% 0.11 46)); color: white; box-shadow: 0 0 12px oklch(70% 0.18 55 / 0.25); }
.track-step.is-current { outline: 1px solid var(--studio-green); outline-offset: 2px; }

.chord-controls,
.bass-toolbar,
.piano-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}
.chord-controls button,
.bass-toolbar button,
.piano-toolbar button { min-height: 2.4rem; padding-inline: 0.8rem; }
.chord-controls button[aria-pressed="true"],
.bass-toolbar button[aria-pressed="true"],
.piano-toolbar button[aria-pressed="true"] { border-color: var(--studio-red); color: oklch(82% 0.15 35); box-shadow: 0 0 14px oklch(60% 0.2 30 / 0.25); }
.chord-controls label,
.piano-toolbar label { display: flex; align-items: center; gap: 0.45rem; color: oklch(64% 0.04 75); font: 700 0.58rem/1 "IBM Plex Mono", monospace; text-transform: uppercase; }
.chord-controls select,
.piano-toolbar select { min-height: 2.35rem; border: 1px solid oklch(72% 0.06 70 / 0.28); border-radius: 0.25rem; background: #0b0907; color: oklch(88% 0.04 78); padding-inline: 0.55rem; }
#laser-loop-status,
#bass-loop-status,
#piano-loop-status { margin-left: auto; color: var(--studio-orange); font: 700 0.58rem/1 "IBM Plex Mono", monospace; }

.chord-laser-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(4.2rem, 1fr));
  gap: 0.45rem;
  min-height: clamp(18rem, 36vw, 29rem);
  padding: 1rem;
  overflow-x: auto;
  border: 1px solid oklch(72% 0.08 70 / 0.2);
  border-radius: 0.45rem;
  background:
    radial-gradient(ellipse at 50% 100%, oklch(60% 0.12 52 / 0.12), transparent 58%),
    linear-gradient(180deg, #030303, #0b0705);
  perspective: 900px;
}

.chord-laser-grid button {
  --beam-hue: calc(25 + var(--i) * 38);
  position: relative;
  align-self: stretch;
  min-width: 4.2rem;
  overflow: hidden;
  border: 1px solid oklch(72% 0.06 70 / 0.2);
  border-radius: 0.35rem;
  background:
    linear-gradient(90deg, transparent 46%, hsl(var(--beam-hue) 90% 67% / 0.28) 49% 51%, transparent 54%),
    linear-gradient(180deg, transparent 0 72%, hsl(var(--beam-hue) 72% 34% / 0.32));
  color: oklch(84% 0.04 78);
  font: 800 0.68rem/1 "IBM Plex Mono", monospace;
  transform: rotateX(2deg);
  transform-origin: bottom;
}
.chord-laser-grid button::before { content: ""; position: absolute; left: 50%; bottom: 2.8rem; width: 3px; height: 76%; background: linear-gradient(180deg, transparent, hsl(var(--beam-hue) 100% 70%), white); box-shadow: 0 0 12px hsl(var(--beam-hue) 100% 60%), 0 0 34px hsl(var(--beam-hue) 100% 55% / 0.7); transform: translateX(-50%) scaleY(0.72); transform-origin: bottom; opacity: 0.62; transition: 160ms ease; }
.chord-laser-grid button.is-hit::before,
.chord-laser-grid button:hover::before { opacity: 1; transform: translateX(-50%) scaleY(1); }
.chord-laser-grid button.is-written { border-color: var(--studio-green); box-shadow: inset 0 0 20px oklch(70% 0.16 145 / 0.16); }

.bass-studio {
  background:
    radial-gradient(circle at 13% 12%, oklch(76% 0.15 64 / 0.16), transparent 22rem),
    radial-gradient(circle at 86% 86%, oklch(56% 0.11 145 / 0.1), transparent 26rem),
    linear-gradient(135deg, oklch(18% 0.04 46 / 0.98), oklch(7% 0.022 42 / 0.99)) !important;
  padding-bottom: 1.25rem !important;
}

.bass-studio > .machine-head {
  margin-inline: 0.55rem;
  padding-inline: 0.55rem;
}

.studio-stack #studio-bass-note {
  min-width: 4.75rem;
  color: var(--studio-orange);
}

.bass-console {
  position: relative;
  display: grid;
  gap: 0.85rem;
  padding: 0.95rem;
  border: 1px solid oklch(76% 0.07 70 / 0.27);
  border-radius: 0.58rem;
  background:
    linear-gradient(90deg, oklch(9% 0.022 42 / 0.94), transparent 18%, transparent 82%, oklch(9% 0.022 42 / 0.9)),
    repeating-linear-gradient(90deg, oklch(95% 0.035 78 / 0.055) 0 1px, transparent 1px 2.55rem),
    linear-gradient(180deg, oklch(20% 0.04 47), oklch(9% 0.026 42));
  box-shadow:
    inset 0 1px oklch(100% 0 0 / 0.08),
    inset 0 -26px 34px oklch(0% 0 0 / 0.32),
    0 22px 46px oklch(0% 0 0 / 0.26);
}

.bass-toolbar {
  gap: 0.48rem;
  padding: 0.2rem 0.1rem 0.5rem;
  margin-bottom: 0;
}

.bass-toolbar button {
  min-width: 7.2rem;
}

.bass-toolbar #bass-play {
  border-color: var(--studio-orange);
  color: var(--studio-orange);
}

.bass-toolbar #bass-reset {
  color: var(--studio-green);
}

.bass-toolbar #bass-random {
  color: oklch(88% 0.12 78);
}

.bass-console::before {
  content: "";
  position: absolute;
  inset: 0.45rem;
  border: 1px solid oklch(78% 0.075 74 / 0.16);
  border-radius: 0.42rem;
  pointer-events: none;
}

.bass-screen {
  position: relative;
  min-height: 4.2rem;
  display: grid;
  grid-template-columns: auto 1fr 7rem;
  align-items: center;
  gap: 0.85rem;
  padding: 0.72rem 0.9rem;
  border: 1px solid oklch(68% 0.06 72 / 0.25);
  border-radius: 0.38rem;
  background:
    radial-gradient(circle at 20% 50%, oklch(76% 0.16 146 / 0.14), transparent 12rem),
    linear-gradient(180deg, #11100b, #060504);
  overflow: hidden;
  box-shadow: inset 0 0 22px oklch(0% 0 0 / 0.72);
}

.bass-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, oklch(100% 0 0 / 0.045) 4px);
  opacity: 0.55;
  pointer-events: none;
}

.bass-screen span,
.bass-screen strong {
  position: relative;
  z-index: 1;
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
}

.bass-screen span {
  color: var(--studio-green);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.bass-screen strong {
  color: oklch(86% 0.04 78);
  font-size: clamp(0.78rem, 1.5vw, 1.35rem);
  letter-spacing: 0.08em;
}

.bass-screen i {
  position: relative;
  z-index: 1;
  height: 1.65rem;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--studio-orange) 0 12%, transparent 12% 18%, var(--studio-orange) 18% 31%, transparent 31% 42%, var(--studio-orange) 42% 58%, transparent 58% 67%, var(--studio-orange) 67% 100%);
  opacity: 0.78;
  box-shadow: 0 0 18px oklch(74% 0.16 58 / 0.2);
}

.bass-machine-grid {
  display: grid;
  grid-template-columns: minmax(27rem, 1.18fr) minmax(19rem, 0.82fr);
  gap: 0.85rem;
  align-items: stretch;
}

.bass-note-bank,
.bass-performance-panel,
.bass-step-panel {
  border: 1px solid oklch(72% 0.07 70 / 0.24);
  border-radius: 0.42rem;
  background:
    radial-gradient(circle at 50% 0%, oklch(78% 0.11 76 / 0.07), transparent 14rem),
    linear-gradient(180deg, oklch(14% 0.03 44 / 0.94), oklch(6% 0.02 42 / 0.98)),
    repeating-linear-gradient(90deg, transparent 0 13px, oklch(100% 0 0 / 0.025) 14px);
  box-shadow: inset 0 1px oklch(100% 0 0 / 0.06), inset 0 -18px 24px oklch(0% 0 0 / 0.28);
}

.bass-performance-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.65rem;
  padding: 0.75rem;
}

.bass-note-bank {
  display: grid;
  gap: 0.48rem;
  padding: 0.65rem;
  border-color: oklch(78% 0.075 74 / 0.18);
  background:
    linear-gradient(180deg, oklch(9% 0.024 42), oklch(4% 0.015 40)),
    repeating-linear-gradient(0deg, transparent 0 5px, oklch(100% 0 0 / 0.03) 6px);
}

.bass-octave {
  display: grid;
  grid-template-columns: 3.2rem repeat(12, minmax(0, 1fr));
  gap: 0.26rem;
  align-items: stretch;
}

.bass-octave > span {
  display: grid;
  place-items: center;
  border: 1px solid oklch(72% 0.06 70 / 0.2);
  border-radius: 0.24rem;
  background: linear-gradient(180deg, oklch(25% 0.05 48), oklch(10% 0.025 42));
  color: var(--studio-orange);
  font: 900 0.55rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bass-note-bank button {
  position: relative;
  min-height: 4.65rem;
  border: 1px solid oklch(74% 0.06 70 / 0.28);
  border-radius: 0.2rem 0.2rem 0.38rem 0.38rem;
  background:
    linear-gradient(180deg, oklch(91% 0.025 82), oklch(58% 0.035 72) 72%, oklch(34% 0.04 52));
  color: oklch(88% 0.04 78);
  cursor: pointer;
  font: 900 0.56rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: inset 0 -16px 18px oklch(20% 0.03 45 / 0.28), 0 5px 0 #080604;
  transition: transform 120ms var(--ease), border-color 160ms var(--ease), box-shadow 160ms var(--ease), filter 160ms var(--ease);
}

.bass-note-bank button::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.42rem;
  width: 0.3rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: oklch(38% 0.05 68);
  transform: translateX(-50%);
  box-shadow: inset 0 1px oklch(100% 0 0 / 0.12);
}

.bass-note-bank button[data-bass-note*="#"] {
  background:
    linear-gradient(180deg, #050403, #1b1510 68%, #030201);
  color: oklch(78% 0.035 75);
}

.bass-note-bank button.is-selected {
  border-color: var(--studio-orange);
  filter: brightness(1.08) saturate(1.05);
  box-shadow: inset 0 0 18px oklch(74% 0.15 64 / 0.16), 0 5px 0 #080604;
}

.bass-note-bank button.is-hit {
  transform: translateY(4px);
  border-color: var(--studio-green);
  box-shadow: 0 1px 0 #080604, inset 0 0 22px oklch(72% 0.16 145 / 0.18);
}

.bass-note-bank button.is-hit::after,
.bass-note-bank button.is-selected::after {
  background: var(--studio-orange);
  box-shadow: 0 0 12px var(--studio-orange), 0 0 24px oklch(74% 0.16 58 / 0.35);
}

.bass-step-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.65rem;
  padding: 0.85rem;
}

.bass-step-header {
  display: grid;
  grid-template-columns: 2.4rem auto 2.4rem 1fr;
  gap: 0.75rem;
  align-items: center;
  color: oklch(60% 0.04 74);
  font: 700 0.56rem/1.35 "IBM Plex Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bass-bar-nav {
  min-height: 2.35rem;
  width: 2.4rem;
  border: 1px solid oklch(74% 0.075 70 / 0.28);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, oklch(43% 0.075 54), oklch(10% 0.025 42));
  color: var(--studio-orange);
  cursor: pointer;
  font: 900 1.25rem/1 "IBM Plex Mono", monospace;
  box-shadow: inset 0 1px oklch(100% 0 0 / 0.12), 0 7px 12px oklch(0% 0 0 / 0.34);
}

.bass-bar-nav:active {
  transform: translateY(1px);
}

.bass-step-help {
  justify-self: end;
  color: oklch(64% 0.04 74);
  font-size: 0.54rem;
}

.bass-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
  align-content: stretch;
}

.bass-step {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.3rem;
  min-height: 4.7rem;
  padding: 0.44rem;
  border: 1px solid oklch(72% 0.055 70 / 0.22);
  border-radius: 0.25rem;
  background:
    radial-gradient(circle at 50% 18%, oklch(74% 0.11 64 / 0.08), transparent 52%),
    linear-gradient(180deg, oklch(18% 0.034 46), oklch(7% 0.022 42)),
    repeating-linear-gradient(0deg, transparent 0 5px, oklch(100% 0 0 / 0.03) 6px);
  color: oklch(50% 0.03 72);
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  text-align: left;
}

.bass-step span {
  font-size: 0.46rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.bass-step strong {
  align-self: end;
  color: oklch(67% 0.045 76);
  font-size: clamp(0.48rem, 0.82vw, 0.68rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.bass-step.is-filled {
  border-color: var(--studio-orange);
  background:
    radial-gradient(circle at 50% 18%, oklch(74% 0.16 64 / 0.2), transparent 56%),
    linear-gradient(180deg, oklch(29% 0.06 49), oklch(12% 0.035 43));
}

.bass-step.is-filled strong { color: var(--studio-orange); }

.bass-step.is-current {
  outline: 1px solid var(--studio-green);
  outline-offset: 2px;
}

.bass-step.is-hit {
  box-shadow: 0 0 18px oklch(72% 0.16 145 / 0.3), inset 0 0 14px oklch(72% 0.16 145 / 0.15);
}

.studio-piano {
  position: relative;
  height: clamp(13rem, 24vw, 21rem);
  padding: 0.55rem;
  border: 1px solid oklch(73% 0.06 70 / 0.28);
  border-radius: 0.55rem;
  background: linear-gradient(180deg, oklch(19% 0.03 45), oklch(7% 0.02 42));
  box-shadow: inset 0 12px 22px oklch(0% 0 0 / 0.45);
}
.piano-white-keys { display: grid; grid-template-columns: repeat(14, minmax(2.2rem, 1fr)); height: 100%; gap: 2px; }
.piano-white-keys button {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0.7rem;
  border: 1px solid oklch(52% 0.025 80);
  border-radius: 0 0 0.28rem 0.28rem;
  background: linear-gradient(95deg, oklch(93% 0.018 82), oklch(72% 0.025 78));
  color: oklch(24% 0.03 43);
  font: 800 0.58rem/1 "IBM Plex Mono", monospace;
  box-shadow: inset 0 -12px 18px oklch(48% 0.03 75 / 0.16);
}
.piano-black-keys { position: absolute; inset: 0.55rem; pointer-events: none; }
.piano-black-keys button {
  position: absolute;
  z-index: 2;
  left: calc(var(--x) * 1% - 1.55%);
  top: 0;
  width: 3.1%;
  height: 62%;
  pointer-events: auto;
  border: 1px solid #000;
  border-radius: 0 0 0.25rem 0.25rem;
  background: linear-gradient(90deg, #070605, #26201b 62%, #050403);
  color: oklch(80% 0.03 77);
  font-size: 0;
  box-shadow: 0 9px 10px oklch(0% 0 0 / 0.5), inset 0 -9px 12px oklch(0% 0 0 / 0.55);
}
.studio-piano button.is-hit { transform: translateY(3px); filter: brightness(1.12); box-shadow: inset 0 0 24px oklch(68% 0.16 58 / 0.42); }
.studio-piano button.is-written { outline: 2px solid var(--studio-green); outline-offset: -4px; }
.keyboard-hint { margin: 0.65rem 0 0; color: oklch(55% 0.035 73); font: 600 0.55rem/1.4 "IBM Plex Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; }

.tape-workbench { display: grid; grid-template-columns: minmax(12rem, 0.34fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.rt707-specs { margin: -0.35rem 0 0.85rem; color: oklch(58% 0.045 74); font: 700 0.54rem/1.4 "IBM Plex Mono", monospace; letter-spacing: 0.12em; }
.reel-library {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0.55rem;
  padding: 0.85rem;
  border: 1px solid oklch(70% 0.06 70 / 0.2);
  border-radius: 0.42rem;
  background: #0a0806;
}
.reel-library p { grid-column: 1 / -1; margin: 0 0 0.35rem; color: oklch(58% 0.04 73); font: 600 0.56rem/1.45 "IBM Plex Mono", monospace; }
.reel-library > button:not(.eject-reels) {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  grid-template-rows: auto auto;
  gap: 0.1rem 0.5rem;
  align-items: center;
  min-height: 4.2rem;
  padding: 0.45rem;
  border: 1px solid oklch(70% 0.06 70 / 0.22);
  border-radius: 0.3rem;
  background: linear-gradient(145deg, oklch(22% 0.035 45), oklch(10% 0.025 42));
  color: oklch(82% 0.04 78);
  text-align: left;
}
.reel-library button i { grid-row: 1 / 3; width: 2.2rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #090706 0 12%, oklch(78% 0.025 74) 13% 19%, transparent 20% 37%, oklch(67% 0.025 72) 38% 42%, transparent 43%), repeating-conic-gradient(oklch(70% 0.025 75) 0 12deg, oklch(20% 0.02 45) 12deg 42deg); box-shadow: 0 0 0 2px #070605, 0 4px 8px #000; }
.reel-library button strong { color: var(--studio-orange); font: 800 0.52rem/1 "IBM Plex Mono", monospace; }
.reel-library button span { font-size: 0.62rem; line-height: 1.1; }
.reel-library button.is-selected { border-color: var(--studio-green); box-shadow: 0 0 14px oklch(72% 0.17 145 / 0.24); }
.eject-reels { grid-column: 1 / -1; margin-top: 0.25rem; }

.rt707-stage {
  position: relative;
  min-height: clamp(22rem, 43vw, 39rem);
  overflow: hidden;
  border: 1px solid oklch(72% 0.07 70 / 0.25);
  border-radius: 0.48rem;
  background: radial-gradient(ellipse at 50% 48%, oklch(44% 0.055 54 / 0.2), #030303 68%);
  perspective: 1100px;
}
.rt707-stage > img { position: absolute; inset: 5% 3%; width: 94%; height: 90%; object-fit: contain; filter: sepia(0.08) saturate(0.82) contrast(1.08) brightness(0.78); transform: rotateX(1.2deg); }
.rt707-shadow { position: absolute; left: 14%; right: 14%; bottom: 7%; height: 11%; border-radius: 50%; background: #000; filter: blur(24px); opacity: 0.8; }
.rt707-glass { position: absolute; z-index: 4; inset: 10% 8% 13%; pointer-events: none; background: linear-gradient(112deg, transparent 0 38%, oklch(100% 0 0 / 0.1) 45%, transparent 52%); mix-blend-mode: screen; opacity: 0.65; }
.rt707-slot {
  position: absolute;
  z-index: 5;
  top: 25%;
  width: 27%;
  aspect-ratio: 1;
  border: 1px dashed oklch(80% 0.07 72 / 0.45);
  border-radius: 50%;
  background: radial-gradient(circle, #0a0806 0 8%, transparent 9% 42%, oklch(100% 0 0 / 0.035) 43% 44%, transparent 45%);
  color: oklch(68% 0.05 76);
  font: 800 0.56rem/1 "IBM Plex Mono", monospace;
}
.rt707-slot-left { left: 15.5%; }
.rt707-slot-right { right: 15.5%; }
.rt707-slot i { position: absolute; inset: 5%; border-radius: 50%; opacity: 0; background: radial-gradient(circle, #090706 0 9%, oklch(76% 0.025 73) 10% 16%, transparent 17% 37%, oklch(66% 0.025 72) 38% 42%, transparent 43%), repeating-conic-gradient(from 8deg, oklch(74% 0.025 74) 0 11deg, oklch(17% 0.02 43) 12deg 41deg); filter: drop-shadow(0 8px 10px #000); transition: opacity 180ms ease; }
.rt707-slot span { position: absolute; left: 50%; bottom: -1.8rem; transform: translateX(-50%); white-space: nowrap; }
.rt707-slot.is-loaded { border-style: solid; border-color: oklch(82% 0.08 74 / 0.25); }
.rt707-slot.is-loaded i { opacity: 1; }
.rt707-stage.is-running .rt707-slot.is-loaded i { animation: studio-reel-spin 2.4s linear infinite; }
.rt707-stage.is-running .rt707-slot-right.is-loaded i { animation-direction: reverse; animation-duration: 1.95s; }
.rt707-slot.is-drop-target { border-color: var(--studio-green); box-shadow: 0 0 24px oklch(72% 0.17 145 / 0.35); }
.rt707-tape { position: absolute; z-index: 6; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 200ms ease; }
.rt707-tape path { fill: none; stroke: oklch(77% 0.055 72); stroke-width: 1.3; stroke-dasharray: 5 8; }
.rt707-stage.has-reels .rt707-tape { opacity: 0.55; }
.rt707-stage.is-running .rt707-tape path { animation: studio-tape-run 1.3s linear infinite; }
.rt707-vu { position: absolute; z-index: 7; left: 45%; top: 51%; display: flex; gap: 1.6rem; pointer-events: none; }
.rt707-vu i { width: 1px; height: 2rem; background: var(--studio-red); transform: rotate(-18deg); transform-origin: bottom; }
.rt707-stage.is-running .rt707-vu i:first-child { animation: studio-vu 680ms steps(5, end) infinite; }
.rt707-stage.is-running .rt707-vu i:last-child { animation: studio-vu 540ms 80ms steps(4, end) infinite reverse; }

@keyframes studio-reel-spin { to { transform: rotate(1turn); } }
@keyframes studio-tape-run { to { stroke-dashoffset: -26; } }
@keyframes studio-vu { 0%,100% { transform: rotate(-22deg); } 50% { transform: rotate(24deg); } 72% { transform: rotate(4deg); } }
@keyframes studio-led-pulse { 50% { opacity: 0.3; } }

@media (max-width: 1080px) {
  .studio-master { position: relative; top: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-master-id { grid-column: 1 / -1; }
  .studio-position { justify-content: center; }
  .tape-workbench { grid-template-columns: 1fr; }
  .reel-library { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reel-library p,
  .eject-reels { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .studio-master { grid-template-columns: 1fr; }
  .studio-patterns > span { width: 100%; }
  .drum-track { grid-template-columns: 4.6rem minmax(40rem, 1fr); }
  .chord-laser-grid { grid-template-columns: repeat(8, 4.3rem); min-height: 18rem; }
  .bass-machine-grid { grid-template-columns: 1fr; }
  .bass-screen { grid-template-columns: 1fr; }
  .bass-screen i { display: none; }
  .bass-toolbar button { flex: 1 1 calc(50% - 0.5rem); min-width: 0; }
  .bass-toolbar #bass-random { flex-basis: 100%; }
  #bass-loop-status { flex-basis: 100%; margin-left: 0; }
  .bass-step-header { grid-template-columns: 2.4rem 1fr 2.4rem; }
  .bass-step-help { grid-column: 1 / -1; justify-self: start; }
  .bass-octave { grid-template-columns: 2.9rem repeat(6, minmax(0, 1fr)); }
  .bass-note-bank button { min-height: 3.9rem; }
  .bass-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .piano-white-keys { min-width: 42rem; }
  .studio-piano { overflow-x: auto; }
  .piano-black-keys { min-width: 42rem; }
  .reel-library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt707-stage { min-height: 19rem; }
  .rt707-slot { top: 26%; }
  .rt707-vu { display: none; }
  .studio-stack .machine-head { flex-wrap: wrap; }
  .studio-stack .machine-head > .meter,
  .studio-stack #tape-loop-status { min-width: 0; max-width: 100%; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .rt707-stage.is-running .rt707-slot.is-loaded i,
  .rt707-stage.is-running .rt707-tape path,
  .rt707-stage.is-running .rt707-vu i,
  .studio-position i,
  .studio-led { animation: none !important; }
}

/* V6 / Kerri Chandler Pioneer RT-707 console */
.pioneer-console-module {
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 4%, oklch(71% 0.12 76 / 0.1), transparent 30rem),
    linear-gradient(145deg, oklch(16% 0.035 44), oklch(8% 0.025 40));
}

.pioneer-console-intro {
  max-width: 52rem;
  margin: -0.75rem 0 1.25rem;
  color: oklch(68% 0.035 76);
  font: 600 0.68rem/1.55 "IBM Plex Mono", monospace;
  letter-spacing: 0.04em;
}

.pioneer-console {
  --console-orange: oklch(67% 0.17 53);
  --console-green: oklch(77% 0.14 137);
  --console-cream: oklch(88% 0.028 82);
  --reel-speed: 2.2s;
  --tape-drive-glow: 0.2;
  position: relative;
  padding: clamp(0.8rem, 2vw, 1.5rem);
  border: 1px solid oklch(92% 0.025 80 / 0.42);
  border-radius: 0.38rem;
  background:
    repeating-linear-gradient(90deg, transparent 0 2px, oklch(0% 0 0 / 0.025) 2px 3px),
    linear-gradient(160deg, oklch(75% 0.018 76), oklch(53% 0.025 67) 48%, oklch(68% 0.02 76));
  box-shadow:
    0 2.2rem 4rem oklch(0% 0 0 / 0.58),
    inset 0 1px oklch(100% 0 0 / 0.52),
    inset 0 -0.4rem 0.7rem oklch(20% 0.025 54 / 0.35);
  color: oklch(15% 0.024 55);
  transform: perspective(1400px) rotateX(0.8deg);
  transform-origin: 50% 100%;
  scroll-margin-top: 12rem;
}

.pioneer-console::after {
  content: "";
  position: absolute;
  z-index: 20;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(112deg, transparent 0 35%, oklch(100% 0 0 / 0.11) 43%, transparent 51% 100%);
  mix-blend-mode: screen;
  opacity: 0.52;
}

.pioneer-console-topline {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 15rem) auto;
  align-items: center;
  gap: 1rem;
  min-height: 3.6rem;
  margin-bottom: 0.75rem;
  padding: 0 0.3rem 0.7rem;
  border-bottom: 1px solid oklch(20% 0.025 55 / 0.52);
}

.pioneer-model { display: flex; align-items: baseline; gap: 0.75rem; }
.pioneer-model strong { font: 900 clamp(1.1rem, 2vw, 1.65rem)/1 "IBM Plex Sans", sans-serif; letter-spacing: -0.06em; }
.pioneer-model span { font: 700 0.52rem/1.2 "IBM Plex Mono", monospace; letter-spacing: 0.11em; }
.pioneer-kerri-logo { justify-self: center; width: min(100%, 11rem); height: 2.6rem; object-fit: contain; filter: invert(1) sepia(0.25) saturate(0.4) brightness(0.32); }
.pioneer-power { display: grid; justify-items: center; gap: 0.25rem; font: 800 0.47rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.1em; }
.pioneer-power i { width: 0.58rem; aspect-ratio: 1; border-radius: 50%; background: var(--console-orange); box-shadow: 0 0 0.75rem var(--console-orange); }

.pioneer-machine-face {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.3vw, 1rem);
  padding: clamp(0.65rem, 1.3vw, 1rem);
  border: 1px solid oklch(15% 0.025 52 / 0.6);
  background:
    radial-gradient(circle at 50% 0%, oklch(36% 0.035 62 / 0.45), transparent 55%),
    #151310;
  box-shadow: inset 0 0 2rem #000, 0 1px oklch(100% 0 0 / 0.32);
}

.pioneer-reel-bay {
  position: relative;
  grid-column: 1 / -1;
  min-height: clamp(18rem, 39vw, 34rem);
  overflow: hidden;
  border: 1px solid #050403;
  background:
    radial-gradient(circle at 26% 41%, oklch(38% 0.035 70 / 0.4), transparent 19%),
    radial-gradient(circle at 74% 41%, oklch(38% 0.035 70 / 0.4), transparent 19%),
    linear-gradient(180deg, #1a1815, #070605 86%);
  box-shadow: inset 0 0 3rem #000, inset 0 1px oklch(100% 0 0 / 0.09);
}

.pioneer-reel {
  position: absolute;
  z-index: 3;
  top: 7%;
  width: min(34%, 25rem);
  aspect-ratio: 1;
  border: clamp(0.35rem, 0.8vw, 0.7rem) solid oklch(73% 0.018 76);
  border-radius: 50%;
  background:
    radial-gradient(circle, #080706 0 5%, oklch(74% 0.018 75) 5.5% 9%, transparent 9.5% 22%, oklch(8% 0.01 50 / 0.88) 22.5% 29%, transparent 29.5%),
    repeating-conic-gradient(from 7deg, oklch(72% 0.022 74) 0 8deg, transparent 9deg 37deg, oklch(44% 0.02 70) 38deg 43deg, transparent 44deg 60deg);
  box-shadow: 0 1.4rem 2.2rem #000, inset 0 0 1.1rem oklch(100% 0 0 / 0.26), 0 0 0 2px #060504;
  will-change: transform;
}
.pioneer-reel-left { left: 9%; }
.pioneer-reel-right { right: 9%; }
.pioneer-reel::before {
  content: "";
  position: absolute;
  inset: 30%;
  border: 0.45rem solid oklch(67% 0.025 69);
  border-radius: 50%;
  background: radial-gradient(circle, #080706 0 20%, var(--console-orange) 21% 25%, #a8a29a 26% 42%, #171411 43%);
  box-shadow: inset 0 0 0.7rem #000, 0 0 0 1px #050403;
}
.pioneer-reel i { position: absolute; inset: 3%; border-radius: 50%; border-top: 2px solid oklch(100% 0 0 / 0.32); border-right: 1px solid transparent; }
.pioneer-reel b { position: absolute; inset: 10%; border-radius: 50%; box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.06); }

.pioneer-head-block {
  position: absolute;
  z-index: 4;
  left: 37%;
  right: 37%;
  bottom: 6%;
  display: flex;
  justify-content: center;
  gap: 7%;
  height: 18%;
  padding: 3%;
  border: 1px solid #030302;
  border-radius: 0.25rem;
  background: linear-gradient(180deg, #5d5a54, #1a1815 28%, #090807);
  box-shadow: 0 0.75rem 1.2rem #000;
}
.pioneer-head-block span { width: 17%; border-radius: 50% 50% 0 0; background: linear-gradient(90deg, #292621, #b5aea2 50%, #27241f); box-shadow: inset 0 0 0 1px #080706; }
.pioneer-tape-path { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pioneer-tape-path path { fill: none; stroke: oklch(68% 0.04 70); stroke-width: 2; stroke-dasharray: 7 10; opacity: 0.72; }
.pioneer-path-labels {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  color: oklch(88% 0.08 80 / 0.78);
  font: 900 clamp(0.42rem, 0.9vw, 0.62rem)/1 "Bitcount Prop Single", monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000, 0 0 0.55rem oklch(0% 0 0 / 0.72);
}
.pioneer-path-labels span {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  opacity: 0.68;
}
.pioneer-path-labels span::before {
  content: "";
  width: 1.45rem;
  height: 1px;
  background: currentColor;
  opacity: 0.75;
}
.pioneer-path-labels .supply { left: 6%; top: 8%; }
.pioneer-path-labels .takeup { right: 6%; top: 8%; flex-direction: row-reverse; }
.pioneer-path-labels .erase { left: 31%; bottom: 8%; }
.pioneer-path-labels .record { left: 43%; bottom: 5%; }
.pioneer-path-labels .playback { left: 55%; bottom: 8%; }
.pioneer-path-labels .capstan { left: 48%; bottom: 18%; transform: translateX(-50%); color: var(--console-orange); }
.pioneer-face-glass { position: absolute; z-index: 7; inset: 0; pointer-events: none; background: linear-gradient(118deg, transparent 0 28%, oklch(100% 0 0 / 0.11) 37%, transparent 47%); mix-blend-mode: screen; }

.pioneer-readouts {
  grid-column: 1 / span 5;
  display: grid;
  grid-template-columns: minmax(5rem, 0.72fr) minmax(0, 1.5fr);
  gap: 0.65rem;
  min-height: 7.6rem;
}
.pioneer-counter { display: grid; align-content: center; justify-items: center; gap: 0.3rem; padding: 0.65rem; border: 1px solid #020201; background: #0a0907; color: oklch(73% 0.04 72); font: 700 0.48rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.09em; }
.pioneer-counter output { min-width: 4.6rem; padding: 0.4rem; background: #020403; color: var(--console-green); box-shadow: inset 0 0 0.8rem #000; font-size: 1.35rem; letter-spacing: 0.14em; text-align: center; text-shadow: 0 0 0.7rem var(--console-green); }
.pioneer-counter small { color: var(--console-orange); }
.pioneer-vu-bank { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.pioneer-vu { position: relative; display: grid; grid-template-rows: auto 1fr; padding: 0.5rem; border: 1px solid #16120d; background: var(--console-cream); color: #24201b; font: 800 0.45rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.08em; }
.pioneer-vu > div { position: relative; overflow: hidden; border-radius: 50% 50% 0 0; background: repeating-linear-gradient(100deg, transparent 0 10%, #b1a798 11% 11.8%, transparent 12% 20%); }
.pioneer-vu i { position: absolute; left: 50%; bottom: 0; width: 1px; height: 70%; background: #c1261b; transform: rotate(-34deg); transform-origin: bottom; transition: transform 90ms linear; }
.pioneer-vu small { position: absolute; right: 0.45rem; bottom: 0.35rem; font-size: 0.48rem; }

.pioneer-programs {
  grid-column: 6 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0;
  padding: 0.55rem;
  border: 1px solid #030302;
  background: #0a0907;
}
.pioneer-programs legend { padding: 0 0.4rem; color: oklch(67% 0.03 74); font: 800 0.48rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.12em; }
.pioneer-programs button { display: grid; align-content: center; gap: 0.35rem; min-height: 5.8rem; padding: 0.5rem; border: 1px solid #3d3730; border-radius: 0.16rem; background: linear-gradient(160deg, #27231e, #100e0c); color: oklch(74% 0.03 75); text-align: left; }
.pioneer-programs button strong { color: var(--console-orange); font: 900 0.6rem/1 "IBM Plex Mono", monospace; }
.pioneer-programs button span { font: 700 0.55rem/1.25 "IBM Plex Mono", monospace; text-transform: uppercase; }
.pioneer-programs button[aria-pressed="true"] { border-color: var(--console-green); color: oklch(94% 0.03 86); box-shadow: inset 0 0 1.1rem oklch(69% 0.16 138 / 0.18), 0 0 0.7rem oklch(69% 0.16 138 / 0.2); }

.pioneer-transport { grid-column: 1 / span 5; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.42rem; }
.pioneer-transport button { display: grid; place-items: center; align-content: center; gap: 0.28rem; min-height: 4.7rem; padding: 0.35rem; border: 1px solid #0c0a08; border-radius: 0.18rem; background: linear-gradient(150deg, #a9a299, #58534c); color: #16130f; box-shadow: inset 0 1px oklch(100% 0 0 / 0.42), 0 0.3rem 0.55rem #000; }
.pioneer-transport button span { font-size: 0.9rem; }
.pioneer-transport button small { font: 900 0.42rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.08em; }
.pioneer-transport button:active { transform: translateY(2px); box-shadow: inset 0 2px 0.4rem oklch(0% 0 0 / 0.42); }
.pioneer-transport button.is-active { color: #050603; background: linear-gradient(150deg, oklch(82% 0.13 136), oklch(48% 0.14 136)); box-shadow: inset 0 1px oklch(100% 0 0 / 0.35), 0 0 1rem oklch(73% 0.17 138 / 0.38); }

.pioneer-tone-controls { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; padding: 0.7rem; border: 1px solid #030302; background: #0b0a08; }
.pioneer-console.is-adjusting .pioneer-tone-controls { border-color: var(--console-orange); box-shadow: inset 0 0 1.5rem oklch(67% 0.17 53 / var(--tape-drive-glow)), 0 0 0.8rem oklch(67% 0.17 53 / 0.2); }
.pioneer-tone-controls label { display: grid; align-content: center; gap: 0.65rem; min-width: 0; color: oklch(72% 0.03 76); font: 800 0.47rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.06em; }
.pioneer-tone-controls label > span { display: flex; justify-content: space-between; gap: 0.4rem; }
.pioneer-tone-controls output { color: var(--console-orange); }
.pioneer-tone-controls input { width: 100%; accent-color: var(--console-orange); }

.pioneer-console-foot { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: 0.8rem 0.2rem 0; color: oklch(24% 0.025 60); font: 800 0.46rem/1.3 "IBM Plex Mono", monospace; letter-spacing: 0.1em; }

.pioneer-console.is-running .pioneer-reel { animation: pioneer-reel-run var(--reel-speed) linear infinite; }
.pioneer-console.is-running .pioneer-reel-left { animation-direction: normal; }
.pioneer-console.is-running .pioneer-reel-right { animation-direction: normal; }
.pioneer-console.is-running.is-reverse .pioneer-reel-left { animation-direction: normal; }
.pioneer-console.is-running.is-reverse .pioneer-reel-right { animation-direction: normal; }
.pioneer-console.is-shuttling .pioneer-reel { animation: pioneer-reel-run 0.42s linear infinite; }
.pioneer-console.is-shuttling .pioneer-reel-left { animation-direction: normal; }
.pioneer-console.is-shuttling .pioneer-reel-right { animation-direction: normal; }
.pioneer-console.is-shuttling.is-rewind .pioneer-reel-left { animation-direction: normal; }
.pioneer-console.is-shuttling.is-rewind .pioneer-reel-right { animation-direction: normal; }
.pioneer-console.is-running .pioneer-tape-path path,
.pioneer-console.is-shuttling .pioneer-tape-path path { animation: pioneer-tape-travel 0.9s linear infinite; }
.pioneer-console.is-reverse .pioneer-tape-path path,
.pioneer-console.is-rewind .pioneer-tape-path path { animation-direction: reverse; }
.pioneer-console.is-running .pioneer-power i { animation: pioneer-power-breathe 1.5s ease-in-out infinite; }

@keyframes pioneer-reel-run { to { transform: rotate(1turn); } }
@keyframes pioneer-tape-travel { to { stroke-dashoffset: -34; } }
@keyframes pioneer-power-breathe { 50% { opacity: 0.45; box-shadow: 0 0 0.25rem var(--console-orange); } }

@media (max-width: 900px) {
  .pioneer-readouts,
  .pioneer-transport { grid-column: 1 / -1; }
  .pioneer-programs,
  .pioneer-tone-controls { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .pioneer-console { padding: 0.6rem; transform: none; }
  .pioneer-console-topline { grid-template-columns: 1fr auto; }
  .pioneer-kerri-logo { grid-column: 1 / -1; grid-row: 2; justify-self: start; width: 8rem; }
  .pioneer-power { grid-column: 2; grid-row: 1; }
  .pioneer-reel-bay { min-height: 14rem; }
  .pioneer-reel { top: 11%; width: 37%; }
  .pioneer-reel-left { left: 5%; }
  .pioneer-reel-right { right: 5%; }
  .pioneer-readouts { grid-template-columns: 1fr; }
  .pioneer-counter { grid-template-columns: auto auto auto; justify-content: space-between; }
  .pioneer-programs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pioneer-programs button { min-height: 4.5rem; }
  .pioneer-transport { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pioneer-tone-controls { grid-template-columns: 1fr; }
  .pioneer-console-foot { display: grid; gap: 0.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pioneer-console.is-running .pioneer-reel,
  .pioneer-console.is-shuttling .pioneer-reel,
  .pioneer-console.is-running .pioneer-tape-path path,
  .pioneer-console.is-shuttling .pioneer-tape-path path,
  .pioneer-console.is-running .pioneer-power i { animation: none !important; }
}

/* V7 / Kerri effects rack, sound system and scope */
.machine-copy {
  margin: -0.75rem 0 1.1rem;
  color: oklch(64% 0.035 74);
  font: 600 0.64rem/1.5 "IBM Plex Mono", monospace;
}

.studio-effects-rack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

#rotary-isolator,
#kerri-sound-system,
#kerri-oscilloscope {
  scroll-margin-top: 10rem;
}

.studio-effects-rack > .studio-module { min-width: 0; }

.rotary-isolator {
  background:
    radial-gradient(circle at 50% 10%, oklch(81% 0.08 78 / 0.08), transparent 22rem),
    linear-gradient(150deg, #1b1510, #090705);
}

.isolator-face {
  padding: clamp(0.75rem, 1.5vw, 1.15rem);
  border: 1px solid oklch(72% 0.055 71 / 0.25);
  border-radius: 0.35rem;
  background:
    repeating-linear-gradient(90deg, transparent 0 2px, oklch(100% 0 0 / 0.018) 2px 3px),
    linear-gradient(160deg, #262019, #0b0907 68%);
  box-shadow: inset 0 1px oklch(100% 0 0 / 0.08), inset 0 0 2rem #000, 0 1rem 1.8rem oklch(0% 0 0 / 0.25);
}

.isolator-dials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.isolator-channel { display: grid; justify-items: center; gap: 0.5rem; min-width: 0; color: oklch(76% 0.035 76); font: 900 0.56rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.12em; }
.isolator-channel > span { color: var(--band-color); }
.isolator-low { --band-color: oklch(67% 0.17 52); }
.isolator-mid { --band-color: oklch(77% 0.14 136); }
.isolator-high { --band-color: oklch(75% 0.13 224); }
.rotary-knob {
  --dial-angle: 45deg;
  position: relative;
  display: block;
  width: clamp(5.2rem, 9vw, 7.4rem);
  aspect-ratio: 1;
  border: clamp(0.4rem, 0.7vw, 0.62rem) solid #080605;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, oklch(49% 0.025 65), #17130f 47%, #070605 72%),
    #111;
  box-shadow: 0 0 0 1px #55483b, 0 0.8rem 1.1rem #000, inset 0 2px oklch(100% 0 0 / 0.15), inset 0 -0.5rem 0.8rem #000;
  transform: rotate(var(--dial-angle));
  transition: transform 90ms linear;
}
.rotary-knob::before { content: ""; position: absolute; left: calc(50% - 1px); top: 8%; width: 2px; height: 22%; border-radius: 2px; background: var(--band-color); box-shadow: 0 0 0.55rem var(--band-color); }
.rotary-knob::after { content: ""; position: absolute; inset: -0.8rem; border: 1px dotted oklch(76% 0.04 75 / 0.28); border-radius: 50%; }
.rotary-knob b { position: absolute; inset: 33%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6a5d4e, #17120e 70%); box-shadow: inset 0 1px oklch(100% 0 0 / 0.15); }
.isolator-channel input { width: min(100%, 7rem); accent-color: var(--band-color); }
.isolator-channel output { color: oklch(88% 0.035 78); font-size: 0.68rem; }
.isolator-channel button,
.isolator-sweep button { min-height: 2.2rem; border: 1px solid #4a3d32; border-radius: 0.2rem; background: linear-gradient(160deg, #30261e, #120e0b); color: oklch(74% 0.035 74); font: 900 0.5rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.08em; }
.isolator-channel button[aria-pressed="true"] { border-color: var(--studio-red); background: oklch(36% 0.13 38); color: white; box-shadow: 0 0 0.8rem oklch(60% 0.2 35 / 0.42); }
.isolator-sweep { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 0.55rem; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid oklch(74% 0.04 75 / 0.18); }
.isolator-sweep label { display: grid; grid-template-columns: 1fr auto; gap: 0.45rem; color: oklch(68% 0.04 75); font: 800 0.49rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.08em; }
.isolator-sweep input { grid-column: 1 / -1; width: 100%; accent-color: var(--studio-orange); }
.isolator-sweep output { color: var(--studio-orange); }
.isolator-sweep button { padding: 0.5rem 0.65rem; }

.sound-system-machine {
  --system-width: 64%;
  --listener-x: 0%;
  --sub-pulse: 0.12;
  --top-pulse: 0.12;
  background:
    radial-gradient(ellipse at 50% 70%, oklch(66% 0.14 48 / 0.1), transparent 24rem),
    linear-gradient(150deg, #16100c, #070504);
}
.sound-system-stage { position: relative; min-height: clamp(16rem, 25vw, 23rem); overflow: hidden; border: 1px solid oklch(72% 0.055 71 / 0.22); border-radius: 0.35rem; background: linear-gradient(180deg, #090705 0 66%, #17110d 66% 100%); perspective: 900px; }
.sound-system-stage::before { content: ""; position: absolute; inset: 66% 0 0; background: repeating-linear-gradient(90deg, transparent 0 9%, oklch(80% 0.04 75 / 0.07) 9.2% 9.5%); transform: perspective(350px) rotateX(58deg); transform-origin: top; }
.speaker-stack { position: absolute; z-index: 4; bottom: 16%; width: clamp(5.4rem, 12vw, 8.2rem); height: 68%; border: 1px solid #44382e; border-radius: 0.18rem; background: linear-gradient(90deg, #0b0907, #2b241d 50%, #080605); box-shadow: 0 1.2rem 1.5rem #000, inset 0 0 1rem #000; transition: left 180ms ease, right 180ms ease; }
.speaker-stack-left { left: calc((100% - var(--system-width)) / 2); transform: rotateY(6deg); }
.speaker-stack-right { right: calc((100% - var(--system-width)) / 2); transform: rotateY(-6deg); }
.speaker-stack i,
.speaker-stack b { position: absolute; left: 50%; border: 0.28rem solid #27211b; border-radius: 50%; background: radial-gradient(circle, #302820 0 15%, #070605 17% 48%, #262019 50% 56%, #050403 58%); transform: translateX(-50%) scale(calc(1 + var(--sub-pulse))); box-shadow: inset 0 0 1rem #000; }
.speaker-stack i { bottom: 7%; width: 72%; aspect-ratio: 1; }
.speaker-stack b { top: 7%; width: 35%; aspect-ratio: 1; transform: translateX(-50%) scale(calc(1 + var(--top-pulse))); }
.speaker-stack b:nth-of-type(2) { top: 28%; width: 31%; }
.speaker-stack span { position: absolute; left: 50%; top: 49%; width: 1.1rem; aspect-ratio: 1; border-radius: 50%; background: var(--studio-orange); transform: translateX(-50%); box-shadow: 0 0 0.8rem oklch(68% 0.17 54 / 0.4); }
.sound-field { position: absolute; z-index: 2; inset: 10% 14% 18%; }
.sound-field > i { position: absolute; inset: 20% 10%; border: 1px solid oklch(75% 0.12 65 / 0.16); border-radius: 50%; transform: scale(0.5); opacity: 0; }
.sound-system-machine.is-sounding .sound-field > i { animation: sound-wave-out 1.8s ease-out infinite; }
.sound-system-machine.is-sounding .sound-field > i:nth-child(2) { animation-delay: 0.6s; }
.sound-system-machine.is-sounding .sound-field > i:nth-child(3) { animation-delay: 1.2s; }
.listener-marker { position: absolute; left: calc(50% + var(--listener-x) * 0.32); bottom: -7%; width: 1.2rem; aspect-ratio: 1; border: 2px solid var(--studio-green); border-radius: 50% 50% 45% 45%; transform: translateX(-50%); box-shadow: 0 0 0.8rem oklch(74% 0.16 140 / 0.4); transition: left 120ms linear; }
.listener-marker::after { content: ""; position: absolute; left: 50%; top: 105%; width: 1px; height: 1.3rem; background: var(--studio-green); }
.sound-system-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; margin-top: 0.75rem; }
.sound-system-controls label { display: grid; gap: 0.45rem; padding: 0.55rem; border: 1px solid oklch(72% 0.05 73 / 0.17); background: #0a0705; color: oklch(68% 0.035 75); font: 800 0.49rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.06em; }
.sound-system-controls label span { display: flex; justify-content: space-between; }
.sound-system-controls output { color: var(--studio-orange); }
.sound-system-controls input { width: 100%; accent-color: var(--studio-orange); }
.sound-system-controls button { grid-column: 1 / -1; min-height: 2.65rem; border: 1px solid oklch(72% 0.1 58 / 0.42); background: linear-gradient(150deg, #4a2918, #1d100a); color: oklch(88% 0.06 76); font: 900 0.55rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; }

.oscilloscope-machine { background: linear-gradient(150deg, #17110d, #070504); }
.oscilloscope-console { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.25fr); gap: 0.8rem; padding: clamp(0.65rem, 1.4vw, 1rem); border: 1px solid oklch(72% 0.05 72 / 0.26); border-radius: 0.35rem; background: linear-gradient(145deg, #585047, #2b2520 55%, #17130f); box-shadow: inset 0 1px oklch(100% 0 0 / 0.15), 0 1.2rem 2rem #000; }
.scope-screen-wrap { --scope-glow: 0.65; position: relative; min-height: clamp(17rem, 31vw, 29rem); overflow: hidden; border: clamp(0.7rem, 1.4vw, 1.2rem) solid #0b0907; border-radius: 8% / 13%; background: radial-gradient(ellipse at 50% 50%, #07140b, #010302 72%); box-shadow: inset 0 0 3rem #000, 0 0 0 1px #766b5d; }
#studio-scope { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 calc(0.7rem * var(--scope-glow)) oklch(78% 0.19 143 / 0.8)); }
.scope-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(oklch(72% 0.12 143 / 0.08) 1px, transparent 1px), linear-gradient(90deg, oklch(72% 0.12 143 / 0.08) 1px, transparent 1px); background-size: 10% 20%; }
.scope-scanline { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 3px, oklch(0% 0 0 / 0.18) 3px 4px); mix-blend-mode: multiply; }
.scope-logo { position: absolute; right: 3%; bottom: 5%; width: clamp(4rem, 8vw, 7rem); height: 2.8rem; object-fit: contain; opacity: 0.22; }
.scope-controls { display: grid; align-content: start; gap: 0.65rem; }
.scope-controls fieldset { display: grid; gap: 0.35rem; margin: 0; padding: 0.55rem; border: 1px solid #17120e; background: #0b0806; }
.scope-controls legend { padding: 0 0.3rem; color: oklch(68% 0.035 74); font: 800 0.48rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.1em; }
.scope-controls button { min-height: 2.4rem; border: 1px solid #4a4036; border-radius: 0.16rem; background: linear-gradient(150deg, #383027, #14100d); color: oklch(72% 0.035 75); font: 900 0.5rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.scope-controls button[aria-pressed="true"],
.scope-controls button.is-active { border-color: var(--studio-green); color: var(--studio-green); box-shadow: inset 0 0 1rem oklch(72% 0.17 142 / 0.14), 0 0 0.65rem oklch(72% 0.17 142 / 0.2); }
.scope-controls label { display: grid; gap: 0.45rem; padding: 0.6rem; border: 1px solid #17120e; background: #0b0806; color: oklch(68% 0.035 74); font: 800 0.48rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.06em; }
.scope-controls label span { display: flex; justify-content: space-between; }
.scope-controls output { color: var(--studio-green); }
.scope-controls input { width: 100%; accent-color: var(--studio-green); }
.scope-screen-wrap.is-frozen::after { content: "HOLD"; position: absolute; top: 5%; right: 3%; color: var(--studio-orange); font: 900 0.58rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.12em; }

@keyframes sound-wave-out { 0% { transform: scale(0.35); opacity: 0; } 20% { opacity: 0.42; } 100% { transform: scale(1.5); opacity: 0; } }

@media (max-width: 1080px) {
  .studio-effects-rack { grid-template-columns: 1fr; }
  .oscilloscope-console { grid-template-columns: 1fr; }
  .scope-controls { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; }
  .scope-controls fieldset { grid-column: span 2; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scope-controls legend { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .isolator-dials { gap: 0.35rem; }
  .rotary-knob { width: clamp(4.1rem, 22vw, 5.4rem); }
  .isolator-sweep { grid-template-columns: 1fr 1fr; }
  .isolator-sweep label { grid-column: 1 / -1; }
  .sound-system-stage { min-height: 15rem; }
  .speaker-stack { width: 4.6rem; }
  .sound-system-controls { grid-template-columns: 1fr; }
  .sound-system-controls button { grid-column: auto; }
  .scope-controls { grid-template-columns: 1fr 1fr; }
  .scope-controls fieldset { grid-column: 1 / -1; }
  .scope-screen-wrap { min-height: 14rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sound-system-machine.is-sounding .sound-field > i { animation: none !important; }
  .rotary-knob,
  .speaker-stack,
  .listener-marker { transition: none !important; }
}

.archive-construction {
  border: 1px solid oklch(82% 0.06 76 / 0.28);
  background:
    radial-gradient(circle at 18% 0%, oklch(83% 0.17 77 / 0.08), transparent 22rem),
    oklch(8% 0.026 42 / 0.72);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.05);
}

.archive-construction > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5.4rem;
  padding: 0 var(--space-lg);
  cursor: pointer;
  color: var(--amber);
  font-family: "Bitcount Prop Single", "IBM Plex Mono", monospace;
  font-size: clamp(1.35rem, 3vw, 2.6rem);
  font-weight: 700;
  text-transform: uppercase;
}

.archive-construction > summary::after {
  content: "+";
  color: var(--paper);
  font-family: "Bebas Neue", sans-serif;
  font-size: 2.8rem;
  line-height: 1;
}

.archive-construction:not(.is-unlocked) > summary::after {
  content: "+";
  color: var(--amber);
  text-shadow: 0 0 1rem oklch(82% 0.16 76 / 0.34);
}

.archive-construction.is-denied > summary {
  animation: archive-denied-shake 420ms var(--ease);
  color: oklch(72% 0.2 28);
}

.archive-construction[open] > summary::after {
  content: "-";
}

@keyframes archive-denied-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-0.35rem); }
  55% { transform: translateX(0.25rem); }
  75% { transform: translateX(-0.12rem); }
}

.archive-construction > summary::-webkit-details-marker {
  display: none;
}

.archive-construction-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 2.5vw, 2.4rem);
  padding: clamp(1rem, 2.2vw, 2rem);
  background:
    linear-gradient(90deg, oklch(100% 0 0 / 0.025) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(180deg, oklch(13% 0.036 45 / 0.74), oklch(6% 0.02 42 / 0.92));
  counter-reset: archive-chapter;
}

.archive-construction-body > .section-kicker {
  order: 0;
  margin: 0;
  color: var(--amber);
}

.archive-construction-body > .section-heading {
  order: 1;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.48fr);
  align-items: end;
  gap: var(--space-lg);
  margin-bottom: 0;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid oklch(82% 0.08 76 / 0.24);
}

.archive-construction-body > .section-heading h2 {
  max-width: 11ch;
  color: var(--paper);
  font-size: clamp(4.4rem, 11vw, 12rem);
  line-height: 0.78;
}

.archive-construction-body > .section-heading p {
  max-width: 38rem;
  color: oklch(82% 0.045 78);
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  line-height: 1.55;
}

.archive-reading-order {
  order: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid oklch(82% 0.08 76 / 0.24);
  background: oklch(82% 0.08 76 / 0.18);
}

.archive-reading-order a {
  display: grid;
  gap: 0.35rem;
  min-height: 5.2rem;
  padding: 0.9rem;
  background:
    linear-gradient(180deg, oklch(14% 0.038 46 / 0.94), oklch(7% 0.022 42 / 0.98)),
    repeating-linear-gradient(0deg, transparent 0 5px, oklch(100% 0 0 / 0.024) 5px 6px);
  color: var(--paper);
  font-family: "Bitcount Prop Single", "IBM Plex Mono", monospace;
  font-size: clamp(0.72rem, 1vw, 0.88rem);
  font-weight: 900;
  text-transform: uppercase;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.archive-reading-order a span {
  color: var(--amber);
}

.archive-reading-order a:hover {
  background: var(--amber);
  color: var(--void);
}

.archive-reading-order a:hover span {
  color: var(--void);
}

.archive-bio { order: 3; }
.archive-grid { order: 4; }
.archive-deck { order: 5; }
.influences-archive { order: 6; }
.crate-influences { order: 7; }
.tribute-vault { order: 8; }

.archive-bio,
.archive-grid,
.archive-deck,
.influences-archive,
.crate-influences,
.tribute-vault {
  scroll-margin-top: 7rem;
}

.tribute-vault {
  position: relative;
  margin-bottom: var(--space-xl);
  border: 1px solid oklch(82% 0.08 76 / 0.26);
  background:
    radial-gradient(circle at 12% 0%, oklch(82% 0.16 76 / 0.14), transparent 24rem),
    repeating-linear-gradient(90deg, oklch(100% 0 0 / 0.022) 0 1px, transparent 1px 15px),
    oklch(8% 0.026 42 / 0.82);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.06), 0 2rem 5rem oklch(0% 0 0 / 0.28);
}

.tribute-vault-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.55fr);
  gap: var(--space-lg);
  padding: var(--space-lg);
  border-bottom: 1px solid oklch(82% 0.08 76 / 0.22);
}

.tribute-vault-head .section-kicker {
  grid-column: 1 / -1;
}

.tribute-vault-head h3 {
  margin: 0;
  color: var(--paper);
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(4rem, 9vw, 9rem);
  font-weight: 400;
  line-height: 0.86;
  text-transform: uppercase;
}

.tribute-vault-head p {
  max-width: 44rem;
  align-self: end;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  line-height: 1.5;
}

.tribute-toolbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(16rem, 1.25fr);
  border-bottom: 1px solid oklch(82% 0.08 76 / 0.22);
}

.tribute-toolbar button,
.tribute-toolbar input {
  min-height: 3.9rem;
  border: 0;
  border-right: 1px solid oklch(82% 0.08 76 / 0.18);
  border-bottom: 1px solid oklch(82% 0.08 76 / 0.1);
  background: oklch(5% 0.016 42 / 0.42);
  color: var(--paper);
  font: 800 0.82rem/1 "Bitcount Prop Single", "IBM Plex Mono", monospace;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tribute-toolbar button {
  cursor: pointer;
}

.tribute-toolbar button:hover,
.tribute-toolbar button.active {
  background: linear-gradient(180deg, oklch(82% 0.16 76), oklch(64% 0.15 48));
  color: var(--void);
}

.tribute-toolbar input {
  width: 100%;
  padding: 0 1rem;
  outline: 0;
  text-transform: none;
}

.tribute-toolbar input:focus {
  box-shadow: inset 0 0 0 2px var(--amber);
}

.tribute-count {
  padding: 0.75rem var(--space-lg);
  border-bottom: 1px solid oklch(82% 0.08 76 / 0.16);
  color: var(--amber);
  font: 800 0.78rem/1 "Bitcount Prop Single", "IBM Plex Mono", monospace;
  text-transform: uppercase;
}

.tribute-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: oklch(82% 0.08 76 / 0.16);
}

.tribute-card {
  min-width: 0;
  background:
    linear-gradient(180deg, oklch(13% 0.034 43 / 0.96), oklch(7% 0.02 42 / 0.98)),
    repeating-linear-gradient(0deg, transparent 0 4px, oklch(100% 0 0 / 0.028) 4px 5px);
}

.tribute-card.is-feature {
  grid-column: 1 / -1;
}

.tribute-card summary {
  display: grid;
  grid-template-columns: clamp(5.6rem, 13vw, 9rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  min-height: clamp(8rem, 16vw, 11rem);
  padding: 1rem;
  cursor: pointer;
  list-style: none;
}

.tribute-card summary::-webkit-details-marker {
  display: none;
}

.tribute-card summary::after {
  content: "+";
  justify-self: end;
  align-self: start;
  grid-column: 2;
  grid-row: 1;
  color: var(--amber);
  font-family: "Bebas Neue", sans-serif;
  font-size: 2rem;
  line-height: 1;
}

.tribute-card[open] summary::after {
  content: "-";
}

.tribute-card summary img,
.tribute-placeholder {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid oklch(82% 0.08 76 / 0.24);
  background: oklch(3% 0.012 42);
  filter: sepia(0.18) contrast(1.08) saturate(0.92);
}

.tribute-placeholder {
  display: grid;
  place-items: center;
  color: var(--amber);
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2rem, 5vw, 4rem);
}

.tribute-card-copy {
  display: grid;
  gap: 0.42rem;
  min-width: 0;
}

.tribute-card-copy span {
  color: var(--amber);
  font: 800 0.74rem/1 "Bitcount Prop Single", "IBM Plex Mono", monospace;
  text-transform: uppercase;
}

.tribute-card-copy strong {
  max-width: calc(100% - 2rem);
  color: var(--paper);
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.85rem, 3.6vw, 3.2rem);
  font-weight: 400;
  line-height: 0.92;
  text-transform: uppercase;
}

.tribute-card-copy em {
  display: -webkit-box;
  max-width: 58ch;
  overflow: hidden;
  color: var(--muted);
  font-style: normal;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.tribute-card-body {
  padding: 0 var(--space-lg) var(--space-lg);
}

.tribute-source-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-top: 1rem;
  border-top: 1px solid oklch(82% 0.08 76 / 0.16);
  color: var(--subtle);
  font: 800 0.72rem/1 "IBM Plex Mono", monospace;
  text-transform: uppercase;
}

.tribute-source-row a,
.tribute-original-copy a {
  color: var(--green);
  font-weight: 900;
}

.tribute-original-copy {
  display: flow-root;
  max-height: min(72vh, 54rem);
  overflow: auto;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid oklch(82% 0.08 76 / 0.18);
  background: oklch(4% 0.014 42 / 0.62);
  color: oklch(89% 0.035 78);
  line-height: 1.62;
}

.tribute-original-copy p,
.tribute-original-copy li {
  max-width: 76ch;
}

.tribute-original-copy img {
  max-width: min(100%, 38rem);
  height: auto;
  margin: 0.75rem 0;
  border: 1px solid oklch(82% 0.08 76 / 0.2);
}

.tribute-original-copy iframe,
.tribute-original-copy embed,
.tribute-original-copy object {
  max-width: 100%;
  border: 0;
}

.tribute-original-copy blockquote {
  margin: 1.2rem 0;
  padding: 1rem;
  border: 1px solid oklch(82% 0.08 76 / 0.2);
  color: var(--paper);
  background: oklch(10% 0.026 42 / 0.68);
}

.interviews-section {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.footer-reels:has(.footer-cassette-player) {
  min-height: clamp(28rem, 42vw, 35rem);
}

.footer-cassette-player {
  width: min(100%, 40rem);
  min-height: clamp(27rem, 40vw, 33rem);
}

.footer-cassette-player .cassette-embed {
  top: clamp(0.7rem, 1.1vw, 1rem);
  width: 86%;
  height: min(250px, 31vw);
  min-height: 14rem;
}

.footer-cassette-player .cassette-art {
  width: 108%;
}

.footer-cassette-player .cassette-reels span {
  top: 67%;
}

.footer-cassette-player .cassette-window {
  top: 63%;
}

@media (max-width: 900px) {
  .footer-contact-card {
    grid-column: span 2;
  }
}

@media (max-width: 560px) {
  .footer-contact-card {
    grid-column: auto;
  }
}

/* Heritage studio mix */
:root {
  --ink: oklch(91% 0.034 83);
  --muted: oklch(74% 0.048 78);
  --subtle: oklch(57% 0.045 72);
  --void: oklch(13% 0.035 48);
  --panel: oklch(20% 0.045 50 / 0.9);
  --panel-solid: oklch(22% 0.05 52);
  --line: oklch(83% 0.055 80 / 0.28);
  --amber: oklch(78% 0.13 72);
  --red: oklch(47% 0.14 30);
  --green: oklch(70% 0.1 145);
  --blue: oklch(55% 0.075 210);
  --purple: oklch(48% 0.09 318);
}

body {
  background:
    linear-gradient(90deg, oklch(100% 0 0 / 0.025) 1px, transparent 1px) 0 0 / 11px 11px,
    linear-gradient(0deg, oklch(0% 0 0 / 0.12), transparent 36%, oklch(0% 0 0 / 0.18)),
    radial-gradient(circle at 16% 12%, oklch(53% 0.12 34 / 0.22), transparent 34rem),
    radial-gradient(circle at 84% 26%, oklch(50% 0.08 150 / 0.14), transparent 28rem),
    linear-gradient(115deg, oklch(11% 0.035 45), oklch(18% 0.052 53) 54%, oklch(12% 0.035 40));
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.24;
  background:
    repeating-radial-gradient(circle at 18% 22%, oklch(90% 0.03 80 / 0.12) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, transparent 0 24px, oklch(0% 0 0 / 0.09) 25px 26px);
  mix-blend-mode: overlay;
}

.noise {
  opacity: 0.28;
  background-image:
    repeating-linear-gradient(0deg, oklch(100% 0 0 / 0.025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, oklch(0% 0 0 / 0.07) 0 1px, transparent 1px 7px);
}

.site-header {
  background:
    linear-gradient(to bottom, oklch(9% 0.032 45 / 0.96), oklch(13% 0.04 50 / 0.72), transparent);
  border-bottom: 1px solid oklch(82% 0.07 73 / 0.18);
}

.brand-mark img,
.hero-copy h1 {
  filter: sepia(0.22) contrast(1.05) drop-shadow(0 0 18px oklch(75% 0.12 72 / 0.2));
}

.main-nav a,
.quick-board a,
.button,
.sound-toggle,
.tour-ticket,
.drum-machine,
.laser-harp,
.gear-drawer,
.piano-machine,
.timeline,
.trivia,
.archive-photo,
.show-console,
.media-tile,
.kaoz-release,
.contact-links a,
.footer-grid {
  border-color: oklch(82% 0.06 76 / 0.24);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.05),
    0 20px 60px oklch(0% 0 0 / 0.24);
}

.hero-media::after {
  background:
    linear-gradient(90deg, oklch(9% 0.035 42 / 0.86), oklch(13% 0.045 48 / 0.34) 48%, transparent),
    linear-gradient(0deg, oklch(10% 0.035 44) 2%, transparent 48%);
}

h1,
h2,
h3 {
  color: oklch(91% 0.038 82);
  text-shadow: 0.045em 0.035em 0 oklch(5% 0.02 35 / 0.76);
}

.eyebrow,
.section-kicker,
.panel-label {
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.section-kicker {
  font-family: "Bitcount Prop Single", Urbanist, sans-serif;
}

.section-heading {
  border-top: 1px solid oklch(82% 0.06 76 / 0.18);
  padding-top: var(--space-md);
}

.show-row {
  background:
    linear-gradient(90deg, oklch(23% 0.055 52 / 0.9), oklch(12% 0.035 42 / 0.66)),
    repeating-linear-gradient(90deg, transparent 0 20px, oklch(86% 0.05 76 / 0.035) 20px 21px);
}

.show-row:hover {
  background:
    linear-gradient(90deg, oklch(31% 0.08 48 / 0.96), oklch(15% 0.04 44 / 0.74)),
    repeating-linear-gradient(90deg, transparent 0 20px, oklch(86% 0.05 76 / 0.055) 20px 21px);
}

.bio-section {
  position: relative;
  overflow: hidden;
}

.bio-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, oklch(79% 0.12 73 / 0.06), transparent 28%),
    repeating-linear-gradient(0deg, transparent 0 8px, oklch(90% 0.04 82 / 0.025) 8px 9px);
  opacity: 0.9;
}

.bio-section .section-heading {
  position: relative;
  grid-template-columns: 1fr;
}

.bio-section #bio-title {
  max-width: none;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: normal;
}

.bio-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.8rem);
  align-items: stretch;
  min-height: auto;
  padding: clamp(0.65rem, 1.4vw, 1rem);
  border: 1px solid oklch(83% 0.09 76 / 0.22);
  background:
    linear-gradient(90deg, oklch(11% 0.033 42 / 0.94), oklch(17% 0.042 48 / 0.86)),
    repeating-linear-gradient(90deg, oklch(100% 0 0 / 0.022) 0 1px, transparent 1px 16px);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.08),
    0 2.4rem 5rem oklch(0% 0 0 / 0.32);
}

.bio-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.85rem, 1.2vw, 1.1rem);
  max-width: none;
  min-height: clamp(31rem, 42vw, 42rem);
  padding: clamp(1.2rem, 2.4vw, 2.2rem);
  border: 1px solid oklch(83% 0.09 76 / 0.16);
  background:
    linear-gradient(180deg, oklch(15% 0.036 45 / 0.9), oklch(8% 0.024 42 / 0.84)),
    repeating-linear-gradient(0deg, transparent 0 2.6rem, oklch(86% 0.045 78 / 0.055) 2.6rem calc(2.6rem + 1px));
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.08),
    inset -1px 0 0 oklch(83% 0.09 76 / 0.16);
}

.bio-copy p {
  margin: 0;
  color: oklch(88% 0.038 78);
  font-size: clamp(0.96rem, 1.02vw, 1.09rem);
  line-height: 1.64;
  opacity: 0;
  transform: translate3d(0, 1.2rem, 0);
  filter: blur(0.16rem);
}

.bio-copy p:nth-of-type(1) { --bio-line: 1; }
.bio-copy p:nth-of-type(2) { --bio-line: 2; }
.bio-copy p:nth-of-type(3) { --bio-line: 4; }
.bio-copy p:nth-of-type(4) { --bio-line: 5; }
.bio-copy p:nth-of-type(5) { --bio-line: 6; }
.bio-copy p:nth-of-type(6) { --bio-line: 7; }
.bio-copy p:nth-of-type(7) { --bio-line: 8; }

.bio-pullquote {
  opacity: 0;
  transform: translate3d(0, 1.2rem, 0);
  filter: blur(0.16rem);
}

.bio-typeset-line {
  --bio-line: 3;
  max-width: 35rem;
  display: block;
  margin: 0;
  padding: 0.72rem 0 0.8rem;
  border-top: 1px solid oklch(83% 0.09 76 / 0.2);
  border-bottom: 1px solid oklch(83% 0.09 76 / 0.16);
  color: oklch(92% 0.052 78);
  font-family: "Bitcount Prop Single", monospace;
  font-size: clamp(0.82rem, 1vw, 1rem) !important;
  font-weight: 800;
  letter-spacing: 0.015em;
  line-height: 1.45 !important;
  text-transform: uppercase;
  opacity: 0;
  transform: translate3d(0, 1.2rem, 0);
  filter: blur(0.16rem);
}

.bio-pullquote {
  --bio-line: 5;
  margin: 0.15rem 0;
  padding: clamp(0.85rem, 1.4vw, 1.2rem);
  border-top: 1px solid oklch(83% 0.09 76 / 0.26);
  border-bottom: 1px solid oklch(83% 0.09 76 / 0.26);
  color: var(--paper);
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2.4rem, 4.4vw, 4.7rem);
  line-height: 0.9;
  text-transform: uppercase;
}

.bio-section.is-visible .bio-copy p,
.bio-section.is-visible .bio-typeset-line,
.bio-section.is-visible .bio-pullquote {
  animation: bio-copy-rise 720ms var(--ease) forwards;
  animation-delay: calc(120ms + var(--bio-line, 0) * 85ms);
}

.bio-copy em {
  color: var(--paper);
  font-style: normal;
  font-weight: 900;
}

.bio-photo-card {
  position: relative;
  min-height: clamp(31rem, 42vw, 42rem);
  margin: 0;
  overflow: hidden;
  border: 1px solid oklch(83% 0.09 76 / 0.28);
  background: oklch(6% 0.018 42);
  box-shadow:
    0 1.4rem 3rem oklch(0% 0 0 / 0.38),
    inset 0 0 0 0.8rem oklch(86% 0.05 80 / 0.08);
  transform: rotate(0.24deg);
}

.bio-photo-b {
  transform: rotate(-0.28deg);
}

.bio-photo-card::before,
.bio-photo-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.bio-photo-card::before {
  background:
    linear-gradient(115deg, transparent 0 42%, oklch(100% 0 0 / 0.12) 43% 44%, transparent 47%),
    radial-gradient(circle at 50% 42%, transparent 0 56%, oklch(0% 0 0 / 0.35) 100%),
    repeating-linear-gradient(0deg, oklch(100% 0 0 / 0.035) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  opacity: 0.7;
}

.bio-photo-card::after {
  width: 34%;
  background: linear-gradient(90deg, transparent, oklch(92% 0.05 84 / 0.16), transparent);
  mix-blend-mode: screen;
  transform: translateX(-130%) skewX(-11deg);
  animation: bio-tape-sweep 5.6s var(--ease) infinite;
}

.bio-photo-b::after {
  animation-delay: 2.1s;
}

.bio-photo-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 1;
  filter: sepia(0.12) contrast(1.12) saturate(0.92);
  transform: scale(1.018);
  animation: bio-photo-breathe 8s ease-in-out infinite alternate;
}

.bio-photo-a img {
  object-position: 50% 46%;
}

.bio-photo-b img {
  object-position: 50% 42%;
}

.bio-photo-card figcaption {
  position: absolute;
  z-index: 4;
  left: 1rem;
  bottom: 1rem;
  max-width: calc(100% - 2rem);
  padding: 0.5rem 0.7rem;
  border: 1px solid oklch(83% 0.09 76 / 0.24);
  background: oklch(6% 0.02 42 / 0.76);
  color: var(--amber);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

@keyframes bio-photo-breathe {
  from { transform: scale(1.018) translate3d(0, 0, 0); }
  to { transform: scale(1.055) translate3d(-0.5%, 0.4%, 0); }
}

@keyframes bio-tape-sweep {
  0%,
  22% { transform: translateX(-135%) skewX(-11deg); opacity: 0; }
  34% { opacity: 0.9; }
  58%,
  100% { transform: translateX(330%) skewX(-11deg); opacity: 0; }
}

@keyframes bio-copy-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 1.2rem, 0);
    filter: blur(0.16rem);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

.show-row img,
.media-tile img,
.kaoz-release img {
  filter: sepia(0.13) saturate(0.88) contrast(1.12);
}

.show-row .ticket-button,
.button.primary,
.next-question,
.kaoz-mail button {
  background: linear-gradient(180deg, oklch(82% 0.13 74), oklch(66% 0.105 66));
  color: oklch(11% 0.03 42);
}

.media-tile span,
.kaoz-release span {
  background: oklch(7% 0.026 42 / 0.82);
  border-color: oklch(82% 0.06 76 / 0.3);
}

.machines {
  background:
    linear-gradient(180deg, transparent, oklch(18% 0.045 48 / 0.78) 18%, transparent),
    repeating-linear-gradient(90deg, oklch(86% 0.07 74 / 0.055) 0 1px, transparent 1px 7.5vw);
}

.step,
.gear-list button,
.timeline button,
.answers button,
.piano-controls button {
  background:
    linear-gradient(180deg, oklch(18% 0.04 48), oklch(10% 0.03 42));
  border-color: oklch(82% 0.06 76 / 0.28);
}

.step.active,
.timeline button.active,
.answers button.correct,
.piano-controls button[aria-pressed="true"] {
  background: linear-gradient(180deg, oklch(74% 0.12 145), oklch(53% 0.095 145));
  color: oklch(9% 0.03 42);
}

.harp-stage,
.piano,
.gear-preview {
  background:
    radial-gradient(circle at 50% 115%, oklch(74% 0.13 72 / 0.18), transparent 46%),
    oklch(8% 0.03 42 / 0.82);
}

.harp-stage button {
  filter: sepia(0.12) saturate(0.85);
}

.white-key {
  background: linear-gradient(180deg, oklch(90% 0.035 84), oklch(69% 0.05 74));
}

.black-key {
  background: linear-gradient(180deg, oklch(18% 0.035 40), oklch(6% 0.02 38));
}

.archive-deck article {
  background:
    linear-gradient(180deg, oklch(100% 0 0 / 0.035), transparent),
    repeating-linear-gradient(0deg, transparent 0 23px, oklch(82% 0.06 76 / 0.055) 24px),
    linear-gradient(140deg, oklch(21% 0.045 50 / 0.94), oklch(11% 0.03 38 / 0.9));
}

.label-section {
  background:
    linear-gradient(180deg, oklch(0% 0 0 / 0.08), transparent),
    repeating-linear-gradient(90deg, transparent 0 31px, oklch(82% 0.06 76 / 0.035) 32px);
}

.kaoz-profile {
  background:
    linear-gradient(180deg, oklch(9% 0.028 42 / 0.28), oklch(6% 0.025 42 / 0.86)),
    repeating-linear-gradient(0deg, oklch(90% 0.03 82 / 0.05) 0 1px, transparent 1px 9px);
}

.site-footer {
  background:
    radial-gradient(circle at 50% 0%, oklch(75% 0.13 72 / 0.12), transparent 34rem),
    linear-gradient(180deg, oklch(10% 0.035 45), oklch(5% 0.022 42));
}

.influences-archive {
  margin-top: var(--space-xl);
  padding: var(--space-xl);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, oklch(100% 0 0 / 0.035), transparent),
    repeating-linear-gradient(0deg, transparent 0 27px, oklch(82% 0.06 76 / 0.05) 28px),
    oklch(13% 0.038 44 / 0.88);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.06), 0 24px 80px oklch(0% 0 0 / 0.3);
}

.influences-archive > div:first-child {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(18rem, 0.8fr);
  gap: var(--space-xl);
  align-items: end;
  margin-bottom: var(--space-xl);
}

.influences-archive h2 {
  max-width: none;
  font-size: clamp(3.6rem, 7vw, 7.4rem);
}

.influences-archive p {
  color: var(--muted);
}

.influence-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.influence-ledger article {
  min-height: 18rem;
  padding: var(--space-lg);
  background:
    radial-gradient(circle at 14% 12%, oklch(78% 0.13 72 / 0.12), transparent 42%),
    oklch(12% 0.035 42 / 0.96);
}

.influence-ledger span,
.influence-strip span {
  color: var(--amber);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.influence-ledger h3 {
  margin: var(--space-sm) 0 var(--space-md);
  font-size: clamp(2.1rem, 3.4vw, 3.5rem);
}

.influence-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-top: var(--space-md);
}

.influence-strip span {
  display: inline-grid;
  min-height: 2.6rem;
  place-items: center;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  background: oklch(8% 0.03 42 / 0.72);
}

@media (max-width: 900px) {
  .influences-archive > div:first-child,
  .influence-ledger {
    grid-template-columns: 1fr;
  }
}

.archive-source {
  display: inline-grid;
  min-height: 44px;
  place-items: center;
  margin-top: var(--space-md);
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--green);
  font-weight: 900;
  text-transform: uppercase;
}

.archive-bio,
.crate-influences,
.interview-archive {
  margin: var(--space-xl) 0;
}

.archive-bio {
  display: grid;
  grid-template-columns: minmax(18rem, 0.58fr) minmax(0, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.bio-lead,
.bio-chapters article,
.crate-copy,
.influence-player,
.interview-archive {
  background:
    linear-gradient(180deg, oklch(17% 0.045 46 / 0.95), oklch(9% 0.03 42 / 0.97)),
    repeating-linear-gradient(0deg, transparent 0 21px, oklch(80% 0.08 74 / 0.04) 22px);
}

.bio-lead {
  padding: clamp(1.25rem, 4vw, 3rem);
}

.bio-lead h3,
.crate-copy h3,
.compact-heading h3 {
  max-width: 10ch;
  margin: var(--space-sm) 0 var(--space-md);
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(4rem, 9vw, 9rem);
  line-height: 0.88;
}

.bio-lead p,
.crate-copy p,
.compact-heading p {
  max-width: 64ch;
  color: oklch(91% 0.04 78);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

.bio-chapters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
}

.bio-chapters article {
  min-height: 13rem;
  padding: var(--space-lg);
}

.bio-chapters span,
.interview-card span {
  display: inline-flex;
  margin-bottom: var(--space-sm);
  color: var(--amber);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.bio-chapters p {
  margin: 0;
  color: var(--muted);
}

.crate-influences {
  display: grid;
  grid-template-columns: minmax(18rem, 0.45fr) minmax(18rem, 0.55fr);
  gap: var(--space-md);
  align-items: start;
}

.crate-copy,
.influence-player {
  min-height: 22rem;
  padding: var(--space-xl);
  border: 1px solid var(--line);
}

.influence-player {
  position: sticky;
  top: 7rem;
  display: grid;
  align-content: end;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 20%, oklch(83% 0.17 77 / 0.18), transparent 16rem),
    linear-gradient(180deg, oklch(7% 0.03 42), oklch(12% 0.04 45));
}

.influence-player::before {
  content: "";
  position: absolute;
  width: 15rem;
  aspect-ratio: 1;
  top: 1.5rem;
  right: 1.5rem;
  border: 1px solid oklch(80% 0.1 74 / 0.32);
  border-radius: 999px;
  background:
    radial-gradient(circle, oklch(4% 0.02 42) 0 10%, transparent 10% 18%, oklch(84% 0.08 76 / 0.1) 18% 19%, transparent 19%),
    repeating-radial-gradient(circle, transparent 0 12px, oklch(80% 0.08 72 / 0.18) 13px 14px);
  animation: reel-spin 9s linear infinite;
}

.influence-player span,
.influence-player p {
  position: relative;
  z-index: 1;
}

.influence-player span {
  display: block;
  max-width: 13ch;
  margin-bottom: var(--space-md);
  color: var(--paper);
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(3.2rem, 7vw, 6.4rem);
  line-height: 0.9;
}

.influence-player p {
  max-width: 36rem;
  color: var(--green);
  font-weight: 800;
}

.crate-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.crate-grid button {
  min-height: 8.8rem;
  padding: var(--space-md);
  border: 0;
  background:
    linear-gradient(180deg, oklch(15% 0.04 45), oklch(8% 0.028 42));
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-align: left;
  transition: transform 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease);
}

.crate-grid button span {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.crate-grid button:hover,
.crate-grid button.active {
  background:
    linear-gradient(180deg, oklch(83% 0.17 77), oklch(64% 0.16 38));
  color: var(--void);
  transform: translateY(-0.18rem);
}

.crate-grid button:hover span,
.crate-grid button.active span {
  color: oklch(17% 0.04 42);
}

.interview-archive {
  padding: var(--space-xl);
  border: 1px solid var(--line);
}

.compact-heading {
  margin-bottom: var(--space-xl);
}

.interview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}

.interviews-section .section-heading h2 {
  max-width: none;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: normal;
}

.interviews-section .section-heading p {
  max-width: 64rem;
}

.interview-card {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 24rem;
  overflow: hidden;
  padding: var(--space-md);
  border: 1px solid oklch(80% 0.1 74 / 0.22);
  background: oklch(7% 0.028 42);
}

.interview-card.feature {
  grid-column: span 2;
  min-height: 32rem;
}

.interview-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.52;
  filter: saturate(0.82) contrast(1.08) brightness(0.76);
  transition: transform 600ms var(--ease), opacity 220ms var(--ease);
}

.interview-card:hover img {
  opacity: 0.68;
  transform: scale(1.045);
}

.interview-card span,
.interview-card h4,
.interview-card p {
  position: relative;
  z-index: 1;
}

.interview-card h4 {
  margin: 0 0 var(--space-sm);
  font-size: clamp(1.6rem, 2.4vw, 2.8rem);
  line-height: 0.96;
}

.interview-card p {
  margin: 0;
  color: oklch(92% 0.035 78);
}

/* Heritage v3: warmer record-room art direction and a playable archive console. */
body {
  background:
    linear-gradient(90deg, oklch(100% 0 0 / 0.025) 0 1px, transparent 1px 32px),
    linear-gradient(180deg, oklch(100% 0 0 / 0.018) 0 1px, transparent 1px 32px),
    radial-gradient(circle at 18% 10%, oklch(60% 0.18 34 / 0.12), transparent 30rem),
    radial-gradient(circle at 86% 36%, oklch(73% 0.13 78 / 0.1), transparent 34rem),
    oklch(8% 0.032 45);
}

.hero,
.tour-section,
.music-section,
.machines,
.archive-section,
.label-section {
  border-radius: 0;
}

.hero {
  min-height: 100svh;
  background:
    linear-gradient(90deg, oklch(8% 0.035 38 / 0.94), oklch(8% 0.03 44 / 0.42)),
    repeating-linear-gradient(0deg, transparent 0 7px, oklch(86% 0.09 75 / 0.035) 8px),
    url("assets/tape-machine.gif") center / cover no-repeat;
}

.hero-copy {
  max-width: 68rem;
  padding: clamp(1.25rem, 3vw, 2.4rem);
  border: 1px solid oklch(80% 0.11 75 / 0.24);
  background:
    linear-gradient(180deg, oklch(10% 0.032 42 / 0.64), oklch(4% 0.02 42 / 0.46)),
    repeating-linear-gradient(90deg, transparent 0 14px, oklch(80% 0.1 70 / 0.04) 15px);
}

.hero-copy h1 {
  font-size: clamp(5rem, 13vw, 15rem);
  line-height: 0.86;
}

.quick-board,
.archive-deck,
.influence-ledger,
.history-console {
  box-shadow: 0 30px 90px oklch(0% 0 0 / 0.34), inset 0 1px 0 oklch(100% 0 0 / 0.065);
}

.archive-section {
  background:
    radial-gradient(circle at 0% 20%, oklch(63% 0.17 32 / 0.09), transparent 28rem),
    linear-gradient(180deg, oklch(13% 0.04 47 / 0.94), oklch(7% 0.028 44 / 0.96));
}

.influences-archive {
  border-color: oklch(75% 0.12 74 / 0.28);
  background:
    linear-gradient(180deg, oklch(19% 0.055 47 / 0.88), oklch(9% 0.03 42 / 0.94)),
    repeating-linear-gradient(90deg, transparent 0 3.8rem, oklch(77% 0.11 73 / 0.045) 3.85rem);
}

.history-console {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(18rem, 0.82fr);
  gap: 1px;
  margin: 0 0 var(--space-xl);
  border: 1px solid oklch(75% 0.12 74 / 0.32);
  background: oklch(74% 0.11 72 / 0.32);
}

.history-screen {
  position: relative;
  min-height: clamp(24rem, 42vw, 37rem);
  padding: clamp(1.2rem, 4vw, 3rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 16%, oklch(72% 0.16 72 / 0.18), transparent 16rem),
    linear-gradient(180deg, oklch(10% 0.04 120 / 0.9), oklch(5% 0.028 42 / 0.96));
}

.history-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent, oklch(0% 0 0 / 0.28)),
    repeating-linear-gradient(0deg, oklch(100% 0 0 / 0.035) 0 1px, transparent 1px 5px);
}

.history-screen-top,
.history-tags,
.history-meters {
  position: relative;
  z-index: 1;
}

.history-screen-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  color: var(--amber);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.history-counter {
  color: var(--muted);
}

.history-screen h3 {
  position: relative;
  z-index: 1;
  max-width: 10ch;
  margin: clamp(1rem, 4vw, 2.4rem) 0 var(--space-md);
  font-size: clamp(4rem, 10vw, 10rem);
  line-height: 0.86;
}

.history-screen p {
  position: relative;
  z-index: 1;
  max-width: 48rem;
  color: oklch(92% 0.035 78);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}

.history-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: var(--space-lg);
}

.history-tags span {
  padding: 0.45rem 0.7rem;
  border: 1px solid oklch(75% 0.12 74 / 0.32);
  color: var(--green);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.history-meters {
  display: flex;
  align-items: end;
  gap: 0.35rem;
  width: min(18rem, 100%);
  height: 5rem;
  margin-top: var(--space-xl);
}

.history-meters span {
  flex: 1;
  height: var(--level);
  min-height: 18%;
  background: linear-gradient(180deg, var(--green), var(--amber), oklch(60% 0.18 32));
  transform-origin: bottom;
  animation: meter-bounce 1.6s ease-in-out infinite alternate;
}

.history-meters span:nth-child(2) { animation-delay: -0.22s; }
.history-meters span:nth-child(3) { animation-delay: -0.45s; }
.history-meters span:nth-child(4) { animation-delay: -0.68s; }
.history-meters span:nth-child(5) { animation-delay: -0.91s; }

.history-controls {
  display: grid;
  align-content: stretch;
  background: oklch(8% 0.028 42);
}

.history-controls button {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 5rem;
  padding: 1rem 1.2rem;
  border: 0;
  border-bottom: 1px solid oklch(75% 0.12 74 / 0.22);
  background:
    linear-gradient(90deg, oklch(16% 0.045 45), oklch(9% 0.03 42));
  color: var(--paper);
  cursor: pointer;
  font: inherit;
  font-size: clamp(1.05rem, 2vw, 1.55rem);
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.history-controls button span {
  color: var(--amber);
  font-size: 0.8rem;
}

.history-controls button:hover,
.history-controls button.active {
  background:
    linear-gradient(90deg, oklch(63% 0.17 32 / 0.92), oklch(24% 0.07 45));
  color: white;
  transform: translateX(-0.35rem);
}

.footer-deck {
  display: grid;
  place-items: center;
  min-height: 13rem;
  isolation: isolate;
}

.footer-deck > img {
  position: absolute;
  inset: auto;
  width: min(28rem, 78%);
  max-height: 11rem;
  object-fit: cover;
  opacity: 0.72;
  filter: saturate(0.85) contrast(1.12) brightness(0.86);
  mix-blend-mode: screen;
}

.footer-deck > span {
  position: relative;
  z-index: 1;
  align-self: end;
  margin: 0 0 1rem;
  padding: 0.42rem 0.65rem;
  border: 1px solid oklch(82% 0.11 74 / 0.32);
  background: oklch(3% 0.012 42 / 0.72);
  color: var(--amber);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.footer-deck .footer-reel,
.footer-deck .footer-tape {
  display: none;
}

.footer-reels:has(.footer-cassette-player) {
  min-height: clamp(28rem, 42vw, 35rem);
  padding: clamp(0.65rem, 1.4vw, 1rem);
  background:
    radial-gradient(circle at 50% 38%, oklch(84% 0.12 76 / 0.13), transparent 18rem),
    linear-gradient(180deg, oklch(12% 0.035 45 / 0.88), oklch(5% 0.02 42 / 0.96));
}

.footer-cassette-player {
  width: min(100%, 40rem);
  min-height: clamp(27rem, 40vw, 33rem);
  align-self: center;
  justify-self: center;
  border-radius: calc(var(--radius) * 1.1);
  box-shadow:
    inset 0 0 0 1px oklch(84% 0.1 76 / 0.18),
    0 24px 58px oklch(0% 0 0 / 0.42);
}

.footer-cassette-player .cassette-art {
  bottom: -1%;
  width: 108%;
  transform: translateX(-50%);
}

.footer-cassette-player .cassette-embed {
  top: clamp(0.7rem, 1.1vw, 1rem);
  width: 86%;
  height: min(250px, 31vw);
  min-height: 14rem;
}

.footer-cassette-player .cassette-reels span {
  top: 67%;
}

.footer-cassette-player .cassette-window {
  top: 63%;
}

@keyframes meter-bounce {
  from { transform: scaleY(0.62); opacity: 0.68; }
  to { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(14rem, 48vw);
  }

  .gallery-item,
  .gallery-item.hero-shot,
  .gallery-item.wide {
    grid-column: span 1;
  }

  .gallery-item.tall {
    grid-row: span 1;
  }

  .archive-bio,
  .crate-influences {
    grid-template-columns: 1fr;
  }

  .bio-chapters,
  .interview-grid {
    grid-template-columns: 1fr;
  }

  .interview-card.feature {
    grid-column: auto;
  }

  .influence-player {
    position: relative;
    top: auto;
  }

  .history-console {
    grid-template-columns: 1fr;
  }

  .history-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .history-controls button:hover,
  .history-controls button.active {
    transform: translateY(-0.2rem);
  }
}

/* CRT video wall and infinite press-photo slider. */
.tv-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
}

.tv-card {
  display: grid;
  gap: 0.7rem;
  color: var(--ink);
  transform: rotate(var(--tv-tilt, -0.35deg));
}

.tv-card:nth-child(2n) { --tv-tilt: 0.42deg; }
.tv-card:nth-child(5n) { --tv-tilt: -0.82deg; }

.tv-card.feature {
  grid-column: 1 / -1;
}

.retro-tv-card {
  --tv-tilt: -0.15deg;
}

.tv-set {
  position: relative;
  aspect-ratio: 1784 / 1414;
  filter: drop-shadow(0 26px 42px oklch(0% 0 0 / 0.38));
}

.retro-tv-set {
  aspect-ratio: 16 / 8.2;
  display: grid;
  align-content: stretch;
  gap: 0.7rem;
  padding: clamp(0.75rem, 1.8vw, 1.35rem);
  border: 0.38rem solid oklch(19% 0.026 58);
  border-radius: 1.05rem;
  background:
    linear-gradient(145deg, oklch(35% 0.035 70), oklch(14% 0.025 46) 62%, oklch(9% 0.02 40)),
    repeating-linear-gradient(90deg, oklch(100% 0 0 / 0.035) 0 1px, transparent 1px 9px);
  box-shadow:
    inset 0 0 0 1px oklch(92% 0.04 82 / 0.14),
    inset 0 -20px 42px oklch(0% 0 0 / 0.32),
    0 32px 70px oklch(0% 0 0 / 0.42);
}

.retro-tv-face {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(7rem, 14vw, 12rem);
  gap: clamp(0.8rem, 1.6vw, 1.25rem);
  min-height: 0;
}

.retro-tv-bezel {
  position: relative;
  min-height: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: clamp(1rem, 2.2vw, 2rem);
  border: 0.22rem solid oklch(13% 0.02 48);
  border-radius: 1rem;
  background:
    radial-gradient(ellipse at 50% 50%, oklch(19% 0.03 64), oklch(7% 0.018 42) 70%),
    linear-gradient(180deg, oklch(12% 0.02 45), oklch(4% 0.015 42));
  filter: drop-shadow(0 3px 0 oklch(100% 0 0 / 0.07)) drop-shadow(0 -2px 0 oklch(0% 0 0 / 0.12));
}

.retro-tv-side-panel {
  display: grid;
  grid-template-columns: minmax(2.15rem, 0.36fr) minmax(0, 1fr);
  grid-template-rows: minmax(8rem, 0.72fr) minmax(8.6rem, 1fr);
  align-content: stretch;
  align-items: stretch;
  gap: clamp(0.7rem, 1.25vw, 1rem);
  min-width: 0;
  padding: clamp(0.65rem, 1.2vw, 0.95rem);
  border: 1px solid oklch(7% 0.02 42 / 0.78);
  border-radius: 0.82rem;
  background:
    linear-gradient(90deg, oklch(80% 0.04 79 / 0.14), transparent 15% 85%, oklch(0% 0 0 / 0.28)),
    linear-gradient(180deg, oklch(38% 0.04 66), oklch(18% 0.026 46) 48%, oklch(12% 0.02 42));
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.16),
    inset 0 0 1.5rem oklch(0% 0 0 / 0.34);
}

.retro-vent {
  grid-column: 1 / -1;
  width: 100%;
  height: 100%;
  min-height: clamp(6rem, 11vw, 9.6rem);
  border: 1px solid oklch(8% 0.02 42 / 0.65);
  border-radius: 0.45rem;
  background:
    linear-gradient(90deg, oklch(100% 0 0 / 0.08), transparent 20% 80%, oklch(0% 0 0 / 0.18)),
    repeating-linear-gradient(0deg, oklch(8% 0.02 42) 0 0.22rem, oklch(54% 0.055 58) 0.22rem 0.34rem, oklch(12% 0.02 42) 0.34rem 0.54rem);
  box-shadow: inset 0 0 1rem oklch(0% 0 0 / 0.45);
}

.retro-control-bank {
  display: grid;
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(5, minmax(1.1rem, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(0.38rem, 0.8vw, 0.58rem);
  width: 100%;
  height: 100%;
  padding: clamp(0.45rem, 0.9vw, 0.7rem);
  border: 1px solid oklch(7% 0.02 42 / 0.74);
  border-radius: 0.5rem;
  background:
    linear-gradient(180deg, oklch(72% 0.04 76 / 0.13), transparent 35%),
    linear-gradient(90deg, oklch(15% 0.02 42), oklch(26% 0.03 55) 35%, oklch(13% 0.02 42));
  box-shadow:
    inset 0 0 0 1px oklch(100% 0 0 / 0.08),
    inset 0 0 0.75rem oklch(0% 0 0 / 0.36);
}

.retro-side-button {
  width: clamp(0.9rem, 1.65vw, 1.25rem);
  aspect-ratio: 1;
  justify-self: center;
  cursor: pointer;
  border: 1px solid oklch(5% 0.01 42 / 0.86);
  border-radius: 999px;
  background:
    radial-gradient(circle at 36% 30%, oklch(93% 0.02 84), oklch(56% 0.025 65) 42%, oklch(16% 0.016 42) 78%),
    linear-gradient(180deg, oklch(68% 0.035 73), oklch(24% 0.02 50));
  box-shadow:
    inset 0 -0.18rem 0.28rem oklch(0% 0 0 / 0.36),
    0 0.22rem 0.32rem oklch(0% 0 0 / 0.42);
  transition: transform 160ms var(--ease), filter 160ms var(--ease);
}

.retro-side-button.power {
  background:
    radial-gradient(circle at 38% 30%, oklch(96% 0.045 85), oklch(77% 0.12 74) 36%, oklch(28% 0.05 55) 80%);
}

.retro-side-button:hover {
  filter: brightness(1.13) saturate(1.08);
  transform: translateY(-1px);
}

.retro-side-button:active {
  transform: translateY(1px) scale(0.92);
}

.retro-knob-stack {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(0.85rem, 1.5vw, 1.25rem);
}

.retro-knob {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(3.35rem, 6.4vw, 5.55rem);
  aspect-ratio: 1;
  cursor: grab;
  touch-action: none;
  border: 1px solid oklch(4% 0.01 42 / 0.9);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 42%, oklch(80% 0.025 75 / 0.16) 43% 45%, transparent 46%),
    repeating-conic-gradient(from 4deg, oklch(9% 0.018 42) 0 7deg, oklch(44% 0.028 58) 7deg 10deg, oklch(12% 0.018 42) 10deg 16deg),
    radial-gradient(circle at 48% 45%, oklch(23% 0.024 52), oklch(7% 0.012 42) 72%);
  box-shadow:
    inset 0 0 0 0.32rem oklch(74% 0.028 75 / 0.11),
    inset 0 -0.55rem 0.85rem oklch(0% 0 0 / 0.48),
    0 0.55rem 0.95rem oklch(0% 0 0 / 0.42);
  transform: rotate(var(--knob-rotation, 0deg));
}

.retro-knob:active,
.retro-knob.is-turning {
  cursor: grabbing;
  box-shadow:
    inset 0 0 0 0.32rem oklch(78% 0.04 78 / 0.18),
    inset 0 -0.45rem 0.8rem oklch(0% 0 0 / 0.4),
    0 0 0 0.16rem oklch(79% 0.14 72 / 0.36),
    0 0.35rem 0.65rem oklch(0% 0 0 / 0.44);
}

.retro-knob span {
  width: 13%;
  height: 40%;
  align-self: start;
  margin-top: 10%;
  border-radius: 999px;
  background: linear-gradient(180deg, oklch(79% 0.055 75), oklch(38% 0.032 58));
  box-shadow: 0 0 0.35rem oklch(0% 0 0 / 0.45);
}

.retro-knob.tuning {
  width: clamp(2.85rem, 5.5vw, 4.75rem);
}

.retro-tv-bezel .tv-screen {
  position: relative;
  inset: auto;
  left: auto;
  top: auto;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border-radius: 10% / 7%;
  box-shadow:
    inset 0 0 0 2px oklch(0% 0 0 / 0.5),
    inset 0 0 34px oklch(0% 0 0 / 0.6);
}

.kerri-bounce-layer {
  --bounce-pad: clamp(1rem, 2.2vw, 2rem);
  --bounce-logo-w: clamp(6.4rem, 17vw, 13.5rem);
  --bounce-logo-h: clamp(1.35rem, 3.8vw, 3rem);
  position: absolute;
  z-index: 3;
  inset: var(--bounce-pad);
  overflow: hidden;
  pointer-events: none;
  border-radius: 10% / 7%;
  background:
    linear-gradient(180deg, oklch(100% 0 0 / 0.1), oklch(100% 0 0 / 0.06)),
    radial-gradient(circle at 35% 20%, oklch(92% 0.03 78 / 0.08), transparent 40%);
  mix-blend-mode: screen;
}

.kerri-bounce-x,
.kerri-bounce-y {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}

.kerri-bounce-x {
  width: calc(100% - var(--bounce-logo-w));
  height: 100%;
  animation: kerri-logo-bounce-x 4.9s linear infinite alternate;
}

.kerri-bounce-y {
  width: var(--bounce-logo-w);
  height: calc(100% - var(--bounce-logo-h));
  animation: kerri-logo-bounce-y 3.15s linear infinite alternate;
}

.kerri-bounce-y img {
  display: block;
  width: 100%;
  height: var(--bounce-logo-h);
  object-fit: contain;
  opacity: 0.62;
  filter:
    drop-shadow(0 0 0.4rem oklch(94% 0.04 88 / 0.34))
    drop-shadow(0 0.1rem 0.18rem oklch(0% 0 0 / 0.42));
  mix-blend-mode: difference;
}

@keyframes kerri-logo-bounce-x {
  0%,
  100% {
    filter: saturate(1.16) brightness(1.08);
  }

  2%,
  98% {
    filter: saturate(1) brightness(1);
  }

  to {
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes kerri-logo-bounce-y {
  0%,
  100% {
    filter: saturate(1.18) brightness(1.1);
  }

  3%,
  97% {
    filter: saturate(1) brightness(1);
  }

  to {
    transform: translate3d(0, 100%, 0);
  }
}

.retro-tv-bezel::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: clamp(1rem, 2.2vw, 2rem);
  width: auto;
  height: auto;
  pointer-events: none;
  border-radius: 10% / 7%;
  background:
    linear-gradient(115deg, transparent 0 34%, oklch(100% 0 0 / 0.13) 35% 36%, transparent 39% 100%),
    repeating-linear-gradient(0deg, oklch(100% 0 0 / 0.07) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 50% 45%, transparent 0 55%, oklch(0% 0 0 / 0.3) 100%);
  mix-blend-mode: screen;
  opacity: 0.66;
}

.retro-tv-bottom {
  display: grid;
  grid-template-columns: minmax(4rem, 1fr) auto auto auto minmax(4rem, 1fr);
  align-items: center;
  gap: clamp(0.45rem, 1vw, 0.8rem);
  min-height: clamp(2.7rem, 5vw, 4.2rem);
  padding: 0.55rem 0.75rem;
  border: 1px solid oklch(7% 0.02 42 / 0.72);
  border-radius: 0.55rem;
  background:
    linear-gradient(180deg, oklch(28% 0.032 60), oklch(12% 0.022 44)),
    repeating-linear-gradient(90deg, oklch(0% 0 0 / 0.16) 0 1px, transparent 1px 7px);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.12);
}

.retro-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.retro-speaker {
  height: 100%;
  min-height: 2rem;
  border-radius: 0.25rem;
  background-image: radial-gradient(oklch(4% 0.01 42) 0.08rem, transparent 0.09rem);
  background-size: 0.42rem 0.42rem;
  opacity: 0.78;
}

.retro-button,
.retro-dial {
  display: grid;
  place-items: center;
  width: clamp(1.35rem, 2.8vw, 2rem);
  aspect-ratio: 1;
  border: 1px solid oklch(5% 0.01 42 / 0.8);
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 32%, oklch(93% 0.02 80), oklch(36% 0.02 58) 58%, oklch(10% 0.01 42));
  box-shadow: 0 4px 8px oklch(0% 0 0 / 0.38);
  color: oklch(8% 0.02 42);
  font-size: clamp(0.8rem, 1.7vw, 1.1rem);
  font-weight: 900;
  line-height: 1;
}

.retro-button.power {
  width: clamp(1.75rem, 3.5vw, 2.65rem);
  background:
    radial-gradient(circle at 35% 32%, oklch(95% 0.03 84), oklch(54% 0.035 64) 54%, oklch(12% 0.02 42)),
    repeating-conic-gradient(from 15deg, oklch(86% 0.03 80) 0 8deg, oklch(22% 0.02 52) 8deg 18deg);
}

.tv-screen {
  position: absolute;
  left: 14.8%;
  top: 16.3%;
  width: 70.6%;
  height: 65.6%;
  object-fit: cover;
  border-radius: 5.6% / 8%;
  filter: sepia(0.22) saturate(0.82) contrast(1.18) brightness(0.82);
  transform: perspective(700px) rotateX(0.5deg);
}

.tv-set::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 14.8%;
  top: 16.3%;
  width: 70.6%;
  height: 65.6%;
  pointer-events: none;
  border-radius: 5.6% / 8%;
  background:
    radial-gradient(circle at 50% 45%, transparent 0 52%, oklch(0% 0 0 / 0.28) 100%),
    repeating-linear-gradient(0deg, oklch(100% 0 0 / 0.08) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  opacity: 0.55;
}

.retro-tv-set::before {
  display: none;
}

.tv-frame {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.tv-screen {
  z-index: 1;
  border: 0;
  background: oklch(2% 0.01 42);
}

.tv-card a {
  justify-self: start;
  max-width: 92%;
  padding: 0.5rem 0.65rem;
  border: 1px solid oklch(83% 0.1 76 / 0.28);
  border-radius: var(--radius);
  background: oklch(6% 0.02 42 / 0.78);
  color: var(--amber);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.tv-card a:hover {
  background: oklch(82% 0.15 76);
  color: var(--void);
}

.tv-card:hover .tv-screen {
  filter: sepia(0.12) saturate(1.04) contrast(1.28) brightness(0.95);
}

.set-roulette-console {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(16rem, 0.72fr);
  gap: 1px;
  align-items: stretch;
  border: 1px solid oklch(83% 0.1 76 / 0.32);
  background:
    radial-gradient(circle at 18% 0%, oklch(82% 0.16 76 / 0.13), transparent 18rem),
    oklch(6% 0.02 42 / 0.92);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.06),
    0 1rem 2.4rem oklch(0% 0 0 / 0.26);
}

.set-roulette-copy,
.set-roulette-readout,
.set-roulette-history {
  min-width: 0;
  padding: clamp(0.85rem, 1.6vw, 1.2rem);
  background:
    linear-gradient(180deg, oklch(12% 0.03 42 / 0.84), oklch(5% 0.016 42 / 0.92)),
    repeating-linear-gradient(0deg, transparent 0 5px, oklch(100% 0 0 / 0.026) 5px 6px);
}

.set-roulette-copy {
  display: grid;
  align-content: center;
  gap: 0.35rem;
}

.set-roulette-copy strong {
  color: var(--paper);
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 0.9;
  text-transform: uppercase;
}

.set-roulette-copy p {
  max-width: 44rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.set-roulette-button {
  position: relative;
  display: grid;
  place-items: center;
  align-self: stretch;
  min-width: clamp(7rem, 11vw, 10rem);
  padding: 0.9rem;
  cursor: pointer;
  border: 0;
  border-inline: 1px solid oklch(83% 0.1 76 / 0.22);
  background:
    radial-gradient(circle at 50% 45%, oklch(87% 0.14 75), oklch(52% 0.13 48) 46%, oklch(14% 0.035 42) 76%),
    repeating-conic-gradient(from 0deg, oklch(100% 0 0 / 0.16) 0 7deg, transparent 7deg 19deg);
  color: var(--void);
  font-family: "Bitcount Prop Single", "IBM Plex Mono", monospace;
  font-size: 0.88rem;
  font-weight: 900;
  text-transform: uppercase;
  transition: filter 180ms var(--ease), transform 180ms var(--ease);
}

.set-roulette-button span {
  position: relative;
  z-index: 1;
}

.set-roulette-button i {
  position: absolute;
  inset: 19%;
  border: 1px solid oklch(7% 0.02 42 / 0.42);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 22%, oklch(7% 0.02 42 / 0.18) 23% 25%, transparent 26%),
    repeating-conic-gradient(from 25deg, transparent 0 17deg, oklch(7% 0.02 42 / 0.28) 17deg 19deg);
  opacity: 0.72;
}

.set-roulette-button:hover {
  filter: brightness(1.08) saturate(1.1);
  transform: translateY(-1px);
}

.set-roulette-button[aria-busy="true"] i,
.retro-tv-card.is-roulette-spinning .retro-knob.channel,
.retro-tv-card.is-roulette-spinning .retro-knob.tuning {
  animation: roulette-dial-spin 520ms linear infinite;
}

.retro-tv-card.is-roulette-spinning .retro-tv-bezel {
  box-shadow:
    0 0 0 1px oklch(82% 0.16 76 / 0.26),
    0 0 3rem oklch(82% 0.16 76 / 0.18),
    inset 0 0 0 2px oklch(0% 0 0 / 0.5),
    inset 0 0 34px oklch(0% 0 0 / 0.6);
}

.set-roulette-readout {
  display: grid;
  align-content: center;
  gap: 0.5rem;
}

.set-roulette-readout span {
  color: var(--amber);
  font-family: "Bitcount Prop Single", "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.set-roulette-readout a,
.tv-card .set-roulette-readout a {
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.7rem);
  font-weight: 400;
  line-height: 0.94;
  text-transform: uppercase;
}

.set-roulette-readout a:hover,
.tv-card .set-roulette-readout a:hover {
  background: transparent;
  color: var(--amber);
}

.set-roulette-history {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: oklch(83% 0.1 76 / 0.16);
}

.set-roulette-history button {
  display: grid;
  gap: 0.25rem;
  min-height: 4.2rem;
  padding: 0.72rem;
  cursor: pointer;
  border: 0;
  background: oklch(7% 0.02 42 / 0.96);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
}

.set-roulette-history button span {
  color: var(--amber);
  font-family: "Bitcount Prop Single", "IBM Plex Mono", monospace;
}

.set-roulette-history button:hover {
  background: oklch(82% 0.16 76);
  color: var(--void);
}

.set-roulette-history button:hover span {
  color: var(--void);
}

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

@media (max-width: 760px) {
  .set-roulette-console {
    grid-template-columns: 1fr;
  }

  .set-roulette-button {
    min-height: 5.8rem;
    border-block: 1px solid oklch(83% 0.1 76 / 0.22);
    border-inline: 0;
  }

  .set-roulette-history {
    grid-template-columns: 1fr;
  }
}

.gallery-section .section-heading {
  grid-template-columns: 1fr;
}

.gallery-section #gallery-title {
  max-width: none;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: normal;
}

.gallery-hover-preview {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  width: min(34rem, 42vw);
  aspect-ratio: 4 / 3;
  pointer-events: none;
  opacity: 0;
  border: 0.75rem solid oklch(92% 0.035 82);
  border-bottom-width: 2rem;
  background: oklch(92% 0.035 82);
  box-shadow: 0 34px 90px oklch(0% 0 0 / 0.48);
  transform: translate3d(-120vw, -120vh, 0) rotate(-1deg);
  transition: opacity 160ms var(--ease);
}

.gallery-hover-preview.is-visible {
  opacity: 1;
}

.gallery-hover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.08) saturate(0.95) contrast(1.08);
}

.gallery-slider {
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
  overflow: hidden;
  padding: clamp(0.8rem, 2vw, 1.4rem) 0;
  border-top: 1px solid oklch(82% 0.08 76 / 0.2);
  border-bottom: 1px solid oklch(82% 0.08 76 / 0.2);
  background:
    repeating-linear-gradient(90deg, oklch(92% 0.04 84 / 0.04) 0 1px, transparent 1px 3rem),
    oklch(8% 0.03 42 / 0.72);
}

.gallery-row {
  overflow: hidden;
}

.gallery-track {
  display: flex;
  width: max-content;
  gap: clamp(0.9rem, 1.6vw, 1.35rem);
  animation: gallery-marquee 96s linear infinite;
  will-change: transform;
}

.gallery-row.reverse .gallery-track {
  animation-name: gallery-marquee-reverse;
  animation-duration: 112s;
}

.gallery-row:hover .gallery-track {
  animation-play-state: paused;
}

.gallery-slide {
  position: relative;
  flex: 0 0 clamp(18rem, 27vw, 34rem);
  height: clamp(15rem, 22vw, 27rem);
  overflow: hidden;
  border: 0.65rem solid oklch(91% 0.035 82);
  border-bottom-width: 1.9rem;
  border-radius: 2px;
  background: oklch(91% 0.035 82);
  box-shadow: 0 20px 44px oklch(0% 0 0 / 0.25);
}

.gallery-slide:nth-child(4n) {
  flex-basis: clamp(22rem, 34vw, 42rem);
}

.gallery-slide:nth-child(7n) {
  flex-basis: clamp(16rem, 22vw, 28rem);
}

.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.12) saturate(0.86) contrast(1.08) brightness(0.82);
  transition: transform 500ms var(--ease), filter 220ms var(--ease);
}

.gallery-slide:hover img {
  transform: scale(1.055);
  filter: sepia(0.04) saturate(1.05) contrast(1.12) brightness(0.94);
}

.gallery-slide span {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: -1.55rem;
  color: oklch(18% 0.035 44);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.gallery-slide.is-hidden {
  display: none;
}

@keyframes gallery-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes gallery-marquee-reverse {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

.archive-section .section-heading h2,
.tour-section #tour-title,
.music-section #music-title,
.interviews-section #interviews-title,
.machines #machines-title,
.label-section #label-title,
.archive-section .bio-lead h3,
.archive-section .crate-copy h3,
.archive-section .compact-heading h3,
.archive-section .influences-archive h2 {
  max-width: none;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: normal;
}

.label-section > .section-kicker,
.label-section > .kaoz-heading {
  grid-column: 1 / -1;
}

.tour-section .section-heading,
.music-section .section-heading,
.interviews-section .section-heading,
.machines .section-heading,
.label-section .kaoz-heading {
  grid-template-columns: 1fr;
}

.music-section .section-heading p,
.machines .section-heading p {
  max-width: 56rem;
}

.label-section > .section-kicker {
  margin-bottom: calc(var(--space-lg) * -0.65);
}

.kaoz-heading {
  margin-bottom: 0;
}

.archive-section .compact-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
  gap: var(--space-lg);
  align-items: end;
}

.archive-section .compact-heading h3 {
  font-size: clamp(3.9rem, 7vw, 8.2rem);
}

.bio-chapters {
  align-content: start;
}

.bio-chapters .archive-open-card,
.archive-deck .archive-open-card {
  min-height: auto;
}

.archive-open-card {
  position: relative;
  overflow: hidden;
  border: 0;
  background:
    linear-gradient(180deg, oklch(17% 0.045 46 / 0.96), oklch(8% 0.03 42 / 0.97)),
    repeating-linear-gradient(0deg, transparent 0 21px, oklch(80% 0.08 74 / 0.04) 22px);
  transition: transform 220ms var(--ease), background 220ms var(--ease), box-shadow 220ms var(--ease);
}

.archive-open-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 18% 0%, oklch(82% 0.16 77 / 0.18), transparent 16rem),
    linear-gradient(90deg, oklch(82% 0.08 76 / 0.08), transparent);
  transition: opacity 220ms var(--ease);
}

.archive-open-card:hover,
.archive-open-card[open] {
  transform: translateY(-0.16rem);
  box-shadow: inset 0 0 0 1px oklch(83% 0.12 76 / 0.28), 0 22px 60px oklch(0% 0 0 / 0.22);
}

.archive-open-card:hover::before,
.archive-open-card[open]::before {
  opacity: 1;
}

.archive-open-card summary {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  min-height: 7rem;
  padding: var(--space-md);
  cursor: pointer;
  list-style: none;
}

.archive-open-card summary::-webkit-details-marker {
  display: none;
}

.archive-open-card summary::after {
  content: "+";
  display: grid;
  width: 2.4rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid oklch(80% 0.08 76 / 0.26);
  border-radius: 999px;
  color: var(--amber);
  font-family: "Bebas Neue", sans-serif;
  font-size: 2rem;
  line-height: 1;
  transition: transform 180ms var(--ease), background 180ms var(--ease);
}

.archive-open-card[open] summary::after {
  content: "-";
  background: var(--amber);
  color: var(--void);
  transform: rotate(180deg);
}

.archive-open-card summary span {
  margin: 0;
  color: var(--amber);
}

.archive-open-card summary strong {
  color: var(--paper);
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2rem, 3vw, 3.4rem);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
}

.archive-open-card p {
  position: relative;
  z-index: 1;
  max-width: 58ch;
  margin: 0;
  padding: 0 var(--space-md) var(--space-md);
  color: var(--muted);
}

.archive-deck {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.crate-influences {
  grid-template-columns: minmax(20rem, 0.36fr) minmax(0, 0.64fr);
}

.record-player {
  display: grid;
  grid-template-columns: minmax(17rem, 0.78fr) minmax(0, 1fr);
  gap: 1px;
  min-height: 34rem;
  border: 1px solid var(--line);
  background: var(--line);
}

.record-visual,
.record-copy,
.record-list {
  background:
    radial-gradient(circle at 80% 18%, oklch(82% 0.14 76 / 0.12), transparent 13rem),
    linear-gradient(180deg, oklch(13% 0.038 44), oklch(6% 0.025 42));
}

.record-visual {
  position: relative;
  display: grid;
  min-height: 24rem;
  place-items: center;
  overflow: hidden;
}

.record-disc {
  position: relative;
  width: min(72%, 22rem);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle, oklch(82% 0.13 78) 0 7%, oklch(9% 0.025 42) 7.2% 14%, transparent 14.2%),
    repeating-radial-gradient(circle, oklch(5% 0.018 42) 0 9px, oklch(16% 0.03 42) 10px 11px);
  box-shadow: 0 28px 70px oklch(0% 0 0 / 0.45), inset 0 0 0 1px oklch(82% 0.08 76 / 0.22);
  animation: reel-spin 5.8s linear infinite;
}

.record-disc::before {
  content: "";
  position: absolute;
  inset: 3.5%;
  border-radius: 999px;
  opacity: 0;
  background:
    radial-gradient(circle, transparent 0 7.5%, oklch(0% 0 0 / 0.28) 7.8% 11.2%, transparent 11.6%),
    var(--record-cover, none) center / cover no-repeat;
  box-shadow:
    inset 0 0 0 1px oklch(100% 0 0 / 0.12),
    inset 0 0 0 0.65rem oklch(0% 0 0 / 0.22),
    0 0 0 0.18rem oklch(4% 0.016 42 / 0.72);
  filter: sepia(0.08) saturate(0.95) contrast(1.05);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}

.record-disc.has-cover::before {
  opacity: 0.92;
}

.record-disc span {
  position: absolute;
  inset: 33%;
  border-radius: 999px;
  background:
    linear-gradient(145deg, var(--paper), oklch(77% 0.08 82)),
    oklch(85% 0.08 76);
  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.18);
}

.record-tonearm {
  position: absolute;
  top: 17%;
  right: 18%;
  width: 3.2rem;
  height: 15rem;
  border-radius: 999px;
  background: linear-gradient(90deg, oklch(72% 0.035 72), oklch(38% 0.025 60));
  transform: rotate(28deg);
  transform-origin: top center;
  box-shadow: 0 10px 24px oklch(0% 0 0 / 0.35);
}

.record-needle {
  position: absolute;
  top: 50%;
  right: 32%;
  width: 5rem;
  height: 0.32rem;
  background: var(--amber);
  transform: rotate(22deg);
  transform-origin: right center;
}

.record-copy {
  display: grid;
  align-content: center;
  min-height: clamp(30rem, 40vw, 38rem);
  padding: clamp(1.2rem, 4vw, 3rem);
}

.record-copy h3 {
  max-width: 12ch;
  margin: 0.35rem 0 var(--space-md);
  color: var(--paper);
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(4rem, 8vw, 8rem);
  line-height: 0.86;
  text-transform: uppercase;
}

.record-copy p {
  max-width: 42rem;
  min-height: 5.4em;
  color: oklch(91% 0.04 78);
  font-size: clamp(1.08rem, 1.5vw, 1.35rem);
}

.record-copy p span {
  display: inline-block;
}

.record-copy.is-changing p span {
  animation: word-rise 420ms var(--ease) both;
  animation-delay: calc(var(--word-index) * 25ms);
}

.record-controls {
  display: flex;
  gap: 0.7rem;
  margin-top: var(--space-lg);
}

.record-controls button,
.record-list button {
  border: 1px solid oklch(83% 0.1 76 / 0.24);
  border-radius: var(--radius);
  background: oklch(8% 0.028 42 / 0.82);
  color: var(--paper);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-transform: uppercase;
  transition: transform 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease);
}

.record-controls button {
  min-height: 44px;
  padding: 0.65rem 0.85rem;
}

.record-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
}

.record-list button {
  min-height: 6.8rem;
  padding: 0.9rem;
  text-align: left;
}

.record-list button span {
  display: block;
  margin-bottom: 0.24rem;
  color: var(--amber);
  font-size: 0.72rem;
}

.record-list button strong {
  display: block;
  color: inherit;
  font-size: 0.9rem;
}

.record-controls button:hover,
.record-list button:hover,
.record-list button.active {
  background: linear-gradient(180deg, oklch(82% 0.16 76), oklch(63% 0.15 42));
  color: var(--void);
  transform: translateY(-0.14rem);
}

@keyframes word-rise {
  from {
    filter: blur(9px);
    opacity: 0;
    transform: translateY(0.35rem);
  }
  to {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .tv-wall {
    grid-template-columns: 1fr;
  }

  .tv-card.feature {
    grid-column: 1;
  }

  .retro-tv-set {
    aspect-ratio: auto;
  }

  .retro-tv-face {
    grid-template-columns: 1fr;
  }

  .retro-tv-side-panel {
    grid-template-columns: minmax(2.8rem, 0.32fr) minmax(8rem, 1fr);
    grid-template-rows: minmax(3.4rem, auto) minmax(6rem, auto);
  }

  .retro-vent {
    grid-column: 1 / -1;
    min-height: 3.4rem;
  }

  .retro-control-bank {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, minmax(0.85rem, 1fr));
  }

  .retro-side-button {
    grid-column: 1;
  }

  .retro-knob-stack {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: repeat(2, auto);
  }

  .gallery-hover-preview {
    display: none;
  }

  .gallery-slide {
    flex-basis: clamp(15rem, 72vw, 24rem);
    height: clamp(13rem, 58vw, 21rem);
  }

  .archive-section .compact-heading,
  .archive-bio,
  .crate-influences,
  .record-player,
  .archive-deck {
    grid-template-columns: 1fr;
  }

  .record-list {
    grid-template-columns: 1fr;
  }
}

/* Footer final layout */
.site-footer .footer-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.site-footer .footer-social-stack {
  grid-column: span 2;
  display: grid;
  grid-template-rows: repeat(2, minmax(5.6rem, 1fr));
}

.site-footer .footer-reels {
  grid-column: span 8;
}

.site-footer .footer-social {
  grid-column: auto;
  min-height: 5.6rem;
}

.site-footer .footer-contact-card {
  grid-column: span 4;
  font-family: "Bitcount Prop Single", "IBM Plex Mono", monospace;
  font-weight: 700;
  text-transform: uppercase;
}

.site-footer .footer-reels:has(.footer-cassette-player) {
  min-height: clamp(25rem, 36vw, 31rem);
}

.site-footer .footer-cassette-player {
  width: min(100%, 38rem);
  min-height: clamp(24rem, 34vw, 30rem);
}

.site-footer .footer-cassette-player .cassette-embed {
  top: clamp(0.7rem, 1vw, 0.95rem);
  width: 86%;
  height: 152px;
  min-height: 152px;
  background: oklch(4% 0.015 42);
  color-scheme: dark;
}

.site-footer .footer-cassette-player .cassette-embed::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, oklch(7% 0.018 42), oklch(3% 0.012 42)),
    repeating-linear-gradient(0deg, oklch(100% 0 0 / 0.035) 0 1px, transparent 1px 4px);
}

.site-footer .footer-cassette-player .cassette-embed iframe {
  position: relative;
  z-index: 1;
  color-scheme: dark;
}

@media (max-width: 900px) {
  .site-footer .footer-social-stack {
    grid-column: span 6;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr;
  }

  .site-footer .footer-reels,
  .site-footer .footer-contact-card {
    grid-column: span 12;
  }
}

@media (max-width: 760px) {
  .tribute-vault-head {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .tribute-vault-head h3 {
    font-size: clamp(3.6rem, 16vw, 5.8rem);
  }

  .tribute-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tribute-toolbar input {
    grid-column: 1 / -1;
  }

  .tribute-grid {
    grid-template-columns: 1fr;
  }

  .tribute-card.is-feature {
    grid-column: auto;
  }

  .tribute-card summary {
    grid-template-columns: clamp(4.8rem, 22vw, 6.4rem) minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.85rem;
  }

  .tribute-card-copy strong {
    font-size: clamp(1.65rem, 8vw, 2.4rem);
  }

  .tribute-card-body {
    padding: 0 0.85rem 0.85rem;
  }

  .tribute-source-row {
    flex-direction: column;
  }

  .tribute-original-copy {
    max-height: 70vh;
    padding: 1rem;
  }
}

@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .main-header {
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
  }

  .main-nav {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .main-nav::-webkit-scrollbar {
    display: none;
  }

  .section {
    padding: clamp(3.2rem, 12vw, 5rem) clamp(0.9rem, 4vw, 1.2rem);
  }

  .section-heading {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .section-heading h2,
  .bio-section #bio-title,
  .music-section #music-title,
  .tour-section #tour-title,
  .machines #machines-title,
  .gallery-section #gallery-title {
    max-width: 100%;
    font-size: clamp(3.1rem, 17vw, 5.2rem);
    line-height: 0.94;
    overflow-wrap: normal;
    word-break: normal;
  }

  .section-heading p {
    max-width: 42rem;
    font-size: 1rem;
    line-height: 1.55;
  }

  .bio-feature {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    padding: 0.65rem;
  }

  .bio-copy {
    min-height: auto;
    padding: clamp(1rem, 5vw, 1.35rem);
    justify-content: flex-start;
  }

  .bio-copy p {
    font-size: clamp(0.96rem, 4.1vw, 1.06rem);
    line-height: 1.62;
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }

  .bio-pullquote {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }

  .bio-typeset-line {
    max-width: 100%;
    display: block;
    padding-block: 0.7rem;
    font-size: clamp(0.72rem, 3.35vw, 0.88rem) !important;
    line-height: 1.55 !important;
    text-wrap: balance;
  }

  .bio-pullquote {
    font-size: clamp(2.1rem, 12vw, 3.4rem);
  }

  .bio-photo-card {
    min-height: clamp(21rem, 112vw, 35rem);
    transform: none;
  }

  .bio-photo-card img {
    object-position: 50% 44%;
  }

  .bio-photo-card figcaption {
    left: 0.75rem;
    bottom: 0.75rem;
    font-size: 0.7rem;
  }

  .tour-row {
    grid-template-columns: minmax(5.4rem, 7.2rem) minmax(4.9rem, 5.9rem) 1fr;
    gap: 0.75rem;
    padding: 0.85rem;
  }

  .tour-ticket {
    grid-column: 1 / -1;
    min-height: 3rem;
  }

  .tv-wall,
  .beatport-grid,
  .merch-board,
  .kaoz-catalog,
  .machine-stack,
  .interview-grid {
    grid-template-columns: 1fr;
  }

  .footer-heading h2 {
    font-size: clamp(3rem, 16vw, 5.4rem);
  }

  .site-footer .footer-social-stack,
  .site-footer .footer-reels,
  .site-footer .footer-contact-card {
    grid-column: 1 / -1;
  }

  .site-footer .footer-social-stack {
    min-height: 5rem;
  }

  .site-footer .footer-reels:has(.footer-cassette-player) {
    min-height: clamp(23rem, 118vw, 31rem);
  }

  .site-footer .footer-cassette-player {
    width: min(100%, 35rem);
    min-height: clamp(22rem, 112vw, 30rem);
  }

  .site-footer .footer-cassette-player .cassette-embed {
    height: 152px;
    min-height: 152px;
  }
}

/* Keep the navigation console authoritative over the legacy header rules above. */
.site-header {
  position: fixed;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(0.8rem, 1.6vw, 1.35rem);
  padding-block: 0.75rem;
  background:
    linear-gradient(180deg, oklch(15% 0.035 55 / 0.98), oklch(7% 0.024 42 / 0.96)),
    repeating-linear-gradient(90deg, transparent 0 22px, oklch(100% 0 0 / 0.025) 23px 24px);
  border-bottom: 1px solid oklch(82% 0.1 76 / 0.32);
}

.main-nav.vintage-nav {
  display: block;
  justify-content: initial;
  gap: 0;
  padding: 1.2rem 0.42rem 0.42rem;
  overflow: visible;
}

@media (max-width: 1120px) {
  .site-header {
    position: fixed;
    grid-template-columns: auto auto 1fr;
  }

  .main-nav.vintage-nav {
    position: absolute;
    top: calc(100% - 0.35rem);
    left: clamp(0.8rem, 3vw, 2rem);
    right: clamp(0.8rem, 3vw, 2rem);
    display: none;
    padding: 1.35rem 0.65rem 0.65rem;
    overflow: visible;
  }

  .main-nav.vintage-nav.is-open {
    display: block;
  }
}

@media (max-width: 700px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }
}

/* Beatport release archive / virtualized coverflow. */
.releases-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, oklch(35% 0.095 58 / 0.24), transparent 34rem),
    linear-gradient(180deg, oklch(7% 0.022 43), oklch(12% 0.03 46) 50%, oklch(6% 0.018 40));
}

.releases-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, oklch(100% 0 0 / 0.022) 6px),
    linear-gradient(90deg, transparent, oklch(83% 0.13 74 / 0.05), transparent);
}

.releases-heading {
  position: relative;
  grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr);
}

.releases-heading h2 {
  max-width: none;
  white-space: nowrap;
}

.release-console {
  --cf-card: clamp(150px, 22vw, 286px);
  position: relative;
  padding: clamp(0.8rem, 2vw, 1.4rem);
  border: 1px solid oklch(80% 0.07 74 / 0.34);
  border-radius: 0.8rem;
  background:
    linear-gradient(145deg, oklch(24% 0.035 55 / 0.95), oklch(8% 0.02 42 / 0.98)),
    repeating-linear-gradient(90deg, transparent 0 18px, oklch(100% 0 0 / 0.025) 19px);
  box-shadow: 0 36px 90px oklch(0% 0 0 / 0.48), inset 0 1px oklch(100% 0 0 / 0.1), inset 0 -12px 28px oklch(0% 0 0 / 0.26);
}

.release-console-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.35rem 0.8rem;
  color: var(--amber);
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.release-console-topline span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.release-console-topline i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0.8rem var(--green);
}

.coverflow-shell {
  position: relative;
  border: 1px solid oklch(74% 0.05 68 / 0.22);
  border-radius: 0.65rem;
  background:
    radial-gradient(ellipse at 50% 100%, oklch(44% 0.085 62 / 0.22), transparent 58%),
    oklch(4% 0.015 40);
  overflow: hidden;
}

.coverflow-frame {
  position: relative;
  height: calc(var(--cf-card) * 1.3);
  padding-block: calc(var(--cf-card) * 0.15);
  perspective: calc(var(--cf-card) * 3.1);
  cursor: grab;
  touch-action: pan-y;
  outline: none;
  overflow: hidden;
}

.coverflow-frame:active {
  cursor: grabbing;
}

.coverflow-frame:focus-visible {
  box-shadow: inset 0 0 0 2px var(--green);
}

.coverflow-track {
  position: relative;
  height: var(--cf-card);
  transform-style: preserve-3d;
  user-select: none;
}

.coverflow-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--cf-card);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid oklch(88% 0.06 79 / 0.34);
  border-radius: 0.5rem;
  background: oklch(9% 0.018 42);
  box-shadow: 0 22px 45px oklch(0% 0 0 / 0.62), inset 0 0 0 1px oklch(100% 0 0 / 0.06);
  transition: transform 430ms var(--ease), opacity 320ms ease, filter 320ms ease;
  will-change: transform, opacity;
}

.coverflow-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.coverflow-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 38%, oklch(100% 0 0 / 0.15) 42%, transparent 48%),
    repeating-linear-gradient(0deg, transparent 0 3px, oklch(100% 0 0 / 0.035) 4px);
  mix-blend-mode: screen;
}

.coverflow-card.is-active {
  border-color: oklch(88% 0.15 78 / 0.82);
  box-shadow: 0 28px 58px oklch(0% 0 0 / 0.7), 0 0 0 2px oklch(82% 0.15 74 / 0.28), 0 0 34px oklch(82% 0.15 74 / 0.17);
}

.coverflow-nav {
  position: absolute;
  z-index: 160;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(2.7rem, 5vw, 3.6rem);
  aspect-ratio: 1;
  border: 1px solid oklch(82% 0.11 76 / 0.48);
  border-radius: 50%;
  background: oklch(10% 0.025 45 / 0.84);
  color: var(--amber);
  cursor: pointer;
  box-shadow: 0 10px 30px oklch(0% 0 0 / 0.48), inset 0 1px oklch(100% 0 0 / 0.12);
  transform: translateY(-50%);
  backdrop-filter: blur(8px);
}

.coverflow-nav:hover {
  background: var(--amber);
  color: var(--void);
}

.coverflow-nav span {
  margin-top: -0.12em;
  font-family: Georgia, serif;
  font-size: 2rem;
  line-height: 1;
}

.coverflow-nav.previous { left: clamp(0.45rem, 2vw, 1.2rem); }
.coverflow-nav.next { right: clamp(0.45rem, 2vw, 1.2rem); }

.release-caption {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.75fr) auto;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  min-height: 9rem;
  padding: clamp(1rem, 2vw, 1.4rem) 0.35rem 0.75rem;
}

.release-caption-date {
  color: var(--amber);
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.release-caption h3 {
  margin: 0.25rem 0 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 0.95;
}

.release-caption p {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.release-meta {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.release-meta div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid oklch(78% 0.06 73 / 0.14);
  font-size: 0.76rem;
}

.release-meta dt { color: var(--subtle); text-transform: uppercase; }
.release-meta dd { margin: 0; color: var(--ink); font-weight: 800; text-align: right; }

.release-beatport-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.65rem 0.9rem;
  border: 1px solid oklch(81% 0.12 76 / 0.5);
  border-radius: 0.42rem;
  color: var(--amber);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.release-beatport-link:hover {
  background: var(--amber);
  color: var(--void);
}

.release-timeline-controls {
  display: grid;
  grid-template-columns: auto minmax(10rem, 1fr) auto minmax(7rem, 0.18fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid oklch(78% 0.055 72 / 0.2);
  border-radius: 0.5rem;
  background: oklch(5% 0.015 42 / 0.62);
}

.release-timeline-controls label {
  color: var(--subtle);
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.release-timeline-controls input[type="range"] {
  width: 100%;
  accent-color: var(--amber);
}

.release-timeline-range {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.release-timeline-years {
  display: flex;
  justify-content: space-between;
  color: var(--subtle);
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.release-timeline-controls select {
  min-height: 38px;
  padding: 0.35rem 0.55rem;
  border: 1px solid oklch(78% 0.07 74 / 0.28);
  border-radius: 0.35rem;
  background: oklch(12% 0.026 46);
  color: var(--ink);
  font: 800 0.76rem Urbanist, sans-serif;
}

.release-source-note {
  margin: 0.65rem 0 0;
  color: var(--subtle);
  font-size: 0.68rem;
  text-align: right;
}

@media (max-width: 900px) {
  .releases-heading,
  .release-caption {
    grid-template-columns: 1fr;
  }

  .release-caption {
    gap: 1rem;
  }

  .release-meta {
    max-width: 24rem;
  }

  .release-beatport-link {
    justify-self: start;
  }
}

@media (max-width: 620px) {
  .release-console { --cf-card: clamp(142px, 48vw, 190px); }
  .coverflow-frame { height: calc(var(--cf-card) * 1.42); }
  .release-timeline-controls { grid-template-columns: auto 1fr; }
  .release-timeline-range { min-width: 0; }
  .release-source-note { text-align: left; }
}

/* Kaoz Theory / vintage label control room. */
.label-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(17rem, 0.38fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
  overflow: visible;
  border: 1px solid oklch(78% 0.07 72 / 0.3);
  background:
    radial-gradient(circle at 12% 20%, oklch(41% 0.08 59 / 0.2), transparent 28rem),
    linear-gradient(180deg, oklch(15% 0.032 49), oklch(6% 0.018 40));
}

.label-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, oklch(100% 0 0 / 0.022) 6px),
    repeating-linear-gradient(90deg, transparent 0 34px, oklch(100% 0 0 / 0.018) 35px);
}

.label-section > * { position: relative; z-index: 1; }
.label-section > .section-kicker,
.label-section > .kaoz-heading,
.label-section > .kaoz-releases-panel,
.label-section > .mix-theory-section { grid-column: 1 / -1; }
.label-section > .section-kicker { margin-bottom: -0.85rem; }

.kaoz-heading {
  grid-template-columns: 1fr;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid oklch(78% 0.07 72 / 0.2);
}

.label-section #label-title { max-width: none; white-space: nowrap; }

.kaoz-releases-panel {
  display: grid;
  grid-template-columns: minmax(17rem, 0.38fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
  position: relative;
  z-index: 1;
}

.kaoz-profile {
  position: sticky;
  top: 7rem;
  align-self: start;
  max-height: calc(100svh - 8.5rem);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: oklch(72% 0.12 72 / 0.55) oklch(8% 0.02 42 / 0.6);
  min-height: 0;
  padding: clamp(0.9rem, 2vw, 1.25rem);
  border: 1px solid oklch(75% 0.06 70 / 0.3);
  border-radius: 0.55rem;
  background:
    linear-gradient(145deg, oklch(26% 0.038 56 / 0.94), oklch(8% 0.02 42 / 0.98)),
    repeating-linear-gradient(0deg, transparent 0 4px, oklch(100% 0 0 / 0.025) 5px);
  box-shadow: inset 0 1px oklch(100% 0 0 / 0.1), 0 24px 60px oklch(0% 0 0 / 0.34);
}

.kaoz-profile::before {
  content: "KT / LABEL DESK";
  justify-self: stretch;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid oklch(80% 0.08 74 / 0.2);
  color: var(--amber);
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-align: left;
}

.kaoz-avatar {
  width: min(18rem, 100%);
  border: 0.65rem solid oklch(7% 0.018 42);
  box-shadow: 0 18px 36px oklch(0% 0 0 / 0.5), 0 0 0 1px oklch(84% 0.08 76 / 0.25);
  filter: sepia(0.12) contrast(1.05);
}

.spotify-follow,
.kaoz-profile .button {
  border-radius: 0.35rem;
  background: linear-gradient(180deg, oklch(75% 0.13 73), oklch(54% 0.11 56));
  color: var(--void);
  box-shadow: inset 0 1px oklch(100% 0 0 / 0.25), 0 8px 18px oklch(0% 0 0 / 0.28);
}

.kaoz-socials a {
  border: 1px solid oklch(78% 0.06 72 / 0.25);
  border-radius: 0.3rem;
  background: oklch(8% 0.02 42 / 0.86);
}

.kaoz-mail { border-radius: 0.35rem; overflow: hidden; }
.kaoz-catalog { align-content: start; gap: clamp(0.75rem, 1.5vw, 1rem); }

.kaoz-release {
  min-height: 0;
  border: 0.45rem solid oklch(8% 0.018 42);
  border-radius: 0.35rem;
  background: oklch(8% 0.018 42);
  box-shadow: 0 18px 32px oklch(0% 0 0 / 0.42), 0 0 0 1px oklch(83% 0.08 76 / 0.2);
  transform: rotate(var(--sleeve-tilt, -0.25deg));
}

.kaoz-release:nth-child(2n) { --sleeve-tilt: 0.35deg; }
.kaoz-release:nth-child(3n) { --sleeve-tilt: -0.5deg; }
.kaoz-release span {
  inset: auto 0 0;
  padding: 0.65rem;
  border-top: 1px solid oklch(83% 0.08 76 / 0.2);
  background: linear-gradient(180deg, transparent, oklch(2% 0.01 40 / 0.96) 42%);
}

.mix-theory-section {
  margin-top: clamp(1.5rem, 3vw, 2.6rem);
  padding: clamp(1rem, 2.5vw, 1.6rem);
  border: 1px solid oklch(78% 0.07 72 / 0.3);
  border-radius: 0.6rem;
  background:
    linear-gradient(145deg, oklch(22% 0.035 53 / 0.92), oklch(7% 0.018 40 / 0.98)),
    repeating-linear-gradient(90deg, transparent 0 20px, oklch(100% 0 0 / 0.02) 21px);
  box-shadow: inset 0 1px oklch(100% 0 0 / 0.08), 0 28px 70px oklch(0% 0 0 / 0.35);
}

.mix-theory-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.6fr);
  align-items: end;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid oklch(78% 0.07 72 / 0.2);
}

.mix-theory-heading h3 {
  margin: 0.2rem 0 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.88;
}

.mix-theory-heading p { margin: 0; color: var(--muted); }
.mix-theory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }

.mix-theory-card {
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid oklch(76% 0.06 70 / 0.24);
  border-radius: 0.4rem;
  background: linear-gradient(180deg, oklch(20% 0.03 52 / 0.92), oklch(8% 0.02 42 / 0.98));
  box-shadow: inset 0 1px oklch(100% 0 0 / 0.07), 0 14px 28px oklch(0% 0 0 / 0.3);
}

.mix-theory-card > span {
  color: var(--amber);
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mix-theory-card h4 { margin: 0.25rem 0 0.65rem; font-family: "Bebas Neue", sans-serif; font-size: 1.65rem; line-height: 1; }
.mix-theory-card iframe { display: block; width: 100%; height: 166px; border: 0; border-radius: 0.3rem; filter: sepia(0.08) saturate(0.9) contrast(1.04); }

.mix-theory-all,
.merch-more {
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  margin-top: 1rem;
  padding: 0.65rem 1rem;
  border: 1px solid oklch(80% 0.11 76 / 0.46);
  border-radius: 0.35rem;
  background: oklch(10% 0.025 44 / 0.78);
  color: var(--amber);
  cursor: pointer;
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.mix-theory-all:hover,
.merch-more:hover { background: var(--amber); color: var(--void); }
.merch-more { position: relative; z-index: 2; }
.merch-more[hidden] { display: none; }

@media (max-width: 1000px) {
  .label-section { grid-template-columns: 1fr; }
  .label-section > .section-kicker,
  .label-section > .kaoz-heading,
  .label-section > .kaoz-releases-panel,
  .label-section > .mix-theory-section { grid-column: 1; }
  .kaoz-releases-panel { grid-template-columns: 1fr; }
  .kaoz-profile { position: relative; top: auto; }
  .mix-theory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .releases-heading h2 { white-space: nowrap; font-size: clamp(3.2rem, 18vw, 5rem); }
  .mix-theory-heading { grid-template-columns: 1fr; }
  .mix-theory-grid { grid-template-columns: 1fr; }
}

/* Heritage v4: lightweight, scroll-driven vinyl in layered 2.5D. */
.vinyl-story {
  --vinyl-progress: 0;
  --vinyl-x: 12%;
  --vinyl-spin: -18deg;
  --vinyl-lift: 0px;
  --vinyl-shadow-x: 0%;
  --vinyl-shadow-scale: 0.72;
  --vinyl-tilt-x: 0deg;
  --vinyl-tilt-y: 0deg;
  --vinyl-dust-x: 0px;
  --vinyl-dust-y: 0px;
  --vinyl-dust-x-reverse: 0px;
  --vinyl-dust-y-reverse: 0px;
  --vinyl-light-opacity: 0.28;
  --vinyl-specular-opacity: 0.22;
  position: relative;
  min-height: 165svh;
  border-top: 1px solid oklch(78% 0.1 74 / 0.26);
  border-bottom: 1px solid oklch(78% 0.1 74 / 0.2);
  background:
    radial-gradient(circle at 72% 38%, oklch(72% 0.15 66 / 0.13), transparent 25rem),
    radial-gradient(circle at 20% 54%, oklch(54% 0.16 31 / 0.1), transparent 28rem),
    repeating-linear-gradient(0deg, transparent 0 6px, oklch(92% 0.03 80 / 0.018) 7px),
    oklch(6% 0.026 42);
  isolation: isolate;
}

.vinyl-story::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.36;
  background:
    linear-gradient(90deg, transparent 0 49.94%, oklch(88% 0.05 80 / 0.09) 50%, transparent 50.06%),
    radial-gradient(circle at center, transparent 0 62%, oklch(0% 0 0 / 0.5) 100%);
}

.vinyl-story-sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(18rem, 0.7fr) minmax(28rem, 1.3fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 7rem);
  overflow: hidden;
  padding: clamp(7rem, 10vw, 9rem) clamp(1rem, 4vw, 4rem) clamp(3rem, 6vw, 5rem);
}

.vinyl-story-copy {
  position: relative;
  z-index: 5;
  max-width: 37rem;
}

.vinyl-story-index {
  margin: 0 0 clamp(2rem, 8vh, 5rem);
  color: oklch(70% 0.07 72);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
}

.vinyl-story-copy h2 {
  max-width: 8.5ch;
  color: oklch(94% 0.045 82);
  font-size: clamp(4.4rem, 8.4vw, 9.8rem);
  text-shadow: 0.035em 0.025em 0 oklch(40% 0.16 33 / 0.44);
}

.vinyl-story-copy > p:not(.vinyl-story-index, .section-kicker) {
  max-width: 31rem;
  margin: 1.5rem 0 0;
  color: oklch(78% 0.045 78);
  font-size: clamp(1rem, 1.4vw, 1.24rem);
}

.vinyl-story-meter {
  height: 2px;
  margin-top: clamp(2rem, 6vh, 4rem);
  overflow: hidden;
  background: oklch(82% 0.08 75 / 0.18);
}

.vinyl-story-meter span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--vinyl-progress));
  transform-origin: left;
  background: linear-gradient(90deg, var(--red), var(--amber));
  box-shadow: 0 0 18px var(--amber);
}

.vinyl-story-states {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.7rem;
  color: oklch(68% 0.045 75);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vinyl-scene {
  position: relative;
  z-index: 2;
  min-width: 0;
  height: min(72svh, 52rem);
  perspective: 1300px;
  perspective-origin: 55% 45%;
  user-select: none;
  touch-action: pan-y;
}

.vinyl-scene-light {
  position: absolute;
  inset: 4% -10% -4% 3%;
  pointer-events: none;
  opacity: var(--vinyl-light-opacity);
  filter: blur(18px);
  background: radial-gradient(ellipse at 69% 42%, oklch(87% 0.16 77 / 0.24), transparent 43%);
  transform: translate3d(var(--vinyl-dust-x), var(--vinyl-dust-y), 0);
}

.vinyl-scene-object {
  position: absolute;
  inset: 7% 0 8%;
  transform-style: preserve-3d;
  transform: rotateX(var(--vinyl-tilt-x)) rotateY(var(--vinyl-tilt-y));
  will-change: transform;
}

.vinyl-sleeve-back,
.vinyl-sleeve-front,
.vinyl-record {
  position: absolute;
  top: 50%;
  width: min(60%, 34rem);
  aspect-ratio: 1;
  border-radius: 50%;
  transform-style: preserve-3d;
}

.vinyl-sleeve-back,
.vinyl-sleeve-front {
  left: 4%;
  border-radius: 0.2rem;
}

.vinyl-sleeve-back {
  z-index: 0;
  transform: translate3d(0, -50%, -18px) rotateY(-2deg);
  background: oklch(16% 0.045 43);
  box-shadow: 0 40px 80px oklch(0% 0 0 / 0.58);
}

.vinyl-record {
  z-index: 1;
  left: var(--vinyl-x);
  transform: translate3d(0, calc(-50% + var(--vinyl-lift)), 12px) rotate(var(--vinyl-spin));
  background:
    repeating-radial-gradient(circle, transparent 0 2px, oklch(58% 0.02 55 / 0.13) 2.5px 3px),
    radial-gradient(circle at 38% 30%, oklch(32% 0.025 45), oklch(7% 0.015 45) 58%, oklch(1% 0 0) 76%);
  border: 1px solid oklch(80% 0.035 72 / 0.2);
  box-shadow:
    0 2px 2px oklch(100% 0 0 / 0.1) inset,
    -18px 36px 54px oklch(0% 0 0 / 0.52);
  will-change: left, transform;
}

.vinyl-grooves {
  position: absolute;
  inset: 3.5%;
  border-radius: 50%;
  border: 1px solid oklch(84% 0.04 76 / 0.13);
  background: repeating-radial-gradient(circle, transparent 0 4px, oklch(92% 0.02 75 / 0.055) 4.5px 5px);
}

.vinyl-label {
  position: absolute;
  inset: 35%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.18rem;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle, oklch(7% 0.02 42) 0 5%, transparent 5.5%),
    repeating-linear-gradient(0deg, transparent 0 5px, oklch(100% 0 0 / 0.06) 6px),
    oklch(70% 0.18 62);
  box-shadow: 0 0 0 1px oklch(92% 0.06 78 / 0.28), 0 0 24px oklch(0% 0 0 / 0.32) inset;
}

.vinyl-label img {
  width: 58%;
  filter: brightness(0.14) sepia(0.25);
}

.vinyl-label span {
  color: oklch(15% 0.035 40);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(0.35rem, 0.62vw, 0.58rem);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.vinyl-specular {
  position: absolute;
  inset: 1%;
  border-radius: 50%;
  opacity: var(--vinyl-specular-opacity);
  background: conic-gradient(from 232deg, transparent 0 12%, oklch(96% 0.02 80 / 0.13) 18%, transparent 29% 63%, oklch(72% 0.08 76 / 0.1) 71%, transparent 78%);
  mix-blend-mode: screen;
}

.vinyl-sleeve-front {
  z-index: 3;
  overflow: hidden;
  transform: translate3d(0, -50%, 38px) rotateY(-2deg);
  border: 1px solid oklch(82% 0.08 76 / 0.24);
  background:
    linear-gradient(138deg, transparent 0 44%, oklch(95% 0.07 80 / 0.06) 45% 45.4%, transparent 46%),
    radial-gradient(circle at 20% 8%, oklch(61% 0.18 31 / 0.42), transparent 41%),
    repeating-linear-gradient(0deg, transparent 0 7px, oklch(90% 0.04 79 / 0.035) 8px),
    oklch(11% 0.035 43);
  box-shadow:
    0 26px 68px oklch(0% 0 0 / 0.5),
    1px 0 0 oklch(100% 0 0 / 0.06) inset,
    -10px 0 30px oklch(0% 0 0 / 0.22) inset;
}

.vinyl-sleeve-front::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 100% 50%, transparent 0 7.5%, oklch(0% 0 0 / 0.48) 8%, transparent 9%);
}

.vinyl-sleeve-art {
  position: absolute;
  inset: 7%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid oklch(78% 0.09 73 / 0.25);
  padding: clamp(0.8rem, 2vw, 1.6rem);
}

.vinyl-sleeve-art img {
  width: clamp(7rem, 43%, 13rem);
  margin: auto 0 0;
  filter: sepia(0.28) saturate(0.8) brightness(1.25);
}

.vinyl-sleeve-art strong {
  margin-top: 1rem;
  color: oklch(91% 0.055 80);
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.4rem, 3vw, 3.2rem);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: 0.02em;
}

.vinyl-catalog,
.vinyl-stereo {
  color: oklch(73% 0.1 70);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(0.48rem, 0.7vw, 0.7rem);
  letter-spacing: 0.11em;
}

.vinyl-stereo {
  margin-top: 0.8rem;
}

.vinyl-contact-shadow {
  position: absolute;
  z-index: -1;
  left: calc(23% + var(--vinyl-shadow-x));
  bottom: 7%;
  width: 62%;
  height: 12%;
  border-radius: 50%;
  opacity: 0.64;
  filter: blur(20px);
  background: oklch(0% 0 0 / 0.88);
  transform: scaleX(var(--vinyl-shadow-scale));
}

.vinyl-dust {
  position: absolute;
  z-index: 5;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: 0.5;
  background: var(--amber);
  box-shadow: 40px 28px 0 oklch(84% 0.13 76 / 0.32), -64px 72px 0 oklch(92% 0.03 80 / 0.24), 96px -36px 0 oklch(80% 0.13 74 / 0.28), 156px 82px 0 oklch(92% 0.04 82 / 0.2);
  transform: translate3d(var(--vinyl-dust-x), var(--vinyl-dust-y), 70px);
}

.vinyl-dust-a {
  top: 17%;
  left: 30%;
}

.vinyl-dust-b {
  right: 23%;
  bottom: 24%;
  transform: translate3d(var(--vinyl-dust-x-reverse), var(--vinyl-dust-y-reverse), 75px);
}

.vinyl-scroll-cue {
  position: absolute;
  right: 2%;
  bottom: 0;
  margin: 0;
  color: oklch(71% 0.065 75);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vinyl-scroll-cue span {
  display: inline-grid;
  width: 1.7rem;
  height: 1.7rem;
  margin-right: 0.5rem;
  place-items: center;
  border: 1px solid oklch(77% 0.09 74 / 0.32);
  border-radius: 50%;
}

@media (max-width: 900px) {
  .vinyl-story { min-height: 145svh; }
  .vinyl-story-sticky {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 1rem;
    align-content: center;
    padding-top: 7rem;
  }
  .vinyl-story-index { display: none; }
  .vinyl-story-copy { max-width: 46rem; }
  .vinyl-story-copy h2 { max-width: 12ch; font-size: clamp(3.8rem, 13vw, 7rem); }
  .vinyl-story-copy > p:not(.vinyl-story-index, .section-kicker),
  .vinyl-story-meter,
  .vinyl-story-states { display: none; }
  .vinyl-scene { height: min(57svh, 35rem); }
  .vinyl-scene-object { inset: 0; }
  .vinyl-sleeve-back,
  .vinyl-sleeve-front,
  .vinyl-record { width: min(56%, 25rem); }
}

@media (max-width: 560px) {
  .vinyl-story { min-height: 130svh; }
  .vinyl-story-sticky { min-height: 100svh; padding: 6.5rem 1rem 2rem; }
  .vinyl-story-copy h2 { font-size: clamp(3.2rem, 17vw, 5.1rem); }
  .vinyl-scene { height: 50svh; }
  .vinyl-sleeve-back,
  .vinyl-sleeve-front,
  .vinyl-record { width: min(68%, 20rem); }
  .vinyl-scroll-cue { left: 0; right: auto; bottom: 0.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vinyl-story {
    min-height: auto;
    --vinyl-progress: 1;
    --vinyl-x: 38%;
    --vinyl-spin: 42deg;
    --vinyl-lift: -5px;
    --vinyl-shadow-x: 12%;
    --vinyl-shadow-scale: 0.92;
  }
  .vinyl-story-sticky { position: relative; min-height: min(100svh, 56rem); }
  .vinyl-scroll-cue { display: none; }
}

/* Heritage v4.1: full-screen Pioneer RT-707 encounter. */
.reel-story {
  --reel-progress: 0;
  --machine-scale: 0.72;
  --machine-y: 9vh;
  --machine-x: 0vw;
  --beam-x: 0vw;
  --machine-tilt-x: 0deg;
  --machine-tilt-y: 0deg;
  --machine-light: 0.24;
  --machine-clarity: 0.66;
  --heading-opacity: 1;
  --heading-y: 0px;
  --callout-opacity: 0;
  --callout-y: 18px;
  --tape-opacity: 0.16;
  --beam-b-opacity: 0.13;
  --haze-opacity: 0.46;
  --shadow-scale: 0.72;
  --machine-saturation: 0.72;
  --machine-contrast: 1.04;
  --machine-brightness: 0.72;
  --glass-opacity: 0.2;
  --aura-opacity: 0.1;
  --vu-opacity: 0.72;
  position: relative;
  min-height: 235svh;
  overflow: clip;
  color: oklch(94% 0.04 80);
  background: #050403;
  border-block: 1px solid oklch(80% 0.08 72 / 0.2);
  isolation: isolate;
}

.reel-story-sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  overflow: hidden;
  background:
    linear-gradient(90deg, oklch(0% 0 0 / 0.78), transparent 34% 69%, oklch(0% 0 0 / 0.38)),
    radial-gradient(ellipse at 50% 62%, oklch(53% 0.13 61 / 0.13), transparent 48%),
    repeating-linear-gradient(90deg, transparent 0 5.9rem, oklch(85% 0.04 75 / 0.025) 6rem),
    repeating-linear-gradient(0deg, transparent 0 5.9rem, oklch(85% 0.04 75 / 0.02) 6rem),
    #060504;
}

.reel-story-sticky::before,
.reel-story-sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.reel-story-sticky::before {
  z-index: 8;
  opacity: 0.18;
  background: repeating-linear-gradient(0deg, transparent 0 3px, oklch(100% 0 0 / 0.055) 4px);
  mix-blend-mode: overlay;
}

.reel-story-sticky::after {
  z-index: 7;
  background: radial-gradient(ellipse at center, transparent 38%, oklch(0% 0 0 / 0.84) 100%);
}

.reel-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.reel-beam {
  position: absolute;
  top: -24%;
  width: 28%;
  height: 150%;
  opacity: var(--machine-light);
  filter: blur(32px);
  background: linear-gradient(180deg, oklch(90% 0.16 78 / 0.26), transparent 72%);
  transform-origin: top;
  mix-blend-mode: screen;
}

.reel-beam-a {
  left: 36%;
  transform: rotate(17deg) translateX(var(--beam-x));
}

.reel-beam-b {
  right: 1%;
  opacity: var(--beam-b-opacity);
  transform: rotate(-21deg);
}

.reel-haze {
  position: absolute;
  inset: 45% -10% -30%;
  opacity: var(--haze-opacity);
  filter: blur(42px);
  background: radial-gradient(ellipse, oklch(66% 0.12 67 / 0.17), transparent 68%);
}

.reel-story-heading {
  position: absolute;
  z-index: 6;
  top: clamp(7.4rem, 14vh, 10.5rem);
  left: clamp(1rem, 4vw, 4rem);
  max-width: min(56rem, 54vw);
  opacity: var(--heading-opacity);
  transform: translate3d(0, var(--heading-y), 0);
  pointer-events: none;
}

.reel-chapter {
  margin: 0 0 1.2rem;
  color: var(--amber);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.reel-story-heading h2 {
  max-width: none;
  color: oklch(96% 0.035 82);
  font-size: clamp(5.4rem, 10.8vw, 12.8rem);
  line-height: 0.78;
  letter-spacing: -0.018em;
  text-shadow:
    0.035em 0.035em 0 oklch(46% 0.17 36 / 0.58),
    0 0 58px oklch(78% 0.15 73 / 0.11);
}

.reel-story-lede {
  margin: 1.45rem 0 0;
  color: oklch(76% 0.055 76);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(0.72rem, 0.9vw, 0.9rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reel-machine-scene {
  position: absolute;
  z-index: 3;
  inset: 0;
  perspective: 1500px;
  perspective-origin: 50% 58%;
  pointer-events: none;
}

.reel-machine-halo {
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: min(92vw, 88rem);
  height: 58%;
  opacity: var(--machine-light);
  filter: blur(42px);
  background: radial-gradient(ellipse, oklch(73% 0.16 73 / 0.24), transparent 63%);
  transform: translateX(-50%);
}

.reel-machine-shadow {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 2.5%;
  width: min(82vw, 78rem);
  height: 15%;
  border-radius: 50%;
  opacity: 0.86;
  filter: blur(36px);
  background: #000;
  transform: translateX(-50%) scaleX(var(--shadow-scale));
}

.reel-machine {
  position: absolute;
  left: 50%;
  bottom: clamp(-4rem, -4vh, -1rem);
  width: min(90vw, 82rem);
  aspect-ratio: 800 / 444;
  opacity: var(--machine-clarity);
  transform-style: preserve-3d;
  transform:
    translate3d(calc(-50% + var(--machine-x)), var(--machine-y), 0)
    rotateX(var(--machine-tilt-x))
    rotateY(var(--machine-tilt-y))
    scale(var(--machine-scale));
  transform-origin: 50% 62%;
  filter:
    saturate(var(--machine-saturation))
    contrast(var(--machine-contrast))
    brightness(var(--machine-brightness))
    drop-shadow(0 34px 52px oklch(0% 0 0 / 0.78));
  will-change: transform, opacity, filter;
}

.reel-machine-photo,
.reel-machine-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 55%, #000 62%, rgba(0, 0, 0, 0.94) 76%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 78% at 50% 55%, #000 62%, rgba(0, 0, 0, 0.94) 76%, transparent 100%);
}

.reel-machine-poster {
  z-index: 0;
  opacity: 1;
  transition: opacity 180ms ease;
}

.reel-machine-photo {
  z-index: 1;
}

.reel-story.is-reel-visible .reel-machine-poster {
  opacity: 0;
}

.reel-story:not(.is-reel-visible) .reel-machine-photo {
  visibility: hidden;
}

.reel-machine-glass {
  position: absolute;
  z-index: 4;
  inset: 6.5% 5.7% 9.2%;
  opacity: var(--glass-opacity);
  clip-path: polygon(0 0, 100% 0, 94% 100%, 5% 100%);
  background:
    linear-gradient(111deg, transparent 0 35%, oklch(100% 0 0 / 0.13) 41%, transparent 48%),
    linear-gradient(180deg, oklch(100% 0 0 / 0.045), transparent 52%);
  mix-blend-mode: screen;
}

.reel-aura {
  position: absolute;
  z-index: 3;
  top: 20%;
  width: 31%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: var(--aura-opacity);
  box-shadow: 0 0 42px oklch(88% 0.14 78 / 0.3), 0 0 0 1px oklch(92% 0.06 76 / 0.14) inset;
  background: conic-gradient(from 20deg, transparent, oklch(95% 0.05 76 / 0.12), transparent 31% 76%, oklch(88% 0.12 77 / 0.09), transparent);
  mix-blend-mode: screen;
}

.reel-aura-left { left: 10.2%; }
.reel-aura-right { right: 11.4%; }

.reel-vu {
  position: absolute;
  z-index: 5;
  top: 43.4%;
  width: 7.1%;
  height: 25.2%;
  overflow: hidden;
  opacity: var(--vu-opacity);
  background: radial-gradient(ellipse at 50% 70%, oklch(87% 0.18 75 / 0.32), transparent 70%);
  box-shadow: 0 0 20px oklch(79% 0.18 69 / 0.2);
  mix-blend-mode: screen;
}

.reel-vu-left { left: 42.7%; }
.reel-vu-right { left: 50.4%; }

.reel-vu i {
  position: absolute;
  left: 49%;
  bottom: 18%;
  width: 1px;
  height: 58%;
  background: oklch(34% 0.14 29);
  transform: rotate(-25deg);
  transform-origin: 50% 100%;
}

.is-reel-visible .reel-vu-left i { animation: rt707-vu-left 1.6s steps(8, end) infinite; }
.is-reel-visible .reel-vu-right i { animation: rt707-vu-right 1.35s steps(7, end) infinite; }

.reel-pilot {
  position: absolute;
  z-index: 6;
  left: 51.9%;
  top: 46.8%;
  width: 0.72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: oklch(63% 0.28 28);
  box-shadow: 0 0 12px 4px oklch(63% 0.28 28 / 0.68);
  animation: rt707-pilot 2.4s ease-in-out infinite;
}

.reel-tape-path {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: var(--tape-opacity);
  filter: drop-shadow(0 1px 2px oklch(87% 0.12 73 / 0.28));
}

.reel-tape-path path {
  fill: none;
  stroke: oklch(84% 0.06 70);
  stroke-width: 1.2;
  stroke-dasharray: 5 9;
  animation: rt707-tape 1.4s linear infinite;
}

.reel-callout {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  opacity: var(--callout-opacity);
  color: oklch(78% 0.06 76);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translateY(var(--callout-y));
}

.reel-callout span {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border: 1px solid oklch(81% 0.1 76 / 0.34);
  border-radius: 50%;
  color: var(--amber);
}

.reel-callout::after {
  content: "";
  width: clamp(2rem, 6vw, 7rem);
  height: 1px;
  background: linear-gradient(90deg, oklch(80% 0.08 75 / 0.46), transparent);
}

.reel-callout-left { left: 8%; top: 43%; }
.reel-callout-center { left: 43%; bottom: 9%; }
.reel-callout-right { right: 5%; top: 38%; flex-direction: row-reverse; }
.reel-callout-right::after { transform: scaleX(-1); }

.reel-story-footer {
  position: absolute;
  z-index: 9;
  left: clamp(1rem, 4vw, 4rem);
  right: clamp(1rem, 4vw, 4rem);
  bottom: clamp(1rem, 3vh, 2rem);
  display: grid;
  grid-template-columns: auto minmax(6rem, 1fr) auto;
  align-items: center;
  gap: 1.2rem;
  color: oklch(64% 0.045 75);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reel-story-footer p { margin: 0; }
.reel-story-footer p span { color: var(--amber); }

.reel-progress {
  height: 1px;
  overflow: hidden;
  background: oklch(82% 0.07 74 / 0.18);
}

.reel-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--reel-progress));
  transform-origin: left;
  background: linear-gradient(90deg, var(--red), var(--amber));
  box-shadow: 0 0 16px var(--amber);
}

@keyframes rt707-vu-left {
  0%, 100% { transform: rotate(-25deg); }
  18% { transform: rotate(12deg); }
  31% { transform: rotate(-4deg); }
  55% { transform: rotate(22deg); }
  74% { transform: rotate(-15deg); }
}

@keyframes rt707-vu-right {
  0%, 100% { transform: rotate(-19deg); }
  22% { transform: rotate(19deg); }
  43% { transform: rotate(3deg); }
  66% { transform: rotate(25deg); }
  82% { transform: rotate(-9deg); }
}

@keyframes rt707-pilot {
  0%, 100% { opacity: 0.68; }
  50% { opacity: 1; }
}

@keyframes rt707-tape {
  to { stroke-dashoffset: -28; }
}

@media (max-width: 760px) {
  .reel-story { min-height: 190svh; }
  .reel-story-heading {
    top: 7.4rem;
    left: 1rem;
    right: 1rem;
    max-width: none;
  }
  .reel-story-heading h2 { font-size: clamp(4.3rem, 19.5vw, 7rem); line-height: 0.8; }
  .reel-story-lede { max-width: 25rem; font-size: 0.58rem; }
  .reel-machine {
    bottom: 8%;
    width: 164vw;
    max-width: none;
    transform-origin: 50% 58%;
  }
  .reel-machine-halo { bottom: 14%; width: 150vw; }
  .reel-machine-shadow { bottom: 12%; width: 120vw; }
  .reel-callout { display: none; }
  .reel-story-footer { grid-template-columns: 1fr; gap: 0.55rem; }
  .reel-story-footer p:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reel-story {
    min-height: auto;
    --reel-progress: 0.64;
    --machine-scale: 0.94;
    --machine-y: 1vh;
    --machine-light: 0.38;
    --machine-clarity: 1;
    --heading-opacity: 1;
    --callout-opacity: 0.7;
    --callout-y: 0px;
  }
  .reel-story-sticky { position: relative; min-height: 100svh; }
  .reel-machine-photo { display: none; }
  .reel-story.is-reel-visible .reel-machine-poster { opacity: 1; }
  .reel-vu i,
  .reel-pilot,
  .reel-tape-path path { animation: none !important; }
}

/* Archive editorial pass */
.archive-section .archive-construction-body {
  display: flex;
  flex-direction: column;
  gap: clamp(1.15rem, 2.4vw, 2.5rem);
}

.archive-section .archive-construction-body > .section-kicker { order: 0; }
.archive-section .archive-construction-body > .section-heading { order: 1; }
.archive-section .archive-reading-order { order: 2; }
.archive-section .archive-bio { order: 3; }
.archive-section .archive-grid { order: 4; }
.archive-section .archive-deck { order: 5; }
.archive-section .influences-archive { order: 6; }
.archive-section .crate-influences { order: 7; }
.archive-section .tribute-vault { order: 8; }

.archive-section .archive-construction-body > .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.72fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: end;
  margin: 0;
  padding: clamp(1rem, 2.5vw, 2rem) 0 clamp(1rem, 2vw, 1.6rem);
  border-bottom: 1px solid oklch(82% 0.08 76 / 0.24);
}

.archive-section .archive-construction-body > .section-heading h2 {
  max-width: 11ch;
  color: var(--paper);
  font-size: clamp(4rem, 10vw, 11rem);
  line-height: 0.78;
  text-wrap: balance;
}

.archive-section .archive-construction-body > .section-heading p {
  max-width: 38rem;
  color: oklch(84% 0.045 78);
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  line-height: 1.55;
}

.archive-reading-order {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid oklch(82% 0.08 76 / 0.24);
  background: oklch(82% 0.08 76 / 0.18);
}

.archive-reading-order a {
  display: grid;
  gap: 0.35rem;
  min-height: 5.2rem;
  padding: 0.95rem;
  background:
    linear-gradient(180deg, oklch(14% 0.038 46 / 0.94), oklch(7% 0.022 42 / 0.98)),
    repeating-linear-gradient(0deg, transparent 0 5px, oklch(100% 0 0 / 0.024) 5px 6px);
  color: var(--paper);
  font-family: "Bitcount Prop Single", "IBM Plex Mono", monospace;
  font-size: clamp(0.7rem, 1vw, 0.88rem);
  font-weight: 900;
  text-transform: uppercase;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.archive-reading-order a span {
  color: var(--amber);
}

.archive-reading-order a:hover,
.archive-reading-order a:focus-visible {
  background: var(--amber);
  color: var(--void);
  outline: 0;
}

.archive-reading-order a:hover span,
.archive-reading-order a:focus-visible span {
  color: var(--void);
}

.archive-section .archive-bio,
.archive-section .archive-grid,
.archive-section .archive-deck,
.archive-section .influences-archive,
.archive-section .crate-influences,
.archive-section .tribute-vault {
  margin: 0;
  border-radius: 0;
  scroll-margin-top: 7rem;
}

.archive-section .archive-bio {
  display: grid;
  grid-template-columns: minmax(18rem, 0.43fr) minmax(0, 0.57fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid oklch(82% 0.08 76 / 0.24);
  background: oklch(82% 0.08 76 / 0.16);
}

.archive-section .bio-lead {
  display: grid;
  align-content: center;
  min-height: 100%;
  border: 0;
  background:
    radial-gradient(circle at 16% 4%, oklch(82% 0.16 76 / 0.14), transparent 17rem),
    linear-gradient(180deg, oklch(16% 0.045 46), oklch(8% 0.025 42));
}

.archive-section .bio-lead h3,
.archive-section .crate-copy h3,
.archive-section .influences-archive h2,
.archive-section .tribute-vault-head h3 {
  text-wrap: balance;
}

.archive-section .bio-chapters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: oklch(82% 0.08 76 / 0.12);
}

.archive-section .bio-chapters .archive-open-card {
  min-height: 0;
}

.archive-section .archive-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 0.32fr) minmax(0, 0.36fr) minmax(0, 0.32fr);
  gap: 1px;
  border: 1px solid oklch(82% 0.08 76 / 0.22);
  background: oklch(82% 0.08 76 / 0.14);
}

.archive-section .archive-grid > * {
  min-height: 100%;
  border: 0;
  background:
    linear-gradient(180deg, oklch(14% 0.038 46 / 0.96), oklch(7% 0.022 42 / 0.98)),
    repeating-linear-gradient(0deg, transparent 0 18px, oklch(84% 0.06 76 / 0.035) 18px 19px);
}

.archive-section .archive-photo img {
  min-height: 19rem;
}

.archive-section .archive-deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid oklch(82% 0.08 76 / 0.22);
  background: oklch(82% 0.08 76 / 0.16);
}

.archive-section .archive-deck::before {
  content: "QUICK FILE CARDS";
  grid-column: 1 / -1;
  padding: 0.85rem 1rem;
  background: linear-gradient(180deg, oklch(82% 0.16 76), oklch(62% 0.14 52));
  color: var(--void);
  font: 900 0.9rem/1 "Bitcount Prop Single", "IBM Plex Mono", monospace;
  text-transform: uppercase;
}

.archive-section .influences-archive {
  display: grid;
  grid-template-columns: minmax(18rem, 0.42fr) minmax(0, 0.58fr);
  gap: 1px;
  padding: 0;
  border: 1px solid oklch(82% 0.08 76 / 0.24);
  background: oklch(82% 0.08 76 / 0.16);
}

.archive-section .influences-archive > div:first-child {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 1rem;
  margin: 0;
  padding: clamp(1.2rem, 3vw, 2rem);
  background:
    radial-gradient(circle at 18% 0%, oklch(82% 0.16 76 / 0.12), transparent 18rem),
    linear-gradient(180deg, oklch(15% 0.04 46), oklch(7% 0.022 42));
}

.archive-section .history-console,
.archive-section .influence-ledger {
  margin: 0;
}

.archive-section .history-console {
  border: 0;
}

.archive-section .influence-ledger {
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.archive-section .influence-strip {
  grid-column: 1 / -1;
  margin: 0;
  border-top: 1px solid oklch(82% 0.08 76 / 0.18);
  background: oklch(5% 0.016 42 / 0.66);
}

.archive-section .crate-influences {
  display: grid;
  grid-template-columns: minmax(20rem, 0.34fr) minmax(0, 0.66fr);
  gap: 1px;
  border: 1px solid oklch(82% 0.08 76 / 0.24);
  background: oklch(82% 0.08 76 / 0.16);
}

.archive-section .crate-copy,
.archive-section .record-player {
  min-height: 100%;
  border: 0;
}

.archive-section .record-player {
  grid-template-columns: minmax(15rem, 0.66fr) minmax(0, 1fr);
}

.archive-section .tribute-vault {
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.06), 0 2rem 5rem oklch(0% 0 0 / 0.22);
}

.archive-section .tribute-vault-head {
  grid-template-columns: minmax(0, 0.95fr) minmax(18rem, 0.6fr);
}

@media (max-width: 980px) {
  .archive-section .archive-construction-body > .section-heading,
  .archive-section .archive-bio,
  .archive-section .archive-grid,
  .archive-section .influences-archive,
  .archive-section .crate-influences,
  .archive-section .record-player,
  .archive-section .tribute-vault-head {
    grid-template-columns: 1fr;
  }

  .archive-reading-order,
  .archive-section .bio-chapters,
  .archive-section .archive-deck,
  .archive-section .influence-ledger {
    grid-template-columns: 1fr;
  }
}

/* Archive timeline desk */
.archive-section .archive-timeline-desk { order: 3; }
.archive-section .archive-bio { order: 4; }
.archive-section .archive-grid { order: 5; }
.archive-section .archive-deck { order: 6; }
.archive-section .influences-archive { order: 7; }
.archive-section .crate-influences { order: 8; }
.archive-section .tribute-vault { order: 9; }

.archive-timeline-desk {
  display: grid;
  grid-template-columns: minmax(16rem, 0.38fr) minmax(0, 0.62fr);
  gap: 1px;
  position: relative;
  overflow: visible;
  border: 1px solid oklch(82% 0.08 76 / 0.25);
  background:
    linear-gradient(90deg, oklch(82% 0.08 76 / 0.16), transparent 40%),
    oklch(82% 0.08 76 / 0.12);
}

.archive-timeline-desk::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 16%, oklch(78% 0.15 70 / 0.14), transparent 18rem),
    repeating-linear-gradient(0deg, transparent 0 13px, oklch(94% 0.03 82 / 0.028) 13px 14px);
  mix-blend-mode: screen;
}

.archive-timeline-sticky {
  position: sticky;
  top: 5.8rem;
  align-self: start;
  min-height: min(78svh, 46rem);
  display: grid;
  align-content: space-between;
  gap: clamp(1.2rem, 2vw, 2rem);
  padding: clamp(1.1rem, 2.6vw, 2rem);
  background:
    radial-gradient(circle at 10% 0%, oklch(80% 0.16 74 / 0.16), transparent 16rem),
    linear-gradient(180deg, oklch(18% 0.047 46 / 0.98), oklch(7% 0.022 42 / 0.99));
  z-index: 1;
}

.archive-timeline-sticky h3 {
  max-width: 9ch;
  color: var(--paper);
  font-size: clamp(3.4rem, 7vw, 7.8rem);
  line-height: 0.82;
  text-transform: uppercase;
}

.archive-timeline-sticky p {
  max-width: 34ch;
  color: oklch(84% 0.045 78);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.55;
}

.archive-timeline-progress {
  position: relative;
  overflow: hidden;
  height: 0.55rem;
  background:
    repeating-linear-gradient(90deg, oklch(100% 0 0 / 0.14) 0 1px, transparent 1px 13px),
    oklch(5% 0.018 42 / 0.92);
  border: 1px solid oklch(82% 0.08 76 / 0.2);
}

.archive-timeline-progress span {
  display: block;
  width: var(--archive-progress, 14%);
  height: 100%;
  background: linear-gradient(90deg, oklch(86% 0.18 82), oklch(66% 0.16 54));
  box-shadow: 0 0 1.5rem oklch(80% 0.16 74 / 0.45);
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.archive-timeline-status {
  display: grid;
  gap: 0.55rem;
  padding-top: 1rem;
  border-top: 1px solid oklch(82% 0.08 76 / 0.2);
}

.archive-timeline-status span {
  color: var(--amber);
  font-family: "Bitcount Prop Single", "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.archive-timeline-status strong {
  color: var(--paper);
  font-size: clamp(1.2rem, 2vw, 1.85rem);
  line-height: 1;
  text-transform: uppercase;
}

.archive-timeline-visual {
  --archive-track: 0%;
  position: relative;
  display: grid;
  gap: clamp(0.85rem, 1.5vw, 1.2rem);
  padding: clamp(1.1rem, 2.6vw, 2rem);
  background:
    linear-gradient(180deg, oklch(11% 0.032 45 / 0.98), oklch(6% 0.019 42 / 0.98)),
    repeating-linear-gradient(0deg, transparent 0 6px, oklch(96% 0.02 85 / 0.025) 6px 7px);
}

.archive-timeline-visual::before,
.archive-timeline-visual::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.archive-timeline-visual::before {
  inset: clamp(2rem, 3vw, 3rem) auto clamp(2rem, 3vw, 3rem) clamp(1.75rem, 3vw, 2.45rem);
  width: 2px;
  background: linear-gradient(180deg, transparent, oklch(80% 0.14 76 / 0.35), transparent);
}

.archive-timeline-visual::after {
  top: clamp(2rem, 3vw, 3rem);
  bottom: auto;
  left: clamp(1.75rem, 3vw, 2.45rem);
  width: 2px;
  height: var(--archive-track);
  background: linear-gradient(180deg, oklch(86% 0.18 82), oklch(62% 0.15 55));
  box-shadow: 0 0 1.2rem oklch(82% 0.16 76 / 0.42);
  transition: height 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.archive-era-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(6.2rem, 0.23fr) minmax(0, 0.77fr);
  gap: 0.5rem clamp(0.9rem, 2vw, 1.5rem);
  min-height: clamp(7rem, 12vw, 10.5rem);
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1rem, 2.3vw, 1.6rem) clamp(1rem, 2vw, 1.35rem) clamp(3rem, 4.5vw, 4.4rem);
  border: 1px solid oklch(82% 0.08 76 / 0.18);
  border-radius: 0;
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  transform: perspective(900px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) translateZ(0);
  transform-style: preserve-3d;
  background:
    linear-gradient(90deg, oklch(82% 0.16 76 / 0.08), transparent 38%),
    radial-gradient(circle at 96% 18%, oklch(80% 0.16 72 / 0.1), transparent 12rem),
    linear-gradient(180deg, oklch(15% 0.04 46 / 0.96), oklch(7% 0.022 42 / 0.99));
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.05);
  transition:
    border-color 220ms var(--ease),
    background 220ms var(--ease),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms var(--ease);
}

.archive-era-card::before {
  content: "";
  position: absolute;
  left: clamp(1.25rem, 2.45vw, 1.9rem);
  top: 50%;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  background: oklch(15% 0.04 46);
  border: 1px solid oklch(84% 0.15 76 / 0.72);
  box-shadow: 0 0 0 0.55rem oklch(7% 0.022 42), 0 0 1.1rem oklch(82% 0.16 76 / 0.24);
  transform: translateY(-50%);
}

.archive-era-card::after {
  content: "OPEN FILE";
  position: absolute;
  right: 1rem;
  bottom: 0.85rem;
  color: oklch(84% 0.05 78 / 0.58);
  font-family: "Bitcount Prop Single", "IBM Plex Mono", monospace;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.archive-era-card:hover,
.archive-era-card:focus-visible,
.archive-era-card.is-active {
  border-color: oklch(84% 0.16 76 / 0.62);
  background:
    linear-gradient(90deg, oklch(82% 0.16 76 / 0.18), transparent 45%),
    radial-gradient(circle at 96% 18%, oklch(80% 0.16 72 / 0.2), transparent 14rem),
    linear-gradient(180deg, oklch(19% 0.052 48 / 0.98), oklch(8% 0.024 42 / 0.99));
  box-shadow: 0 1.4rem 3rem oklch(0% 0 0 / 0.28), inset 0 1px 0 oklch(100% 0 0 / 0.08);
  outline: 0;
}

.archive-era-card.is-active::before {
  background: var(--amber);
  box-shadow: 0 0 0 0.55rem oklch(7% 0.022 42), 0 0 1.35rem oklch(82% 0.16 76 / 0.72);
}

.archive-era-date {
  color: var(--amber);
  font-family: "Bitcount Prop Single", "IBM Plex Mono", monospace;
  font-size: clamp(0.82rem, 1.3vw, 1rem);
  font-weight: 900;
  text-transform: uppercase;
}

.archive-era-card strong {
  display: block;
  max-width: 24ch;
  color: var(--paper);
  font-size: clamp(1.5rem, 3.4vw, 3.6rem);
  line-height: 0.9;
  text-transform: uppercase;
  text-wrap: balance;
}

.archive-era-card em {
  grid-column: 2;
  max-width: 62ch;
  color: oklch(84% 0.045 78);
  font-style: normal;
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  line-height: 1.5;
}

.archive-era-card:not(.is-active) em {
  max-height: 2.95em;
  overflow: hidden;
}

.archive-era-card.is-active em {
  color: oklch(90% 0.046 78);
}

@media (max-width: 980px) {
  .archive-timeline-desk {
    grid-template-columns: 1fr;
  }

  .archive-timeline-sticky {
    position: relative;
    top: auto;
    min-height: 0;
  }

  .archive-timeline-sticky h3 {
    max-width: none;
  }

  .archive-era-card {
    grid-template-columns: 1fr;
    padding-left: clamp(3rem, 10vw, 4rem);
  }

  .archive-era-card em {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .archive-era-card,
  .archive-timeline-progress span,
  .archive-timeline-visual::after {
    transition: none !important;
  }
}

/* Late layout corrections: keep big editorial titles horizontal and remove jumpy archive sizing. */
.tour-section .section-heading h2,
.music-section .section-heading h2,
.gallery-section .section-heading h2,
.machines .section-heading h2,
.merch-section .section-heading h2,
.archive-section .section-heading h2,
.reel-story-heading h2,
.tribute-vault-head h3,
.archive-timeline-sticky h3,
.archive-section .bio-lead h3,
.archive-section .crate-copy h3,
.archive-section .influences-archive h2 {
  max-width: none;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

.reel-story-heading {
  max-width: min(92rem, 88vw);
}

.reel-story-heading h2 {
  font-size: clamp(4.2rem, 7.6vw, 11.2rem);
}

.archive-timeline-sticky h3 {
  max-width: 14ch;
  font-size: clamp(3rem, 5.5vw, 6.8rem);
}

.archive-era-card strong {
  max-width: 34ch;
}

.archive-section .record-player {
  min-height: clamp(38rem, 48vw, 45rem);
}

.archive-section .record-copy {
  min-height: clamp(34rem, 42vw, 40rem);
}

.archive-section .record-copy h3 {
  max-width: 15ch;
  min-height: 1.72em;
  font-size: clamp(3.4rem, 6.4vw, 7rem);
}

.archive-section .record-copy p {
  min-height: 6.1em;
}

.site-footer .footer-reels:has(.footer-cassette-player) {
  min-height: clamp(35rem, 48vw, 44rem);
}

.site-footer .footer-cassette-player {
  width: min(100%, 46rem);
  min-height: clamp(34rem, 46vw, 43rem);
}

.site-footer .footer-cassette-player .cassette-art {
  z-index: 1;
  bottom: calc(-1% + 20px);
  width: 116%;
  transform: translateX(-50%);
}

.site-footer .footer-cassette-player .cassette-reels,
.site-footer .footer-cassette-player .cassette-window {
  z-index: 2;
}

/* Align the animated reel overlays to the printed cassette hubs. */
.site-footer .footer-cassette-player .cassette-reels span {
  top: 61.2%;
}

.site-footer .footer-cassette-player .cassette-reels .left {
  left: 31.3%;
}

.site-footer .footer-cassette-player .cassette-reels .right {
  left: 65.7%;
}

.site-footer .footer-cassette-player .cassette-embed {
  z-index: 20;
  top: calc(0.9rem + 50px);
  width: 92%;
  height: 352px;
  min-height: 352px;
}

.site-footer .footer-cassette-player .cassette-embed::before {
  display: none;
}

@keyframes rt707-tape {
  to { stroke-dashoffset: 28; }
}

@media (max-width: 760px) {
  .reel-story-heading h2,
  .section-heading h2,
  .archive-section .archive-construction-body > .section-heading h2 {
    font-size: clamp(3.1rem, 14vw, 5.4rem);
    line-height: 0.9;
    white-space: normal;
  }

  .site-footer .footer-reels:has(.footer-cassette-player) {
    min-height: clamp(32rem, 134vw, 43rem);
  }

  .site-footer .footer-cassette-player {
    min-height: clamp(31rem, 126vw, 42rem);
  }

  .site-footer .footer-cassette-player .cassette-embed {
    height: 352px;
    min-height: 352px;
  }

  .reel-hero-break {
    min-height: 72svh;
  }

  .reel-break-copy strong {
    max-width: 10ch;
    font-size: clamp(3rem, 17vw, 5.4rem);
  }

}

/* Press folder pass: filterable, editorial interview archive. */
.interviews-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 16%, oklch(64% 0.12 72 / 0.14), transparent 28rem),
    linear-gradient(180deg, oklch(12% 0.028 44 / 0.96), oklch(6% 0.018 40 / 0.98));
}

.interviews-section::before {
  content: "";
  position: absolute;
  inset: clamp(0.75rem, 2vw, 1.5rem);
  pointer-events: none;
  border: 1px solid oklch(82% 0.07 76 / 0.18);
  background:
    linear-gradient(90deg, transparent 0 calc(100% - 2.7rem), oklch(82% 0.08 75 / 0.055) calc(100% - 2.7rem)),
    repeating-linear-gradient(0deg, transparent 0 27px, oklch(100% 0 0 / 0.018) 28px);
}

.interviews-section > * {
  position: relative;
  z-index: 1;
}

.interviews-section .section-heading {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid oklch(82% 0.08 76 / 0.22);
}

.interviews-section #interviews-title {
  max-width: none;
  white-space: nowrap;
}

.interview-filter-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  padding: 0.7rem;
  border: 1px solid oklch(82% 0.07 76 / 0.22);
  border-radius: 0.45rem;
  background:
    linear-gradient(180deg, oklch(20% 0.035 48 / 0.76), oklch(8% 0.02 42 / 0.88)),
    repeating-linear-gradient(90deg, transparent 0 18px, oklch(100% 0 0 / 0.025) 19px);
  box-shadow: inset 0 1px oklch(100% 0 0 / 0.08), 0 18px 38px oklch(0% 0 0 / 0.24);
}

.interview-filter-panel button {
  min-height: 42px;
  padding: 0.62rem 0.82rem;
  border: 1px solid oklch(80% 0.09 76 / 0.28);
  border-radius: 0.28rem;
  background: linear-gradient(180deg, oklch(15% 0.03 45), oklch(8% 0.02 42));
  color: var(--paper);
  cursor: pointer;
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease);
}

.interview-filter-panel button:hover,
.interview-filter-panel button:focus-visible {
  border-color: oklch(84% 0.14 78 / 0.7);
  color: var(--amber);
  transform: translateY(-1px);
}

.interview-filter-panel button.active {
  background: linear-gradient(180deg, oklch(80% 0.14 78), oklch(61% 0.13 62));
  color: var(--void);
  box-shadow: inset 0 1px oklch(100% 0 0 / 0.28), 0 0 1.2rem oklch(76% 0.14 76 / 0.22);
}

.interview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  perspective: 1200px;
}

.interview-card,
.interview-card.feature {
  grid-column: auto;
  min-height: clamp(25rem, 31vw, 34rem);
  padding: clamp(1rem, 2vw, 1.45rem);
  border-color: oklch(82% 0.08 76 / 0.32);
  border-radius: 0.38rem 0.38rem 0.62rem 0.62rem;
  background:
    linear-gradient(180deg, oklch(25% 0.04 52 / 0.9), oklch(8% 0.022 42 / 0.98));
  box-shadow:
    inset 0 1px oklch(100% 0 0 / 0.08),
    0 18px 40px oklch(0% 0 0 / 0.34);
  transform-origin: 50% 100%;
}

.interview-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: clamp(0.85rem, 1.4vw, 1.2rem);
  width: min(9rem, 46%);
  height: 1.15rem;
  border: 1px solid oklch(83% 0.09 78 / 0.38);
  border-top: 0;
  border-radius: 0 0 0.28rem 0.28rem;
  background: linear-gradient(180deg, oklch(78% 0.12 78), oklch(50% 0.09 58));
  box-shadow: inset 0 -1px oklch(0% 0 0 / 0.18);
}

.interview-card::after {
  content: "PRESS FILE";
  position: absolute;
  z-index: 3;
  top: 0.23rem;
  left: clamp(1.15rem, 1.7vw, 1.55rem);
  color: oklch(10% 0.02 42);
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.interview-card img {
  opacity: 0.5;
  filter: sepia(0.18) saturate(0.72) contrast(1.12) brightness(0.72);
}

.interview-card:hover img {
  opacity: 0.62;
  transform: scale(1.025);
}

.interview-card span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 0.58rem;
  padding: 0.28rem 0.42rem;
  border: 1px solid oklch(82% 0.08 76 / 0.26);
  background: oklch(6% 0.018 40 / 0.72);
  color: var(--amber);
  font-family: "Bitcount Prop Single", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.interview-card h4 {
  text-shadow: 0 2px 0 oklch(0% 0 0 / 0.55);
  text-wrap: balance;
}

.interview-card p {
  max-width: 38rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.interview-card.is-filtered-out {
  display: none;
}

.interviews-section.is-filtering .interview-card:not(.is-filtered-out) {
  animation: interviewFolderIn 360ms var(--ease) both;
}

@keyframes interviewFolderIn {
  from {
    opacity: 0;
    transform: translateY(10px) rotateX(5deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
}

@media (max-width: 1180px) {
  .interview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .interviews-section #interviews-title {
    white-space: normal;
  }

  .interview-filter-panel {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.85rem;
  }

  .interview-filter-panel button {
    flex: 0 0 auto;
  }

  .interview-grid {
    grid-template-columns: 1fr;
  }

  .interview-card,
  .interview-card.feature {
    min-height: 25rem;
  }
}

.next-show-mobile-card {
  display: none;
}

@media (max-width: 760px) {
  :root { --mobile-header-height: 8.65rem; }

  html {
    scroll-padding-top: calc(var(--mobile-header-height) + 0.7rem);
  }

  body {
    overflow-x: hidden;
    padding-top: var(--mobile-header-height);
  }

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    padding: 0.62rem 0.72rem;
  }

  .brand-mark img {
    width: clamp(7rem, 36vw, 9rem);
  }

  .nav-toggle {
    min-width: 5.4rem;
    min-height: 44px;
    padding-inline: 0.75rem;
  }

  .header-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 0.5rem;
  }

  .header-epk,
  .sound-toggle {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0.58rem 0.55rem;
    font-size: 0.74rem;
    line-height: 1;
    white-space: normal;
  }

  .header-epk::before {
    content: none;
  }

  .header-epk::after {
    display: block;
    font-size: 0.56rem;
  }

  .sound-toggle {
    gap: 0.45rem;
  }

  /* Phone visitors get the live essentials before the deeper archive. */
  main {
    display: flex;
    flex-direction: column;
  }

  main > .hero { order: 0; }
  main > .quick-board { order: 1; }
  main > #music { order: 2; }
  main > #tour { order: 3; }
  main > #machines { order: 4; }
  main > #bio { order: 5; }
  main > .reel-hero-break { order: 6; }
  main > #releases { order: 7; }
  main > #residency { order: 8; }
  main > #gallery { order: 9; }
  main > #kaoz { order: 10; }
  main > #merch { order: 11; }
  main > #interviews { order: 12; }
  main > #archive { order: 13; }

  .hero {
    min-height: auto;
    min-height: unset;
    grid-template-columns: 1fr;
    align-items: start;
    padding: 0.9rem 1rem 1.1rem;
  }

  .cassette-embed {
    top: 0.7rem;
    height: 282px;
  }

  .studio-mixer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-mixer > .panel-label { grid-column: 1 / -1; }

  .hero-media {
    position: absolute;
    inset: 0;
  }

  .hero-copy {
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 0;
    padding: 1rem;
    background:
      linear-gradient(180deg, oklch(10% 0.032 42 / 0.9), oklch(4% 0.02 42 / 0.82)),
      repeating-linear-gradient(90deg, transparent 0 14px, oklch(80% 0.1 70 / 0.035) 15px);
    box-shadow: 0 1rem 2.8rem oklch(0% 0 0 / 0.44);
  }

  .hero-copy h1 {
    max-width: 100%;
    font-size: clamp(3.8rem, 18vw, 5.2rem);
    line-height: 0.86;
    overflow-wrap: normal;
    word-break: normal;
  }

  .hero-lede {
    margin-top: 0.7rem;
    color: oklch(88% 0.035 82);
    font-size: 1rem;
    line-height: 1.42;
  }

  .hero-actions {
    gap: 0.65rem;
    margin-top: 0.9rem;
  }

  .hero-actions .button {
    min-height: 3.15rem;
    font-size: 0.9rem;
  }

  .hero-actions .button.primary {
    background: linear-gradient(180deg, var(--amber), oklch(65% 0.15 50)) !important;
    color: var(--void) !important;
    border-color: transparent !important;
  }

  .hero-actions .button.ghost {
    background: oklch(8% 0.025 42 / 0.84) !important;
    color: var(--paper) !important;
    border-color: oklch(83% 0.1 76 / 0.32) !important;
  }

  .now-panel {
    width: 100%;
    margin-top: 0.9rem;
  }

  .quick-board.social-board {
    padding-inline: 1rem;
  }

  .social-console {
    width: min(100%, 21rem);
    margin-inline: auto;
  }

  .social-icon-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(4.4rem, 1fr));
    gap: 0.75rem;
    justify-items: stretch;
  }

  .quick-board.social-board .social-icon-row a {
    width: 100%;
    min-height: 4.2rem;
  }

  .quick-board.social-board img {
    width: 1.7rem;
    height: 1.7rem;
  }

  .tour-section {
    padding-inline: 1rem;
  }

  .next-show-board {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
  }

  .next-show-flyer {
    min-height: auto;
    padding: 1rem 1rem 0;
  }

  .next-show-flyer img {
    width: min(100%, 16rem);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.4rem;
  }

  .split-flap-board {
    display: none;
  }

  .next-show-mobile-card {
    display: grid;
    justify-items: center;
    gap: 0.42rem;
    padding: 1rem 1rem 1.15rem;
    text-align: center;
    background:
      linear-gradient(180deg, oklch(16% 0.04 42 / 0.95), oklch(7% 0.024 42 / 0.98)),
      repeating-linear-gradient(90deg, transparent 0 14px, oklch(100% 0 0 / 0.028) 14px 15px);
  }

  .next-show-mobile-card time {
    display: inline-grid;
    min-width: 5.25rem;
    min-height: 3.15rem;
    place-items: center;
    border: 1px solid oklch(83% 0.1 76 / 0.32);
    border-radius: 0.42rem;
    color: var(--amber);
    font-family: "Bitcount Prop Single", monospace;
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .next-show-mobile-card h3 {
    margin: 0;
    color: var(--paper);
    font-size: clamp(1.35rem, 7vw, 2.25rem);
    line-height: 0.98;
    text-wrap: balance;
  }

  .next-show-mobile-card p {
    margin: 0;
    color: var(--subtle);
    font-size: 0.98rem;
    line-height: 1.35;
  }

  .next-show-ticket {
    min-height: 3.35rem;
    width: 100%;
    border-radius: 0;
  }

  .next-show-actions {
    width: 100%;
    min-width: 0;
    border-left: 0;
  }

  .show-share {
    padding: 0.75rem 1rem 1rem;
  }

  .show-share-trigger {
    width: min(100%, 12rem);
    min-height: 2.75rem;
  }

  .show-share-panel {
    right: 50%;
    bottom: 0.92rem;
    z-index: 5;
    transform: translate3d(50%, 0, 0) scaleX(0.68);
    transform-origin: center;
  }

  .show-share.is-open .show-share-panel {
    transform: translate3d(50%, 0, 0) scaleX(1);
  }

  .tour-disclaimer {
    width: 100%;
    margin: 0.55rem auto 0;
    padding: 0.75rem 0.85rem;
    font-size: 0.84rem;
    line-height: 1.45;
    text-align: center;
  }

  .show-console {
    margin-top: 0.8rem;
  }

  .show-row,
  .show-row:last-child {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.75rem;
    min-height: auto;
    padding: 1rem;
    text-align: center;
  }

  .show-row img,
  .show-row:last-child img {
    grid-row: auto;
    width: min(100%, 10.5rem);
    height: 10.5rem;
    object-fit: cover;
  }

  .show-row time {
    grid-column: auto;
    grid-row: auto;
    justify-self: center;
  }

  .show-row div,
  .show-row a {
    grid-column: auto;
  }

  .show-row h3 {
    font-size: clamp(1.35rem, 6vw, 2rem);
    line-height: 1;
    text-wrap: balance;
  }

  .show-row p {
    justify-content: center;
    text-align: center;
  }

  .show-row .ticket-button {
    width: min(100%, 14rem);
    min-height: 3.1rem;
  }

  .music-section {
    padding-inline: 1rem;
  }

  .tv-wall {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .tv-card.feature {
    grid-column: auto;
  }

  .retro-tv-card {
    transform: none;
  }

  .retro-tv-set {
    aspect-ratio: auto;
    padding: 0.72rem;
  }

  .retro-tv-face {
    grid-template-columns: 1fr;
  }

  .retro-tv-side-panel {
    display: none;
  }

  .retro-tv-bezel {
    width: 100%;
    min-height: 13.5rem;
    padding: 0.75rem;
  }

  .retro-tv-bottom {
    grid-template-columns: 1fr auto auto auto 1fr;
  }

  .tv-card:not(.feature) .tv-set {
    width: min(100%, 24rem);
    margin-inline: auto;
    aspect-ratio: 1784 / 1414;
  }

  .tv-card:not(.feature) .tv-screen {
    left: 15.5%;
    top: 16.4%;
    width: 69%;
    height: 64.8%;
  }

  .tv-card:not(.feature) .tv-frame {
    object-fit: contain;
  }

  .tv-card a {
    justify-self: center;
    max-width: 100%;
    text-align: center;
    line-height: 1.25;
  }
}

/* Mobile final overrides: visible section rail, full Spotify and clean footer. */
@media (max-width: 760px) {
  html { scroll-padding-top: calc(var(--mobile-header-height) + 4.2rem); }

  .site-header .nav-toggle,
  .site-header .main-nav.vintage-nav { display: none !important; }

  .mobile-section-dock {
    position: sticky;
    top: var(--mobile-header-height);
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 3.55rem;
    padding: 0.45rem 0.7rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border-bottom: 1px solid oklch(82% 0.1 76 / 0.24);
    background: oklch(9% 0.026 43 / 0.97);
    box-shadow: 0 0.7rem 1.4rem oklch(0% 0 0 / 0.2);
    scrollbar-width: none;
  }

  .mobile-section-dock::-webkit-scrollbar { display: none; }
  .mobile-section-dock-label {
    flex: 0 0 auto;
    padding-right: 0.15rem;
    color: var(--amber);
    font: 800 0.56rem/1 "IBM Plex Mono", monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .mobile-section-dock a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.32rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.68rem;
    border: 1px solid oklch(78% 0.08 72 / 0.34);
    border-radius: 999px;
    background: linear-gradient(180deg, oklch(24% 0.038 48), oklch(12% 0.025 42));
    color: oklch(91% 0.04 82);
    font: 800 0.66rem/1 "IBM Plex Mono", monospace;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mobile-section-dock a b {
    display: grid;
    width: 1.2rem;
    height: 1.2rem;
    place-items: center;
    border: 1px solid oklch(81% 0.13 76 / 0.52);
    border-radius: 50%;
    color: var(--amber);
    font-size: 0.47rem;
  }

  main > #tour { order: 2; }
  main > #music { order: 3; }

  .hero .compact-cassette { min-height: 24rem; }
  #spotify-hero-embed { height: 352px; min-height: 352px; }

  .site-footer .footer-reels:has(.footer-cassette-player) {
    min-height: 0;
    padding: 0;
    background: none;
  }

  .site-footer .footer-cassette-player {
    width: 100%;
    min-height: 352px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .site-footer .footer-cassette-player .cassette-art,
  .site-footer .footer-cassette-player .cassette-reels,
  .site-footer .footer-cassette-player .cassette-window { display: none; }

  .site-footer .footer-cassette-player .cassette-embed {
    position: relative;
    inset: auto;
    width: 100%;
    height: 352px;
    min-height: 352px;
    transform: none;
  }
}

/* Mobile stability pass: retain the sticky section rail, but let the page itself
   use native block flow and native touch scrolling. */
@media (max-width: 760px) {
  html {
    scroll-behavior: auto;
    overscroll-behavior-y: auto;
  }

  body {
    overscroll-behavior-y: auto;
    touch-action: pan-y;
  }

  main {
    display: block;
  }

  main > .hero,
  main > .quick-board,
  main > #music,
  main > #tour,
  main > #machines,
  main > #bio,
  main > .reel-hero-break,
  main > #releases,
  main > #residency,
  main > #gallery,
  main > #kaoz,
  main > #merch,
  main > #interviews,
  main > #archive {
    order: initial;
  }
}

/* Final phone navigation: the fixed header and its section rail read as one
   two-level console. */
@media (max-width: 760px) {
  :root { --mobile-header-height: 8.65rem; }

  html { scroll-padding-top: calc(var(--mobile-header-height) + 4.2rem); }

  body {
    padding-top: var(--mobile-header-height);
    touch-action: auto;
  }

  /* `hidden` creates a scroll container in some mobile engines and breaks
     sticky descendants. `clip` keeps horizontal overflow out of view without
     taking ownership of vertical scrolling. */
  html,
  body {
    overflow-x: clip;
    overflow-y: visible;
  }

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }

  .mobile-section-dock {
    top: var(--mobile-header-height);
    z-index: 99;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }

  /* Live sets are desktop-only; Kerri's Spotify player in the hero stays. */
  #music,
  .mobile-section-dock a[href="#music"] { display: none; }
}

/* Hero cassette: its artwork sits below the Spotify embed. Centre the moving
   reels and the tape line on the printed hubs, not on the player container. */
.hero .compact-cassette .cassette-reels span {
  top: 60.5%;
}

.hero .compact-cassette .cassette-reels .left {
  left: 34.1%;
}

.hero .compact-cassette .cassette-reels .right {
  left: 66.8%;
}

.hero .compact-cassette .cassette-window {
  top: 56.4%;
}