/* ==========================================================================
   DINDALÉ — ARTIST WEBSITE STYLESHEET
   Design System: Deep Midnight OLED Club & Disco Euphoria
   ========================================================================== */

/* Fonts (Poppins 400-700, Righteous, Space Grotesk) are loaded by the <link> in index.html and 404.html only.
   No @import here: it would be a second, render-blocking request chain for the same files. */

/* --- CSS VARIABLES & TOKENS --- */
:root {
  /* Color Palette */
  --bg-darkest: #06050b;
  --bg-base: #0a0914;
  --bg-surface: #121024;
  --bg-surface-elevated: #1a1733;
  --bg-card: rgba(20, 17, 40, 0.75);
  --bg-glass: rgba(16, 14, 30, 0.65);
  --bg-glass-strong: rgba(14, 12, 26, 0.88);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.16);
  --border-glow: rgba(168, 85, 247, 0.4);

  --text-white: #ffffff;
  --text-primary: #f5f4fb;
  --text-secondary: #b5b1cf;
  --text-muted: #8f8ab0; /* >= 5.2:1 on the darkest cards (#1b192c / #1a1733) */

  /* Accent Tones */
  --accent-purple: #9333ea;
  --accent-purple-light: #c084fc;
  --accent-pink: #ec4899;
  --accent-pink-light: #f472b6;
  --accent-orange: #ff5722;
  --accent-orange-light: #ff784e;
  --accent-cyan: #06b6d4;
  --accent-cyan-light: #38bdf8;
  --accent-gold: #f59e0b;
  --accent-emerald: #10b981;

  /* Gradients */
  --grad-disco: linear-gradient(135deg, #ec4899 0%, #9333ea 50%, #06b6d4 100%);
  --grad-orange: linear-gradient(135deg, #ff5722 0%, #f59e0b 100%);
  /* Same disco sweep with slightly deeper ends, for buttons that carry white text (>= 4.5:1 across the button).
     The brighter --grad-disco stays on decoration (underlines, vinyl, progress bars, icons). */
  --grad-disco-text: linear-gradient(135deg, #db2777 0%, #9333ea 50%, #0e7490 100%);
  --text-on-orange: #06050b; /* dark text on the orange ticket buttons: 6.4:1 to 9.5:1 */
  --grad-dark-overlay: linear-gradient(180deg, rgba(6, 5, 11, 0.4) 0%, rgba(10, 9, 20, 0.85) 70%, #0a0914 100%);
  --grad-card: linear-gradient(145deg, rgba(28, 23, 56, 0.65) 0%, rgba(14, 12, 28, 0.75) 100%);

  /* Typography */
  --font-display: 'Righteous', cursive, sans-serif;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Glows & Shadows */
  --glow-pink: 0 0 25px rgba(236, 72, 153, 0.35);
  --glow-purple: 0 0 30px rgba(147, 51, 234, 0.35);
  --glow-cyan: 0 0 25px rgba(6, 182, 212, 0.35);
  --glow-orange: 0 0 30px rgba(255, 87, 34, 0.4);
  --shadow-card: 0 16px 36px -8px rgba(0, 0, 0, 0.7);

  /* Layout */
  --container-max: 1240px;
  --nav-height: 76px;
  --bottom-player-height: 84px;
  /* Safe areas (index.html uses viewport-fit=cover): 0 everywhere except notched phones. The fixed header and
     dock grow by these insets, so their content never sits under the status bar or the home indicator. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --header-total: calc(var(--nav-height) + var(--safe-top));
  --dock-total: calc(var(--bottom-player-height) + var(--safe-bottom));
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- RESET & GLOBAL BASE --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  color-scheme: dark;
  /* Anything scrolled into view (keyboard focus, form errors, anchors) stays clear of the fixed header and
     the fixed bottom dock (WCAG 2.4.11). Sections add a little extra below (section[id] scroll-margin-top). */
  scroll-padding-top: calc(var(--header-total) + 1rem);
  scroll-padding-bottom: calc(var(--dock-total) + 1rem);
}

/* The hidden attribute always wins over component display rules */
[hidden] {
  display: none !important;
}

/* Visually hidden, still read by screen readers */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

::selection {
  background: var(--accent-pink);
  color: #ffffff;
}

:focus-visible {
  outline: 2px solid var(--accent-pink-light);
  outline-offset: 3px;
}

/* Anchor jumps land 100px below the top: html scroll-padding-top (nav + 1rem) + this */
section[id] {
  scroll-margin-top: 0.5rem;
}

/* Skip link: visually hidden until it receives keyboard focus, then a disco pill above the header */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 1rem;
  z-index: 1100;
  padding: 0.7rem 1.35rem;
  border-radius: var(--radius-full);
  background: var(--grad-disco-text);
  color: var(--text-white);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: var(--glow-pink), 0 8px 24px rgba(0, 0, 0, 0.5);
}

.skip-link:not(:focus) {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  box-shadow: none;
}

/* The skip link moves focus to <main>; the container itself needs no ring */
main:focus {
  outline: none;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  padding-bottom: var(--dock-total);
  -webkit-font-smoothing: antialiased;
}

/* Custom Scrollbar (mouse/trackpad screens only: touch phones keep their native overlay scrollbar, which floats
   over the full-bleed background video instead of taking a strip at the edge) */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar {
    width: 9px;
  }
  ::-webkit-scrollbar-track {
    background: var(--bg-darkest);
  }
  ::-webkit-scrollbar-thumb {
    background: #252243;
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-darkest);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--accent-purple);
  }
}

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

/* <picture> wrappers (WebP + JPEG/PNG sources) take no box of their own, so every img rule below sizes the
   img exactly as if it were a direct child (e.g. the % widths of the hero logo inside its flex box) */
picture {
  display: contents;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: 1rem;
}

/* Common Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 max(1.5rem, var(--safe-right)) 0 max(1.5rem, var(--safe-left));
}

/* Section Header Utility */
.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3.5rem auto;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  border-radius: var(--radius-full);
  background: rgba(147, 51, 234, 0.12);
  border: 1px solid rgba(147, 51, 234, 0.3);
  color: var(--accent-purple-light);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.section-tag.orange {
  background: rgba(255, 87, 34, 0.12);
  border-color: rgba(255, 87, 34, 0.35);
  color: var(--accent-orange-light);
}

.section-tag.pink {
  background: rgba(236, 72, 153, 0.12);
  border-color: rgba(236, 72, 153, 0.35);
  color: var(--accent-pink-light);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.15;
  color: var(--text-white);
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}

.section-title span.glow-pink {
  color: var(--accent-pink);
  text-shadow: 0 0 20px rgba(236, 72, 153, 0.5);
}

.section-title span.glow-orange {
  color: var(--accent-orange);
  text-shadow: 0 0 20px rgba(255, 87, 34, 0.5);
}

.section-subtitle {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Subtle Animated Background Aura (404.html only: on the home page every section paints an opaque background
   over it, so the blurred, animated orbs cost GPU time without ever being visible) */
.bg-ambient-aura {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.aura-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.15;
  transition: transform 8s ease-in-out;
}

.aura-1 {
  width: 550px;
  height: 550px;
  background: var(--accent-purple);
  top: 10%;
  left: -100px;
  animation: floatAura 20s infinite alternate ease-in-out;
}

.aura-2 {
  width: 600px;
  height: 600px;
  background: var(--accent-pink);
  top: 50%;
  right: -150px;
  animation: floatAura 25s infinite alternate-reverse ease-in-out;
}

.aura-3 {
  width: 450px;
  height: 450px;
  background: var(--accent-cyan);
  bottom: 5%;
  left: 30%;
  animation: floatAura 18s infinite alternate ease-in-out;
}

@keyframes floatAura {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, -40px) scale(1.1); }
  100% { transform: translate(-40px, 60px) scale(0.95); }
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-total);
  padding-top: var(--safe-top);
  z-index: 100;
  transition: background-color var(--transition-smooth), backdrop-filter var(--transition-smooth), border-color var(--transition-smooth);
}

.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--bg-glass-strong);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity var(--transition-smooth);
  pointer-events: none;
}

.site-header.scrolled {
  border-bottom: 1px solid var(--border-subtle);
}

.site-header.scrolled::before {
  opacity: 1;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0; /* the logo never gets squeezed by the nav */
}

.brand-logo-img {
  height: 38px;
  width: auto;
  object-fit: contain;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.brand-link:hover .brand-logo-img {
  transform: scale(1.04);
  filter: drop-shadow(0 0 10px rgba(245, 244, 251, 0.4));
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 1.8vw, 2rem);
  list-style: none;
}

.nav-link {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
  position: relative;
  padding: 0.35rem 0;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--grad-disco);
  transition: width var(--transition-fast);
  border-radius: var(--radius-full);
}

.nav-link:hover, .nav-link.active {
  color: var(--text-white);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Quick social icon links */
.social-icons-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.social-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.social-icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-white);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.social-icon-btn.ig:hover {
  color: #f43f5e;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.4);
}

.social-icon-btn.ra:hover {
  color: var(--accent-orange);
  box-shadow: 0 0 12px rgba(255, 87, 34, 0.4);
}

.btn-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.25rem;
  background: var(--grad-disco-text);
  color: var(--text-white);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px rgba(147, 51, 234, 0.3);
  white-space: nowrap;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-header-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-purple);
}

/* Mobile Toggle */
.mobile-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-white);
  gap: 5px;
  z-index: 101;
}

.mobile-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-white);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.mobile-nav-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-nav-toggle.active span:nth-child(2) {
  opacity: 0;
}
.mobile-nav-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* bottom padding keeps the milestones row clear of the fixed dock */
  padding: calc(var(--header-total) + 2rem) 0 calc(var(--dock-total) + 2rem) 0;
  overflow: hidden;
  z-index: 1;
}

/* Fullscreen Background Video Container */
.hero-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  overflow: hidden;
  background: #000000;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 0.8s ease;
}

.hero-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(10, 9, 20, 0.3) 0%, rgba(6, 5, 11, 0.85) 85%, #06050b 100%),
              linear-gradient(180deg, rgba(6, 5, 11, 0.4) 0%, rgba(10, 9, 20, 0.2) 50%, #0a0914 100%);
  z-index: -1;
}

/* Subtle CRT scanline effect */
.hero-video-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(18, 16, 38, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  opacity: 0.35;
}

/* Hero Content */
.hero-content {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Soft dark halo behind the hero copy (above the video, below the text), so the copy stays readable over the
   brightest video frames and the poster without darkening the edges of the video */
.hero-content::before {
  content: '';
  position: absolute;
  inset: -5rem -6rem;
  z-index: -1;
  pointer-events: none;
  /* closest-side: the ellipse fades to nothing exactly at the box edges (no visible seams) */
  background: radial-gradient(closest-side, rgba(6, 5, 11, 0.72) 0%, rgba(6, 5, 11, 0.6) 55%, rgba(6, 5, 11, 0.32) 80%, rgba(6, 5, 11, 0) 100%);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1.25rem;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  margin-bottom: 2rem;
  animation: pulseGlow 3s infinite alternate;
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 10px rgba(147, 51, 234, 0.2); }
  100% { box-shadow: 0 0 25px rgba(236, 72, 153, 0.4); }
}

.pulse-indicator {
  width: 8px;
  height: 8px;
  background-color: var(--accent-pink);
  border-radius: 50%;
  position: relative;
}

.pulse-indicator::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--accent-pink);
  opacity: 0.5;
  animation: ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  75%, 100% { transform: scale(2.2); opacity: 0; }
}

.hero-badge-text {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  text-transform: uppercase;
}

.hero-logo-box {
  margin-bottom: 1.5rem;
}

.hero-logo-img {
  max-width: 480px;
  width: 85%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 0 35px rgba(236, 72, 153, 0.4));
  transition: transform var(--transition-smooth), filter var(--transition-smooth);
}

.hero-logo-img:hover {
  transform: scale(1.02);
  filter: drop-shadow(0 0 45px rgba(147, 51, 234, 0.6));
}

.hero-tagline {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2.5vw, 1.6rem);
  font-weight: 500;
  color: var(--text-white);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.hero-desc {
  font-size: 1.05rem;
  color: #dcd9ee;
  text-shadow: 0 1px 12px rgba(6, 5, 11, 0.85);
  max-width: 680px;
  margin: 0 auto 2.5rem auto;
  line-height: 1.6;
}

.hero-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 3.5rem;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 2rem;
  background: var(--grad-disco-text);
  color: var(--text-white);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  box-shadow: 0 8px 24px rgba(147, 51, 234, 0.35);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--glow-pink), 0 10px 30px rgba(147, 51, 234, 0.5);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.85rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-medium);
  color: var(--text-white);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-3px);
}

.btn-orange {
  background: var(--grad-orange);
  color: var(--text-on-orange);
  box-shadow: 0 8px 24px rgba(255, 87, 34, 0.35);
}

.btn-orange:hover {
  box-shadow: var(--glow-orange);
}

/* Hero Milestones Ticker */
.hero-milestones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.milestone-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-primary);
  text-shadow: 0 1px 10px rgba(6, 5, 11, 0.85);
  font-family: var(--font-heading);
  font-size: 0.9rem;
}

.milestone-item svg {
  color: var(--accent-pink);
  flex-shrink: 0;
}

.milestone-item strong {
  color: var(--text-white);
  font-weight: 600;
}

/* ==========================================================================
   MUSIC & DEMO VAULT (AUDIO PLAYER)
   ========================================================================== */
.music-section {
  position: relative;
  padding: 6.5rem 0;
  z-index: 2;
  background: linear-gradient(180deg, #0a0914 0%, #0d0b1d 50%, #0a0914 100%);
}

.player-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

/* Grid items may shrink below their content (long one-line track titles would otherwise widen the page) */
.player-layout > * {
  min-width: 0;
}

/* Left: Now Playing Hero Console */
.now-playing-console {
  background: var(--grad-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.now-playing-console::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-disco);
}

.console-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.console-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--accent-emerald);
  font-size: 0.8rem;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.live-eq-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
}

.eq-bar {
  width: 3px;
  height: 4px;
  background: var(--accent-emerald);
  border-radius: 1px;
  transition: height 0.15s ease;
}

.playing .eq-bar:nth-child(1) { animation: eqJump 0.8s infinite ease-in-out; }
.playing .eq-bar:nth-child(2) { animation: eqJump 0.6s infinite 0.2s ease-in-out; }
.playing .eq-bar:nth-child(3) { animation: eqJump 0.7s infinite 0.4s ease-in-out; }

@keyframes eqJump {
  0%, 100% { height: 4px; }
  50% { height: 14px; }
}

/* Loading / buffering: the bars breathe slowly instead of jumping */
.console-status-pill.buffering .eq-bar { animation: eqJump 1.6s infinite ease-in-out; opacity: 0.7; }
.console-status-pill.buffering .eq-bar:nth-child(2) { animation-delay: 0.25s; }
.console-status-pill.buffering .eq-bar:nth-child(3) { animation-delay: 0.5s; }

/* A track that failed to load */
.console-status-pill.error {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #f87171;
}
.console-status-pill.error .eq-bar { background: #f87171; }

/* The player areas take focus on click (tabindex="-1") so Space / M work there; no ring for that */
.player-layout:focus,
.bottom-player-dock:focus {
  outline: none;
}

.console-sound-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sound-link-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.sound-link-badge:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-white);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Vinyl & Visualizer Stage */
.disc-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 1.5rem 0 2rem 0;
  min-height: 240px;
}

.vinyl-disc {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, #1a1a1a 20%, #0d0d0d 21%, #222222 45%, #0a0a0a 46%, #1c1c1c 70%, #050505 71%, #151515 95%);
  border: 4px solid #2a2a2a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 30px rgba(147, 51, 234, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: transform 0.4s ease;
}

.vinyl-disc.spin {
  animation: spinVinyl 6s linear infinite;
}

@keyframes spinVinyl {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.vinyl-center-label {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--grad-disco);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.vinyl-center-label img {
  width: 60px;
  height: auto;
  filter: brightness(1.2);
}

.vinyl-spindle-hole {
  width: 14px;
  height: 14px;
  background: var(--bg-darkest);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  position: absolute;
}

/* Frequency Visualizer Canvas */
.visualizer-canvas-container {
  width: 100%;
  height: 72px;
  margin-bottom: 1.5rem;
  background: rgba(10, 8, 22, 0.5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  position: relative;
}

#visualizerCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Track Metadata */
.track-info-card {
  text-align: center;
  margin-bottom: 1.5rem;
}

.active-track-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-white);
  line-height: 1.25;
  margin-bottom: 0.25rem;
}

.active-track-artist {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-pink-light);
  margin-bottom: 0.35rem;
}

/* Scrubber / Progress Bar */
.progress-control-wrapper {
  margin-bottom: 1.5rem;
}

.scrubber-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  position: relative;
  transition: height 0.15s ease;
}

/* Keyboard focus: the global pink ring around the track plus a brighter thumb (mouse clicks don't trigger it) */
.scrubber-slider:focus-visible,
.volume-slider:focus-visible {
  outline: 2px solid var(--accent-pink-light);
  outline-offset: 5px;
}

.scrubber-slider:focus-visible::-webkit-slider-thumb,
.volume-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(244, 114, 182, 0.35), 0 0 14px rgba(236, 72, 153, 0.9);
}

.scrubber-slider:hover {
  height: 8px;
}

.scrubber-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-white);
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.8);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.scrubber-slider:hover::-webkit-slider-thumb {
  transform: scale(1.2);
}

.time-indicators {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* Main Controls */
.controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sub-control-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  border-radius: 50%;
  transition: all var(--transition-fast);
}

.sub-control-btn:hover {
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.08);
}

.sub-control-btn.active {
  color: var(--accent-pink-light);
  background: rgba(236, 72, 153, 0.15);
}

.playback-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.step-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  transition: all var(--transition-fast);
}

.step-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-white);
  transform: scale(1.06);
}

.main-play-btn {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--grad-disco);
  color: var(--text-white);
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.45);
  transition: all var(--transition-fast);
}

.main-play-btn:hover {
  transform: scale(1.08);
  box-shadow: var(--glow-pink), 0 8px 25px rgba(147, 51, 234, 0.5);
}

.volume-wrapper {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 130px;
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 4px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-white);
  cursor: pointer;
}

/* Right: Playlist & Demo Repository */
.playlist-panel {
  background: var(--bg-card);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-card);
}

.playlist-header {
  margin-bottom: 1.5rem;
}

.playlist-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.filter-pill {
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 500;
  transition: all var(--transition-fast);
}

.filter-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-white);
}

.filter-pill.active {
  background: var(--accent-purple);
  border-color: var(--accent-purple-light);
  color: var(--text-white);
  box-shadow: 0 0 12px rgba(147, 51, 234, 0.35);
}

/* Track Items List */
.tracklist-container {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.track-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.track-item:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateX(4px);
}

/* Drawn inside the row, so the scrolling tracklist can't clip the ring */
.track-item:focus-visible {
  outline: 2px solid var(--accent-pink-light);
  outline-offset: -2px;
  background: rgba(255, 255, 255, 0.07);
}

.track-item.active {
  background: rgba(147, 51, 234, 0.15);
  border-color: var(--accent-purple-light);
  box-shadow: inset 0 0 15px rgba(147, 51, 234, 0.1);
}

.track-item-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}

.track-num-play {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.track-item:hover .track-num-play {
  background: var(--grad-disco);
  color: var(--text-white);
}

.track-item.active .track-num-play {
  background: var(--accent-emerald);
  color: var(--bg-darkest);
}

.track-details-col {
  min-width: 0;
}

.track-item-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  /* "Artist – Track" wraps to a second line on narrow rows rather than cutting the track name off */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.track-item.active .track-item-title {
  color: var(--accent-pink-light);
}

.track-item-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.track-item-duration {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Each row sits in a role="listitem" wrapper; local (VAULT) rows get a sibling remove button */
.track-row {
  position: relative;
}

.track-row.has-remove .track-item {
  padding-right: 3.1rem;
}

.track-remove-btn {
  position: absolute;
  top: 50%;
  right: 0.7rem;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.track-remove-btn:hover,
.track-remove-btn:focus-visible {
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.45);
}

/* ==========================================================================
   ARTIST STORY (DARK CLUB BACKGROUND SCRIM)
   ========================================================================== */
.story-section {
  position: relative;
  padding: 8rem 0;
  overflow: hidden;
  z-index: 2;
}

.story-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background-image: url('../assets/img/opt/dark-club-story-bg-1600.jpg');
  background-image: image-set(url('../assets/img/opt/dark-club-story-bg-1600.webp') type('image/webp'), url('../assets/img/opt/dark-club-story-bg-1600.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: saturate(1.2) brightness(0.7);
}

.story-scrim-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #0a0914 0%, rgba(10, 9, 20, 0.88) 35%, rgba(6, 5, 11, 0.92) 75%, #0a0914 100%),
              radial-gradient(circle at 75% 40%, rgba(79, 70, 229, 0.25) 0%, transparent 60%);
  z-index: -1;
}

.story-layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.story-narrative-card {
  background: rgba(14, 12, 26, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 3rem;
  box-shadow: var(--shadow-card);
}

.story-paragraphs {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.7;
}

.story-paragraphs strong {
  color: var(--text-white);
  font-weight: 600;
}

/* Right: Milestones & Accolades */
.story-accolades-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.accolade-card {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background: rgba(20, 17, 40, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  transition: all var(--transition-smooth);
}

.accolade-card:hover {
  background: rgba(28, 23, 56, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.accolade-icon-box {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--grad-disco);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(147, 51, 234, 0.3);
}

.accolade-icon-box.orange {
  background: var(--grad-orange);
  box-shadow: 0 4px 16px rgba(255, 87, 34, 0.3);
}

.accolade-info h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 0.25rem;
}

.accolade-info p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Stats Ribbon */
.story-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 0.5rem;
}

.stat-box {
  background: rgba(14, 12, 28, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  text-align: center;
}

.stat-number {
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--accent-pink-light);
  margin-bottom: 0.35rem;
}

.stat-label {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* ==========================================================================
   LIVE PERFORMANCES & BEHIND THE SCENES
   ========================================================================== */
.gallery-section {
  position: relative;
  padding: 7rem 0;
  background: var(--bg-base);
  z-index: 2;
}

.gallery-filter-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.gallery-tab-btn {
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  transition: all var(--transition-fast);
}

.gallery-tab-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-white);
}

.gallery-tab-btn.active {
  background: var(--grad-disco-text);
  border-color: transparent;
  color: var(--text-white);
  box-shadow: 0 4px 16px rgba(147, 51, 234, 0.35);
}

/* Bento-style Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.gallery-item:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8), var(--glow-purple);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-item:hover img {
  transform: scale(1.06);
}

/* "View full-size photo" button (added by app.js), stretched over the whole tile */
.gallery-item-open {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.gallery-item-open:focus-visible {
  outline: 2px solid var(--accent-pink-light);
  outline-offset: -4px;
  box-shadow: inset 0 0 28px rgba(236, 72, 153, 0.35);
}

/* Keyboard focus gets the same lift and zoom as hover */
.gallery-item:has(.gallery-item-open:focus-visible) {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8), var(--glow-pink);
}

.gallery-item:has(.gallery-item-open:focus-visible) img {
  transform: scale(1.06);
}

/* Grid Span Variations (7 photos: 8+4 / 4+4+4 / 6+6). Tablets and phones re-flow them in the media queries. */
.col-span-8 { grid-column: span 8; height: 380px; }
.col-span-4 { grid-column: span 4; height: 380px; }
.col-span-6 { grid-column: span 6; height: 340px; }

/* Keep the people in frame when a tile crops the photo hard (wide tablet strips, 4:3 phone tiles) */
.gallery-item img.gallery-img-focus-faces { object-position: 50% 30%; }
.gallery-item img.gallery-img-focus-low { object-position: 50% 75%; }

/* Filter tabs (app.js adds .is-filtered + data-count): the bento spans only add up with all 7 photos, so a filtered
   set gets an even grid. 3 photos fill one row; a single photo is centred at a sensible width. */
.gallery-grid.is-filtered {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.gallery-grid.is-filtered > .gallery-item {
  grid-column: auto;
  height: 380px;
}

.gallery-grid.is-filtered[data-count="1"] {
  grid-template-columns: minmax(0, 860px);
  justify-content: center;
}

.gallery-grid.is-filtered[data-count="1"] > .gallery-item {
  height: 480px;
}

/* Overlay info */
.gallery-item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2rem 1.5rem 1.5rem 1.5rem;
  background: linear-gradient(180deg, transparent 0%, rgba(6, 5, 11, 0.6) 30%, rgba(6, 5, 11, 0.95) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}

.gallery-item-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-pink-light);
  margin-bottom: 0.35rem;
}

.gallery-item-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-white);
  line-height: 1.25;
  margin-bottom: 0.25rem;
}

.gallery-item-sub {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

/* Feature Spotlight Card for Meeting Bonobo */
.bonobo-spotlight-card {
  border: 1px solid rgba(236, 72, 153, 0.3);
}

.bonobo-spotlight-card:hover {
  border-color: var(--accent-pink);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8), var(--glow-pink);
}

/* ==========================================================================
   BOOGIE VAULT — UPCOMING EVENT & DISCOWORKS
   ========================================================================== */
.vault-section {
  position: relative;
  padding: 8rem 0;
  background: linear-gradient(180deg, #0a0914 0%, #120b08 40%, #0d0a17 100%);
  overflow: hidden;
  z-index: 2;
}

.vault-event-card {
  background: linear-gradient(145deg, rgba(35, 20, 16, 0.8) 0%, rgba(18, 12, 28, 0.9) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 87, 34, 0.3);
  border-radius: var(--radius-lg);
  padding: 3.5rem;
  box-shadow: var(--shadow-card), 0 0 50px rgba(255, 87, 34, 0.15);
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3.5rem;
  align-items: center;
}

/* Left: Interactive Flyer Showcase */
.flyer-presentation {
  position: relative;
  display: flex;
  justify-content: center;
}

.flyer-frame {
  max-width: 380px;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 35px rgba(255, 87, 34, 0.4);
  transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}

.flyer-frame:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.9), 0 0 45px rgba(255, 87, 34, 0.6);
}

.flyer-frame img {
  width: 100%;
  height: auto;
  display: block;
}

/* Right: Event Details & Live Countdown */
.event-details-col {
  display: flex;
  flex-direction: column;
}

.event-banner-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  padding: 0.35rem 1rem;
  border-radius: var(--radius-full);
  background: rgba(255, 87, 34, 0.15);
  border: 1px solid rgba(255, 87, 34, 0.4);
  color: var(--accent-orange-light);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.event-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.5rem);
  line-height: 1.1;
  color: var(--text-white);
  margin-bottom: 0.75rem;
}

.event-title span {
  color: var(--accent-orange);
  text-shadow: 0 0 25px rgba(255, 87, 34, 0.5);
}

.event-venue-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.venue-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.venue-meta-item svg {
  color: var(--accent-orange);
}

/* Countdown Clock */
.countdown-container {
  margin-bottom: 2.5rem;
}

.countdown-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 0.85rem;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 440px;
}

.countdown-unit {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 87, 34, 0.25);
  border-radius: var(--radius-sm);
  padding: 0.85rem 0.5rem;
  text-align: center;
}

.countdown-val {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--text-white);
  margin-bottom: 0.25rem;
}

.countdown-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-orange-light);
}

.event-cta-group {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.btn-ra-tickets {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 2.25rem;
  background: var(--grad-orange);
  color: var(--text-on-orange);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  box-shadow: 0 8px 24px rgba(255, 87, 34, 0.4);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-ra-tickets:hover {
  transform: translateY(-3px);
  box-shadow: var(--glow-orange);
}

.btn-ra-discoworks {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  color: var(--text-white);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  transition: all var(--transition-fast);
}

.btn-ra-discoworks:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.btn-calendar {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.65rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  color: var(--text-white);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.btn-calendar:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

/* Add to Calendar menu (<details>): .ics file or Google Calendar */
.calendar-menu {
  position: relative;
}

.calendar-menu > summary {
  list-style: none;
  user-select: none;
}

.calendar-menu > summary::-webkit-details-marker {
  display: none;
}

.calendar-menu[open] > summary {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 87, 34, 0.55);
}

.calendar-menu-chevron {
  opacity: 0.7;
  transition: transform var(--transition-fast);
}

.calendar-menu[open] .calendar-menu-chevron {
  transform: rotate(180deg);
}

.calendar-menu-list {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 20;
  min-width: 100%;
  width: max-content;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.4rem;
  background: linear-gradient(145deg, rgba(35, 20, 16, 0.97) 0%, rgba(18, 12, 28, 0.98) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 87, 34, 0.35);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card), 0 0 30px rgba(255, 87, 34, 0.18);
  animation: calendarMenuIn 0.18s ease-out;
}

@keyframes calendarMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.calendar-menu-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.7rem 0.95rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-white);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.calendar-menu-item small {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-muted);
}

.calendar-menu-item:hover,
.calendar-menu-item:focus-visible {
  background: rgba(255, 87, 34, 0.14);
  color: var(--accent-orange-light);
}

/* During the event: "on now" note in place of the countdown digits */
.event-live-now {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.4rem;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 87, 34, 0.45);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-white);
  box-shadow: 0 0 28px rgba(255, 87, 34, 0.2);
}

.event-live-now .pulse-indicator,
.event-live-now .pulse-indicator::after {
  background-color: var(--accent-orange);
}

/* ==========================================================================
   FAN ENGAGEMENT & AUDIENCE GROWTH
   ========================================================================== */
.community-section {
  position: relative;
  padding: 7rem 0;
  background: var(--bg-base);
  z-index: 2;
}

.community-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.5rem;
  align-items: stretch;
}

/* Left: VIP Mailing list signup */
.vip-club-card {
  background: var(--grad-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 3rem;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  /* The card stretches to the social card's height; centring keeps the perks and the form together */
  justify-content: center;
}

.vip-club-card h3 {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--text-white);
  margin-bottom: 0.75rem;
}

.vip-club-card p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.vip-perks-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.vip-perk-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  color: var(--text-primary);
}

.vip-perk-item svg {
  color: var(--accent-pink);
  flex-shrink: 0;
}

.vip-form {
  display: flex;
  gap: 0.75rem;
  position: relative;
}

.vip-input {
  flex: 1;
  padding: 0.9rem 1.25rem;
  border-radius: var(--radius-full);
  background: rgba(10, 8, 22, 0.7);
  border: 1px solid var(--border-medium);
  color: var(--text-white);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.vip-input:focus {
  border-color: var(--accent-purple-light);
  box-shadow: 0 0 16px rgba(147, 51, 234, 0.3);
}

.vip-input::placeholder {
  color: var(--text-muted);
}

.vip-submit-btn {
  padding: 0.9rem 1.85rem;
  background: var(--grad-disco-text);
  color: var(--text-white);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px rgba(147, 51, 234, 0.35);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
}

.vip-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-purple);
}

.vip-club-card .vip-consent {
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.privacy-link,
.status-link {
  color: var(--accent-pink-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.privacy-link:hover,
.status-link:hover {
  color: var(--text-white);
}

.status-link {
  font-weight: 600;
  word-break: break-word;
}

.vip-feedback {
  margin-top: 1rem;
  font-size: 0.88rem;
  line-height: 1.5;
  display: block;
}

.vip-feedback:empty {
  margin-top: 0;
}

.vip-feedback.success {
  color: var(--accent-emerald);
}

.vip-feedback.info {
  color: var(--accent-purple-light);
}

.vip-feedback.error {
  color: #f87171;
}

.vip-input[aria-invalid="true"] {
  border-color: rgba(248, 113, 113, 0.75);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.25);
}

/* Right: Social Ecosystem Cards */
.social-hub-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.social-hub-card h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 0.5rem;
}

.social-hub-card p {
  color: var(--text-secondary);
  font-size: 0.92rem;
  margin-bottom: 1.5rem;
}

.social-channels-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.channel-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.channel-card-link:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateX(4px);
}

.channel-info-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.channel-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-white);
}

.channel-card-link:hover .channel-icon.ig { background: #f43f5e; }
.channel-card-link:hover .channel-icon.sc { background: #ff5500; }
.channel-card-link:hover .channel-icon.sp { background: #1db954; }

.channel-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-white);
}

.channel-handle {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ==========================================================================
   BOOKINGS & CONTACT (SPAM-PROTECTED)
   ========================================================================== */
.contact-section {
  position: relative;
  padding: 7rem 0 8rem 0;
  background: linear-gradient(180deg, #0a0914 0%, #06050b 100%);
  z-index: 2;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3.5rem;
  align-items: start;
}

.contact-info-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-card-box {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow-card);
}

.contact-card-box h3 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 0.75rem;
}

.contact-card-box p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.info-points-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.info-point {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.info-point-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(147, 51, 234, 0.15);
  border: 1px solid rgba(147, 51, 234, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-purple-light);
  flex-shrink: 0;
}

.info-point-text h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-white);
  margin-bottom: 0.2rem;
}

.info-point-text p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0;
}

/* Contact Form Card */
.contact-form-card {
  background: var(--grad-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 3rem;
  box-shadow: var(--shadow-card);
  position: relative;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.form-group.full-width {
  grid-column: span 2;
}

.form-label {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.85rem 1.15rem;
  background: rgba(10, 8, 22, 0.65);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  color: var(--text-white);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent-purple-light);
  box-shadow: 0 0 16px rgba(147, 51, 234, 0.3);
}

.form-input::placeholder, .form-textarea::placeholder {
  color: var(--text-muted);
}

.form-select option {
  background: var(--bg-surface-elevated);
  color: var(--text-white);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* Bot honeypot wrapper: display:none, so browser autofill and password managers never fill it */
.hp-field {
  display: none !important;
}

/* Fields focused after a failed submit stay clear of the fixed header and the bottom dock:
   handled globally by html { scroll-padding-top / scroll-padding-bottom } */

/* Inline field errors */
.field-error {
  font-size: 0.8rem;
  line-height: 1.45;
  color: #f87171;
}

.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"],
.verification-input[aria-invalid="true"] {
  border-color: rgba(248, 113, 113, 0.75);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.22);
}

.form-privacy-note {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

/* Verification challenge */
.verification-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.verification-prompt {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.verification-input {
  width: 80px;
  padding: 0.45rem 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  color: var(--text-white);
  text-align: center;
  font-weight: 700;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Same focus glow as the other form fields (the red invalid style keeps priority) */
.verification-input:focus:not([aria-invalid="true"]) {
  border-color: var(--accent-purple-light);
  box-shadow: 0 0 16px rgba(147, 51, 234, 0.3);
}

.form-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  padding: 1rem 2rem;
  background: var(--grad-disco-text);
  color: var(--text-white);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  box-shadow: 0 6px 20px rgba(147, 51, 234, 0.4);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  margin-top: 1rem;
}

.form-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-pink), 0 8px 25px rgba(147, 51, 234, 0.5);
}

.form-status-message {
  margin-top: 1.25rem;
  padding: 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  line-height: 1.55;
  display: block;
}

.form-status-message:empty {
  margin: 0;
  padding: 0;
  border: 0;
}

.form-status-message.info {
  background: rgba(147, 51, 234, 0.12);
  border: 1px solid rgba(147, 51, 234, 0.35);
  color: var(--accent-purple-light);
}

.form-status-message.success {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: var(--accent-emerald);
}

.form-status-message.error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}

/* Button busy spinner (booking + promo) */
.btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  animation: spin 0.9s linear infinite;
  flex-shrink: 0;
}

.vip-submit-btn .btn-spinner {
  margin-left: 0.5rem;
  vertical-align: -3px;
}

.form-submit-btn:disabled,
.vip-submit-btn:disabled {
  cursor: progress;
  opacity: 0.85;
  transform: none;
}

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

/* ==========================================================================
   STICKY BOTTOM AUDIO DOCK
   ========================================================================== */
.bottom-player-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--dock-total);
  padding-bottom: var(--safe-bottom);
  background: var(--bg-glass-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--border-medium);
  z-index: 99;
  display: flex;
  align-items: center;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6);
  transition: transform var(--transition-smooth);
}

/* Thin Top Progress Indicator for Mobile & Compact Screens */
.dock-progress-bar-top {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--grad-disco);
  transition: width 0.15s linear;
  z-index: 10;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.6);
  pointer-events: none;
}

.bottom-player-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.dock-track-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 300px;
  min-width: 0;
  cursor: pointer;
}

.dock-disc-mini {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, #222 20%, #111 50%, #000 100%);
  border: 2px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.dock-disc-mini.spin {
  animation: spinVinyl 5s linear infinite;
}

.dock-disc-label {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--grad-disco);
}

.dock-text-meta {
  min-width: 0;
}

.dock-track-title {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dock-controls-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  max-width: 520px;
  width: 100%;
}

.dock-buttons-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dock-play-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--grad-disco);
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.4);
  transition: transform var(--transition-fast);
}

.dock-play-btn:hover {
  transform: scale(1.08);
}

.dock-scrub-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.dock-time {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--text-muted);
  width: 36px;
}

.dock-time.right {
  text-align: right;
}

.dock-actions-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.dock-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  transition: all var(--transition-fast);
}

.dock-jump-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: var(--text-white);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  background: #040308;
  border-top: 1px solid var(--border-subtle);
  padding: 5rem 0 3rem 0;
  z-index: 2;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.footer-logo {
  height: 42px;
  width: auto;
  align-self: flex-start;
}

.footer-brand-col p {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.6;
}

.footer-links-col h2 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 1.25rem;
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none;
}

.footer-nav-list a {
  color: var(--text-secondary);
  font-size: 0.92rem;
  transition: color var(--transition-fast);
}

.footer-nav-list a:hover {
  color: var(--accent-pink-light);
}

.footer-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.85rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 1rem;
}

.privacy-details {
  margin-top: 1.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.privacy-details summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--text-secondary);
  list-style: none;
  transition: color var(--transition-fast);
}

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

.privacy-details summary::before {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border-medium);
  font-size: 0.8rem;
  line-height: 1;
  color: var(--accent-pink-light);
}

.privacy-details[open] summary::before {
  content: '\2212';
}

.privacy-details summary:hover {
  color: var(--accent-pink-light);
}

.privacy-body {
  margin-top: 1rem;
  max-width: 760px;
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.6rem;
  line-height: 1.6;
}

.privacy-body strong {
  color: var(--text-secondary);
}

.privacy-body a {
  color: var(--accent-pink-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.london-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-secondary);
  font-family: var(--font-heading);
}

/* ==========================================================================
   MODALS & LIGHTBOX (MODERN HTML DIALOG)
   ========================================================================== */
dialog.lightbox-dialog {
  border: none;
  background: transparent;
  padding: 0;
  margin: auto;
  max-width: 90vw;
  max-height: 90vh;
  outline: none;
  overflow: visible;
  z-index: 1000;
}

dialog.lightbox-dialog::backdrop {
  background: rgba(6, 5, 11, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: opacity 0.3s ease;
}

.lightbox-content-box {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), var(--glow-purple);
  display: flex;
  flex-direction: column;
  position: relative;
  max-width: 1000px;
}

.lightbox-img-wrapper {
  max-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.lightbox-img-wrapper img {
  max-height: 70vh;
  max-width: 100%;
  object-fit: contain;
}

.lightbox-caption-bar {
  padding: 1.25rem 2rem;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.lightbox-caption-text h2 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--text-white);
  margin-bottom: 0.2rem;
}

.lightbox-caption-text p {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.lightbox-counter {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-pink-light);
  background: rgba(236, 72, 153, 0.15);
  border: 1px solid rgba(236, 72, 153, 0.35);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.lightbox-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-medium);
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all var(--transition-fast);
}

.lightbox-close-btn:hover {
  background: rgba(236, 72, 153, 0.8);
  transform: scale(1.08);
}

.lightbox-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(14, 12, 28, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-subtle);
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.lightbox-nav-arrow:hover {
  background: var(--grad-disco);
  transform: translateY(-50%) scale(1.08);
}

.lightbox-nav-arrow.prev { left: 1rem; }
.lightbox-nav-arrow.next { right: 1rem; }

/* Toast Notifications */
.toast-notification {
  position: fixed;
  top: calc(var(--header-total) + 1.5rem);
  right: 2rem;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--accent-pink);
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), var(--glow-pink);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 200;
  color: var(--text-white);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-15px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-notification.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================================== */

/* Header: the logo, seven links, icons and CTA only fit on one line from 1280px. Below that the links move into
   the drawer (tablets, small laptops and landscape phones keep the logo, "Book Artist" and the menu button).
   app.js uses the same breakpoint (drawerQuery in section 9). */
@media (max-width: 1279px) {
  .mobile-nav-toggle {
    display: flex;
  }

  .nav-actions .social-icons-group {
    display: none;
  }

  .nav-menu {
    position: fixed;
    top: var(--header-total);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-total));
    height: calc(100dvh - var(--header-total));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg-glass-strong);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 2.5rem 1.5rem;
    gap: 1.75rem;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    /* Closed links are visibility:hidden (out of the tab order) once the slide-up has finished */
    visibility: hidden;
    transition: transform var(--transition-smooth), opacity var(--transition-smooth), visibility 0s linear 0.35s;
    border-bottom: 1px solid var(--border-subtle);
  }

  .nav-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
  }

  /* The page behind the open drawer doesn't scroll */
  html.nav-drawer-open {
    overflow: hidden;
  }
}

/* Hero video control: top-right under the header on tablets and up, so the fixed dock never covers it
   (phones show it in the flow under the buttons, see the 768 block) */

/* Mid widths: icon-only, so it never runs into the centred hero badge (the label stays the button's name) */

/* Short laptop screens (1366x768, 1280x720, 1024x768): tighter hero rhythm so the whole hero, milestones included,
   fits between the header and the dock on first view */
@media (min-width: 769px) and (max-height: 780px) {
  .hero-section {
    padding-top: calc(var(--header-total) + 1rem);
    padding-bottom: calc(var(--dock-total) + 1rem);
  }
  .hero-badge {
    margin-bottom: 1.25rem;
  }
  .hero-logo-box {
    margin-bottom: 1rem;
  }
  .hero-logo-img {
    max-width: 400px;
  }
  .hero-desc {
    margin-bottom: 1.75rem;
  }
  .hero-buttons {
    margin-bottom: 2rem;
  }
  .hero-milestones {
    padding-top: 1.25rem;
  }
}

/* Landscape phones / very short windows wider than 768px: a smaller hero logo so the tagline shows on first view */
@media (min-width: 769px) and (max-height: 500px) {
  .hero-logo-img {
    max-width: 300px;
  }
}

@media (max-width: 1024px) {
  .player-layout {
    grid-template-columns: 1fr;
  }
  .story-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .story-bg-layer {
    background-attachment: scroll;
  }
  .vault-event-card {
    grid-template-columns: 1fr;
    padding: 2.5rem;
    gap: 2.5rem;
  }
  .flyer-presentation {
    order: -1;
  }
  .flyer-frame {
    transform: none;
  }
  .community-grid {
    grid-template-columns: 1fr;
  }
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  /* Gallery: Bonobo spotlight full width, then three even rows of two */
  .gallery-grid > .col-span-8 {
    grid-column: span 12;
    height: 380px;
  }
  .gallery-grid > .col-span-4, .gallery-grid > .col-span-6 {
    grid-column: span 6;
    height: 320px;
  }
  .gallery-grid.is-filtered > .gallery-item {
    height: 320px;
  }
  .gallery-grid.is-filtered[data-count="1"] > .gallery-item {
    height: 420px;
  }
  .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

/* ==========================================================================
   DJ STUDIO VAULT UPLOADER COMPONENT & MODAL
   ========================================================================== */
.btn-studio-uploader {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
  background: rgba(236, 72, 153, 0.15);
  border: 1px solid rgba(236, 72, 153, 0.4);
  color: var(--accent-pink-light);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.btn-studio-uploader:hover {
  background: var(--grad-disco-text);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: var(--glow-pink);
}

@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-9px); }
  40%, 80% { transform: translateX(9px); }
}

.shake {
  animation: authShake 0.4s ease-in-out;
}

dialog.studio-modal {
  border: none;
  background: transparent;
  padding: 0;
  margin: auto;
  max-width: 620px;
  width: 92vw;
  max-height: 90vh;
  outline: none;
  overflow: visible;
  z-index: 1000;
}

dialog.studio-modal::backdrop {
  background: rgba(6, 5, 11, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.studio-modal-box {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow-card), var(--glow-purple);
  position: relative;
  max-height: 85vh;
  overflow-y: auto;
}

.studio-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.studio-modal-header h3 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-white);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.studio-modal-close {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  flex-shrink: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.studio-modal-close:hover {
  background: rgba(236, 72, 153, 0.8);
  transform: scale(1.08);
}

/* Dropzone */
.audio-dropzone {
  border: 2px dashed rgba(168, 85, 247, 0.4);
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem;
  text-align: center;
  background: rgba(147, 51, 234, 0.06);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: 1.5rem;
}

.audio-dropzone:hover, .audio-dropzone.dragover {
  border-color: var(--accent-pink);
  background: rgba(236, 72, 153, 0.12);
  transform: scale(1.01);
}

.dropzone-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.75rem auto;
  border-radius: 50%;
  background: rgba(147, 51, 234, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-purple-light);
}

.dropzone-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-white);
  margin-bottom: 0.25rem;
}

.dropzone-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.file-preview-card {
  display: none;
  align-items: center;
  justify-content: space-between;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

.file-preview-card.active {
  display: flex;
}

.file-preview-info {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.88rem;
  color: var(--accent-emerald);
}

.file-remove-btn {
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  text-decoration: underline;
}

.studio-upload-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.btn-upload-submit {
  flex: 1;
  padding: 0.85rem 1.5rem;
  background: var(--grad-disco-text);
  color: #fff;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(147, 51, 234, 0.35);
  transition: all var(--transition-fast);
}

.btn-upload-submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-pink);
}

.btn-export-manifest {
  padding: 0.85rem 1.25rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-medium);
  color: var(--text-white);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.88rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-export-manifest:hover {
  background: rgba(255, 255, 255, 0.15);
}

.studio-export-intro {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.studio-export-steps {
  margin: 0 0 0.85rem 1.1rem;
  padding: 0;
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.studio-export-steps code,
.studio-export-intro code {
  color: var(--accent-pink-light);
  overflow-wrap: anywhere; /* long file names wrap; ordinary words stay whole */
}

.studio-export-warning {
  font-size: 0.76rem;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 4px;
  padding: 0.45rem 0.7rem;
  margin-bottom: 0.75rem;
}

.studio-export-save {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.65rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-medium);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-white);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: all var(--transition-fast);
}

.studio-export-save:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES (MOBILE REFINEMENTS)
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --bottom-player-height: 70px;
  }

  /* (The drawer itself is set up in the max-width: 1279px block above.)
     Hide Book Artist from sticky header on mobile so brand and hamburger breathe */
  .nav-actions .btn-header-cta {
    display: none;
  }

  /* Hero Section Mobile */
  .hero-section {
    min-height: auto;
    flex-direction: column;
    padding: calc(var(--header-total) + 1.25rem) 1rem 3.5rem 1rem;
    align-items: center;
    justify-content: flex-start;
  }

  .hero-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero-badge {
    padding: 0.4rem 0.95rem;
    margin-bottom: 1.25rem;
    max-width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  .hero-badge-text {
    font-size: 0.72rem;
    line-height: 1.35;
    letter-spacing: 0.04em;
  }

  .hero-heading {
    width: 100%;
  }

  .hero-logo-box {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .hero-logo-img {
    max-width: 250px;
    width: 75%;
    margin: 0 auto;
  }

  .hero-tagline {
    font-size: 1.25rem;
    line-height: 1.35;
    margin-bottom: 0.75rem;
    text-align: center;
  }

  .hero-desc {
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 1.75rem;
    padding: 0 0.5rem;
    text-align: center;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary,
  .hero-buttons .btn-orange {
    width: 100%;
    justify-content: center;
    padding: 0.8rem 1.25rem;
    font-size: 0.92rem;
  }

  .hero-milestones {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    gap: 0.75rem;
    flex-direction: column;
    align-items: center;
    font-size: 0.82rem;
  }

  /* Sticky Bottom Player Dock Mobile Overhaul */
  .bottom-player-dock {
    height: var(--dock-total);
    padding: 0 0.85rem var(--safe-bottom);
  }

  .bottom-player-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .dock-track-info {
    max-width: 55%;
    gap: 0.6rem;
  }

  .dock-disc-mini {
    width: 36px;
    height: 36px;
  }

  .dock-disc-label {
    width: 14px;
    height: 14px;
  }

  .dock-track-title {
    font-size: 0.82rem;
    max-width: 140px;
  }

  .dock-controls-center {
    max-width: none;
    width: auto;
  }

  .dock-scrub-row {
    display: none;
  }

  .dock-buttons-row {
    gap: 0.35rem;
  }

  .dock-buttons-row .sub-control-btn {
    width: 32px;
    height: 32px;
  }

  .dock-buttons-row .sub-control-btn svg {
    width: 14px;
    height: 14px;
  }

  .dock-play-btn {
    width: 38px;
    height: 38px;
  }

  .dock-play-btn svg {
    width: 16px;
    height: 16px;
  }

  .dock-actions-right {
    gap: 0.35rem;
  }

  .dock-jump-btn {
    position: relative;
    padding: 0;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Icon-only on phones; the text stays as the button's accessible name */
  .dock-jump-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Music Section Mobile */
  .music-section {
    padding: 4.5rem 0;
  }

  .now-playing-console {
    padding: 1.25rem 1rem;
    border-radius: var(--radius-md);
  }

  .console-header {
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .console-sound-links {
    display: none;
  }

  .disc-stage {
    min-height: 170px;
    margin: 0.5rem 0 1rem 0;
  }

  .vinyl-disc {
    width: 140px;
    height: 140px;
  }

  .vinyl-center-label {
    width: 55px;
    height: 55px;
  }

  .vinyl-center-label img {
    width: 40px;
  }

  .visualizer-canvas-container {
    height: 50px;
    margin-bottom: 1rem;
  }

  .active-track-title {
    font-size: 1.15rem;
  }

  .controls-row {
    justify-content: center;
    gap: 0.75rem;
  }

  .main-play-btn {
    width: 52px;
    height: 52px;
  }

  .step-btn {
    width: 38px;
    height: 38px;
  }

  .sub-control-btn {
    width: 36px;
    height: 36px;
  }

  .volume-wrapper {
    display: none;
  }

  .playlist-panel {
    padding: 1.25rem 1rem;
    border-radius: var(--radius-md);
  }

  .playlist-filters {
    gap: 0.4rem;
  }

  .filter-pill {
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
  }

  .track-item {
    padding: 0.65rem 0.75rem;
  }

  .track-num-play {
    width: 28px;
    height: 28px;
    font-size: 0.78rem;
  }

  .track-item-title {
    font-size: 0.82rem;
  }

  /* All ten tracks in the page flow (no nested scroll box on touch screens) */
  .tracklist-container {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .track-item-duration {
    font-size: 0.75rem;
  }

  /* Story section mobile */
  .story-section {
    padding: 4.5rem 0;
  }

  .story-narrative-card {
    padding: 1.75rem 1.25rem;
    border-radius: var(--radius-md);
  }

  .story-paragraphs {
    font-size: 0.9rem;
    gap: 1rem;
  }

  .accolade-card {
    padding: 1rem;
  }

  /* Gallery mobile */
  .gallery-section {
    padding: 4.5rem 0;
  }

  /* Two columns down to 520px (single column below, see the 520 block) */
  .gallery-grid {
    gap: 1rem;
  }

  .gallery-grid > .col-span-8 {
    height: 300px;
  }

  .gallery-grid > .col-span-4, .gallery-grid > .col-span-6 {
    height: 280px;
  }

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

  .gallery-grid.is-filtered > .gallery-item {
    height: 280px;
  }

  .gallery-grid.is-filtered > .gallery-item.is-feature,
  .gallery-grid.is-filtered[data-count="1"] > .gallery-item {
    grid-column: 1 / -1;
    height: 300px;
  }

  .gallery-grid.is-filtered[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-filter-tabs {
    gap: 0.4rem;
    margin-bottom: 2rem;
  }

  .gallery-tab-btn {
    padding: 0.45rem 0.95rem;
    font-size: 0.8rem;
  }

  /* Event Vault mobile */
  .vault-section {
    padding: 4.5rem 0;
  }

  .vault-event-card {
    padding: 1.5rem 1rem;
    border-radius: var(--radius-md);
    gap: 1.5rem;
  }

  .event-title {
    font-size: 2.1rem;
  }

  .event-venue-row {
    gap: 0.75rem;
    font-size: 0.88rem;
  }

  .countdown-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
  }

  .countdown-unit {
    padding: 0.5rem 0.2rem;
  }

  .countdown-val {
    font-size: 1.35rem;
  }

  .countdown-label {
    font-size: 0.65rem;
  }

  .event-cta-group {
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
  }

  .btn-ra-tickets, .btn-calendar, .btn-ra-discoworks {
    width: 100%;
    justify-content: center;
    padding: 0.8rem 1.25rem;
    font-size: 0.9rem;
  }

  .calendar-menu {
    width: 100%;
  }

  .calendar-menu-list {
    right: 0;
    width: auto;
  }

  .event-live-now {
    display: flex;
    justify-content: center;
    font-size: 0.95rem;
  }

  /* Community & Contact mobile */
  .community-section, .contact-section {
    padding: 4.5rem 0;
  }

  .vip-club-card, .social-hub-card, .contact-card-box, .contact-form-card {
    padding: 1.75rem 1.25rem;
    border-radius: var(--radius-md);
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .form-group.full-width {
    grid-column: span 1;
  }

  .verification-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .verification-input {
    width: 100%;
  }

  .vip-form {
    flex-direction: column;
  }

  .vip-submit-btn {
    width: 100%;
  }

  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .section-title {
    font-size: 1.95rem;
  }

  .section-subtitle {
    font-size: 0.92rem;
  }

  /* Phones: the story background is under a ~90% scrim, so the 800 px file is plenty */
  .story-bg-layer {
    background-image: url('../assets/img/opt/dark-club-story-bg-800.jpg');
    background-image: image-set(url('../assets/img/opt/dark-club-story-bg-800.webp') type('image/webp'), url('../assets/img/opt/dark-club-story-bg-800.jpg') type('image/jpeg'));
  }

  /* Toasts span the screen with a gutter instead of hugging the left edge */
  .toast-notification {
    left: 1rem;
    right: 1rem;
    top: calc(var(--header-total) + 0.75rem);
  }
}

/* Small phones: one photo per row in 4:3 tiles (the portrait photos keep the faces via their object-position) */
@media (max-width: 520px) {
  .gallery-grid > .col-span-8,
  .gallery-grid > .col-span-4,
  .gallery-grid > .col-span-6,
  .gallery-grid.is-filtered > .gallery-item,
  .gallery-grid.is-filtered > .gallery-item.is-feature,
  .gallery-grid.is-filtered[data-count="1"] > .gallery-item {
    grid-column: 1 / -1;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .gallery-grid.is-filtered {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Landscape phones (and other very short screens): a slimmer header and a one-row dock leave more room for content */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --nav-height: 60px;
    --bottom-player-height: 64px;
  }

  .dock-scrub-row {
    display: none;
  }

  .dock-disc-mini {
    width: 36px;
    height: 36px;
  }

  .dock-jump-btn {
    position: relative;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    justify-content: center;
  }

  /* Icon-only; the text stays as the button's accessible name */
  .dock-jump-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Lightbox: photo + caption fit inside the 90vh dialog */
  .lightbox-img-wrapper,
  .lightbox-img-wrapper img {
    max-height: calc(90vh - 72px);
  }

  .lightbox-caption-bar {
    padding: 0.6rem 1.25rem;
  }
}

/* ==========================================================================
   404 PAGE (404.html: standalone, root-absolute asset paths, no scripts)
   ========================================================================== */
.page-404 {
  padding-bottom: 0;
}

.not-found {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}

.not-found-card {
  width: 100%;
  max-width: 720px;
  text-align: center;
  padding: 3rem 2.5rem;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), 0 0 50px rgba(236, 72, 153, 0.15);
}

.not-found-logo {
  display: inline-block;
  margin-bottom: 1.25rem;
}

.not-found-logo img {
  width: min(260px, 64vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 0 30px rgba(236, 72, 153, 0.4));
}

.not-found-code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.08em;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 18vw, 7rem);
  line-height: 1;
  margin-bottom: 1.25rem;
}

.not-found-code > span {
  background: var(--grad-disco);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(236, 72, 153, 0.35));
}

.not-found-vinyl.vinyl-disc {
  width: 0.92em;
  height: 0.92em;
  border-width: 3px;
}

.not-found-vinyl .vinyl-center-label {
  width: 40%;
  height: 40%;
}

.not-found-vinyl .vinyl-center-label img {
  width: 78%;
}

.not-found-vinyl .vinyl-spindle-hole {
  width: 9px;
  height: 9px;
}

.not-found .section-title {
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  text-wrap: balance;
}

.not-found-text {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 460px;
  margin: 0 auto 2rem;
}

.not-found-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.not-found-actions .btn-secondary {
  padding: 0.85rem 1.5rem;
}

/* Short landscape screens: two columns of links so the whole drawer fits under the header */
@media (max-width: 1279px) and (max-height: 500px) {
  .nav-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 13rem));
    justify-content: center;
    justify-items: center;
    align-content: start;
    gap: 0.6rem 1.5rem;
    padding: 1.25rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .not-found-card {
    padding: 2.25rem 1.25rem;
    border-radius: var(--radius-md);
  }

  .not-found-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .not-found-actions a {
    justify-content: center;
  }
}

/* ==========================================================================
   MOBILE: FIXED FULL-BLEED BACKGROUND VIDEO
   On phones the hero video is pinned edge to edge behind the whole page and every section scrolls over it on a
   clear background, until the opaque footer (logo + navigation) covers it at the bottom. Cards keep their own
   frosted panels; a flat tint over the video keeps the loose headings readable. js/app.js keeps the clip playing
   while scrolling on this breakpoint.
   ========================================================================== */
@media (max-width: 768px) {
  .hero-video-wrapper {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh; /* the large viewport: no gap appears when the browser's address bar slides away */
  }

  .hero-video {
    opacity: 1;
  }

  /* An even tint instead of the desktop vignette, so the clip reaches every edge of the screen */
  .hero-video-overlay {
    background: linear-gradient(180deg, rgba(6, 5, 11, 0.48) 0%, rgba(6, 5, 11, 0.62) 100%);
  }

  .music-section,
  .story-section,
  .gallery-section,
  .vault-section,
  .community-section,
  .contact-section {
    background: transparent;
  }

  /* The club photo would hide the video, so the story card sits on the video like everything else */
  .story-bg-layer,
  .story-scrim-overlay {
    display: none;
  }

  .section-title,
  .section-subtitle {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .vinyl-disc.spin, .dock-disc-mini.spin {
    animation: none;
  }
}