/* ==========================================
   WHY NOT — Design System & Variables
   ========================================== */
:root {
  --black: #0a0a0a;
  --dark: #111111;
  --dark-2: #1a1a1a;
  --dark-3: #222222;
  --gray: #888888;
  --light: #e0e0e0;
  --white: #f5f5f5;
  --orange: #ff8c00;
  --yellow: #ffb800;
  --cyan: #00c8ff;
  --blue: #0088ff;
  --magenta: #ff00aa;
  --gradient-brand: linear-gradient(135deg, var(--orange), var(--yellow));
  --gradient-cyan: linear-gradient(135deg, var(--cyan), var(--blue));
  --gradient-mixed: linear-gradient(135deg, var(--orange), var(--cyan));
  --glass-bg: rgba(17, 17, 17, 0.85);
  --glass-border: rgba(255, 255, 255, 0.08);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-glow-orange: 0 0 30px rgba(255, 140, 0, 0.3);
  --shadow-glow-cyan: 0 0 30px rgba(0, 200, 255, 0.3);
  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  background-color: var(--black); 
  overscroll-behavior: none; /* Disables the pull-down/pull-up bounce to prevent color stripes */
}

body {
  font-family: var(--font-body);
  background-color: var(--black); 
  color: var(--light);
  overflow-x: hidden;
  min-height: 100vh;
  line-height: 1.6;
}

.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

.no-display {
  display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
}

a {
  color: var(--cyan);
  text-decoration: none;
  transition: var(--transition);
}
a:hover {
  color: var(--orange);
}

.accent-orange {
  color: var(--orange);
}
.accent-cyan {
  color: var(--cyan);
}
.accent-gradient {
  background: var(--gradient-mixed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Noise overlay */
.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ==========================================
   INTRO SCREEN
   ========================================== */
.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
}
.intro-screen.fade-out {
  opacity: 0;
  visibility: hidden;
}
.intro-logo {
  animation: introFloat 2s ease-in-out infinite;
}
.intro-logo img {
  width: 160px;
  height: 160px;
  object-fit: contain;
}
.intro-tagline {
  margin-top: 24px;
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 6px;
  color: var(--gray);
  text-transform: uppercase;
}
.intro-pulse {
  margin-top: 40px;
  width: 40px;
  height: 40px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes introFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0;
  }
}



/* ==========================================
   VINYL HERO
   ========================================== */
/* Scrolling Background */
.scrolling-bg-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Remove space-evenly to prevent flex gaps */
  opacity: 0.02;
  pointer-events: none;
}
.scrolling-row {
  display: flex;
  width: fit-content;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: 19vh; 
  height: 16.666vh; /* exactly 1/6th of screen height */
  align-items: center;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--black);
  line-height: 1;
}
.scrolling-row span {
  padding-right: 20px;
}
.row-left {
  animation: scrollLeft 90s linear infinite;
}
.row-right {
  animation: scrollRight 90s linear infinite;
}

/* Half speed when Side A or Side B is selected (double the duration) */
body.split-a .row-left,
body.split-b .row-left {
  animation-duration: 180s;
}
body.split-a .row-right,
body.split-b .row-right {
  animation-duration: 180s;
}
@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes scrollRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* WHY NOT logo image above the vinyl */
.vinyl-hero-title {
  display: none; /* Hidden by default, shown by state */
  max-width: min(70%, 520px);
  width: 100%;
  height: auto;
  margin: 0 auto 20px;
  user-select: none;
  opacity: 1;
}

/* Default state: Show standard title */
body:not(.split-a):not(.split-b) .standard-title {
  display: block;
  transform: translateY(-10px);
}

/* Side A state: Show party_nights left justified */
body.split-a .side-a-title {
  display: block;
  margin-left: 40px; /* Small margin to avoid touching edge */
  margin-right: auto;
  text-align: left;
  align-self: flex-start;
}

/* Side B state: Show the_label right justified */
body.split-b .side-b-title {
  display: block;
  margin-right: 40px; /* Match Side A spacing */
  margin-left: auto;
  text-align: right;
  align-self: flex-end;
}

/* Removed specific padding overrides to allow consistent spacing */

body.split-a .standard-title,
body.split-b .standard-title {
  display: none;
}

.vinyl-hero {
  position: relative;
  z-index: 1; 
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background-color: #ffffff;
  color: var(--black);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

body.split-a .vinyl-hero,
body.split-b .vinyl-hero {
  position: fixed;
  inset: 0;
  width: 100vw;
}

.vinyl-hero.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.vinyl-container {
  position: relative;
  width: 600px; 
  height: 600px;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
}

.vinyl-hero.split-left .vinyl-container {
  transform: translateX(-25vw) scale(0.65);
}
.vinyl-hero.split-right .vinyl-container {
  transform: translateX(25vw) scale(0.65);
}

.vinyl-glow {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 140, 0, 0.25) 0%,
    transparent 70%
  );
  animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.vinyl-record {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  /* Authentic vinyl base using repeating radial gradients for micro-grooves */
  background: 
    repeating-radial-gradient(
      #111 0%, 
      #000 5%, 
      #111 6%,
      #000 10%
    );
  /* Glossy vinyl light reflection using conic gradients */
  background-image: 
    repeating-radial-gradient(
      #111 0%, 
      #000 2%, 
      #111 3%,
      #000 5%
    ),
    conic-gradient(
      from 45deg,
      transparent 0deg,
      rgba(255, 255, 255, 0.15) 30deg,
      transparent 60deg,
      rgba(255, 255, 255, 0.05) 120deg,
      transparent 180deg,
      rgba(255, 255, 255, 0.15) 210deg,
      transparent 240deg,
      rgba(255, 255, 255, 0.05) 300deg,
      transparent 360deg
    );
  /* Combine the base grooves with the glossy light */
  background-blend-mode: overlay;
  
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    inset 0 0 10px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.1); 
  animation: vinylSpin 20s linear infinite;
  cursor: default; /* Normal cursor on grooves */
  overflow: hidden; 
}
/* We remove the hover entirely from .vinyl-record 
   so hovering the grooves does not trigger the speed up */

/* Grooves: visible ring bands simulating vinyl groove zones - original approach */
.vinyl-grooves {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.02),
    0 0 0 16px rgba(255, 255, 255, 0.015),
    0 0 0 24px rgba(255, 255, 255, 0.01),
    0 0 0 32px rgba(255, 255, 255, 0.008),
    0 0 0 40px rgba(255, 255, 255, 0.005),
    0 0 0 48px rgba(255, 255, 255, 0.005),
    0 0 0 56px rgba(255, 255, 255, 0.005);
  pointer-events: none;
}

/* Authentic Paper Center Label */
.vinyl-label-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42%;
  height: 42%;
  border-radius: 50%;
  overflow: hidden; 
  isolation: isolate; /* Creates stacking context to prevent bleed */
  clip-path: circle(50%); /* Hard clip all children to the circular boundary */
  background: transparent;
  box-shadow: 
    0 0 10px rgba(0,0,0,0.8),
    inset 0 0 0 4px rgba(255,255,255,0.05);
  z-index: 5;
  cursor: pointer;
}

/* Label image — sized to 130% so square PNG padding is cropped by overflow:hidden */
.vinyl-label-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 130%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* 
  When hovering the label container, we pause the parent record spin 
*/
.vinyl-record:has(.vinyl-label-container:hover) {
  animation-play-state: paused;
}

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

/* Sides exist inside the inner label container now */
.vinyl-side {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: var(--transition);
  z-index: 1;
}
.vinyl-side-a {
  left: 0;
  justify-content: flex-start; /* Text toward outer left edge */
  padding-left: clamp(4%, 1.5vw, 8%);
  background: rgba(255, 140, 0, 0.07);
}
.vinyl-side-b {
  right: 0;
  justify-content: flex-end; /* Text toward outer right edge */
  padding-right: clamp(4%, 1.5vw, 8%);
  background: rgba(0, 200, 255, 0.07);
}

.vinyl-side:hover {
  background: rgba(255, 255, 255, 0.1);
}
.vinyl-side-a:hover {
  background: rgba(255, 140, 0, 0.13);
}
.vinyl-side-b:hover {
  background: rgba(0, 200, 255, 0.13);
}

.vinyl-side-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1px, 0.5vw, 4px);
  pointer-events: none;
  white-space: nowrap;
  /* No counter-spin — text rotates with record like real label printing */
}
/* Side A: text reads upward along the outer left edge */
.vinyl-side-a .vinyl-side-content {
  transform: rotate(-90deg);
}
/* Side B: text reads downward along the outer right edge */
.vinyl-side-b .vinyl-side-content {
  transform: rotate(90deg);
}
/* Text spins naturally with the record — no override needed on hover */

@keyframes counterSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
.vinyl-side-label {
  font-family: var(--font-heading);
  font-size: clamp(4px, 1.2vw, 11px);
  letter-spacing: clamp(0.5px, 0.4vw, 4px);
  color: #555; /* Dark text against white label */
  font-weight: 600;
}
.vinyl-side-name {
  font-family: var(--font-heading);
  font-size: clamp(5px, 1.5vw, 14px);
  font-weight: 700;
}
.vinyl-side-a .vinyl-side-name {
  color: var(--orange);
}
.vinyl-side-b .vinyl-side-name {
  color: var(--cyan);
}
.vinyl-side-domain {
  font-size: clamp(3px, 1.1vw, 10px);
  letter-spacing: clamp(0.5px, 0.2vw, 2px);
  color: #666; /* Dark text against white label */
  opacity: 0.9;
}

/* True transparent spindle hole in the very center */
.vinyl-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px; 
  height: 16px;
  border-radius: 50%;
  background: var(--white); /* White background of the page shows through */
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.6);
  z-index: 10;
}
.vinyl-center-logo {
  display: none; /* Removed the inner logo as it breaks the realism of the spindle hole */
}

.vinyl-cta {
  text-align: center;
  margin-top: 48px;
  transition: opacity 0.5s ease;
}

.vinyl-hero.split-left .vinyl-cta,
.vinyl-hero.split-right .vinyl-cta {
  opacity: 0;
  pointer-events: none;
}
.vinyl-cta-text {
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 6px;
  color: var(--gray);
  margin-bottom: 16px;
}
.vinyl-cta-arrows {
  display: flex;
  gap: 40px;
  justify-content: center;
}
.cta-arrow {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 3px;
  cursor: pointer;
  transition: var(--transition);
  padding: 8px 16px;
  border-radius: 100px;
}
.cta-arrow-left {
  color: var(--orange);
}
.cta-arrow-left:hover {
  background: rgba(255, 140, 0, 0.15);
}
.cta-arrow-right {
  color: var(--cyan);
}
.cta-arrow-right:hover {
  background: rgba(0, 200, 255, 0.15);
}

/* ==========================================
   SIDE SECTIONS
   ========================================== */
/* Back to Vinyl — fixed at bottom corner, styled like the CTA arrows on main dashboard */
.back-btn-fixed {
  position: fixed;
  bottom: 40px;
  z-index: 1000;
  background: transparent;
  border: none;
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 3px;
  cursor: pointer;
  transition: var(--transition);
  padding: 8px 16px;
  border-radius: 100px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}
.back-btn-top {
  top: 40px;
  bottom: auto;
}

/* Side A: bottom-right, orange (matches .cta-arrow-right style) */
body.split-a .back-btn-fixed {
  right: 40px;
  left: auto;
  color: var(--orange);
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
body.split-a .back-btn-fixed::after {
  content: ' ►'; /* Arrow points right since button is bottom-right */
}
body.split-a .back-btn-fixed:hover {
  background: rgba(255, 140, 0, 0.15);
}

/* Side B: bottom-left, cyan (matches .cta-arrow-left style) */
body.split-b .back-btn-fixed {
  left: 40px;
  right: auto;
  color: var(--cyan);
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
body.split-b .back-btn-fixed::before {
  content: '◄ '; /* Arrow points left since button is bottom-left */
}
body.split-b .back-btn-fixed:hover {
  background: rgba(0, 200, 255, 0.15);
}

.side-section {
  min-height: 100vh;
  padding: 60px 24px 120px;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

body.split-a .side-section,
body.split-a .shared-sections,
body.split-a .main-footer {
  width: 50%;
  margin-left: 0;
}

body.split-b .side-section,
body.split-b .shared-sections,
body.split-b .main-footer {
  width: 50%;
  margin-left: 50%;
}

.side-section,
.shared-sections,
.main-footer {
  position: relative;
  z-index: 10; /* Scroll on top of the fixed vinyl-hero */
}

.side-section.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.section-inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* Position Side A cards slightly lower and to the right with more breathing room */
.side-a-section .section-inner {
  padding-top: 20vh; /* Lowered by 20% from 10vh */
  margin-left: auto;
  margin-right: 15%;
  max-width: 800px;
}
.side-a-section .section-grid {
  gap: 80px; /* Increased space between cards */
}
.side-a-section .grid-card:nth-child(odd) {
  transform: translateX(150px);
}
.side-a-section .grid-card:nth-child(even) {
  transform: translateX(300px);
}

/* Mirrored staggered layout for Side B (Shifted Left) */
.side-b-section .section-inner {
  padding-top: 20vh; /* Lowered by 20% from 10vh */
  margin-right: auto;
  margin-left: 15%;
  max-width: 800px;
}
.side-b-section .section-grid {
  gap: 80px;
}
.side-b-section .grid-card:nth-child(odd) {
  transform: translateX(-300px);
}
.side-b-section .grid-card:nth-child(even) {
  transform: translateX(-150px);
}

/* Grid sections spacing */

/* ==========================================
   GRID CARDS
   ========================================== */
.section-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Force 2x2 layout for sides */
  gap: 80px; 
}
.shared-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 1x3 layout for shared cards */
  gap: 40px;
}
.grid-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 32px 24px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.shared-card {
  border: none;
  background: transparent;
}

/* Specific styling for cards in Side A/B (Transparent/Black) */
.side-section .grid-card {
  background: transparent;
  border: none;
}
.grid-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 140, 0, 0.05),
    rgba(0, 200, 255, 0.05)
  );
  opacity: 0;
  transition: var(--transition);
}
.grid-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.15);
}
.grid-card:hover::before {
  opacity: 1;
}

.card-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  color: var(--gray);
  transition: var(--transition);
}
.side-section .card-icon {
  color: var(--black);
}
.card-icon svg,
.card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.side-a-section .grid-card:hover .card-icon {
  color: var(--orange);
}
.side-b-section .grid-card:hover .card-icon {
  color: var(--cyan);
}
.shared-card:hover .card-icon {
  color: var(--orange);
}

.card-title {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--white);
}
.side-section .card-title {
  color: var(--black);
}
.card-desc {
  font-size: 13px;
  color: var(--gray);
  margin-bottom: 16px;
  line-height: 1.5;
}
.side-section .card-desc {
  color: rgba(0, 0, 0, 0.7);
}
.card-cta {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--gray);
  transition: var(--transition);
}
.side-section .card-cta {
  color: var(--black);
}
.side-a-section .grid-card:hover .card-cta {
  color: var(--orange);
}
.side-b-section .grid-card:hover .card-cta {
  color: var(--cyan);
}
.shared-card:hover .card-cta {
  color: var(--orange);
}

/* Shared sections */
.shared-sections {
  padding: 80px 24px 80px;
  background: var(--black); /* Original dark background */
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.shared-sections.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* ==========================================
   MODAL SYSTEM
   ========================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.85); /* Default dark background */
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
  padding: 40px 20px;
  overflow-y: auto;
}
.modal-overlay.light-theme {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
}
.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-wrapper {
  background: var(--dark);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 48px;
  max-width: 800px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(30px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-overlay.light-theme .modal-wrapper {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.1);
}
.modal-overlay.open .modal-wrapper {
  transform: translateY(0) scale(1);
}

.modal-wrapper::-webkit-scrollbar {
  width: 6px;
}
.modal-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.modal-wrapper::-webkit-scrollbar-thumb {
  background: var(--dark-3);
  border-radius: 3px;
}

.modal-close {
  position: sticky;
  top: 0;
  float: right;
  width: 40px;
  height: 40px;
  border: none;
  background: var(--dark-2);
  border-radius: 50%;
  color: var(--gray);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  z-index: 10;
}
.modal-overlay.light-theme .modal-close {
  background: var(--light);
  color: var(--black);
}
.modal-close svg {
  width: 18px;
  height: 18px;
}
.modal-close:hover {
  color: var(--white);
  background: var(--dark-3);
}

.modal-content {
  display: none;
}
.modal-content.active {
  display: block;
}

.modal-header {
  margin-bottom: 32px;
}
.modal-title {
  font-size: clamp(24px, 4vw, 36px);
  letter-spacing: 2px;
  color: var(--white);
}
.modal-overlay.light-theme .modal-title {
  color: var(--black);
}
.modal-subtitle {
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--gray);
  margin-top: 8px;
  text-transform: uppercase;
}
.modal-overlay.light-theme .modal-subtitle {
  color: rgba(0, 0, 0, 0.5);
}

/* ==========================================
   EVENT CARDS
   ========================================== */
.event-card {
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 20px;
  transition: var(--transition);
}
.modal-overlay.light-theme .event-card {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.event-card:hover {
  border-color: rgba(255, 140, 0, 0.3);
}

.event-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 1px solid var(--glass-border);
}
.event-body {
  padding: 24px;
}
.event-title {
  font-size: 20px;
  margin-bottom: 8px;
  color: var(--white);
}
.modal-overlay.light-theme .event-title {
  color: var(--black);
}
.event-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.event-date,
.event-location {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 6px;
}
.event-desc {
  font-size: 14px;
  color: var(--gray);
  margin-bottom: 20px;
  line-height: 1.6;
}
.event-cta {
  display: inline-block;
}

/* Media gallery for past events */
.event-media {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.event-media img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* ==========================================
   BUTTONS
   ========================================== */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 32px;
  border: none;
  border-radius: 100px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}
.btn-primary {
  background: var(--gradient-brand);
  color: var(--black);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-orange);
  color: var(--black);
}
.btn-email {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 2px;
  letter-spacing: 1px;
}
.btn-glow {
  box-shadow: var(--shadow-glow-orange);
}
.btn-submit {
  width: 100%;
  justify-content: center;
  margin-top: 16px;
}
.btn-bandcamp {
  margin: 24px 0;
}

/* ==========================================
   SPONSOR
   ========================================== */
.sponsor-body p {
  font-size: 15px;
  color: var(--light);
  line-height: 1.7;
}
.modal-overlay.light-theme .sponsor-body p {
  color: rgba(0, 0, 0, 0.8);
}
.sponsor-heading {
  font-size: 18px;
  margin-bottom: 12px;
  color: var(--orange);
}
.sponsor-list {
  list-style: none;
  padding: 0;
}
.sponsor-list li {
  padding: 8px 0;
  padding-left: 20px;
  position: relative;
  font-size: 14px;
  color: var(--light);
}
.modal-overlay.light-theme .sponsor-list li {
  color: rgba(0, 0, 0, 0.8);
}
.sponsor-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--orange);
}
.sponsor-cta {
  text-align: center;
  margin-top: 32px;
}

/* ==========================================
   MEMBERSHIP
   ========================================== */
.membership-body p {
  font-size: 15px;
  color: var(--light);
  line-height: 1.7;
}
.modal-overlay.light-theme .membership-body p {
  color: rgba(0, 0, 0, 0.8);
}
.membership-perks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.perk-card {
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
}
.modal-overlay.light-theme .perk-card {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.perk-icon {
  font-size: 32px;
  margin-bottom: 12px;
}
.perk-card h4 {
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--white);
}
.modal-overlay.light-theme .perk-card h4 {
  color: var(--black);
}
.perk-card p {
  font-size: 12px;
  color: var(--gray);
  line-height: 1.5;
}
.modal-overlay.light-theme .perk-card p {
  color: rgba(0, 0, 0, 0.7);
}
.membership-cta {
  text-align: center;
  margin-top: 32px;
}
.membership-note {
  font-size: 12px;
  color: var(--gray);
  margin-top: 12px;
}

/* ==========================================
   ARTISTS
   ========================================== */
.artists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.artist-card {
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}
.modal-overlay.light-theme .artist-card {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.artist-card:hover {
  border-color: rgba(0, 200, 255, 0.3);
  transform: translateY(-4px);
}
.artist-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--dark-3);
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--cyan);
  overflow: hidden;
}
.artist-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.artist-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
}
.modal-overlay.light-theme .artist-name {
  color: var(--black);
}

.artist-detail {
  padding-top: 16px;
}
.detail-back {
  background: none;
  border: none;
  color: var(--cyan);
  font-family: var(--font-heading);
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 1px;
  margin-bottom: 24px;
}
.detail-back:hover {
  color: var(--orange);
}
.artist-detail-header {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.artist-detail-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--dark-3);
  overflow: hidden;
  flex-shrink: 0;
}
.artist-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.artist-detail-name {
  font-size: 28px;
  color: var(--white);
}
.modal-overlay.light-theme .artist-detail-name {
  color: var(--black);
}
.artist-detail-bio {
  font-size: 14px;
  color: var(--light);
  line-height: 1.7;
  margin-bottom: 24px;
}
.artist-releases-title {
  font-size: 16px;
  color: var(--cyan);
  margin-bottom: 16px;
  letter-spacing: 2px;
}

/* ==========================================
   RELEASES + AUDIO PLAYER
   ========================================== */
.releases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.release-card {
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
}
.modal-overlay.light-theme .release-card {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.release-card:hover {
  border-color: rgba(0, 200, 255, 0.3);
  transform: translateY(-4px);
}
.release-cover {
  width: 100%;
  aspect-ratio: 1;
  background: var(--dark-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: var(--dark);
  overflow: hidden;
}
.release-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.release-info {
  padding: 16px;
}
.release-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
}
.modal-overlay.light-theme .release-title {
  color: var(--black);
}
.release-artist-name {
  font-size: 12px;
  color: var(--gray);
}
.release-cat {
  font-size: 10px;
  color: var(--cyan);
  letter-spacing: 2px;
  margin-top: 4px;
}

/* Release detail */
.release-detail {
  padding-top: 16px;
}
.release-detail-header {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.release-detail-cover {
  width: 200px;
  height: 200px;
  border-radius: var(--radius-md);
  background: var(--dark-3);
  flex-shrink: 0;
  overflow: hidden;
}
.release-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.release-detail-info h3 {
  font-size: 24px;
  color: var(--white);
  margin-bottom: 4px;
}
.modal-overlay.light-theme .release-detail-info h3 {
  color: var(--black);
}
.release-detail-meta {
  font-size: 13px;
  color: var(--gray);
  margin-bottom: 8px;
}
.release-detail-meta span {
  color: var(--cyan);
}

/* Custom audio player */
.track-list {
  margin-top: 16px;
}
.track-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--dark-2);
  margin-bottom: 8px;
  border: 1px solid var(--glass-border);
  transition: var(--transition);
}
.modal-overlay.light-theme .track-item {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.track-item:hover {
  border-color: rgba(0, 200, 255, 0.2);
}
.track-item.playing {
  border-color: var(--cyan);
  background: rgba(0, 200, 255, 0.05);
}

.track-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--dark-3);
  border: 1px solid var(--glass-border);
  color: var(--cyan);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}
.track-play-btn:hover {
  background: var(--cyan);
  color: var(--black);
}
.track-play-btn svg {
  width: 14px;
  height: 14px;
}

.track-info {
  flex: 1;
  min-width: 0;
}
.track-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
}
.modal-overlay.light-theme .track-name {
  color: var(--black);
}
.track-duration {
  font-size: 11px;
  color: var(--gray);
}

.track-progress {
  flex: 2;
  min-width: 80px;
  height: 4px;
  background: var(--dark-3);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.track-progress-fill {
  height: 100%;
  background: var(--gradient-cyan);
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s linear;
}

/* Pitch control */
.pitch-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 60px;
}
.pitch-label {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--gray);
  text-transform: uppercase;
}
.pitch-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 60px;
  height: 4px;
  background: var(--dark-3);
  border-radius: 2px;
  outline: none;
}
.pitch-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  cursor: pointer;
  border: 2px solid var(--dark);
}
.pitch-value {
  font-size: 10px;
  color: var(--cyan);
  font-family: var(--font-heading);
}

/* ==========================================
   DEMO UPLOAD
   ========================================== */
.demo-intro {
  font-size: 14px;
  color: var(--gray);
  margin-bottom: 24px;
  line-height: 1.6;
}

.demo-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--gray);
  text-transform: uppercase;
}
.form-group input,
.form-group textarea {
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: var(--transition);
  resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0, 200, 255, 0.1);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--gray);
  opacity: 0.5;
}

.upload-zone {
  border: 2px dashed var(--glass-border);
  border-radius: var(--radius-md);
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--cyan);
  background: rgba(0, 200, 255, 0.03);
}
.upload-icon {
  width: 48px;
  height: 48px;
  color: var(--gray);
  margin: 0 auto 12px;
}
.upload-text {
  font-size: 15px;
  color: var(--light);
}
.upload-subtext {
  font-size: 13px;
  color: var(--gray);
  margin-top: 4px;
}
.upload-formats {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--cyan);
  margin-top: 12px;
  font-family: var(--font-heading);
}
.upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.upload-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px;
  background: rgba(0, 200, 255, 0.1);
  border-radius: var(--radius-sm);
}
.upload-preview.hidden {
  display: none;
}
.upload-filename {
  font-size: 13px;
  color: var(--cyan);
}
.upload-remove {
  background: none;
  border: none;
  color: var(--gray);
  font-size: 20px;
  cursor: pointer;
  transition: var(--transition);
}
.upload-remove:hover {
  color: var(--magenta);
}

/* ==========================================
   BANDCAMP & MERCH MODALS
   ========================================== */
.bandcamp-body,
.merch-body {
  text-align: center;
}
.bandcamp-promo,
.merch-promo {
  padding: 24px 0;
}
.bandcamp-promo p,
.merch-promo p {
  font-size: 15px;
  color: var(--light);
  line-height: 1.7;
}
.bandcamp-icon-large {
  width: 60px;
  height: 60px;
  margin: 0 auto 24px;
  color: var(--cyan);
}
.bandcamp-icon-large svg {
  width: 100%;
  height: 100%;
}
.bandcamp-note,
.merch-note {
  font-size: 12px;
  color: var(--gray);
  margin-top: 16px;
}

/* ==========================================
   ABOUT
   ========================================== */
.about-body {
  max-width: 640px;
  margin: 0 auto;
}
.about-lead {
  font-size: 18px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.7;
}
.about-text p {
  font-size: 15px;
  color: var(--light);
  line-height: 1.8;
}
.about-text strong {
  color: var(--white);
}
.about-text em {
  color: var(--orange);
  font-style: italic;
}
.about-closing {
  text-align: center;
  font-size: 24px !important;
  margin-top: 16px;
}

/* ==========================================
   MIXES
   ========================================== */
.mixes-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.filter-btn {
  padding: 8px 20px;
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  background: transparent;
  color: var(--gray);
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: var(--transition);
}
.filter-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.filter-btn.active {
  background: var(--gradient-brand);
  color: var(--black);
  border-color: transparent;
}

.mixes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.mix-card {
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: var(--transition);
}
.mix-card:hover {
  border-color: rgba(255, 140, 0, 0.3);
}
.mix-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
}
.mix-artist {
  font-size: 12px;
  color: var(--orange);
  margin-bottom: 4px;
}
.mix-type {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--gray);
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ==========================================
   FOOTER
   ========================================== */
.main-footer {
  padding: 60px 24px 24px;
  background: var(--dark);
  border-top: 1px solid var(--glass-border);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  font-family: 'Jura', sans-serif;
}
.main-footer.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.footer-brand {
  max-width: 300px;
}
.footer-logo {
  width: 60px;
  margin-bottom: 12px;
}
.footer-tagline {
  font-size: 14px;
  color: var(--gray);
  line-height: 1.6;
  font-weight: 500;
  white-space: nowrap;
}

.footer-links {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gray);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.footer-col a {
  font-size: 14px;
  font-weight: 500;
  color: var(--light);
  cursor: pointer;
}
.footer-col a:hover {
  color: var(--light); /* Default fallback */
}
.footer-col.col-a a:hover {
  color: var(--orange);
}
.footer-col.col-b a:hover {
  color: var(--cyan);
}

.social-heading {
  font-family: 'Jura', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gray);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 16px;
}
.social-icons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  transition: var(--transition);
}
.social-link:hover {
  color: var(--white);
  border-color: var(--orange);
  background: rgba(255, 140, 0, 0.1);
}
.social-link svg {
  width: 18px;
  height: 18px;
}

.footer-bottom {
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--glass-border);
  font-family: 'Jura', sans-serif;
}
.footer-bottom p {
  font-size: 13px;
  color: var(--gray);
  letter-spacing: 1px;
}
.footer-domains {
  margin-top: 12px;
}
.footer-domains a {
  color: var(--gray);
  font-size: 11px;
  letter-spacing: 1px;
}
.footer-domains a:hover {
  color: var(--orange);
}

/* ==========================================
   RESPONSIVE — LAPTOP / TABLET LARGE (981px to 1400px)
   ========================================== */
@media (min-width: 981px) and (max-width: 1400px) {
  /* Scale down the vinyl */
  .vinyl-container {
    width: 450px;
    height: 450px;
  }
  .vinyl-hero.split-left .vinyl-container {
    transform: translateX(-22vw) scale(0.55);
  }
  .vinyl-hero.split-right .vinyl-container {
    transform: translateX(22vw) scale(0.55);
  }

  /* Reduce the stagger overlap with the vinyl */
  .side-a-section .grid-card:nth-child(odd) {
    transform: translateX(50px);
  }
  .side-a-section .grid-card:nth-child(even) {
    transform: translateX(100px);
  }
  .side-b-section .grid-card:nth-child(odd) {
    transform: translateX(-100px);
  }
  .side-b-section .grid-card:nth-child(even) {
    transform: translateX(-50px);
  }
  
  /* Reduce gap and font sizes for fit */
  .section-grid {
    gap: 40px;
  }
  .scrolling-row {
    font-size: 16vh;
    height: 16vh;
  }
}

/* ==========================================
   RESPONSIVE — TABLET (≤ 980px)
   ========================================== */
@media (max-width: 980px) {
  /* --- VINYL HERO --- */
  .vinyl-container {
    width: 300px;
    height: 300px;
  }
  .vinyl-center {
    width: 10px;
    height: 10px;
  }
  .vinyl-side-name {
    font-size: 10px;
  }
  .vinyl-side-label {
    font-size: 7px;
    letter-spacing: 2px;
  }
  .vinyl-side-domain {
    font-size: 7px;
  }
  .vinyl-side-a {
    padding-left: 6%;
  }
  .vinyl-side-b {
    padding-right: 6%;
  }
  .vinyl-side-content {
    gap: 2px;
  }
  .vinyl-hero-title {
    max-width: min(85%, 400px);
  }
  .vinyl-cta-text {
    font-size: 12px;
    letter-spacing: 4px;
  }
  .vinyl-cta-arrows {
    gap: 24px;
  }
  .vinyl-cta {
    margin-top: 32px;
  }

  /* Scrolling background text — scale down */
  .scrolling-row {
    font-size: 14vh;
    height: 14vh;
  }

  /* --- SIDE-SPECIFIC TITLE IMAGES --- */
  body.split-a .side-a-title {
    margin-left: 20px;
  }
  body.split-b .side-b-title {
    margin-right: 20px;
  }

  /* --- SPLIT VIEW: Full-width on tablet/mobile --- */
  body.split-a .side-section,
  body.split-a .shared-sections,
  body.split-a .main-footer {
    width: 100%;
    margin-left: 0;
  }
  body.split-b .side-section,
  body.split-b .shared-sections,
  body.split-b .main-footer {
    width: 100%;
    margin-left: 0;
  }

  /* Vinyl record shifts less on mobile splits */
  .vinyl-hero.split-left .vinyl-container {
    transform: translateX(-20vw) scale(0.5);
  }
  .vinyl-hero.split-right .vinyl-container {
    transform: translateX(20vw) scale(0.5);
  }

  /* --- SIDE SECTION CARDS — Remove stagger offsets --- */
  .side-a-section .section-inner {
    padding-top: 100vh;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
  .side-b-section .section-inner {
    padding-top: 100vh;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
  .side-a-section .grid-card:nth-child(odd),
  .side-a-section .grid-card:nth-child(even),
  .side-b-section .grid-card:nth-child(odd),
  .side-b-section .grid-card:nth-child(even) {
    transform: none !important;
  }
  .side-a-section .section-grid,
  .side-b-section .section-grid {
    gap: 40px;
  }

  /* Reorder Side A cards: Sponsor Us goes last on mobile */
  .side-a-section #card-upcoming-events { order: 1; }
  .side-a-section #card-past-events { order: 2; }
  .side-a-section #card-membership { order: 3; }
  .side-a-section #card-sponsor { order: 4; }

  /* --- GRID LAYOUT --- */
  .section-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .shared-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* --- CARDS --- */
  .grid-card {
    padding: 24px 20px;
  }
  .card-title {
    font-size: 16px;
  }
  .card-desc {
    font-size: 12px;
  }

  /* --- BACK BUTTONS --- */
  .back-btn-fixed {
    font-size: 11px;
    letter-spacing: 2px;
    padding: 6px 14px;
  }
  body.split-a .back-btn-fixed {
    right: 20px;
  }
  body.split-b .back-btn-fixed {
    left: 20px;
  }
  .back-btn-top {
    top: 20px;
  }

  /* --- MODALS --- */
  .modal-overlay {
    padding: 20px 12px;
  }
  .modal-wrapper {
    padding: 32px 20px;
    margin: 0;
    max-height: 90vh;
    border-radius: var(--radius-md);
  }

  /* --- FORMS --- */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* --- HEADER --- */
  .header-side-indicator {
    display: none;
  }

  /* --- FOOTER --- */
  .footer-top {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }
  .footer-brand {
    max-width: 100%;
    text-align: center;
  }
  .footer-logo {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .footer-tagline {
    white-space: normal;
  }
  .footer-links {
    gap: 24px;
  }

  /* --- DETAIL VIEWS --- */
  .release-detail-header,
  .artist-detail-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .track-item {
    flex-wrap: wrap;
  }
  .pitch-control {
    flex-direction: row;
    min-width: auto;
    width: 100%;
    justify-content: center;
  }

  /* --- SHARED SECTIONS --- */
  .shared-sections {
    padding: 40px 20px 40px;
  }

  /* --- SIDE SECTIONS --- */
  .side-section {
    padding: 40px 20px 60px;
  }
}

/* ==========================================
   RESPONSIVE — MOBILE (≤ 480px)
   ========================================== */
@media (max-width: 480px) {
  /* --- VINYL HERO --- */
  .vinyl-container {
    width: 250px;
    height: 250px;
  }
  .vinyl-hero {
    padding: 24px 16px;
  }
  .vinyl-hero-title {
    max-width: 90%;
  }
  .vinyl-side-name {
    font-size: 8px;
  }
  .vinyl-side-label {
    font-size: 6px;
    letter-spacing: 1px;
  }
  .vinyl-side-domain {
    font-size: 6px;
    letter-spacing: 1px;
  }
  .vinyl-cta-text {
    font-size: 11px;
    letter-spacing: 3px;
  }
  .cta-arrow {
    font-size: 11px;
    letter-spacing: 2px;
    padding: 6px 12px;
  }

  /* Mobile split — less extreme record shift */
  .vinyl-hero.split-left .vinyl-container {
    transform: translateX(-15vw) scale(0.45);
  }
  .vinyl-hero.split-right .vinyl-container {
    transform: translateX(15vw) scale(0.45);
  }

  /* Side titles even tighter margins */
  body.split-a .side-a-title {
    margin-left: 16px;
  }
  body.split-b .side-b-title {
    margin-right: 16px;
  }

  /* --- GRIDS --- */
  .section-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .shared-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* --- CARDS --- */
  .grid-card {
    padding: 20px 16px;
  }
  .card-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
  }
  .card-title {
    font-size: 15px;
  }
  .card-desc {
    font-size: 11px;
    margin-bottom: 12px;
  }
  .card-cta {
    font-size: 11px;
  }

  /* --- BACK BUTTONS --- */
  body.split-a .back-btn-fixed {
    right: 16px;
  }
  body.split-b .back-btn-fixed {
    left: 16px;
  }
  .back-btn-top {
    top: 16px;
  }
  .back-btn-fixed {
    bottom: 24px;
  }

  /* --- MODALS --- */
  .modal-overlay {
    padding: 12px 8px;
  }
  .modal-wrapper {
    padding: 24px 16px;
    border-radius: var(--radius-sm);
  }
  .modal-title {
    font-size: clamp(20px, 5vw, 28px);
  }
  .modal-close {
    width: 36px;
    height: 36px;
  }

  /* --- EVENT CARDS --- */
  .event-image {
    height: 150px;
  }
  .event-body {
    padding: 16px;
  }
  .event-title {
    font-size: 17px;
  }

  /* --- BUTTONS --- */
  .btn {
    padding: 12px 24px;
    font-size: 12px;
  }

  /* --- NAV PILLS --- */
  .nav-pill {
    padding: 6px 16px;
    font-size: 11px;
  }

  /* --- FOOTER --- */
  .footer-links {
    flex-direction: column;
    gap: 20px;
  }
  .social-icons {
    gap: 10px;
  }
  .social-link {
    width: 36px;
    height: 36px;
  }
  .social-link svg {
    width: 16px;
    height: 16px;
  }
  .footer-bottom p {
    font-size: 11px;
  }
  .footer-domains a {
    font-size: 10px;
  }

  /* --- INTRO SCREEN --- */
  .intro-logo img {
    width: 120px;
    height: 120px;
  }
  .intro-tagline {
    font-size: 11px;
    letter-spacing: 4px;
  }

  /* --- SCROLLING BG --- */
  .scrolling-row {
    font-size: 10vh;
    height: 12vh;
  }

  /* --- MEMBERSHIP PERKS --- */
  .membership-perks {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   RESPONSIVE — SMALL MOBILE (≤ 360px)
   ========================================== */
@media (max-width: 360px) {
  .vinyl-container {
    width: 220px;
    height: 220px;
  }
  .vinyl-hero {
    padding: 20px 12px;
  }
  .vinyl-hero-title {
    max-width: 95%;
  }
  .vinyl-hero.split-left .vinyl-container {
    transform: translateX(-12vw) scale(0.4);
  }
  .vinyl-hero.split-right .vinyl-container {
    transform: translateX(12vw) scale(0.4);
  }
  .modal-wrapper {
    padding: 20px 12px;
  }
  .grid-card {
    padding: 16px 12px;
  }
}

/* ==========================================
   TOUCH DEVICE OPTIMIZATIONS
   ========================================== */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover-dependent effects on touch devices */
  .grid-card:hover {
    transform: none;
  }
  /* Give tap targets minimum comfortable size */
  .cta-arrow,
  .back-btn-fixed,
  .social-link,
  .footer-col a,
  .nav-pill {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Active states instead of hover for touch feedback */
  .grid-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  .cta-arrow:active {
    opacity: 0.7;
  }
  .back-btn-fixed:active {
    opacity: 0.7;
  }
}