/* ============================================================
   KARAOKE VINYL — style.css
   Warm-black studio / neon ON AIR / pressed-vinyl aesthetic
   ============================================================ */

:root {
  --ink: #0b0806;
  --ink-2: #14100b;
  --ink-3: #1d1710;
  --cream: #f4ecdc;
  --cream-dim: rgba(244, 236, 220, .58);
  --cream-faint: rgba(244, 236, 220, .28);
  --line: rgba(244, 236, 220, .12);
  --amber: #c98d4f;
  --brass: #d9a45f;
  --red: #ff4d5e;
  --red-deep: #d2333f;
  --cyan: #7de6ff;
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-script: "Yellowtail", cursive;
  --font-body: "Manrope", system-ui, sans-serif;
  --nav-h: 76px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--red); color: var(--ink); }

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }

.wrap { width: min(1180px, 92vw); margin-inline: auto; }
.br-desk { display: none; }
@media (min-width: 720px) { .br-desk { display: inline; } }

.script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--red);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  letter-spacing: .01em;
}

/* hide chrome until loaded — entrance owns the reveal */
body:not(.is-loaded) .nav,
body:not(.is-loaded) .sound-toggle,
body:not(.is-loaded) .progress-line { opacity: 0; pointer-events: none; }

/* ============ LOADER ============ */
.loader {
  position: fixed; inset: 0; z-index: 100;
  background: #070503;
  display: grid; place-items: center;
  align-content: center; gap: 44px;
}
.loader.is-done { pointer-events: none; }

.loader-record { width: min(320px, 62vw); aspect-ratio: 1; }
.loader-disc {
  position: relative; width: 100%; height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      #241d15 0 18.5%,
      #0e0b08 19% 20%,
      #17120c 20.5% 21.5%,
      #100c08 22% 61%,
      #191410 61.5% 62.5%,
      #100c08 63% 96%,
      #05040388 97% 100%),
    repeating-radial-gradient(circle at 50% 50%,
      #0f0b08 0 3px, #161009 3px 4px);
  box-shadow:
    0 0 0 1px rgba(244,236,220,.06),
    0 30px 80px -20px rgba(0,0,0,.9),
    inset 0 0 60px rgba(0,0,0,.55);
  animation: disc-spin 5.4s linear infinite;
}
@keyframes disc-spin { to { transform: rotate(360deg); } }

.loader-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader-ring text {
  font-family: var(--font-body); font-weight: 800;
  font-size: 14px; letter-spacing: .32em;
  fill: var(--cream); opacity: .92;
}
.loader-label {
  position: absolute; inset: 31%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #ff6a76, var(--red-deep) 68%);
  display: grid; place-items: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 34px rgba(255, 77, 94, .28);
}
.loader-label img { height: 78%; width: auto; filter: drop-shadow(0 1px 4px rgba(0,0,0,.35)); }
.loader-hole {
  position: absolute; left: 50%; top: 50%;
  width: 4.5%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: #070503;
  box-shadow: 0 0 0 2px rgba(0,0,0,.6);
}

.loader-meta {
  display: grid; justify-items: center; gap: 6px;
  font-family: var(--font-body);
}
.loader-pct {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  letter-spacing: .04em; line-height: 1;
}
.loader-note { color: var(--cream-dim); font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; }

/* ============ PROGRESS LINE ============ */
.progress-line {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  background: linear-gradient(90deg, var(--red), #ff8d64);
  transform-origin: 0 50%; transform: scaleX(0);
  transition: opacity .5s;
}
.progress-line::after {
  content: ""; position: absolute; right: -3px; top: 50%;
  width: 7px; height: 7px; border-radius: 50%;
  transform: translateY(-50%);
  background: #ffb3ba;
  box-shadow: 0 0 8px 2px rgba(255, 77, 94, .8), 0 0 22px 6px rgba(255, 77, 94, .35);
}

/* ============ NAV ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: clamp(18px, 3.4vw, 44px);
  transition: background .45s, border-color .45s, backdrop-filter .45s, opacity .5s;
  border-bottom: 1px solid transparent;
}
.nav.is-solid {
  background: rgba(11, 8, 6, .72);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-logo img { height: 42px; width: auto; }
.nav-links { display: none; gap: clamp(18px, 2.6vw, 34px); }
.nav-links a {
  font-size: .8rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream-dim);
  transition: color .25s;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--cream); }
.nav-right { display: flex; align-items: center; gap: 14px; }
@media (min-width: 940px) {
  .nav-links { display: flex; }
  .nav-burger { display: none; }
}
@media (max-width: 939.9px) { .nav-book { display: none; } }

.nav-burger { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); }
.nav-burger i {
  position: absolute; left: 11px; right: 11px; height: 2px; background: var(--cream);
  top: calc(50% - 4px); transition: transform .35s var(--ease-out), top .35s var(--ease-out);
}
.nav-burger i + i { top: calc(50% + 3px); }
.nav-burger[aria-expanded="true"] i { top: 50%; transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] i + i { top: 50%; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(7, 5, 3, .96);
  backdrop-filter: blur(18px);
  display: grid; place-items: center;
  opacity: 0; transition: opacity .4s;
}
.menu.is-open { opacity: 1; }
.menu nav { display: grid; gap: 26px; text-align: center; }
.menu a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3rem);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--cream);
}
.menu a.menu-book { color: var(--red); }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border-radius: 999px;
  font-weight: 800; font-size: .82rem;
  letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform .3s var(--ease-out), background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.btn:active { transform: scale(.97); }
.btn-cta {
  background: var(--red); color: #17060a;
  box-shadow: 0 8px 30px -10px rgba(255, 77, 94, .55);
}
.btn-cta:hover, .btn-cta:focus-visible {
  background: #ff6572; transform: translateY(-2px);
  box-shadow: 0 14px 38px -10px rgba(255, 77, 94, .7);
}
.btn-ghost { border-color: var(--line); color: var(--cream); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--cream-dim); transform: translateY(-2px); background: rgba(244,236,220,.05); }
.btn-big { padding: 20px 42px; font-size: .95rem; }

/* ============ HERO ============ */
.hero { position: relative; height: 158svh; z-index: 4; }   /* sit above the fixed vinyl canvas so the title is in front of the record */
.hero-pin {
  position: sticky; top: 0; height: 100svh;
  overflow: clip;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hero-spotlight {
  position: absolute; inset: -10% -20%;
  background:
    radial-gradient(58% 44% at 50% 6%, rgba(217, 164, 95, .16), transparent 70%),
    radial-gradient(42% 34% at 50% 100%, rgba(201, 141, 79, .12), transparent 72%),
    radial-gradient(80% 68% at 50% 50%, rgba(20, 14, 9, 0), rgba(7, 5, 3, .82) 88%);
}
.hero-slats {
  position: absolute; inset: 0; opacity: .35;
  background:
    linear-gradient(90deg, rgba(11,8,6,.9), transparent 22% 78%, rgba(11,8,6,.9)),
    repeating-linear-gradient(90deg, rgba(201, 141, 79, .07) 0 3px, transparent 3px 26px);
  mask-image: linear-gradient(180deg, transparent 4%, #000 30% 70%, transparent 96%);
}

.twinkles { position: absolute; inset: 0; pointer-events: none; }
.twinkle {
  position: absolute; color: var(--brass);
  font-size: var(--tw-size, 12px);
  opacity: 0;
  animation: twinkle 5.2s ease-in-out infinite;
  animation-delay: var(--tw-delay, 0s);
}
.twinkle.is-note { color: rgba(244,236,220,.5); }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.6); }
  50% { opacity: var(--tw-max, .8); transform: scale(1); }
}

.hero-copy {
  position: relative; z-index: 3;
  display: grid; justify-items: center; text-align: center;
  padding-top: var(--nav-h);
  gap: clamp(10px, 1.9svh, 20px);
}
.hero-eyebrow { color: var(--brass); }
.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.2rem, min(11.4vw, 14.2svh), 10.5rem);
  line-height: .92;
  letter-spacing: .015em;
  text-transform: uppercase;
}
.hero-title .line { display: block; overflow: clip; }
.line-vinyl { color: transparent; -webkit-text-stroke: 2px var(--cream); }
.hero-sub { color: var(--cream-dim); font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 4px; }

/* ---- stereo speakers flanking the hero ---- */
/* shell: sizing + position + perspective ONLY (GSAP owns its transform/opacity) */
.hero-speaker {
  position: absolute; z-index: 2;
  width: clamp(196px, 21vw, 336px);
  height: clamp(340px, 60svh, 560px);
  bottom: calc((100svh - clamp(340px, 60svh, 560px)) / 2 - 12px);  /* vertically centered in the hero */
  perspective: 940px;
  --spk-depth: clamp(92px, 9.5vw, 168px);   /* a deep cabinet, not a thin panel */
}
.hero-speaker.is-left  { left:  clamp(24px, 5.5vw, 152px); perspective-origin: 50% 34%; }
.hero-speaker.is-right { right: clamp(24px, 5.5vw, 152px); perspective-origin: 50% 34%; }
/* flat floor-contact shadow rides the shell so it stays put while the cabinet toes in */
.hero-speaker::after {
  content: ""; position: absolute; left: -18%; right: -18%; bottom: -22px; height: 30px;
  background: radial-gradient(58% 100% at 50% 0%, rgba(0, 0, 0, .62), transparent 74%);
  pointer-events: none; z-index: -1;
}
/* cabinet FRONT face — baffle + grille cloth baked into the background so the two
   pseudo-elements are free to be the box's TOP and SIDE faces (real 3D, not a flat panel) */
.spk-cab {
  position: relative; width: 100%; height: 100%;
  border-radius: 8px; padding: clamp(18px, 2.8svh, 32px) 0;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  background:
    repeating-linear-gradient(96deg, rgba(201, 141, 79, .05) 0 2px, transparent 2px 10px),
    radial-gradient(120% 58% at 30% 6%, rgba(255, 240, 214, .07), transparent 60%),
    linear-gradient(157deg, #2c2319 0%, #14100b 46%, #0b0806 100%);
  border: 1px solid rgba(244, 236, 220, .1);
  transform-style: preserve-3d; will-change: transform;
}
/* TOP face of the cabinet — catches the warm key light so the box reads as solid */
.spk-cab::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: var(--spk-depth, 64px);
  transform-origin: 50% 0%; transform: rotateX(-90deg);
  background: linear-gradient(180deg, #5c472f 0%, #2a2015 60%, #17110b 100%);
  border-radius: 7px 7px 2px 2px;
  box-shadow: inset 0 12px 26px rgba(255, 240, 214, .08), inset 0 -16px 30px rgba(0, 0, 0, .5);
  pointer-events: none;
}
/* SIDE (depth) face — the OUTER edge, receding back into shadow */
.spk-cab::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: var(--spk-depth, 64px);
  pointer-events: none;
  box-shadow: inset 0 0 52px rgba(0, 0, 0, .55);
}
.is-left .spk-cab::after {
  left: 0; transform-origin: 0% 50%; transform: rotateY(90deg);
  background: linear-gradient(to right, #6b5133 0%, #3a2b1c 44%, #0c0805 100%);
}
.is-right .spk-cab::after {
  right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg);
  background: linear-gradient(to left, #6b5133 0%, #3a2b1c 44%, #0c0805 100%);
}
/* toe the whole box toward the text AND tilt it up a touch so the top face shows */
.is-left .spk-cab {
  transform-origin: 50% 50%; transform: rotateY(-28deg) rotateX(9deg);
  box-shadow:
    0 52px 90px -34px rgba(0, 0, 0, .92),
    inset 0 2px 0 rgba(255, 240, 214, .06),
    inset 0 -42px 70px rgba(0, 0, 0, .55),
    inset 0 0 0 6px rgba(7, 5, 3, .35),
    inset -14px 0 30px -16px rgba(255, 240, 214, .18);
}
.is-right .spk-cab {
  transform-origin: 50% 50%; transform: rotateY(28deg) rotateX(9deg);
  box-shadow:
    0 52px 90px -34px rgba(0, 0, 0, .92),
    inset 0 2px 0 rgba(255, 240, 214, .06),
    inset 0 -42px 70px rgba(0, 0, 0, .55),
    inset 0 0 0 6px rgba(7, 5, 3, .35),
    inset 14px 0 30px -16px rgba(255, 240, 214, .18);
}

.spk-tweeter {
  width: 30%; aspect-ratio: 1; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 42% 34%, #8f774f, #211913 60%, #0b0806 100%);
  box-shadow:
    inset 0 2px 6px rgba(255, 240, 214, .2), inset 0 -3px 9px rgba(0, 0, 0, .8),
    0 0 0 5px rgba(6, 4, 3, .6), 0 0 0 6px rgba(244, 236, 220, .07);
}
.spk-woofer {
  position: relative; width: 78%; aspect-ratio: 1; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 46%,
    #2c2119 0 15%, #14100b 16% 20%,
    #241b14 21% 30%, #100c09 31% 63%,
    #1e1610 64% 82%, #0a0806 83% 100%);
  box-shadow:
    inset 0 8px 26px rgba(0, 0, 0, .8), inset 0 -5px 14px rgba(255, 240, 214, .05),
    0 0 0 7px rgba(6, 4, 3, .55), 0 0 0 8px rgba(244, 236, 220, .07),
    0 12px 30px -12px rgba(0, 0, 0, .85);
  animation: woofer 640ms cubic-bezier(.4, 0, .3, 1) infinite;
}
.spk-woofer::after {
  content: ""; position: absolute; inset: 36%; border-radius: 50%;
  background: radial-gradient(circle at 42% 36%, #3d2e21, #100c09 78%);
  box-shadow: inset 0 2px 6px rgba(255, 240, 214, .14), inset 0 -3px 8px rgba(0, 0, 0, .85);
}
.is-right .spk-woofer { animation-delay: -.32s; }
@keyframes woofer { 0%, 100% { transform: scale(1); } 46% { transform: scale(1.05); } 62% { transform: scale(.99); } }

.spk-plate {
  display: flex; align-items: center; gap: 8px;
  font: 800 .56rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(244, 236, 220, .4);
}
.spk-led {
  width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none;
  box-shadow: 0 0 8px 2px rgba(255, 77, 94, .75);
  animation: led-pulse 2.4s ease-in-out infinite;
}
@keyframes led-pulse { 50% { opacity: .5; } }

@media (max-width: 900px) {
  .hero-speaker {
    width: clamp(150px, 20vw, 210px);
    height: clamp(250px, 44svh, 380px);
    bottom: calc(30px + 2svh);
    perspective: 700px;
  }
  .hero-speaker.is-left  { left: -46px; }
  .hero-speaker.is-right { right: -46px; }
  .is-left  .spk-cab { transform: rotateY(-24deg) rotateX(9deg); }
  .is-right .spk-cab { transform: rotateY(24deg) rotateX(9deg); }
}
/* remove the speakers on mobile entirely */
@media (max-width: 768px) { .hero-speaker { display: none !important; } }

.hero-cue {
  position: absolute; z-index: 3;
  left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 9px;
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--cream-faint);
}
.hero-cue-dot {
  width: 5px; height: 9px; border-radius: 3px;
  background: var(--red);
  animation: cue-drop 1.8s ease-in-out infinite;
}
@keyframes cue-drop { 50% { transform: translateY(7px); opacity: .4; } }

/* marquee */
.marquee {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(7, 5, 3, .8);
  backdrop-filter: blur(8px);
  overflow: clip;
  padding-block: 13px;
}
.marquee-track { display: flex; white-space: nowrap; width: max-content; }
.marquee-track span {
  font-family: var(--font-display);
  font-size: 1.05rem; letter-spacing: .28em;
  color: var(--cream-dim);
  animation: marquee 62s linear infinite;
}
@keyframes marquee { to { transform: translateX(-100%); } }

/* ============ STORY / STAGES ============ */
.story { position: relative; }

.vinyl-canvas {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: 0;
}

.story-glow {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(46% 40% at 50% 52%, rgba(255, 77, 94, .55), rgba(255, 105, 80, .18) 55%, transparent 76%);
  opacity: 0;
}

.stage { position: relative; height: 230svh; z-index: 3; }
.stage-c { height: 280svh; }
.stage-inner {
  position: sticky; top: 0; height: 100svh;
  display: grid; align-items: center;
  padding-top: var(--nav-h);
}
.stage-grid {
  width: min(1440px, 94vw); margin-inline: auto;
  display: grid; gap: clamp(28px, 5vw, 96px);
  align-items: center;
}
@media (min-width: 900px) {
  .stage-grid { grid-template-columns: 0.82fr 1.18fr; }   /* media column wider → larger image */
  .stage-grid.is-flip { grid-template-columns: 1.18fr 0.82fr; }
  .stage-grid.is-flip .stage-copy { order: 2; }
  .stage-grid.is-flip .stage-media { order: 1; }
}
.stage-center {
  position: relative;
  width: min(1000px, 92vw); margin-inline: auto;
  text-align: center;
  display: grid; justify-items: center; gap: clamp(12px, 2svh, 20px);
}
.stage-center::before {
  content: ""; position: absolute; inset: -14% -20%;
  background: radial-gradient(56% 58% at 50% 42%, rgba(8, 5, 3, .68), rgba(8, 5, 3, .28) 58%, transparent 78%);
  pointer-events: none;
}
.stage-center > * { position: relative; }
.stage-center .stage-title { text-shadow: 0 3px 30px rgba(7, 5, 3, .85); }
.stage-center .stage-body { text-shadow: 0 2px 18px rgba(7, 5, 3, .9); color: rgba(244, 236, 220, .72); }

.stage-copy { display: grid; gap: clamp(12px, 2svh, 20px); position: relative; z-index: 2; }
.stage-eyebrow {
  font-size: clamp(.8rem, .4vw + .68rem, .95rem); font-weight: 800;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--brass);
}
.stage-eyebrow em { font-style: normal; color: var(--red); margin-right: 10px; }
.stage-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.6vw, 5.6rem);
  line-height: .98; letter-spacing: .015em;
  text-transform: uppercase;
}
.stage-title .line { display: block; overflow: clip; }
.stage-title.is-center { text-align: center; }
.stage-eyebrow.is-center { text-align: center; }
.stage-body { color: var(--cream-dim); max-width: 50ch; font-size: clamp(1rem, .5vw + .85rem, 1.3rem); }
.stage-center .stage-body { margin-inline: auto; }

.chip-row { display: flex; flex-wrap: wrap; gap: 12px; }
.chip-row.is-center { justify-content: center; }
.chip-row li {
  font-size: clamp(.78rem, .25vw + .7rem, .92rem); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: clamp(9px, .5vw + 6px, 13px) clamp(16px, 1vw + 10px, 22px); border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--cream-dim);
  background: rgba(20, 16, 11, .5);
}

/* media frames */
.stage-media { display: grid; gap: 12px; justify-items: center; position: relative; z-index: 2; }
.media-frame {
  position: relative; width: 100%;
  border-radius: 18px; overflow: clip;
  border: 1px solid rgba(244, 236, 220, .16);
  background: var(--ink-2);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85), 0 0 0 6px rgba(7, 5, 3, .55);
  aspect-ratio: 16 / 9;
}
.media-frame.is-tall { aspect-ratio: 4 / 3; }
.media-frame video, .media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-chip {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; gap: 5px;
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .16em;
  padding: 6px 10px; border-radius: 6px;
  background: rgba(7, 5, 3, .72);
  border: 1px solid rgba(244, 236, 220, .14);
  backdrop-filter: blur(6px);
}
.media-chip .on { color: var(--cyan); text-shadow: 0 0 12px rgba(125, 230, 255, .8); font-style: normal; }
.media-chip .air { color: var(--red); text-shadow: 0 0 12px rgba(255, 77, 94, .9); font-style: normal; animation: air-blink 2.2s steps(1) infinite; }
@keyframes air-blink { 50% { opacity: .35; } }
.media-tc {
  position: absolute; bottom: 12px; right: 14px; z-index: 2;
  font-size: .7rem; font-weight: 700; letter-spacing: .18em;
  color: rgba(244, 236, 220, .82);
  background: rgba(7, 5, 3, .6);
  padding: 4px 9px; border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.media-tc::before {
  content: ""; display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); margin-right: 7px;
  box-shadow: 0 0 8px rgba(255, 77, 94, .9);
  animation: air-blink 1.4s steps(1) infinite;
}
.stage-media figcaption { color: var(--cream-faint); }
.stage-media figcaption.script { color: var(--brass); font-size: 1.25rem; }

/* karaoke line */
.karaoke-line {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.35; letter-spacing: .03em;
  max-width: 22ch;
}
.k-word {
  --fill: 0%;
  background: linear-gradient(90deg, var(--red) var(--fill), rgba(244, 236, 220, .22) var(--fill));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* equalizer */
.eq { display: flex; align-items: flex-end; gap: 6px; height: 74px; margin-block: 8px; }
.eq i {
  width: clamp(8px, 1.6vw, 14px); border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--red), rgba(255, 77, 94, .25));
  animation: eq-bounce 1.15s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.12s);
  height: 22%;
  transform-origin: bottom;
}
@keyframes eq-bounce { 30% { height: 96%; } 60% { height: 38%; } 80% { height: 72%; } }

/* spec chips (stage d) */
.spec-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.spec {
  font-size: .8rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 11px 18px; border-radius: 999px;
  border: 1px solid rgba(255, 77, 94, .38);
  color: var(--cream);
  background: rgba(255, 77, 94, .08);
  box-shadow: 0 0 24px -8px rgba(255, 77, 94, .45);
}

/* frosted scrim for copy over 3D on narrow screens */
@media (max-width: 899.9px) {
  .stage-copy, .stage-center {
    background: rgba(7, 5, 3, .55);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(244, 236, 220, .08);
    border-radius: 20px;
    padding: 22px;
  }
}

/* ============ KEEPSAKE ============ */
.keepsake { position: relative; z-index: 3; padding-block: clamp(90px, 16svh, 170px); background: linear-gradient(180deg, transparent, rgba(20, 16, 11, .55) 22% 78%, transparent); }
.keepsake-grid { width: min(1400px, 94vw); margin-inline: auto; display: grid; gap: clamp(32px, 5vw, 84px); align-items: center; }
@media (min-width: 900px) { .keepsake-grid { grid-template-columns: 1.08fr .92fr; } }
.keepsake-copy { display: grid; gap: 18px; }
.keepsake-copy .stage-title { font-size: clamp(2.5rem, 5.2vw, 5rem); }   /* fits "WITH YOUR SONG" on one line in the narrower column */
.keepsake-media { display: grid; gap: 12px; justify-items: center; }
.fact-list { display: grid; gap: 12px; margin-top: 6px; }
.fact-list li {
  display: flex; gap: 12px; align-items: baseline;
  color: var(--cream-dim);
  border-bottom: 1px dashed var(--line);
  padding-bottom: 12px;
}
.fact-list strong { color: var(--cream); font-weight: 800; white-space: nowrap; }

/* ============ GALLERY ============ */
.gallery { position: relative; z-index: 3; }
.gallery-head { text-align: center; display: grid; gap: 12px; padding-block: clamp(40px, 8svh, 90px) 20px; }
.gallery-pin { position: relative; }
.gallery-track {
  display: flex; align-items: center;
  gap: clamp(18px, 3vw, 40px);
  padding: 6svh clamp(18px, 6vw, 80px) 10svh;
  width: max-content;
}
.g-card {
  position: relative;
  width: clamp(240px, 30vw, 380px);
  background: #efe6d4;
  border-radius: 10px;
  padding: 12px 12px 18px;
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 34px 70px -26px rgba(0, 0, 0, .8);
  color: #1c150e;
  flex-shrink: 0;
}
.g-card img {
  width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover;
  border-radius: 5px;
}
.g-card.is-tall { width: clamp(220px, 24vw, 310px); }
.g-card.is-tall img { aspect-ratio: 9 / 14; }
.g-card figcaption { padding-top: 12px; text-align: center; }
.g-card .script { color: #a1332c; font-size: 1.3rem; }
.g-card-cta {
  display: grid; place-items: center; align-content: center; gap: 18px;
  background: var(--ink-3);
  border: 1px dashed rgba(244, 236, 220, .25);
  color: var(--cream);
  aspect-ratio: 4 / 4.9;
}
.g-card-cta .script { color: var(--red); font-size: 1.6rem; }

/* ============ PACKAGES ============ */
.packages { position: relative; z-index: 3; padding-block: clamp(90px, 15svh, 170px); }
.packages .stage-title { margin-top: 10px; }
.event-chips {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-block: 26px 44px;
}
.event-chips li {
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass);
  border: 1px solid rgba(217, 164, 95, .3);
  padding: 8px 16px; border-radius: 999px;
}
.package-grid { display: grid; gap: 22px; }
@media (min-width: 880px) { .package-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.package {
  position: relative;
  display: grid; gap: 14px; align-content: start;
  padding: 34px 30px 30px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(29, 23, 16, .65), rgba(14, 11, 8, .9));
  transition: transform .45s var(--ease-out), border-color .45s, box-shadow .45s;
}
.package:hover { transform: translateY(-8px); border-color: rgba(244, 236, 220, .3); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.package.is-featured {
  border-color: rgba(255, 77, 94, .5);
  background: linear-gradient(180deg, rgba(64, 20, 25, .5), rgba(14, 11, 8, .92));
  box-shadow: 0 24px 70px -28px rgba(255, 77, 94, .45);
}
.package.is-featured:hover { box-shadow: 0 34px 80px -28px rgba(255, 77, 94, .6); }
.package-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font-size: .68rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  background: var(--red); color: #17060a;
  padding: 6px 14px; border-radius: 999px;
  white-space: nowrap;
}
.package h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.9rem; letter-spacing: .03em; text-transform: uppercase;
}
.package-tag { color: var(--brass); font-family: var(--font-script); font-size: 1.25rem; }
.package ul { display: grid; gap: 10px; padding-block: 8px 14px; }
.package li {
  color: var(--cream-dim); font-size: .95rem;
  padding-left: 22px; position: relative;
}
.package li::before {
  content: "✦"; position: absolute; left: 0; top: 0;
  color: var(--red); font-size: .8rem;
}
.package .btn { justify-self: start; margin-top: auto; }

/* ============ FINALE ============ */
.finale {
  --disc: clamp(360px, 64vmin, 760px);   /* single knob for the disc geometry below */
  position: relative; z-index: 3;
  min-height: 100svh;
  overflow: clip;                         /* clips the disc's lower half at the footer line */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: clamp(72px, 12svh, 130px) 20px 0;
  background: radial-gradient(70% 50% at 50% 0%, rgba(29, 23, 16, .5), transparent 70%);
}
.finale-copy { position: relative; z-index: 2; text-align: center; display: grid; gap: clamp(18px, 3svh, 32px); justify-items: center; width: min(720px, 92vw); }
.finale-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.7rem, 8.2vw, 7.2rem);
  line-height: .95; letter-spacing: .015em; text-transform: uppercase;
}
.finale-title .line { display: block; overflow: clip; }

/* large vinyl rising from behind the footer — anchored to the section bottom.
   Centered with left+margin (NOT transform) so the GSAP parallax translateY composes on top. */
.finale-visual {
  position: absolute; z-index: 1;
  left: 50%; margin-left: calc(var(--disc) / -2);
  bottom: calc(var(--disc) * -0.5);       /* center sits on the clip line → exactly the top half shows */
  width: var(--disc); height: var(--disc);
  display: grid; place-items: center;
  pointer-events: none;
}
.finale-record {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      #241d15 0 18.5%, #0e0b08 19% 20%, #17120c 20.5% 21.5%,
      #100c08 22% 61%, #191410 61.5% 62.5%, #100c08 63% 96%, #05040388 97% 100%),
    repeating-radial-gradient(circle at 50% 50%, #0f0b08 0 3px, #161009 3px 4px);
  box-shadow:
    0 44px 90px -28px rgba(0, 0, 0, .92),
    0 0 0 1px rgba(244, 236, 220, .07),
    0 0 66px -6px rgba(255, 77, 94, .3),
    inset 0 0 60px rgba(0, 0, 0, .55);
  animation: disc-spin 4s linear infinite;
}
.finale-record::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 210deg, transparent 0 9%, rgba(255, 246, 228, .07) 13%, transparent 22% 60%, rgba(255, 246, 228, .05) 66%, transparent 76%);
}
.finale-label {
  position: absolute; inset: 30%; border-radius: 50%; z-index: 1;
  display: grid; place-items: center; align-content: center; gap: 6%;
  background: radial-gradient(circle at 40% 32%, #ff6a76, var(--red) 54%, #c22b38 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 22px rgba(120, 10, 20, .5);
}
.finale-label img { width: 52%; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4)); }
.finale-rpm { font: 800 .5rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.finale-hole {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 3.4%; aspect-ratio: 1; border-radius: 50%; background: #070503;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .55);
}
.finale-shine {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 3;
  background: linear-gradient(122deg, transparent 34%, rgba(255, 246, 228, .12) 47%, transparent 58%);
}
@media (max-width: 560px) {
  .finale { --disc: clamp(300px, 92vw, 460px); }
  .finale-visual { bottom: calc(var(--disc) * -0.48); }
}
.finale-actions { display: grid; gap: 16px; justify-items: center; margin-top: 4px; }
.finale-mail { color: var(--cream-dim); letter-spacing: .08em; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color .3s, border-color .3s; }
.finale-mail:hover { color: var(--cream); border-color: var(--cream-dim); }

/* ============ FOOTER ============ */
.footer { border-top: 1px solid var(--line); padding: 54px 0 34px; background: #080604; position: relative; z-index: 3; }
.footer-grid { display: grid; gap: 30px; justify-items: center; text-align: center; }
@media (min-width: 880px) {
  .footer-grid { grid-template-columns: auto 1fr auto; align-items: center; text-align: left; justify-items: start; }
  .footer-nav { justify-self: center; }
}
.footer-logo { height: 104px; width: auto; }
.footer-nav, .footer-social { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; }
.footer-nav a, .footer-social a {
  font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-dim); transition: color .25s;
}
.footer-nav a:hover, .footer-social a:hover { color: var(--cream); }
.footer-fine { text-align: center; color: var(--cream-faint); font-size: .8rem; margin-top: 38px; letter-spacing: .04em; }

/* ============ SOUND TOGGLE ============ */
.sound-toggle {
  position: fixed; right: 22px; bottom: 22px; z-index: 55;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: 999px;
  background: rgba(11, 8, 6, .8);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  transition: border-color .3s, opacity .5s;
}
.sound-toggle:hover { border-color: var(--cream-dim); }
.sound-label { font-size: .72rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--cream-dim); }
.sound-bars { display: flex; align-items: flex-end; gap: 3px; height: 14px; }
.sound-bars i {
  width: 3px; height: 30%; border-radius: 2px;
  background: var(--red);
  transition: height .3s;
}
.sound-toggle[aria-pressed="true"] .sound-bars i { animation: eq-bounce 1s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.16s); }
.sound-toggle[aria-pressed="true"] .sound-label { color: var(--cream); }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  .k-word { --fill: 100%; }
  .hero { height: auto; min-height: 100svh; }
  .stage, .stage-c { height: auto; }
  .stage-inner { position: static; height: auto; padding-block: 12svh; }
  .gallery-pin { overflow-x: auto; }
}