/* ============================================================
   DJ Prodigee — Design System
   Container architecture maps 1:1 to Elementor Containers.
   .e-con-full   ≈ Elementor "Section Container" (full-width)
   .e-con        ≈ Elementor "Inner Container"   (boxed)
   .dir-row      ≈ Direction: Horizontal
   .dir-col      ≈ Direction: Vertical
   Spacing utilities map to padding/gap controls in Elementor.
   ============================================================ */

/* ---------- 1. Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--bg-base);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

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

ul {
  list-style: none;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  padding: 0.8rem 1.2rem;
  background: var(--color-gold);
  color: #0a0a0d;
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: top var(--t-base) var(--ease-out);
}

.skip-link:focus {
  top: 1rem;
}

/* ---------- 2. Design Tokens ---------- */
:root {
  /* Surfaces */
  --bg-base:        #0a0a0d;
  --bg-elev:        #121218;
  --bg-surface:     #1a1a22;
  --bg-glass:       rgba(20, 20, 28, 0.72);

  /* Brand — gold leads */
  --color-gold:        #e8c870;
  --color-gold-deep:   #b4862a;
  --color-gold-light:  #f5e3a3;
  --color-primary:     var(--color-gold);

  /* Energy accent for CTAs */
  --color-accent:      #ff5e3a;
  --color-accent-deep: #e64a26;

  /* Cool accent (used sparingly) */
  --color-cool:        #4ecdc4;

  /* Text */
  --color-text:      #f5f5f0;
  --color-text-soft: #c7c7ce;
  /* WCAG2AA-compliant muted tone — 4.07:1 → 4.66:1 against --bg-elev
   * (Phase 8.1 contrast fix; affects .text-muted, .show-loc,
   * .filter-label, the archive year/month labels, and a few other
   * secondary-text spots). */
  --color-muted:     #8a8a93;
  --color-line:        rgba(255, 255, 255, 0.08);
  --color-line-strong: rgba(255, 255, 255, 0.16);

  /* Typography */
  --font-display:  'Anton', 'Impact', sans-serif;
  --font-headline: 'Syne', 'Helvetica Neue', sans-serif;
  --font-body:     'Manrope', system-ui, sans-serif;

  /* Fluid type scale */
  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --fs-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --fs-base: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  --fs-md: clamp(1.125rem, 1rem + 0.5vw, 1.35rem);
  --fs-lg: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-xl: clamp(2rem, 1.4rem + 2.8vw, 3.5rem);
  --fs-2xl: clamp(3rem, 1.8rem + 5.5vw, 6rem);
  --fs-3xl: clamp(4.5rem, 2.5rem + 9vw, 10rem);
  --fs-mega: clamp(5.5rem, 3rem + 13vw, 15rem);

  /* Spacing scale */
  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 2.5rem;
  --sp-xl: 4rem;
  --sp-2xl: 6rem;
  --sp-3xl: 9rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 25px 60px rgba(0, 0, 0, 0.6);
  --shadow-glow-gold:   0 0 50px rgba(232, 200, 112, 0.30);
  --shadow-glow-accent: 0 0 40px rgba(255, 94, 58, 0.35);

  /* Easing & motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 600ms;

  /* Layout */
  --max-w: 1320px;
  --header-h: 88px;
}

/* ---------- 3. Container System (Elementor Container ≈) ---------- */

/* Full-width section wrapper (≈ Elementor full-width container) */
.e-con-full {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Inner boxed container (≈ Elementor boxed container) */
.e-con {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  display: flex;
  position: relative;
}

/* Direction modifiers */
.dir-row    { flex-direction: row; }
.dir-col    { flex-direction: column; }
.wrap       { flex-wrap: wrap; }
.nowrap     { flex-wrap: nowrap; }

/* Gap utilities */
.gap-xs  { gap: var(--sp-xs); }
.gap-sm  { gap: var(--sp-sm); }
.gap-md  { gap: var(--sp-md); }
.gap-lg  { gap: var(--sp-lg); }
.gap-xl  { gap: var(--sp-xl); }

/* Align (cross axis) */
.ai-start    { align-items: flex-start; }
.ai-center   { align-items: center; }
.ai-end      { align-items: flex-end; }
.ai-stretch  { align-items: stretch; }

/* Justify (main axis) */
.jc-start    { justify-content: flex-start; }
.jc-center   { justify-content: center; }
.jc-end      { justify-content: flex-end; }
.jc-between  { justify-content: space-between; }
.jc-around   { justify-content: space-around; }

/* Section padding (block) */
.py-sm  { padding-block: var(--sp-lg); }
.py-md  { padding-block: var(--sp-xl); }
.py-lg  { padding-block: var(--sp-2xl); }
.py-xl  { padding-block: var(--sp-3xl); }

/* Self-grow */
.grow-1 { flex: 1 1 0; }

/* Width helpers for column-style layouts */
.w-100 { width: 100%; }
.w-66  { flex: 1 1 calc(66.666% - var(--sp-md)); min-width: 280px; }
.w-50  { flex: 1 1 calc(50% - var(--sp-md));     min-width: 280px; }
.w-33  { flex: 1 1 calc(33.333% - var(--sp-md)); min-width: 260px; }
.w-25  { flex: 1 1 calc(25% - var(--sp-md));     min-width: 200px; }

/* ---------- 4. Typography ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 0.88;
  text-transform: uppercase;
}

.headline {
  font-family: var(--font-headline);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.kicker {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.kicker::before {
  content: "";
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-gold-deep), var(--color-gold-light));
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.lead {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--color-text-soft);
  max-width: 60ch;
}

.text-gold    { color: var(--color-gold); }
.text-accent  { color: var(--color-accent); }
.text-cool    { color: var(--color-cool); }
.text-soft    { color: var(--color-text-soft); }
.text-muted   { color: var(--color-muted); }

/* Brand gradient text — gold sheen */
.brand-gradient {
  background: linear-gradient(110deg,
    var(--color-gold-deep) 0%,
    var(--color-gold)      35%,
    var(--color-gold-light) 55%,
    var(--color-gold)      75%,
    var(--color-gold-deep) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Brand divider line */
.brand-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg,
    transparent,
    var(--color-gold-deep) 20%,
    var(--color-gold) 50%,
    var(--color-gold-deep) 80%,
    transparent);
  opacity: 0.5;
}

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out),
              background var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
  border: 1.5px solid transparent;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
}

.btn:hover {
  transform: translateY(-2px);
}

/* Primary CTA = coral (energy accent) */
.btn--primary {
  background: var(--color-accent);
  color: #1a0a05;
  box-shadow: 0 8px 24px rgba(255, 94, 58, 0.35);
}

.btn--primary:hover {
  background: #ff7558;
  color: #0f0d00;
  box-shadow: 0 14px 36px rgba(255, 94, 58, 0.5);
}

/* Gold filled — for brand emphasis (Listen, Book, etc.) */
.btn--gold {
  background: var(--color-gold);
  color: #1a1208;
  box-shadow: 0 8px 24px rgba(232, 200, 112, 0.28);
}

.btn--gold:hover {
  background: var(--color-gold-light);
  color: #0f0a00;
  box-shadow: 0 14px 36px rgba(245, 227, 163, 0.45);
}

/* Ghost outline */
.btn--ghost {
  border-color: var(--color-line-strong);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn--ghost:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* Gold outline — refined */
.btn--outline-gold {
  border-color: var(--color-gold-deep);
  color: var(--color-gold);
  background: rgba(232, 200, 112, 0.04);
}

.btn--outline-gold:hover {
  border-color: var(--color-gold);
  color: #0f0a00;
  background: var(--color-gold);
  box-shadow: 0 12px 32px rgba(232, 200, 112, 0.35);
}

.btn--text {
  padding: 0.5rem 0;
  border-radius: 0;
  border-bottom: 1.5px solid currentColor;
  color: var(--color-gold);
}

.btn--text:hover {
  color: var(--color-gold-light);
}

.btn .arrow {
  display: inline-block;
  transition: transform var(--t-base) var(--ease-out);
}

.btn:hover .arrow {
  transform: translateX(4px);
}

/* ---------- 6. Header / Nav ---------- */

/*
 * Override Hello Elementor parent theme defaults that fight our header
 * layout. The parent ships two rules that conflict with how we use
 * .site-header in this child theme:
 *
 *   1. hello-elementor/assets/css/header-footer.css:
 *      .site-header { display:flex; flex-wrap:wrap;
 *                     justify-content:space-between;
 *                     padding-block:1rem; position:relative }
 *      → Turns .site-header itself into a flex container, which competes
 *        with the .e-con flex container inside it.
 *
 *   2. hello-elementor/assets/css/theme.css:
 *      .site-header:not(.dynamic-header) { max-width:1140px;
 *                                          margin-inline:auto;
 *                                          width:100% }   @1200px+
 *      → Caps the header at 1140px and centers it, squeezing our 1320px
 *        --max-w container and crushing the nav into a stretched flex
 *        track (Live Stream wraps to two lines, items spread too wide).
 *
 * We use the same :not(.dynamic-header) specificity so we win the
 * cascade for max-width / margin-inline. The simpler .site-header
 * selector handles the display/flex/padding overrides.
 *
 * Same treatment for .site-footer — Hello Elementor applies an
 * identical pair of rules there.
 */
.site-header,
.site-header:not(.dynamic-header) {
  display: block;
  flex-wrap: nowrap;
  justify-content: initial;
  max-width: none;
  margin-inline: 0;
  width: auto;
}

.site-footer,
.site-footer:not(.dynamic-footer) {
  display: block;
  flex-wrap: nowrap;
  justify-content: initial;
  max-width: none;
  margin-inline: 0;
  width: auto;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-block: var(--sp-sm);
  /* Phase 8.2 a11y polish: subtle near-opaque base so that pa11y/axe-core
   * can compute contrast for nav-link text. Visually nearly imperceptible
   * over the dark hero (alpha 0.55) and gives axe a solid color to read
   * instead of seeing "background: transparent" → unknown contrast → fail. */
  background-color: rgba(10, 10, 13, 0.55);
  transition: background var(--t-base) var(--ease-out),
              backdrop-filter var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              padding-block var(--t-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--color-line);
  padding-block: 0.65rem;
}

/* Brand block — DJ prefix + logo wordmark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  line-height: 1;
  text-decoration: none;
}

.brand-prefix {
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  background: linear-gradient(110deg,
    var(--color-gold-deep), var(--color-gold) 50%, var(--color-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-logo {
  height: 40px;
  width: auto;
  display: block;
}

.site-header.is-scrolled .brand-logo {
  height: 34px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
}

.nav-list {
  display: flex;
  gap: var(--sp-md);
}

.nav-link {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  position: relative;
  padding-block: 0.4rem;
  transition: color var(--t-fast) var(--ease-out);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-gold-deep), var(--color-gold-light));
  transition: width var(--t-base) var(--ease-out);
}

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

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

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  position: relative;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text);
  position: relative;
  transition: transform var(--t-base) var(--ease-out),
              opacity var(--t-base) var(--ease-out);
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--t-base) var(--ease-out);
}

.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 7. Hero ---------- */
.hero {
  min-height: 100vh;
  padding-top: calc(var(--header-h) + var(--sp-lg));
  padding-bottom: var(--sp-2xl);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 28%, rgba(232, 200, 112, 0.12), transparent 50%),
    radial-gradient(ellipse at 82% 70%, rgba(180, 134, 42, 0.10),  transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 94, 58, 0.08),  transparent 60%),
    var(--bg-base);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><circle cx='1' cy='1' r='0.4' fill='%23ffffff' opacity='0.06'/></svg>");
  background-size: 4px 4px;
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-lg);
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
}

.hero-meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  line-height: 0.82;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  position: relative;
}

.hero-title .word {
  display: block;
  opacity: 0;
  transform: translateY(40px);
  animation: rise var(--t-slow) var(--ease-out) forwards;
}

.hero-title .word:nth-child(1) { animation-delay: 0.05s; }
.hero-title .word:nth-child(2) { animation-delay: 0.18s; }
.hero-title .word:nth-child(3) { animation-delay: 0.32s; }

.hero-title .accent-fill {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-text);
  position: relative;
}

/* Gold sheen on the brand word */
.hero-title .accent {
  background: linear-gradient(110deg,
    var(--color-gold-deep) 0%,
    var(--color-gold)      30%,
    var(--color-gold-light) 50%,
    var(--color-gold)      70%,
    var(--color-gold-deep) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 9s linear infinite;
}

@keyframes sheen {
  0%   { background-position: 0%   50%; }
  100% { background-position: 200% 50%; }
}

.hero-sub {
  font-size: var(--fs-md);
  color: var(--color-text-soft);
  max-width: 56ch;
  opacity: 0;
  animation: rise var(--t-slow) 0.55s var(--ease-out) forwards;
}

.hero-ctas {
  display: flex;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  opacity: 0;
  animation: rise var(--t-slow) 0.7s var(--ease-out) forwards;
}

.hero-aside {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--color-line);
  opacity: 0;
  animation: rise var(--t-slow) 0.85s var(--ease-out) forwards;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  line-height: 1;
  color: var(--color-text);
}

.stat-num .gold {
  background: linear-gradient(110deg, var(--color-gold-deep), var(--color-gold), var(--color-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-muted);
}

/* Waveform visual */
.waveform {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 88px;
  margin-top: var(--sp-md);
}

.waveform .bar {
  flex: 1;
  background: linear-gradient(180deg, var(--color-gold-light), var(--color-gold), var(--color-gold-deep));
  border-radius: 2px;
  animation: wave 1.4s var(--ease-in-out) infinite;
  transform-origin: bottom;
  min-height: 6px;
}

.waveform .bar:nth-child(odd)  { background: linear-gradient(180deg, var(--color-gold-light), var(--color-gold-deep)); }
.waveform .bar:nth-child(even) { background: linear-gradient(180deg, var(--color-gold),       var(--color-accent)); }

.waveform .bar:nth-child(1)  { animation-delay: 0.0s;  }
.waveform .bar:nth-child(2)  { animation-delay: 0.1s;  }
.waveform .bar:nth-child(3)  { animation-delay: 0.2s;  }
.waveform .bar:nth-child(4)  { animation-delay: 0.3s;  }
.waveform .bar:nth-child(5)  { animation-delay: 0.4s;  }
.waveform .bar:nth-child(6)  { animation-delay: 0.5s;  }
.waveform .bar:nth-child(7)  { animation-delay: 0.4s;  }
.waveform .bar:nth-child(8)  { animation-delay: 0.3s;  }
.waveform .bar:nth-child(9)  { animation-delay: 0.2s;  }
.waveform .bar:nth-child(10) { animation-delay: 0.1s;  }
.waveform .bar:nth-child(11) { animation-delay: 0.05s; }
.waveform .bar:nth-child(12) { animation-delay: 0.15s; }
.waveform .bar:nth-child(13) { animation-delay: 0.25s; }
.waveform .bar:nth-child(14) { animation-delay: 0.35s; }
.waveform .bar:nth-child(15) { animation-delay: 0.45s; }
.waveform .bar:nth-child(16) { animation-delay: 0.55s; }
.waveform .bar:nth-child(17) { animation-delay: 0.50s; }
.waveform .bar:nth-child(18) { animation-delay: 0.40s; }
.waveform .bar:nth-child(19) { animation-delay: 0.30s; }
.waveform .bar:nth-child(20) { animation-delay: 0.20s; }
.waveform .bar:nth-child(21) { animation-delay: 0.10s; }
.waveform .bar:nth-child(22) { animation-delay: 0.25s; }
.waveform .bar:nth-child(23) { animation-delay: 0.40s; }
.waveform .bar:nth-child(24) { animation-delay: 0.15s; }

@keyframes wave {
  0%, 100% { transform: scaleY(0.28); }
  50%      { transform: scaleY(1);    }
}

@keyframes rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.4); opacity: 0.4; }
}

/* ---------- 8. Marquee ---------- */
.marquee {
  background: linear-gradient(90deg, var(--color-gold-deep), var(--color-gold) 50%, var(--color-gold-deep));
  color: #15110a;
  border-block: 1px solid #0c0606;
  overflow: hidden;
  position: relative;
}

.marquee-track {
  display: flex;
  gap: 3rem;
  padding-block: 1.1rem;
  white-space: nowrap;
  animation: scroll 32s linear infinite;
  width: max-content;
}

.marquee-track .item {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 3rem;
}

.marquee-track .star {
  width: 14px;
  height: 14px;
  background: #15110a;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Marquee variant — dark */
.marquee--dark {
  background: var(--bg-elev);
  color: var(--color-text);
  border-block-color: var(--color-line);
}

.marquee--dark .marquee-track .star {
  background: var(--color-gold);
}

/* ---------- 9. Section Heading ---------- */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

.section-head .head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-md);
  flex-wrap: wrap;
}

/* ---------- 10. Latest Mix ---------- */
.mix {
  background: var(--bg-base);
}

.mix-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-lg);
  align-items: stretch;
  background: linear-gradient(135deg, var(--bg-elev), var(--bg-surface));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-md);
  position: relative;
  overflow: hidden;
  width: 100%;
}

.mix-card::before {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: -110px;
  top: -110px;
  background: radial-gradient(circle, var(--color-gold), transparent 70%);
  opacity: 0.18;
  filter: blur(40px);
  pointer-events: none;
}

.mix-video {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  position: relative;
  border: 1px solid var(--color-line);
}

.mix-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.mix-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  justify-content: center;
  position: relative;
  z-index: 1;
}

.mix-info h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  text-transform: uppercase;
  line-height: 0.9;
}

.mix-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tag {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.tag--gold {
  background: linear-gradient(110deg, var(--color-gold-deep), var(--color-gold));
  color: #15110a;
  border-color: transparent;
}

/* ---------- 11. Shows / Tour Dates ---------- */
.shows {
  background:
    linear-gradient(180deg, transparent, rgba(232, 200, 112, 0.04) 50%, transparent),
    var(--bg-base);
}

.shows-list {
  display: flex;
  flex-direction: column;
  border-block: 1px solid var(--color-line);
  width: 100%;
}

.show-row {
  display: grid;
  /* Date and the right-side columns are FIXED widths so columns line
     up across rows. Otherwise each row is its own grid and the
     content-sized pill column makes the city column drift. */
  grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1.4fr) 180px 130px;
  gap: var(--sp-md);
  align-items: baseline;
  padding-block: var(--sp-md);
  border-bottom: 1px solid var(--color-line);
  transition: background var(--t-fast) var(--ease-out),
              padding-inline var(--t-base) var(--ease-out);
  position: relative;
}

/* Pin date-stack and pill to the top of the row so they don't ride the
   first text baseline of the (potentially wrapped) name. */
.show-row .show-date,
.show-row .show-status {
  align-self: start;
}

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

.show-row:hover {
  background: linear-gradient(90deg,
    rgba(232, 200, 112, 0.06),
    transparent 60%);
  padding-inline: var(--sp-sm);
}

.show-date {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1;
}

.show-date .day {
  font-size: 2.4rem;
  color: var(--color-text);
}

.show-date .my {
  font-size: 0.95rem;
  color: var(--color-gold);
  letter-spacing: 0.1em;
}

.show-name {
  font-family: var(--font-headline);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-text);
}

.show-venue {
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
}

.show-loc {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.show-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-strong);
  color: var(--color-text);
}

.show-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-cool);
}

.show-status.sold-out .dot { background: #ff3d3d; }
.show-status.sold-out      { color: #ff8585; border-color: rgba(255, 61, 61, 0.4); }
.show-status.coming .dot   { background: var(--color-gold); }
.show-status.private .dot  { background: var(--color-text-soft); }

.shows-empty {
  padding-block: var(--sp-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
}

.shows-empty .icon {
  font-size: 3rem;
  filter: grayscale(0.4);
}

.shows-empty .notify {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  margin-top: var(--sp-sm);
  width: min(420px, 100%);
}

.shows-empty .notify input {
  flex: 1;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--fs-sm);
}

.shows-empty .notify input:focus {
  outline: none;
  border-color: var(--color-gold);
  background: rgba(232, 200, 112, 0.04);
}

/* ---------- 12. Reviews ---------- */
.reviews {
  background: var(--bg-elev);
  border-block: 1px solid var(--color-line);
  position: relative;
  overflow: hidden;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
  width: 100%;
}

.review-card {
  background: var(--bg-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  transition: transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.review-card::before {
  content: "\201C";
  position: absolute;
  top: -34px;
  right: 16px;
  font-family: 'Anton', serif;
  font-size: 9rem;
  color: var(--color-gold);
  opacity: 0.14;
  line-height: 1;
}

.review-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-gold-deep);
}

.review-text {
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  line-height: 1.6;
  flex: 1;
}

.review-author {
  display: flex;
  gap: var(--sp-sm);
  align-items: center;
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--color-line);
}

.review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-elev);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-gold);
  border: 1px solid var(--color-gold-deep);
  flex-shrink: 0;
}

.review-author-info {
  display: flex;
  flex-direction: column;
}

.review-author-name {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: 1.2;
}

.review-author-org {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}

.review-stars {
  display: flex;
  gap: 2px;
  color: var(--color-gold);
  font-size: 0.85rem;
}

/* ---------- 13. Gallery ---------- */
.gallery {
  background: var(--bg-base);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 100px;
  grid-auto-flow: dense;
  gap: var(--sp-sm);
  width: 100%;
}

.g-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--bg-elev);
  isolation: isolate;
  border: 1px solid var(--color-line);
}

.g-item .ph {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform var(--t-slow) var(--ease-out);
}

.g-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 13, 0.78), transparent 50%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
  z-index: 1;
}

.g-item:hover .ph {
  transform: scale(1.08);
}

.g-item:hover::after {
  opacity: 1;
}

.g-item .label {
  position: absolute;
  bottom: 14px;
  left: 16px;
  z-index: 2;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-text);
  opacity: 0;
  transform: translateY(8px);
  transition: all var(--t-base) var(--ease-out);
}

.g-item .label small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.15rem;
}

.g-item:hover .label {
  opacity: 1;
  transform: translateY(0);
}

/* Image-tag variant of .ph (used on the full gallery page where
   each tile is a real <img>). Mirrors the gradient-div behavior. */
.g-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--ease-out);
}

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

/* When .g-item is used as <button>, reset default control styles. */
button.g-item {
  font: inherit;
  color: inherit;
  background: var(--bg-elev);
  padding: 0;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}

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

/* Mosaic spans (fixed-shape mode — used by the gallery archive /gallery/
 * where each tile is a gallery COVER and the deliberate 2x2 / 2x1 / 1x1
 * shapes give the page its mosaic identity). Single-gallery photo grids
 * use .gallery-grid--natural below instead. */
.g-item.s-2x2 { grid-column: span 5; grid-row: span 3; }
.g-item.s-1x2 { grid-column: span 3; grid-row: span 2; }
.g-item.s-2x1 { grid-column: span 4; grid-row: span 2; }
.g-item.s-1x1 { grid-column: span 3; grid-row: span 2; }
.g-item.s-wide { grid-column: span 7; grid-row: span 2; }

/* ---------- Natural-aspect masonry (single-gallery photo grids) ----------
 * The fixed-aspect grid above crops photos with object-fit:cover, which
 * hides faces and chops crowd shots. For galleries where each tile is
 * one photo of many (single-gallery.php), we want every photo at its
 * natural aspect ratio. CSS column layout gives us that — photos flow
 * top-to-bottom in N columns, each column's items pack with no
 * cropping. The "varied tile sizes" feel comes from the photos' own
 * different aspect ratios (portrait vs landscape vs square) instead of
 * a rigid 2x2 / 1x1 size cycle.
 */
.gallery-grid--natural {
  display: block;
  column-count: 4;
  column-gap: var(--sp-sm);
  /* Reset the grid props inherited from .gallery-grid above */
  grid-template-columns: none;
  grid-auto-rows: auto;
  grid-auto-flow: row;
}

.gallery-grid--natural .g-item {
  display: block;
  break-inside: avoid;
  margin-bottom: var(--sp-sm);
  /* Override any size-cycle classes that might still be present */
  grid-column: auto !important;
  grid-row: auto !important;
}

.gallery-grid--natural .g-item > img {
  width: 100%;
  height: auto;        /* natural aspect ratio — no crop */
  object-fit: initial;
  display: block;
}

@media (max-width: 1200px) { .gallery-grid--natural { column-count: 3; } }
@media (max-width: 768px)  { .gallery-grid--natural { column-count: 2; } }
@media (max-width: 480px)  { .gallery-grid--natural { column-count: 1; } }

/* Placeholder backgrounds when images haven't been added yet —
   colored gradients keyed off event category for variety. */
.ph--wed     { background-image: linear-gradient(135deg, #2a1a36, #5b2a4d); }
.ph--club    { background-image: linear-gradient(135deg, #1f1322, #6a2e2e); }
.ph--fest    { background-image: linear-gradient(135deg, #1a2330, #2a5b6a); }
.ph--mil     { background-image: linear-gradient(135deg, #1b2421, #3a5042); }
.ph--corp    { background-image: linear-gradient(135deg, #221a14, #5b3a1f); }
.ph--uni     { background-image: linear-gradient(135deg, #1c1a2e, #3a2e5b); }
.ph--booth   { background-image: linear-gradient(135deg, #251c12, #6e4a1c); }
.ph--crowd   { background-image: linear-gradient(135deg, #181a26, #2c3a6a); }

/* ---------- 14. About teaser ---------- */
.about-strip {
  background:
    linear-gradient(135deg, rgba(232, 200, 112, 0.10), rgba(180, 134, 42, 0.06)),
    var(--bg-elev);
  border-block: 1px solid var(--color-line);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-xl);
  align-items: center;
  width: 100%;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-md);
  padding: var(--sp-lg);
  background: var(--bg-base);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.about-stats::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-gold), transparent 40%, var(--color-gold-deep));
  z-index: -1;
  opacity: 0.45;
}

.about-stat .n {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 2rem + 3vw, 5rem);
  line-height: 0.9;
  color: var(--color-text);
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}

.about-stat .n sup {
  font-size: 0.45em;
  background: linear-gradient(110deg, var(--color-gold-deep), var(--color-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-stat .l {
  margin-top: 0.4rem;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  max-width: 18ch;
}

/* ---------- 15. Booking CTA ---------- */
.booking-cta {
  background: var(--bg-base);
  position: relative;
  overflow: hidden;
}

.booking-card {
  background:
    radial-gradient(ellipse at top left, rgba(232, 200, 112, 0.22), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(255, 94, 58, 0.18), transparent 55%),
    var(--bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-2xl) var(--sp-xl);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-lg);
  align-items: center;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.booking-card::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  border: 1px solid var(--color-line-strong);
  right: -200px;
  top: -300px;
  pointer-events: none;
}

.booking-card::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  right: -100px;
  top: -200px;
  pointer-events: none;
}

.booking-card h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 0.92;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.booking-card p {
  margin-top: var(--sp-sm);
  font-size: var(--fs-md);
  color: var(--color-text-soft);
  max-width: 50ch;
  position: relative;
  z-index: 1;
}

.booking-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  position: relative;
  z-index: 1;
}

/* ---------- 16. Footer ---------- */
.site-footer {
  background: var(--bg-base);
  border-top: 1px solid var(--color-line);
  padding-block: var(--sp-2xl) var(--sp-md);
  position: relative;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-xl);
  width: 100%;
}

.footer-col h4 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-sm);
  color: var(--color-gold);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-col a {
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  transition: color var(--t-fast) var(--ease-out);
}

.footer-col a:hover {
  color: var(--color-gold);
}

.footer-brand .brand-logo {
  height: 56px;
}

.footer-tagline {
  margin-top: var(--sp-sm);
  color: var(--color-text-soft);
  font-size: var(--fs-sm);
  max-width: 36ch;
}

.footer-bottom {
  padding-top: var(--sp-md);
  border-top: 1px solid var(--color-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--color-muted);
  letter-spacing: 0.06em;
  width: 100%;
}

/* ---------- 17. Social icons ---------- */
.socials {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-line-strong);
  display: grid;
  place-items: center;
  transition: background var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              color var(--t-base) var(--ease-out);
  color: var(--color-text-soft);
}

.social-link:hover {
  background: linear-gradient(135deg, var(--color-gold-deep), var(--color-gold));
  border-color: var(--color-gold);
  color: #15110a;
  transform: translateY(-3px) rotate(-6deg);
}

.social-link svg {
  width: 16px;
  height: 16px;
}

/* ---------- 18. Forms ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-muted);
}

.field input,
.field textarea,
.field select {
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--fs-base);
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}

.field textarea {
  min-height: 120px;
  resize: vertical;
  font-family: var(--font-body);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-gold);
  background: rgba(232, 200, 112, 0.04);
}

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

/* Native select gets a gold chevron, no native arrow */
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23e8c870' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  padding-right: 2.5rem;
  cursor: pointer;
}

.field select option {
  background: var(--bg-elev);
  color: var(--color-text);
}

/* Date input — calendar indicator tinted gold (WebKit) */
.field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(1) saturate(4) hue-rotate(5deg);
  cursor: pointer;
}

/* Checkbox tile grid (booking page services) */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

.checkbox-tile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  user-select: none;
  line-height: 1.3;
}

.checkbox-tile:hover {
  border-color: var(--color-gold-deep);
  background: rgba(232, 200, 112, 0.04);
}

.checkbox-tile input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-gold);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.checkbox-tile:has(input:checked) {
  border-color: var(--color-gold);
  background: rgba(232, 200, 112, 0.08);
  color: var(--color-text);
}

@media (max-width: 640px) {
  .checkbox-grid { grid-template-columns: 1fr; }
}

/* Process steps card (booking sidebar) */
.process-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: process;
}

.process-list li {
  /* Block-flow with absolute-positioned counter — keeps the strong
     and the description text in the same column so the text wraps
     across the full card width. Grid layout broke wrapping because
     anonymous text nodes spilled into the next row. */
  display: block;
  position: relative;
  padding-left: 44px;
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  line-height: 1.5;
  counter-increment: process;
}

.process-list li::before {
  content: counter(process, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  width: 32px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1;
  background: linear-gradient(110deg, var(--color-gold-deep), var(--color-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.05em;
}

.process-list li strong {
  color: var(--color-text);
  display: block;
  font-family: var(--font-headline);
  font-weight: 700;
  margin-bottom: 0.1rem;
}

/* Honeypot field — off-screen but still focusable for parity */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form-status {
  margin-top: var(--sp-sm);
  font-size: var(--fs-sm);
  min-height: 1.4em;
}

.form-status[data-kind="ok"]  { color: var(--color-gold-light); }
.form-status[data-kind="err"] { color: #ff8585; }

/* ---------- 19g.3 Contact + Booking page layouts ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sp-xl);
  align-items: start;
  width: 100%;
}

.contact-form,
.booking-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  background: var(--bg-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  position: relative;
}

.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-md));
}

/* Side-by-side fields inside a form */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
}

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

/* Info cards used in the contact sidebar */
.info-card {
  background: var(--bg-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  position: relative;
  overflow: hidden;
}

.info-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(232, 200, 112, 0.06), transparent 60%);
  pointer-events: none;
}

.info-card > * { position: relative; z-index: 1; }

.info-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-text);
}

.info-card .info-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  line-height: 1.5;
}

.info-card .info-icon {
  color: var(--color-gold);
  flex-shrink: 0;
  margin-top: 2px;
}

.info-card .info-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.info-card a {
  color: var(--color-gold);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}

.info-card a:hover { color: var(--color-gold-light); }

/* reCAPTCHA / Turnstile placeholder card */
.recaptcha-placeholder {
  padding: var(--sp-sm) var(--sp-md);
  background: rgba(232, 200, 112, 0.04);
  border: 1px dashed rgba(232, 200, 112, 0.35);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.recaptcha-placeholder strong {
  color: var(--color-gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.7rem;
  white-space: nowrap;
}

.recaptcha-placeholder .icon {
  color: var(--color-gold);
  flex-shrink: 0;
}

/* Real Turnstile widget wrapper (Phase 6.5 — replaces the placeholder
 * above with the live Cloudflare widget injected by [djp_turnstile]).
 * The widget itself comes pre-styled by Cloudflare; we only own the
 * spacing around it. */
.djp-turnstile-wrap {
  margin-block: var(--sp-sm);
}
.djp-turnstile-wrap .cf-turnstile {
  display: block;
}

@media (max-width: 1024px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-sidebar { position: static; }
}

@media (max-width: 640px) {
  .field-row,
  .field-row--3 { grid-template-columns: 1fr; }
}

/* ---------- 19g.4 Live Stream player ---------- */
.livestream {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.livestream-banner {
  display: none;                /* shown via JS when live */
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  background: var(--bg-elev);
  border: 1px solid var(--color-line);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.livestream.is-live .livestream-banner {
  display: flex;
}

.livestream-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  background: #e63946;
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.livestream-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
  animation: ls-pulse 1.5s ease-in-out infinite;
}

@keyframes ls-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

.livestream-title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-text);
  letter-spacing: 0;
  text-transform: none;
}

.livestream-player {
  display: none;                /* shown via JS when live */
  background: #000;
  border: 1px solid var(--color-line);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  position: relative;
}

.livestream.is-live .livestream-player {
  display: block;
}

.livestream-player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Offline state — shown by default, hidden when live */
.livestream-offline {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232, 200, 112, 0.06), transparent 60%),
    var(--bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  text-align: center;
  padding: clamp(var(--sp-xl), 8vw, var(--sp-2xl)) var(--sp-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  position: relative;
  overflow: hidden;
}

.livestream-offline::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(232, 200, 112, 0.08), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(255, 94, 58, 0.06), transparent 50%);
  pointer-events: none;
}

.livestream-offline > * { position: relative; z-index: 1; }

.livestream.is-live .livestream-offline {
  display: none;
}

.livestream-offline .icon {
  font-size: 3rem;
  line-height: 1;
  filter: grayscale(0.3);
  margin-bottom: 0.4rem;
}

.livestream-offline h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--color-text);
}

.livestream-offline p {
  font-size: var(--fs-md);
  color: var(--color-text-soft);
  max-width: 48ch;
  line-height: 1.6;
}

.livestream-offline .checking {
  margin-top: var(--sp-md);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.livestream-offline .checking::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 8px rgba(232, 200, 112, 0.6);
  animation: ls-pulse 2s ease-in-out infinite;
}

/* ---------- 19h. Lightbox (gallery modal) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 7, 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-md);
}

.lightbox.is-open {
  display: flex;
  animation: lb-fade var(--t-base) var(--ease-out);
}

@keyframes lb-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox-content {
  position: relative;
  max-width: min(1400px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
}

.lightbox-img {
  max-width: 100%;
  max-height: calc(100vh - 200px);
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  border: 1px solid var(--color-line);
  display: block;
}

.lightbox-caption {
  text-align: center;
  padding: 0 var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.lightbox-caption .title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--color-text);
}

.lightbox-caption .meta {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-gold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.lightbox-btn {
  position: absolute;
  background: rgba(20, 20, 28, 0.72);
  border: 1px solid var(--color-line-strong);
  color: var(--color-text);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}

.lightbox-btn svg { width: 20px; height: 20px; }

.lightbox-btn:hover {
  background: var(--color-gold);
  color: #15110a;
  border-color: var(--color-gold);
  transform: translateY(-2px);
}

.lightbox-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox-next:hover { transform: translateY(-50%) translateX(3px); }

.lightbox-close    { top: var(--sp-md); right: var(--sp-md); }
.lightbox-download {
  top: var(--sp-md);
  right: calc(var(--sp-md) + 48px + var(--sp-sm));
  text-decoration: none;
}
.lightbox-prev     { left: var(--sp-md);  top: 50%; transform: translateY(-50%); }
.lightbox-next     { right: var(--sp-md); top: 50%; transform: translateY(-50%); }

.lightbox-counter {
  position: absolute;
  bottom: var(--sp-md);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-text-soft);
  padding: 0.45rem 1rem;
  background: rgba(20, 20, 28, 0.72);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body.is-lightbox-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .lightbox-close    { top: var(--sp-sm); right: var(--sp-sm); }
  .lightbox-download { top: var(--sp-sm); right: calc(var(--sp-sm) + 48px + var(--sp-xs)); }
  .lightbox-prev     { left: var(--sp-sm); }
  .lightbox-next     { right: var(--sp-sm); }
  .lightbox-img      { max-height: calc(100vh - 220px); }
}

/* ---------- 19. Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 19b. Page Hero (interior pages) ---------- */
.page-hero {
  padding-top: calc(var(--header-h) + var(--sp-xl));
  padding-bottom: var(--sp-2xl);
  position: relative;
  overflow: hidden;
  /* Phase 8.2 a11y polish: solid background-color is what axe-core uses
   * to compute contrast for text over this section. The radial-gradient
   * tint sits on top via background-image. Visually unchanged. */
  background-color: var(--bg-base);
  background-image:
    radial-gradient(ellipse at 22% 25%, rgba(232, 200, 112, 0.10), transparent 50%),
    radial-gradient(ellipse at 78% 75%, rgba(180, 134, 42, 0.08), transparent 55%);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><circle cx='1' cy='1' r='0.4' fill='%23ffffff' opacity='0.06'/></svg>");
  background-size: 4px 4px;
  pointer-events: none;
  z-index: 0;
}

.page-hero .e-con { position: relative; z-index: 1; }

.page-hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: 0.86;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

/* ---------- 19c. Long-form prose ---------- */
.prose {
  max-width: 70ch;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.prose p {
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--color-text-soft);
}

.prose p .drop-cap {
  font-family: var(--font-display);
  font-size: 4.2rem;
  line-height: 0.9;
  float: left;
  padding: 0.2rem 0.7rem 0.2rem 0;
  background: linear-gradient(110deg, var(--color-gold-deep), var(--color-gold), var(--color-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bio-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-xl);
  align-items: start;
  width: 100%;
}

.bio-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #1a1208, #3a2810 60%, #6b4d1c);
  border: 1px solid var(--color-line);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.bio-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(232, 200, 112, 0.18), transparent 60%),
    radial-gradient(circle at 50% 85%, rgba(255, 94, 58, 0.10),  transparent 60%);
  z-index: 0;
}

.bio-portrait .mark {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 9rem;
  line-height: 1;
  background: linear-gradient(110deg, var(--color-gold-deep), var(--color-gold), var(--color-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.bio-portrait .caption {
  position: absolute;
  bottom: 14px;
  left: 16px;
  z-index: 2;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

/* ---------- 19d. Timeline ---------- */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 0;
  width: 100%;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 110px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent,
    var(--color-gold-deep) 8%,
    var(--color-gold) 50%,
    var(--color-gold-deep) 92%,
    transparent);
  opacity: 0.6;
}

.timeline-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--sp-lg);
  align-items: start;
  padding-block: var(--sp-md);
  position: relative;
}

.timeline-year {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  background: linear-gradient(110deg, var(--color-gold-deep), var(--color-gold), var(--color-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.timeline-body {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--sp-md);
  transition: border-color var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}

.timeline-body::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 22px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-base);
  border: 2px solid var(--color-gold);
  box-shadow: 0 0 12px rgba(232, 200, 112, 0.45);
}

.timeline-body::after {
  content: "";
  position: absolute;
  left: -22px;
  top: 27px;
  width: 22px;
  height: 1px;
  background: var(--color-gold-deep);
  opacity: 0.6;
}

.timeline-item:hover .timeline-body {
  border-color: var(--color-gold-deep);
  transform: translateX(4px);
}

.timeline-body h3 {
  font-family: var(--font-headline);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.35rem;
}

.timeline-body p {
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  line-height: 1.6;
}

/* ---------- 19e. Gear grid ---------- */
.gear-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
  width: 100%;
}

.gear-card {
  background: var(--bg-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.gear-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(232, 200, 112, 0.0), rgba(232, 200, 112, 0.06));
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
  z-index: -1;
}

.gear-card:hover {
  border-color: var(--color-gold-deep);
  transform: translateY(-4px);
}

.gear-card:hover::before { opacity: 1; }

.gear-card .gear-cat {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.gear-card .gear-name {
  font-family: var(--font-headline);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.gear-card .gear-note {
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  line-height: 1.55;
}

/* ---------- 19f. Press kit ---------- */
.press-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-md);
  width: 100%;
}

.press-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-line);
  background: var(--bg-elev);
  isolation: isolate;
}

.press-card .ph {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform var(--t-slow) var(--ease-out);
}

.press-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 13, 0.85), transparent 55%);
  pointer-events: none;
  z-index: 1;
}

.press-card .meta {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  z-index: 2;
}

.press-card .meta small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.2rem;
}

.press-card .meta span {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--fs-sm);
}

.press-card:hover .ph { transform: scale(1.06); }

.press-kit-card {
  background:
    radial-gradient(ellipse at top left, rgba(232, 200, 112, 0.18), transparent 55%),
    var(--bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-lg);
  align-items: center;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.press-kit-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  text-transform: uppercase;
  line-height: 0.92;
}

.press-kit-card p {
  margin-top: 0.6rem;
  color: var(--color-text-soft);
  max-width: 52ch;
}

.press-kit-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

/* ---------- 19f.1 Listen-on platform row (music page) ---------- */
.listen-on {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-md);
  background: var(--bg-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  width: 100%;
}

.listen-on .label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-right: 0.4rem;
  white-space: nowrap;
}

.platform-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-line-strong);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}

.platform-pill svg {
  width: 18px;
  height: 18px;
  color: var(--color-gold);
  transition: color var(--t-fast) var(--ease-out);
}

.platform-pill:hover {
  background: linear-gradient(110deg, rgba(232,200,112,0.10), rgba(255,94,58,0.08));
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: translateY(-2px);
}

.platform-pill:hover svg { color: var(--color-gold-light); }

/* ---------- 19f.2 Mix grid (music page) ---------- */
.mix-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
  width: 100%;
}

.mix-grid .mix-tile {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}

.mix-grid .mix-tile.is-hidden { display: none; }

.mix-grid .mix-tile:hover {
  border-color: var(--color-gold-deep);
  transform: translateY(-4px);
}

.mix-tile-video {
  aspect-ratio: 16 / 9;
  background: #000;
  position: relative;
  border-bottom: 1px solid var(--color-line);
}

.mix-tile-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Lite YouTube embed (placeholder until clicked) ----------
 * Replaces above-the-fold <iframe src="…youtube…"> on home/music/videos
 * with a tiny <button> wrapping the YouTube thumbnail + a play SVG.
 * JS in main.js swaps the placeholder for the real iframe on click.
 * Saves ~1MB of player JS download on initial paint and a real
 * ~8s of LCP cost on the iframe-heavy pages. */
.djp-lite-yt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
}
.djp-lite-yt-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.djp-lite-yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  transition: filter var(--t-fast) var(--ease-out);
  pointer-events: none;
}
.djp-lite-yt-play-bg {
  transition: fill var(--t-fast) var(--ease-out),
              fill-opacity var(--t-fast) var(--ease-out);
}
.djp-lite-yt:hover .djp-lite-yt-thumb {
  opacity: 0.85;
  transform: scale(1.02);
}
.djp-lite-yt:hover .djp-lite-yt-play-bg,
.djp-lite-yt:focus-visible .djp-lite-yt-play-bg {
  fill: #f00;
  fill-opacity: 1;
}
.djp-lite-yt:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: -2px;
}

/* Standalone .djp-lite-yt (not nested in a .mix-tile-video parent that's
 * already position:relative) — give it its own aspect-ratio frame so
 * it doesn't collapse to zero height in arbitrary contexts. */
.djp-lite-yt-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Audio-mode (Mixcloud / SoundCloud) — no 16:9, fixed height that
   matches the Mixcloud "with cover" widget natural height. */
.mix-tile-video.is-audio {
  aspect-ratio: auto;
  height: 180px;
  background: #1a1a22;
}

.mix-tile-meta {
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.mix-tile-meta .mix-title {
  font-family: var(--font-headline);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
}

.mix-tile-meta .mix-date {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-gold);
}

.mix-tile-meta .mix-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--color-line);
}

.mix-tile-meta .mix-tags .tag {
  padding: 0.25rem 0.65rem;
  font-size: 0.65rem;
}

/* Featured (first card spans extra) */
.mix-grid .mix-tile.is-featured {
  grid-column: span 2;
  grid-row: span 2;
}

.mix-grid .mix-tile.is-featured .mix-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  text-transform: uppercase;
  line-height: 0.95;
}

.mix-grid .mix-tile.is-featured .mix-tile-meta {
  padding: var(--sp-lg);
  gap: var(--sp-sm);
}

.mix-grid .mix-tile.is-featured::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-gold-deep), transparent 40%, var(--color-gold));
  z-index: -1;
  opacity: 0.5;
  pointer-events: none;
}

.mix-grid .mix-tile.is-featured {
  position: relative;
  isolation: isolate;
}

/* ---------- 19g.1 Filter chips ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--sp-md);
  align-items: center;
}

.filter-bar .filter-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  margin-right: 0.4rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}

.filter-chip:hover {
  border-color: var(--color-gold-deep);
  color: var(--color-gold);
  transform: translateY(-1px);
}

.filter-chip.is-active {
  background: linear-gradient(110deg, var(--color-gold-deep), var(--color-gold));
  border-color: transparent;
  color: #15110a;
}

.filter-chip .count {
  padding: 0.05rem 0.45rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.7rem;
}

.filter-chip.is-active .count {
  background: rgba(0, 0, 0, 0.18);
  color: #15110a;
}

/* When a show-row is filtered out */
.show-row.is-hidden { display: none; }

/* ---------- 19g.2 Archive (collapsible) ---------- */
.archive-block {
  background: var(--bg-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%;
}

.archive-block summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-md) var(--sp-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  background: linear-gradient(135deg, rgba(232, 200, 112, 0.06), transparent 70%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}

.archive-block summary::-webkit-details-marker { display: none; }
.archive-block summary::marker { content: ""; }

.archive-block summary:hover {
  background: linear-gradient(135deg, rgba(232, 200, 112, 0.10), transparent 70%);
}

.archive-block[open] > summary {
  border-bottom-color: var(--color-line);
}

.archive-block summary h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1;
}

.archive-block summary h3 small {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-gold);
  background: rgba(232, 200, 112, 0.10);
  border: 1px solid rgba(232, 200, 112, 0.32);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.6rem;
}

.archive-block summary .chev {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-line-strong);
  display: grid;
  place-items: center;
  transition: transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
  color: var(--color-text-soft);
  flex-shrink: 0;
}

.archive-block[open] summary .chev {
  transform: rotate(180deg);
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.archive-block .shows-list {
  padding: 0 var(--sp-lg);
  border: none;
}

.archive-block .show-row:last-child { border-bottom: none; }

/* Past-event row treatment — slightly muted */
.show-row.past .show-date .day,
.show-row.past .show-name {
  color: var(--color-text-soft);
}

.show-row.past .show-date .my { color: var(--color-gold-deep); }

/* ---------- 19g. Influences split ---------- */
.influence-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-lg);
  align-items: stretch;
  width: 100%;
}

.influence-video {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  position: relative;
  border: 1px solid var(--color-line);
}

.influence-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.influence-list-card {
  background: var(--bg-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.influence-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
}

.influence-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-sm);
  align-items: baseline;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--color-line);
}

.influence-list li:last-child { border-bottom: none; }

.influence-list .idx {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-gold);
  letter-spacing: 0.05em;
  min-width: 22px;
}

.influence-list .who {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--fs-sm);
}

.influence-list .genre {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted);
}

/* ---------- 20. Responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid          { grid-template-columns: 1fr; }
  .mix-card           { grid-template-columns: 1fr; }
  .reviews-grid       { grid-template-columns: repeat(2, 1fr); }
  .about-grid         { grid-template-columns: 1fr; }
  .booking-card       { grid-template-columns: 1fr; padding: var(--sp-xl) var(--sp-md); }
  .footer-grid        { grid-template-columns: 1fr 1fr; }
  .gallery-grid       { grid-auto-rows: 90px; }
  .show-row           { grid-template-columns: 90px minmax(0, 1.2fr) minmax(0, 1fr) 130px; gap: var(--sp-sm); }
  .show-loc           { display: none; }
  .bio-split          { grid-template-columns: 1fr; }
  .gear-grid          { grid-template-columns: repeat(2, 1fr); }
  .press-grid         { grid-template-columns: repeat(3, 1fr); }
  .influence-split    { grid-template-columns: 1fr; }
  .press-kit-card     { grid-template-columns: 1fr; }
  .archive-block .shows-list { padding: 0 var(--sp-md); }
  .archive-block summary { padding: var(--sp-md); }
  .mix-grid           { grid-template-columns: repeat(2, 1fr); }
  .mix-grid .mix-tile.is-featured { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 768px) {
  :root {
    --header-h: 72px;
  }

  .nav-list,
  .nav-actions {
    display: none;
  }

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

  .brand-logo {
    height: 32px;
  }
  .site-header.is-scrolled .brand-logo {
    height: 28px;
  }
  .brand-prefix {
    font-size: 1.4rem;
  }

  /* Mobile menu sheet */
  .nav.is-open .nav-list {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--bg-base);
    border-top: 1px solid var(--color-line);
    padding: var(--sp-lg) var(--sp-md);
    gap: var(--sp-md);
    z-index: 99;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }

  .nav.is-open .nav-actions {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--sp-md);
    background: var(--bg-elev);
    border-top: 1px solid var(--color-line);
    z-index: 99;
    gap: var(--sp-sm);
  }

  .nav.is-open .nav-link {
    font-size: var(--fs-md);
  }

  .hero-aside { grid-template-columns: 1fr; gap: var(--sp-sm); }
  .reviews-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: flex-start; }

  .gallery-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 90px;
  }
  .g-item.s-2x2  { grid-column: span 6; grid-row: span 3; }
  .g-item.s-1x2  { grid-column: span 3; grid-row: span 2; }
  .g-item.s-2x1  { grid-column: span 6; grid-row: span 2; }
  .g-item.s-1x1  { grid-column: span 3; grid-row: span 2; }
  .g-item.s-wide { grid-column: span 6; grid-row: span 2; }

  .show-row {
    grid-template-columns: 80px 1fr;
    grid-template-areas:
      "date name"
      "date venue"
      "status status";
    gap: 0.4rem var(--sp-sm);
    padding-block: var(--sp-md);
  }
  .show-date    { grid-area: date; }
  .show-name    { grid-area: name; }
  .show-venue   { grid-area: venue; }
  .show-status  { grid-area: status; justify-self: start; margin-top: var(--sp-xs); }

  .booking-card { padding: var(--sp-lg) var(--sp-md); text-align: left; }

  .gear-grid     { grid-template-columns: 1fr; }
  .mix-grid      { grid-template-columns: 1fr; }
  .mix-grid .mix-tile.is-featured { grid-column: span 1; }
  .press-grid    { grid-template-columns: repeat(2, 1fr); }

  .timeline::before { left: 26px; }
  .timeline-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding-left: 60px;
    padding-block: var(--sp-sm);
  }
  .timeline-year { font-size: 1.4rem; }
  .timeline-body::before { left: -50px; top: 18px; }
  .timeline-body::after  { left: -38px; top: 23px; width: 18px; }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(4rem, 16vw, 6rem);
  }
  .stat-num { font-size: 2rem; }
  .waveform { height: 64px; }
  .brand-prefix { display: none; }
}

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

/* ---------- 22. Focus accessibility ---------- */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Selection */
::selection {
  background: var(--color-gold);
  color: #15110a;
}

/* Print: keep it clean */
@media print {
  .site-header, .marquee, .booking-cta, .hero::before { display: none; }
  body { background: #fff; color: #000; }
}