/* ────────────────────────────────────────────────────────────────────
 * CINEMATIC OVERLAY — premium motion + typography for the home page
 * Layered on top of styles.css
 * ────────────────────────────────────────────────────────────────────*/

/* ── HERO TITLE — staged reveal (line by line) ─────────── */
.hero-cinematic .hero-title {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 11rem);
  letter-spacing: 0.02em;
  line-height: 0.92;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.hero-cinematic .hero-title em {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--brass);
  text-transform: none;
}
.hero-title-reveal .line {
  display: block;
  overflow: hidden;
}
.hero-title-reveal .word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-title-reveal.reveal .line:nth-child(1) .word { transform: translateY(0); transition-delay: 0.1s; }
.hero-title-reveal.reveal .line:nth-child(2) .word:nth-child(1) { transform: translateY(0); transition-delay: 0.25s; }
.hero-title-reveal.reveal .line:nth-child(2) .word:nth-child(2) { transform: translateY(0); transition-delay: 0.4s; }

/* Hero content: bulletproof centering using grid.
   IMPORTANT: override max-width:1100px from styles.css that was capping width and pinning to the left. */
.hero-cinematic .hero-content {
  display: grid;
  grid-auto-rows: max-content;
  justify-items: center;
  align-content: center;
  text-align: center;
  padding: 4vh 1.5rem 4vh;
  width: 100%;
  max-width: none;
  left: 0; right: 0;
  z-index: 5;
}
/* Hero text overrides .fi — always visible, no opacity-0 initial state */
.hero-cinematic .hero-tagline,
.hero-cinematic .hero-meta-line,
.hero-cinematic .hero-actions,
.hero-cinematic .hero-presenters-banner,
.hero-cinematic .hero-logo {
  opacity: 1 !important;
  transform: none !important;
}

/* ── PRESENTERS LOGO BANNER — V2 ───────────────────────────────────────
   Dark marquee panel hugged by thin brass rules, top + bottom. Logos
   in monochrome cream (filter:brightness(0) invert(1)) so they read
   like one unified design language — same family as the festival's
   own brand mark — and feel premium / editorial, not stickery. */
.hero-cinematic .hero-presenters-banner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.4rem;
  background: transparent;
  border: 0;
  margin: 3.6rem auto 1.4rem;
  width: fit-content;
  max-width: 92vw;
}
.hpb-label {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--brass);
  padding-left: 0.5em;
}
.hpb-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.8rem;
}
.hpb-logo {
  width: auto;
  object-fit: contain;
  display: block;
  /* Monochrome cream → reads as white on the dark hero, no colour clash. */
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.hpb-logo-zigzag { height: 85px; }
.hpb-logo-ella   { height: 89px; }

/* About page presented-by logo row — same monochrome cream treatment as
   the hero banner, paired centered below the body text. */
.presented-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.6rem;
  margin: 2.4rem auto 0;
  max-width: 760px;
}
.presented-logo {
  width: auto;
  object-fit: contain;
  display: block;
  /* V5: presented-by lives on cream paper now — silhouette stays ink */
  filter: brightness(0) invert(0.18);
  opacity: 0.92;
}

/* Inline "Präsentiert von" + Zig Zag + Ella block at the tail of the
   about copy. Sits as a credit line right after the Sonny Rollins
   paragraph; smaller logos than the top presented-by section. */
.about-presenters {
  margin-top: 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}
.about-presenters-label {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--brass);
  padding-left: 0.5em;
}
.about-presenters-logos {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.about-presenters-logo {
  width: auto;
  height: 85px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(0.18);
  opacity: 0.92;
}
.about-presenters-logo-ella { height: 70px; }
@media (max-width: 600px) {
  .about-presenters { align-items: center; margin-top: 1.6rem; }
  .about-presenters-logos { gap: 1.2rem; }
  .about-presenters-logo { height: 62px; }
  .about-presenters-logo-ella { height: 50px; }
}
.presented-logo-zigzag { height: 108px; }
.presented-logo-ella   { height: 89px; }
.presented-logos-sep {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--brass);
  font-size: 1.6rem;
  opacity: 0.85;
}
@media (max-width: 600px) {
  .presented-logos { gap: 1.4rem; margin-top: 1.8rem; }
  .presented-logo-zigzag { height: 77px; }
  .presented-logo-ella   { height: 62px; content: url('../img/partners/ella-radio-logo-top.png'); }
  .presented-logos-sep { font-size: 1.3rem; }
}
.hpb-amp { display: none; }
/* V5: the small Zig Zag + Ella banner inside the hero is redundant now
   that the big Presented-by section sits directly under the hero —
   hide it on both phone and desktop so visitors see those logos once. */
.hero-cinematic .hero-presenters-banner { display: none !important; }

@media (max-width: 600px) {
  .hero-cinematic .hero-presenters-banner-old-noop {
    padding: 0.8rem 1.2rem 1rem;
    width: fit-content;
    max-width: 92vw;
    margin-top: 2.4rem;
    margin-bottom: 1.2rem;
    gap: 0.5rem;
  }
  .hpb-label { font-size: 0.5rem; letter-spacing: 0.36em; }
  .hpb-logos { gap: 1.8rem; }
  .hpb-logo-zigzag { height: 62px; }
  .hpb-logo-ella   { height: 64px; }

  /* Cut the empty space between presenters banner and the bouncy
     scroll arrow on phone. .hero-content is FLEX column (a later
     duplicate rule overrides the original grid declaration), so
     justify-content controls the cross-axis stacking. Switching to
     flex-end parks the content (logo / date / presenters) at the
     bottom; padding-bottom leaves room for the bouncy arrow. */
  .hero-cinematic .hero-content {
    justify-content: flex-end !important;
    padding-bottom: 5rem !important;
  }

  /* Hero logo 15% smaller on phone per Uri. */
  .hero-cinematic .hero-logo { width: 76vw; }
}

.hero-cinematic .hero-tagline {
  position: relative;
  top: 0.7rem; /* nudge tagline down a touch — logo + everything else unchanged */
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  text-transform: uppercase;
  /* Original brass colour. No stroke / outlined-text effect — just a soft
     drop-shadow for readability over photos. Periodic sparkle animation
     gently brightens the type every few seconds. */
  color: var(--brass);
  margin: 0 0 1.4rem;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.55),
    0 2px 12px rgba(0,0,0,0.45);
  animation: tagSparkle 7s ease-in-out infinite;
}
@keyframes tagSparkle {
  0%, 70%, 100% {
    color: var(--brass);
    text-shadow:
      0 1px 2px rgba(0,0,0,0.55),
      0 2px 12px rgba(0,0,0,0.45);
  }
  85% {
    color: #ffe6a8;
    text-shadow:
      0 1px 2px rgba(0,0,0,0.55),
      0 2px 12px rgba(0,0,0,0.45),
      0 0 18px rgba(255,224,160,0.55),
      0 0 4px rgba(255,224,160,0.7);
  }
}
.hero-cinematic .hero-logo {
  /* vmin-based so the logo scales to whichever dimension is smaller — guarantees
     the logo + tagline + date + presenters + CTA all fit within any viewport. */
  width: clamp(260px, 58vmin, 780px);
  margin: 0 auto 1.4rem;
  display: block;
  text-align: center;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.55))
          drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}
.hero-cinematic .hero-logo .brand-logo,
.hero-cinematic .hero-logo .brand-logo-img {
  margin-left: auto;
  margin-right: auto;
}
.hero-cinematic .hero-meta-line {
  display: block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.42em;
  /* compensate for trailing letter-spacing on centered text */
  padding-left: 0.42em;
  text-transform: uppercase;
  color: rgba(247,236,206,0.95);
  margin: 0 auto 2.2rem;
  text-align: center;
  text-shadow: 0 1px 10px rgba(0,0,0,0.65);
}
.hero-cinematic .hero-actions { display: flex; justify-content: center; }
.hero-cinematic .hero-meta { display: none; }

@media (max-width: 900px) {
  .hero-cinematic .hero-logo {
    width: 90vw;
    filter: none;
    /* SVG content is centred in its viewBox; on phone widths the logo still
       reads optically right-of-centre. Nudge it left. NOTE: !important is
       required because an earlier rule sets `transform: none !important` on
       .hero-logo and .hero-tagline (to disable the fade-in library's
       translate transition), which was silently overriding this shift. */
    transform: translateX(-3vw) !important;
  }
  /* Tagline stays centred — only the logo gets the optical nudge. */
  .hero-cinematic .hero-tagline { transform: none !important; }
  /* Crisper outline on phone: use a real vector stroke instead of stacked
     text-shadows. Eight-way text-shadows over-blur on retina at small sizes
     and look fuzzy/cheap; paint-order:stroke draws the outline first and the
     fill on top, producing clean edges. */
  .hero-cinematic .hero-tagline {
    paint-order: stroke fill;
    -webkit-text-stroke: 3px rgba(14,29,51,0.92);
    text-shadow: 0 2px 14px rgba(0,0,0,0.55);
    animation: none;
  }
  .hero-cinematic .hero-media img,
  .hero-cinematic .hero-media img.active,
  .hero-cinematic .hero-media img.shifted,
  .hero-cinematic .hero-media img.shifted.active {
    transform: none;
    object-position: var(--mp, 50% 30%);
  }
}
@media (max-width: 600px) {
  /* Hide the small all-caps tagline above the logo on phone — the type
     treatment with stroke-outline reads as cheap on a photo, and the logo
     itself communicates the festival identity well enough. */
  .hero-cinematic .hero-tagline { display: none; }
  /* Reserve room for the iOS home indicator so the Programm & Tickets CTA
     never sits under it. */
  .hero-cinematic .hero-content {
    padding-bottom: max(env(safe-area-inset-bottom), 1.4rem);
  }
  /* Festival logo sits below the Ella+präsentiert block. Positive margin
     creates clear separation so präsentiert doesn't sit on the logo
     (Uri 2026-05-26). */
  .hero-cinematic .hero-logo { margin-top: 1.4rem; }
  /* Photo fills the whole hero on phone (matches desktop) so dates + venue
     line sit on the photo's baked-in dark gradient, not a hazy half-tone
     zone. Uri 2026-05-26 wanted "no extra hazy thing on the bottom — just
     the photo." */
  .hero-cinematic .hero-media {
    inset: 0;
    height: auto;
    overflow: hidden;
  }
  /* Kill per-image scale on phone so cover-fit fills exactly */
  .hero-cinematic .hero-media img,
  .hero-cinematic .hero-media img.active,
  .hero-cinematic .hero-media img.shifted,
  .hero-cinematic .hero-media img.shifted.active {
    transform: none;
    object-position: var(--mp, 50% 30%);
  }
  /* No CSS overlay on phone — the gradient is in the image itself */
  .hero-cinematic .hero-overlay { display: none; }
  .hero-cinematic .hero-content { padding: 10vh 1.2rem 4vh; }
  /* Drop both lines further down (away from the photo bottom edge, closer
     to the Programm & Tickets CTA) so the text doesn't touch the photo. */
  .hero-cinematic .hero-meta-line {
    margin-top: 3rem;
    margin-bottom: 0.6rem;
  }
  .hero-cinematic .hero-presenters {
    font-size: 0.42rem;
    letter-spacing: 0.08em;
    line-height: 1.4;
    padding: 0 0.4rem;
    margin-bottom: 0.6rem;
  }
}

/* Hero depth-layer system (parallax base) */
.hero-cinematic { perspective: 1200px; }
.hero-layer {
  position: absolute; inset: 0;
  will-change: transform;
}
.hero-cinematic .hero-content {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 0 2rem;
  z-index: 5;
}
.hero-layer-bg {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(200,144,42,0.10), transparent 55%),
    radial-gradient(ellipse at 70% 70%, rgba(14,29,51,0.5), transparent 50%),
    linear-gradient(180deg, #061222 0%, var(--ink) 100%);
  z-index: 1;
}
.hero-cinematic .hero-media { z-index: 2; }
.hero-cinematic .hero-overlay { z-index: 3; }

/* Hero photos — cross-fade. Per-image zoom via --scale-rest / --scale-active.
   Defaults kept gentle so the active photo shows as much content as cover allows. */
.hero-cinematic .hero-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transform: scale(var(--scale-rest, 1.06));
  transition: opacity 1.8s ease-in-out, transform 14s ease-out;
}
.hero-cinematic .hero-media img.active {
  opacity: 1;
  transform: scale(var(--scale-active, 1.0));
}

/* Per-image shift — applied ONLY to images marked .shifted (Charles + Till).
   Use --scale-rest and --scale-active to tune zoom per image; --shift-x for direction. */
.hero-cinematic .hero-media img.shifted {
  transform: scale(var(--scale-rest, 1.18)) translateX(var(--shift-x, 0%));
}
.hero-cinematic .hero-media img.shifted.active {
  transform: scale(var(--scale-active, 1.08)) translateX(var(--shift-x, 0%));
}

/* Slightly stronger global overlay so logo reads cleanly without a vignette wrapper */
.hero-cinematic .hero-overlay {
  background:
    radial-gradient(ellipse at center, rgba(14,29,51,0.18) 0%, rgba(14,29,51,0.55) 70%, rgba(14,29,51,0.95) 100%),
    linear-gradient(180deg, rgba(14,29,51,0.55) 0%, rgba(14,29,51,0.30) 40%, rgba(14,29,51,0.92) 100%);
  pointer-events: none;
}

/* ── MARQUEE — endless headliner names band ────────────── */
.marquee-section {
  background: var(--ink);
  color: var(--cream);
  padding: 1.6rem 0;
  border-top: 1px solid rgba(247,236,206,0.08);
  border-bottom: 1px solid rgba(247,236,206,0.08);
  overflow: hidden;
  position: relative;
}
.marquee-section::before,
.marquee-section::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: 90px; z-index: 2;
  pointer-events: none;
}
.marquee-section::before {
  left: 0; background: linear-gradient(90deg, var(--ink) 0%, transparent 100%);
}
.marquee-section::after {
  right: 0; background: linear-gradient(-90deg, var(--ink) 0%, transparent 100%);
}
.marquee {
  position: relative; width: 100%; overflow: hidden;
}
.marquee-track {
  display: inline-flex; align-items: center;
  white-space: nowrap;
  animation: marquee 65s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 4.2rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 2.6rem;
  color: rgba(247,236,206,0.95);
  transition: color 0.3s;
  display: inline-block;
}
.marquee-item:hover { color: var(--brass); }
.marquee-dot {
  display: inline-block;
  font-size: 1.6rem;
  color: var(--brass);
  padding: 0 0.4rem;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── BRIDGE SVG — draws on scroll ─────────────────────── */
.bridge-section {
  background: var(--ink);
  height: 360vh;
  position: relative;
  color: var(--cream);
}
.bridge-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.bridge-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(200,144,42,0.06), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(200,144,42,0.04), transparent 50%),
    linear-gradient(180deg, #061222 0%, var(--ink) 100%);
  z-index: 0;
}
/* Atmospheric photo fades in slowly behind the logo as user scrolls */
.bridge-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  filter: brightness(0.65) saturate(1.05);
  transition: filter 0.5s;
  z-index: 1;
}
.bridge-photo-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,29,51,0.55) 0%, rgba(14,29,51,0.40) 50%, rgba(14,29,51,0.85) 100%);
  z-index: 1;
  opacity: 0;
}
/* ── BRAND LOGO ────────────────────────────────────────────────
   Uses the designer's actual SVG artwork (logo-designer.svg).
   Source SVG is black; the filter chain converts it to cream so it
   reads on the dark site palette without any per-stroke recolouring.
*/
.brand-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.brand-logo-img {
  width: 100%;
  height: auto;
  display: block;
  /* Black artwork → cream/white. Pure invert keeps it crisp and bright. */
  filter: brightness(0) invert(1);
}
.brand-logo-year {
  display: flex;
  align-items: center;
  gap: 0.6em;
  /* Pulled up so it sits right under FESTIVAL */
  margin-top: -0.6em;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.85em;
  letter-spacing: 0.4em;
  color: rgba(247,236,206,0.95);
}
.brand-logo-dot {
  color: var(--brass);
  font-size: 1.2em;
  line-height: 0;
}

/* The three depth layers — each invisible until JS draws */
.brand-logo-animated .logo-live-bridge path {
  stroke: var(--brass);
}
/* Drop shadow stack for floating 3D feel */
.brand-logo-animated {
  filter:
    drop-shadow(0 6px 22px rgba(200,144,42,0.30))
    drop-shadow(0 14px 50px rgba(200,144,42,0.18));
}

/* Bridge section logo container */
.bridge-logo-mount {
  position: relative;
  width: min(72vw, 800px);
  z-index: 2;
}
.bridge-logo-mount .brand-logo {
  opacity: 0;
  transform: perspective(1200px) rotateY(-10deg) scale(0.55);
  transform-origin: center center;
  filter: blur(6px);
  transition: none;
  will-change: opacity, transform, filter;
}
/* Light flash that crosses behind the bridge logo at climax */
.bridge-flash {
  position: absolute; inset: -20%;
  z-index: 3;
  pointer-events: none;
  --x: -110%;
  transform: translateX(var(--x)) rotate(18deg);
  width: 200%;
  background: linear-gradient(90deg,
    transparent 0%,
    transparent 38%,
    rgba(255,221,150,0.10) 44%,
    rgba(255,221,150,0.55) 50%,
    rgba(255,221,150,0.10) 56%,
    transparent 62%,
    transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
}

/* ── PROGRAM PAGE — artist cards with photo + hover expansion ── */
.section-dark .artist-card {
  position: relative;
  overflow: hidden;
  background: rgba(247,236,206,0.04);
  border: 1px solid rgba(247,236,206,0.16);
  padding: 0;
  cursor: pointer;
  display: block;
  min-height: 150px;
  transition: border-color 0.4s, transform 0.4s, min-height 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
.section-dark .artist-card:hover {
  border-color: var(--brass);
  transform: translateY(-3px);
  min-height: 280px;
}
.section-dark .artist-card.headliner {
  background: rgba(200,144,42,0.06);
  border-color: rgba(200,144,42,0.4);
}
.section-dark .artist-card-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.45) saturate(1.1);
  transform: scale(1);
  opacity: 0;
  transition: opacity 0.5s ease, transform 1.1s cubic-bezier(0.2,0.8,0.2,1), filter 0.5s;
  z-index: 0;
}
.section-dark .artist-card.has-photo:hover .artist-card-photo {
  opacity: 1;
  transform: scale(1.06);
  filter: brightness(0.6) saturate(1.15);
}
.section-dark .artist-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,29,51,0.0) 30%, rgba(14,29,51,0.92) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}
.section-dark .artist-card.has-photo:hover .artist-card-overlay { opacity: 1; }
.section-dark .artist-card-body {
  position: relative;
  z-index: 2;
  padding: 1.4rem 1.4rem 1.6rem;
}
.section-dark .artist-bio {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(247,236,206,0.92);
  line-height: 1.45;
  margin-top: 0.8rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(0.2,0.8,0.2,1), opacity 0.4s ease 0.1s;
}
.section-dark .artist-card:hover .artist-bio {
  max-height: 200px;
  opacity: 1;
}

/* Logo at the top of secondary page heroes */
.page-hero-logo {
  width: clamp(220px, 32vw, 360px);
  margin: 0 auto 2.4rem;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.55));
}
@media (max-width: 900px) {
  /* iOS Safari halo from nested filter chain — same fix as the landing logo. */
  .page-hero-logo { filter: none; }
}

/* ── SECONDARY PAGES — element overrides for sections on dark ── */
/* Venue blocks on dark */
.section-dark .venue-info h3 { color: var(--cream); }
.section-dark .venue-info p { color: rgba(247,236,206,0.82); }
.section-dark .venue-info-meta {
  border-top-color: rgba(247,236,206,0.18);
}
.section-dark .venue-info-meta div { color: rgba(247,236,206,0.85); }

/* Ticket cards on dark */
.section-dark .ticket-card {
  background: rgba(247,236,206,0.04);
  border-color: rgba(247,236,206,0.18);
}
.section-dark .ticket-card:hover {
  background: rgba(200,144,42,0.08);
  border-color: var(--brass);
}
.section-dark .ticket-headliners { color: var(--cream); }
.section-dark .ticket-meta { color: rgba(247,236,206,0.6); }
.section-dark .ticket-soon {
  color: rgba(247,236,206,0.55);
  border-color: rgba(247,236,206,0.18);
}

/* Partners section sits on a cream-deep band so logos appear in their
   ORIGINAL brand colors — no filter, no per-logo pill. */
#partners .partners-logos img {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  height: 56px !important;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: none !important;
  opacity: 0.92;
  transition: opacity 0.35s, transform 0.35s;
}
#partners .partners-logos img:hover {
  opacity: 1;
  transform: translateY(-2px);
}
#partners .section-tag,
#partners h2,
#partners h2 em {
  color: var(--ink);
}
#partners .section-rule { background: var(--brass); margin-top: 0; }
/* Tighten the gap between the "Partner." heading and its brass underline
   on the about page — was reading as a big empty band. */
#partners h2 { margin-bottom: 0.3rem; }
.bridge-labels {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 6rem;
  z-index: 3;
  pointer-events: none;
}
.bridge-label {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.bridge-label-tag {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.5rem;
}
.bridge-label-name {
  font-family: var(--font-head);
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  font-weight: 300;
  color: var(--cream);
}
.bridge-label-right { text-align: right; }
.bridge-section.in-view .bridge-label { opacity: 1; transform: translateY(0); }
.bridge-section.in-view .bridge-label-right { transition-delay: 0.4s; }

.bridge-caption {
  position: absolute;
  bottom: 8vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 4;
  max-width: 760px;
  padding: 0 2rem;
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  transition: opacity 0.9s ease 0.6s, transform 0.9s ease 0.6s;
}
.bridge-section.in-view .bridge-caption {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.bridge-caption-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1rem;
}
.bridge-caption-title {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.6vw, 2.8rem);
  line-height: 1.1;
  color: var(--cream);
  margin-bottom: 1rem;
}
.bridge-caption-title em {
  font-family: var(--font-display);
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--brass);
}
.bridge-caption-body {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(247,236,206,0.78);
  line-height: 1.65;
}

/* ── NUMBERS ─────────────────────────────────────────── */
.numbers-section {
  padding: 6rem 0;
  background: var(--ink);
  color: var(--cream);
}
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  text-align: center;
}
.num-block {
  padding: 2rem 1rem;
  border-left: 1px solid rgba(247,236,206,0.12);
}
.num-block:first-child { border-left: 0; }
.num {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 9vw, 8rem);
  letter-spacing: 0.02em;
  color: var(--brass);
  line-height: 1;
  margin-bottom: 0.6rem;
}
.num-label {
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(247,236,206,0.65);
}

/* ── BIG H ──────────────────────────────────────────────── */
.big-h {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-bottom: 1.4rem;
}
.big-h em {
  font-family: var(--font-display);
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--brass);
}

/* ── LINEUP CAROUSEL — small editorial scrollable cards ── */
.lineup-carousel-section {
  background: var(--ink);
  color: var(--cream);
  padding: 3rem 0 3.5rem;
  position: relative;
}
.lineup-carousel-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3.4rem;
}
.lineup-carousel-header .section-tag { color: var(--brass); }
.lineup-carousel-header h2 { color: var(--cream); margin-bottom: 0; }
.lineup-carousel-header h2 em { color: var(--brass); }
.lineup-fulllink {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 4px;
  transition: color 0.3s, letter-spacing 0.3s;
}
.lineup-fulllink:hover { letter-spacing: 0.36em; }
.lineup-carousel-lead {
  font-family: var(--font-head);
  font-style: italic;
  color: rgba(247,236,206,0.72);
  margin-top: 0.8rem;
  max-width: 540px;
  font-size: 1rem;
}
.carousel-edge-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(247,236,206,0.18);
  background: linear-gradient(145deg, rgba(247,236,206,0.10), rgba(14,29,51,0.55));
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  color: var(--cream);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.35),
    0 14px 40px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(247,236,206,0.18);
  transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1), background 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.carousel-edge-arrow svg { width: 22px; height: 22px; }
.carousel-edge-arrow:hover {
  background: linear-gradient(145deg, var(--brass), #8a611a);
  border-color: var(--brass);
  color: var(--ink);
  box-shadow:
    0 10px 24px rgba(200,144,42,0.35),
    0 20px 50px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(247,236,206,0.32);
  transform: translateY(-50%) scale(1.07);
}
.carousel-edge-arrow:active { transform: translateY(-50%) scale(0.96); }
.carousel-edge-left  { left: clamp(0.6rem, 2vw, 1.6rem); }
.carousel-edge-right { right: clamp(0.6rem, 2vw, 1.6rem); }
.carousel-hint {
  text-align: center;
  margin-top: 1.2rem;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(247,236,206,0.36);
}
@media (max-width: 600px) {
  .carousel-edge-arrow { width: 44px; height: 44px; }
  .carousel-edge-arrow svg { width: 18px; height: 18px; }
}

.lineup-carousel-wrap {
  position: relative;
  overflow: hidden;
}
.lineup-carousel-track {
  display: flex;
  gap: 1rem;
  padding: 0 max(2rem, calc((100vw - 1340px) / 2));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lineup-carousel-track::-webkit-scrollbar { display: none; }
.carousel-card {
  flex: 0 0 320px;
  aspect-ratio: 5/6;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ink) 0%, #1f3658 100%);
  scroll-snap-align: start;
}
.carousel-card.no-image::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(200,144,42,0.20), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(200,144,42,0.10), transparent 50%);
}
.carousel-card img {
  position: absolute;
  /* Slight outset so subpixel rounding from the hover scale + brightness
     filter can never expose the card's underlying gradient bg at the
     bottom or right edges. */
  inset: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.2,0.8,0.2,1), filter 0.5s;
  filter: brightness(0.82) saturate(1.05);
}
@media (hover: hover) {
.carousel-card:hover img {
  transform: scale(1.06);
  filter: brightness(0.95) saturate(1.15);
}
}
.carousel-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,29,51,0.0) 35%, rgba(14,29,51,0.55) 75%, rgba(14,29,51,0.85) 100%);
  transition: background 0.4s;
}
@media (max-width: 600px) {
  /* Lighter overlay on phone — keeps the photo's color and life visible
     while still giving the name enough contrast at the bottom. */
  .carousel-card-overlay {
    background: linear-gradient(180deg, rgba(14,29,51,0.0) 55%, rgba(14,29,51,0.45) 82%, rgba(14,29,51,0.88) 100%);
  }
  /* Phone carousel = name only. Hide date, cred, meta, snippet, CTA — these
     all reveal in the bottom-sheet on tap. Name block has a uniform bottom
     reserve so the PRIMARY name lines up across cards regardless of whether
     a secondary suffix line is present. Single-line cards get an empty
     reserve; two-line cards fill it with the small italic suffix. */
  .carousel-card-content {
    padding: 0.5rem 0.7rem 1.1rem;
  }
  .carousel-card-cred,
  .carousel-card-meta,
  .carousel-card-snippet,
  .carousel-card-cta { display: none; }
  .carousel-card-day {
    display: block;
    font-size: 0.72rem;
    margin-bottom: 0.25rem;
    letter-spacing: 0.18em;
  }
  .carousel-card-name { margin-bottom: 0; position: relative; }
  /* Park the secondary line in the reserved bottom strip — this way it does
     NOT push the primary line up. Primary stays at a fixed Y across cards. */
  .carousel-card .ccn-secondary {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    margin-top: 0.15em;
  }
  /* Touch carousels are scrolled by swipe — the round arrows are an extra
     desktop affordance. On phone they sit mid-card and overlap the name. */
  .carousel-edge-arrow { display: none; }
}
@media (hover: hover) {
.carousel-card:hover .carousel-card-overlay {
  background: linear-gradient(180deg, rgba(14,29,51,0.55) 0%, rgba(14,29,51,0.96) 70%, rgba(14,29,51,0.98) 100%);
}
.carousel-card:hover img {
  transform: scale(1.08);
  filter: brightness(0.65) saturate(1.2);
}
}
/* Default: text sits LOW on the photo (small bottom padding). Bottom-anchored
   so the card has plenty of unused real estate on hover for meta/snippet/CTA
   to expand UPWARDS, lifting the day+name as the card "opens". */
.carousel-card-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.6rem 1.4rem 0.85rem;
  transition: padding-bottom 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
@media (hover: hover) {
  .carousel-card:hover .carousel-card-content {
    padding-bottom: 1.6rem;
  }
}
.carousel-card-day {
  font-family: var(--font-display);
  color: var(--brass);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  margin-bottom: 0.4rem;
}
.carousel-card-name {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 0.4rem;
  color: var(--cream);
}
/* Primary line of the name (artist) and an optional secondary line below
   (subtitle: "— A Tribute to Prince", "feat. ...", parenthetical). The
   secondary is smaller + italic so it reads as a lockup, not part of the
   primary line. */
.ccn-primary { display: block; }
.ccn-secondary {
  display: block;
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 300;
  font-size: 0.74em;
  letter-spacing: 0.01em;
  color: rgba(247,236,206,0.86);
  margin-top: 0.18em;
  line-height: 1.18;
}
/* Each WORD is kept in its own nowrap inline-block so the per-letter
   spans inside can never produce a line-break in the middle of a word.
   Breaks only happen at whitespace between words. */
.ltr-word { display: inline-block; white-space: nowrap; }
/* Letters sit normal by default. On hover, an arpeggiated gold shimmer
   ripples across the name from left to right — each letter briefly tints
   warm cream-gold and lifts, then settles. */
.ltr { display: inline-block; }
@media (hover: hover) {
  .carousel-card:hover .ltr {
    animation: letterArpeggio 0.55s cubic-bezier(0.3, 0.7, 0.3, 1);
    animation-delay: calc(var(--i, 0) * 0.04s);
  }
}
@keyframes letterArpeggio {
  0%   { color: var(--cream); transform: translateY(0); text-shadow: 0 0 0 rgba(200,144,42,0); }
  40%  { color: #ffe6a8;     transform: translateY(-2px); text-shadow: 0 0 8px rgba(200,144,42,0.55); }
  100% { color: var(--cream); transform: translateY(0); text-shadow: 0 0 0 rgba(200,144,42,0); }
}
.carousel-card-cred {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.45s cubic-bezier(0.2,0.8,0.2,1), opacity 0.35s ease 0.05s, margin-top 0.45s;
}
@media (hover: hover) {
  .carousel-card:hover .carousel-card-cred {
    max-height: 60px;
    opacity: 0.78;
    margin-top: 0.5rem;
  }
}
.carousel-card-bio {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 0.82rem;
  color: rgba(247,236,206,0.92);
  line-height: 1.45;
  margin-top: 0.8rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(0.2,0.8,0.2,1), opacity 0.4s ease 0.1s, margin 0.5s;
}
@media (hover: hover) {
.carousel-card:hover .carousel-card-bio {
  max-height: 200px;
  opacity: 1;
}
}
/* Hover-revealed info: tags · venue + bio snippet. Wrapped in (hover: hover)
   so touch devices don't fire it briefly during tap (causes glitch before nav). */
.carousel-card-meta {
  margin-top: 0.6rem;
  display: flex; flex-direction: column; gap: 0.2rem;
  font-family: var(--font-body);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.2,0.8,0.2,1), opacity 0.3s ease 0.05s;
}
.cc-tags { color: var(--brass); }
.cc-venue { color: rgba(247,236,206,0.78); }
.carousel-card-snippet {
  /* Inter regular for readability at small sizes — Playfair italic was too
     thin to read. Different family from the Bebas Neue name above it,
     different treatment from the uppercase tracked Inter used for the cred. */
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.55;
  letter-spacing: 0.005em;
  color: rgba(247,236,206,0.92);
  margin-top: 0.7rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(0.2,0.8,0.2,1), opacity 0.4s ease 0.15s;
}
@media (hover: hover) {
  .carousel-card:hover .carousel-card-meta { max-height: 80px; opacity: 1; }
  .carousel-card:hover .carousel-card-snippet { max-height: 200px; opacity: 1; }
}
.carousel-card-cta {
  margin-top: 0.8rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  opacity: 0;
  transition: opacity 0.4s ease 0.2s;
}
@media (hover: hover) {
  .carousel-card:hover .carousel-card-cta { opacity: 1; }
}

/* ── CINEMATIC ZOOM — pinhole-to-fullscreen, then light flash ──────── */
.zoom-section {
  background: var(--ink);
  height: 220vh; /* lots of runway so the keyhole opens slowly and deliberately */
  position: relative;
}
.zoom-stage {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  background: #050a14;
  display: flex; align-items: center; justify-content: center;
}
.zoom-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  --t: 0;
  clip-path: circle(calc(2vmin + var(--t) * 160vmax) at 50% 50%);
  transform: scale(calc(1.0 + var(--t) * 0.06));
  filter: brightness(0.78) saturate(1.05);
}
/* Diagonal warm light sweep that crosses the photo after the reveal */
.light-sweep {
  position: absolute; inset: -20%;
  z-index: 3;
  pointer-events: none;
  --x: -120%;
  transform: translateX(var(--x)) rotate(20deg);
  width: 200%;
  background: linear-gradient(90deg,
    transparent 0%,
    transparent 38%,
    rgba(255,221,150,0.05) 44%,
    rgba(255,221,150,0.42) 50%,
    rgba(255,221,150,0.05) 56%,
    transparent 62%,
    transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.zoom-section.sweep-on .light-sweep { opacity: 1; }
.zoom-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(5,10,20,0.85) 100%);
  pointer-events: none;
  z-index: 2;
}
.zoom-caption {
  position: relative;
  z-index: 3;
  text-align: center;
  color: var(--cream);
  padding: 0 2rem;
  --c: 1;
  opacity: var(--c);
  transform: translateY(calc((1 - var(--c)) * -40px));
  pointer-events: none;
}
.zoom-eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 500;
  color: #f4d68f;  /* lighter brass for readability */
  margin-bottom: 1.4rem;
  text-shadow:
    0 2px 6px rgba(0,0,0,0.85),
    0 0 18px rgba(0,0,0,0.6);
}
.zoom-title {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(2rem, 5.5vw, 4.6rem);
  line-height: 1.05;
  margin: 0;
  color: var(--cream);
  text-shadow: 0 2px 4px rgba(0,0,0,0.55);
}
.zoom-title em {
  font-family: var(--font-display);
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--brass);
}


@media (max-width: 900px) {
  .zoom-section { height: 130vh; }
}

/* ── STACKED VENUES — full-bleed, big. No section padding so the
       images touch the surrounding dark sections without a cream gap. */
.stacked-venues-section {
  background: var(--ink);
  padding: 0 !important;
}
.stacked-venue {
  display: block;
  position: relative;
  height: 92vh;
  min-height: 620px;
  width: 100%;
  overflow: hidden;
  background: var(--ink);
}
.stacked-venue-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 8s ease-out, filter 0.6s;
  filter: brightness(0.78) saturate(1.05);
}
.stacked-venue:hover .stacked-venue-img { transform: scale(1.10); filter: brightness(0.92) saturate(1.1); }
.stacked-venue-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(14,29,51,0.18) 0%,
    rgba(14,29,51,0.50) 50%,
    rgba(14,29,51,0.92) 100%);
  z-index: 1;
}
.stacked-venue-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 4rem 4rem 4.5rem;
  z-index: 2;
  color: var(--cream);
  max-width: 1300px;
  margin: 0 auto;
}
.stacked-venue-tag {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.4rem;
}
.stacked-venue-name {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  letter-spacing: 0.02em;
  line-height: 0.95;
  margin-bottom: 1rem;
  color: var(--cream);
}
.stacked-venue-line {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  color: rgba(247,236,206,0.92);
}

@media (max-width: 900px) {
  .stacked-venue { height: 80vh; min-height: 480px; }
  .stacked-venue-content { padding: 2.4rem 1.6rem 2.6rem; }
}

/* ── VENUES PAGE — full-bleed showcase per venue ────── */
.venues-showcase { background: var(--ink); }
.showcase-venue {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--ink);
  display: block;
}
.showcase-venue-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* V5: lifted brightness so the villa reads as a summery sunlit place,
     not a brooding dusk shot. Address/directions area also brightens. */
  filter: brightness(0.92) saturate(1.08);
  transform: scale(1.04);
  transition: transform 14s ease-out;
}
.showcase-venue.in-view .showcase-venue-img { transform: scale(1.08); }
.showcase-venue-overlay {
  position: absolute; inset: 0;
  /* V5: lighter overlay so the villa photo stays visible behind the
     address/directions block. Text still readable via stronger shadow on
     .showcase-venue-name + body below. */
  background: linear-gradient(180deg,
    rgba(14,29,51,0.18) 0%,
    rgba(14,29,51,0.30) 45%,
    rgba(14,29,51,0.58) 100%);
  z-index: 1;
}
.showcase-venue-content {
  position: relative;
  z-index: 2;
  max-width: 1300px;
  margin: 0 auto;
  padding: 14vh 4rem 10vh;
  color: var(--cream);
}
.showcase-venue-tag {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  /* V5: tag sits over the lightened villa photo. Cream with a strong
     shadow stays legible regardless of the photo region behind it. */
  color: #ffe9aa;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
  margin-bottom: 1.6rem;
  padding-left: 0;
}
.showcase-venue-name {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 8vw, 7rem);
  letter-spacing: 0.02em;
  line-height: 0.92;
  margin: 0 0 2rem;
  /* V5: pure bright cream + heavy drop-shadow so the name punches
     against the lightened sunlit photo. */
  color: #fff8e0;
  text-shadow: 0 4px 28px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.55);
  font-weight: 400;
}
.showcase-venue-body {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  color: #f7ecce;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  max-width: 720px;
  margin-bottom: 2.4rem;
}
.showcase-venue-meta {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.6rem 1.4rem;
  max-width: 600px;
  border-top: 1px solid rgba(247,236,206,0.18);
  padding-top: 1.6rem;
  margin: 0;
}
.showcase-venue-meta dt {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
}
.showcase-venue-meta dd {
  margin: 0;
  font-size: 0.92rem;
  color: #f7ecce;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}

.showcase-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 1.4rem;
  background: var(--ink);
  padding: 3rem 1rem;
}
.showcase-divider-line {
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}
.showcase-divider-text {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--brass);
}

@media (max-width: 768px) {
  .showcase-venue-content { padding: 3rem 1.6rem 5vh; }
  .showcase-venue-meta { grid-template-columns: 1fr; gap: 0.2rem 0; }
  .showcase-venue-meta dt { margin-top: 0.8rem; }
}

/* ── DUAL VENUES (legacy, kept for compat if used) ────── */
.dual-venues-section {
  background: var(--cream);
  padding: 8rem 0;
}
.dual-venues-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  max-width: 1500px;
  margin: 0 auto;
}
.dual-venue {
  position: relative;
  display: block;
  height: 70vh;
  min-height: 480px;
  overflow: hidden;
  background: var(--ink);
}
.dual-venue-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 8s ease-out, filter 0.5s;
  filter: brightness(0.78) saturate(1.05);
}
.dual-venue:hover .dual-venue-img {
  transform: scale(1.10);
  filter: brightness(0.92) saturate(1.1);
}
.dual-venue-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(14,29,51,0.3) 0%,
    rgba(14,29,51,0.55) 55%,
    rgba(14,29,51,0.92) 100%);
  z-index: 1;
}
.dual-venue-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 2.4rem 2.4rem 2.6rem;
  z-index: 2;
  color: var(--cream);
}
.dual-venue-tag {
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.2rem;
}
.dual-venue-name {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  letter-spacing: 0.02em;
  line-height: 0.95;
  margin-bottom: 1rem;
  color: var(--cream);
}
.dual-venue-meta {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(247,236,206,0.85);
  margin-bottom: 0.8rem;
}
.dual-venue-arrow {
  display: inline-block;
  font-family: var(--font-display);
  color: var(--brass);
  font-size: 1.4rem;
  transition: transform 0.4s;
}
.dual-venue:hover .dual-venue-arrow { transform: translateX(8px); }

.dual-venues-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0 2.4rem;
  position: relative;
}
.dual-venues-divider-line {
  width: 1px;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, var(--brass) 50%, transparent 100%);
}
.dual-venues-divider-text {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .dual-venues-grid { grid-template-columns: 1fr; }
  .dual-venue { min-height: 420px; height: 60vh; }
  .dual-venues-divider { padding: 1.4rem 0; }
  .dual-venues-divider-text { writing-mode: horizontal-tb; transform: none; }
  .dual-venues-divider-line { height: 1px; width: 80px; background: linear-gradient(90deg, transparent 0%, var(--brass) 50%, transparent 100%); }
}

/* ── FESTIVAL INTRO — dark to match the rest of the home page ──── */
.concept-section {
  background: var(--ink);
  color: var(--cream);
  padding: 3rem 0 7rem;
}
.concept-section .section-tag { color: var(--brass); }
.concept-section h2 { color: var(--cream); }
.concept-section h2 em { color: var(--brass); }
.concept-section .section-rule { background: var(--brass); }
.concept-section .body-text p { color: rgba(247,236,206,0.82); }
.concept-section .body-text p em { color: var(--cream); }

/* ── CTA ────────────────────────────────────────────────── */
.cta-section {
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  padding: 9rem 0;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(200,144,42,0.18), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(200,144,42,0.10), transparent 50%);
  z-index: 0;
}
.cta-section .wrap { position: relative; z-index: 1; }
.cta-section .big-h { color: var(--cream); max-width: 900px; margin: 0 auto 0; }
.cta-section .big-h em { color: var(--brass); }

/* ── RESPONSIVE TUNING ──────────────────────────────────── */
@media (max-width: 900px) {
  .hero-cinematic .hero-title { font-size: clamp(3.4rem, 14vw, 6rem); }
  .marquee-item { padding: 0 1.4rem; font-size: clamp(1.8rem, 6vw, 3rem); }
  .numbers-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .num-block:nth-child(2n+1) { border-left: 0; }
  .num-block:nth-child(3) { border-left: 1px solid rgba(247,236,206,0.12); }
  .bridge-section { height: 220vh; }
  .bridge-svg { padding: 0 1.5rem; }
  .bridge-labels { padding: 0 1.6rem; }
  .bridge-caption { bottom: 4vh; padding: 0 1.4rem; }
  .lineup-carousel-section { padding: 4.5rem 0 4rem; }
  .lineup-carousel-header { flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; }
  .lineup-carousel-track { padding: 0 1.2rem; gap: 0.6rem; }
  .carousel-card { flex: 0 0 200px; }
  .carousel-card-content { padding: 1.1rem 1rem 1.2rem; }
  .carousel-card-name { font-size: 1.05rem; }
  .carousel-card-day { font-size: 0.78rem; }
  .carousel-card-cred { font-size: 0.55rem; letter-spacing: 0.15em; }
}
@media (max-width: 600px) {
  .numbers-grid { grid-template-columns: 1fr 1fr; }
  .num-block { padding: 1.4rem 0.5rem; }
  .num { font-size: clamp(3rem, 13vw, 5rem); }
  .marquee-track { animation-duration: 40s; }
  .carousel-card { flex: 0 0 175px; }
  .carousel-card-content { padding: 0.9rem 0.85rem 1rem; }
  .carousel-card-name { font-size: 0.95rem; }
}