/* V2 hero scroll cue: animated chevron under the CTA so visitors know
   there's more content (program) below. */
.hero-scroll-cue {
  position: absolute;
  bottom: 1rem; left: 50%;
  transform: translateX(-50%);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(247,236,206,0.35);
  border-radius: 50%;
  color: var(--cream);
  text-decoration: none;
  z-index: 6;
  animation: scrollCueBob 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.hero-scroll-cue svg { width: 18px; height: 18px; }
.hero-scroll-cue:hover {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}
@keyframes scrollCueBob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.85; }
  50%      { transform: translate(-50%, 7px); opacity: 1; }
}
@media (max-width: 600px) {
  .hero-scroll-cue { bottom: 1.2rem; width: 34px; height: 34px; }
}

.program-carousel { padding: 4rem 0 5rem; }
.program-carousel .lineup-carousel-header { margin-bottom: 2rem; }
/* Standalone brass tag line - sits below the Headliners heading */
.section-tag-line {
  display: block;
  width: 88px; height: 2px;
  background: var(--brass);
  margin: 0;
}

.schedule-section {
  padding: 5rem 0 6rem;
  position: relative;
  background: var(--ink);
}
.schedule-cards {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-top: 2.4rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   DAY POSTERS - each night is its own poster.
   Big headliner photo on the left half, line-up on the right half,
   own unique shade of blue (or a theme-night override).
   ═══════════════════════════════════════════════════════════════════════ */
.day-poster {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  min-height: 320px;
  background: var(--day-tint, var(--ink));
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.55s ease;
}
@media (hover: hover) {
  /* No translateY on hover - that 4px lift created mouseleave/enter
     jitter at the poster's edges, which broke both the photo-hover
     name highlight (only triggered on the center of the photos) AND
     click registration on lineup names near the poster edges (mousedown
     and mouseup landed on different elements during the bounce). The
     box-shadow alone still reads as elevation. */
  .day-poster:hover {
    box-shadow:
      0 24px 60px rgba(0,0,0,0.55),
      0 0 0 1px rgba(200,144,42,0.12) inset;
  }
}
.day-poster.empty {
  min-height: 180px;
  grid-template-columns: 1fr;
  opacity: 0.5;
}
.dp-photo {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  background: var(--ink);
}
@media (min-width: 601px) {
  /* Cap the day-poster's row height at the photo height - both columns
     fill the same vertical space, so the photo always reaches the bottom
     edge of the card (no day-tint strip). Any info content that would
     spill past gets clipped by the day-poster's overflow:hidden, but the
     tighter lineup padding/gap above keeps 3-act long-name days from
     overflowing in practice. */
  .day-poster {
    grid-template-rows: clamp(280px, 22vw, 320px);
    min-height: 0;
  }
  .dp-photo {
    min-height: 0;
    align-self: stretch;
  }
  .dp-info {
    min-height: 0;
    /* No overflow:hidden - it was clipping the font ascent of "JUL"
       above its line-box. .day-poster's own overflow:hidden still
       handles any actual content overflow at the bottom. */
  }
}
/* Collage cells: each photo lives in its own <div class="dp-photo-cell">,
   placed by CSS Grid. The .dp-photo-grid-N modifier classes below set the
   grid for 1 / 2 / 3 acts per night. */
.dp-photo-cell {
  position: relative;
  overflow: hidden;
  min-height: 0;
}
/* Bluish-monochrome treatment on every collage photo - near-grayscale
   with a cool blue duotone cast (grayscale → warm sepia → hue-rotated
   into the blues). Lifts to full natural colour on hover of the cell
   OR its matching lineup name, with a small zoom for the active one. */
.dp-photo-cell img {
  filter: grayscale(0.95) sepia(0.5) hue-rotate(178deg) saturate(1.4) brightness(1);
  /* No transition on `filter` - animating through hue-rotate produced
     a brief weird-color swing as the hue value crossed greens/yellows.
     Explicitly pin filter transition to 0s so no browser default sneaks
     in an implicit animation; only the zoom scale is transitioned. */
  transition: filter 0s, scale 0.35s ease;
  transform-origin: center;
}
@media (hover: hover) {
  .dp-photo-cell:hover img,
  .dp-photo-cell.name-hover img {
    filter: none;
    scale: 1.06;
  }
}
/* Photo cells also carry .dp-act-link (for click delegation) but must NOT
   inherit the time/name 2-column grid that .dp-act-link applies to lineup
   list items - that rule was forcing the <img> into a 70px-wide first
   column and producing the "super narrow super tall" photo bug. Reset
   here so .dp-photo-cell wins regardless of source order. */
.dp-photo-cell.dp-act-link {
  display: block;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
  border-bottom: none;
  align-items: stretch;
}
.dp-photo-cell.dp-act-link:last-child { border-bottom: none; }
.dp-photo-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.dp-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ALL collage layouts use the SAME grid so the headliner photo is the
   same size and in the same position on every day, regardless of how
   many acts that night has. Days with 1 or 2 photos leave the unused
   cells showing day-tint, which keeps the visual rhythm consistent. */
/* Original poster collage layouts (the version you said was good). */
.dp-photo-grid-1 {
  display: block;
}
.dp-photo-grid-1 .dp-photo-cell { width: 100%; height: 100%; }

.dp-photo-grid-2 {
  display: grid;
  /* 50/50 split per Uri (2026-05-11 desktop pass). */
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
/* Headliner photo on the RIGHT (cell-0 = mainslot per the render order
   in program.js); support + early stacked on the LEFT. Explicit grid-row
   needed so 2-photo days don't accidentally place cell-1 on row 2 and
   leave a half-empty grid. */
.dp-photo-grid-2 { grid-template-rows: 1fr; }
.dp-photo-grid-2 .dp-photo-cell-0 { grid-column: 2; grid-row: 1; }
.dp-photo-grid-2 .dp-photo-cell-1 { grid-column: 1; grid-row: 1; }

.dp-photo-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
}
.dp-photo-grid-3 .dp-photo-cell-0 { grid-column: 2; grid-row: 1 / span 2; }
.dp-photo-grid-3 .dp-photo-cell-1 { grid-column: 1; grid-row: 1; }
.dp-photo-grid-3 .dp-photo-cell-2 { grid-column: 1; grid-row: 2; }

.dp-photo-cell {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* Cell positioning is scoped per-count above (.dp-photo-grid-1/2/3) -
   no global cell rules here. (Earlier dead "always-3-cell" rules were
   forcing cell-0 to span 2 rows on every day, including 1- and 2-act
   days, producing a tall narrow main photo + empty black space below
   the side cell. Removed.) */
/* The previous fade-to-tint overlay was covering the right photos of the
   collage. Removed entirely - the hard edge between .dp-photo and .dp-info
   reads clean against the unified tint and the photos stay fully visible. */
.dp-info {
  padding: 2.4rem 2.4rem 0.9rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: relative;
  z-index: 1;
}
.dp-date-block { padding-top: 0.3rem; }
.day-poster.empty .dp-info { padding: 2rem 2.4rem; }
/* Desktop only: pull the date row higher so long line-ups (e.g. 26.07
   Gonzalo's long featured-name string + Tigran below) have more vertical
   breathing room. Phone date-block header is untouched. */
@media (min-width: 601px) {
  .dp-info { padding-top: 1.2rem; }
  .dp-date-block { padding-top: 0; }
}
.dp-date-block {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.dp-number {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 5.8vw, 5.2rem);
  color: var(--brass);
  line-height: 1;
  letter-spacing: 0.01em;
}
.dp-month {
  /* Bebas Neue - designed for caps, full cap-height. Inter at 1rem
     bold was rendering with short caps that looked clipped. */
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  line-height: 1.1;
  color: rgba(247,236,206,0.85);
  text-transform: uppercase;
}
.dp-weekday {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1.5rem;
  color: rgba(247,236,206,0.88);
  margin-left: 0.4rem;
}
.dp-lineup {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.dp-act-link {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.3rem 0;
  text-decoration: none;
  /* No default underline on any day's act link. Themed nights (Italy /
     Brazil / ACT) used to show a visible cream underline by default while
     non-themed cream days had a near-invisible ink one - feels inconsistent.
     Make all transparent by default, brass on hover only. */
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s ease;
}
.dp-act-link:last-child { border-bottom: 1px solid transparent; }
.dp-time {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(247,236,206,0.52);
  text-transform: uppercase;
}
.dp-name {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  color: var(--brass);
  letter-spacing: 0.015em;
  font-weight: 400;
  line-height: 1.1;
  transition: color 0.3s ease, transform 0.3s ease;
}
/* Inline thumbnail next to each lineup row - visible on phone only.
   `display: contents` on the meta wrapper means time+name flow as if
   they were direct grid children on desktop, keeping the existing
   .dp-act-link grid (70px time | 1fr name) intact. */
.dp-act-thumb { display: none; }
.dp-act-meta { display: contents; }
/* Desktop split-name styling. Primary band name + featured names use
   the same big display font (Bebas Neue brass). Only "feat." (connector)
   and Trio/Quartet secondary suffixes render in the smaller italic serif
   white/cream treatment. */
@media (min-width: 601px) {
  .dp-name-primary,
  .dp-name-feat { color: var(--brass); }
  .dp-name-connector,
  .dp-name-secondary {
    font-family: var(--font-head);
    font-style: italic;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.005em;
  }
  .dp-name-connector { color: rgba(247,236,206,0.92); }
  .dp-name-secondary { color: rgba(247,236,206,0.85); }
  /* "Prince" inside Ida Nielsen Group A Prince Celebration: same color
     as the surrounding text (honey was too low-contrast against cream
     paper), highlighted by a slight italic tilt instead. Surrounding
     "A … Celebration" is upright so the italic on "Prince" reads. */
  .ida-prince-em {
    font-style: italic;
    font-weight: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    color: inherit;
    /* Italic tilt makes the "e" of Prince visually crash into the "C" of
       Celebration - push them apart slightly. */
    margin: 0 0.22em 0 0.06em;
  }
  /* V5 desktop: non-themed (cream parchment) days - flip band names to
     ink so they punch against the cream surface. Themed days
     (Italy / Brazil / ACT) keep their original treatment. */
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name,
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-primary,
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-feat {
    color: var(--ink);
  }
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-connector {
    color: rgba(14,29,51,0.72);
  }
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-secondary {
    color: rgba(14,29,51,0.62);
  }
}
/* Phone lineup - Ida's name lays out as:
     Line 1: "Ida Nielsen" big brass + "Group" small italic (connector)
     Line 2: "A Prince Celebration" (feat)
   Pulling primary back to inline-flow so the connector "Group" sits on
   the same line, then forcing feat to its own block under it. */
@media (max-width: 600px) {
  .dp-act-link[data-id="ida-nilsen-prince"] .dp-name-primary,
  .dp-act-link[data-id="ida-nilsen-prince"] .dp-name-connector {
    display: inline;
  }
  /* Ida thumb: photo is tight on her face; show the whole frame.
     Background was `#000` to match the thumb's letterbox, but now that
     24.07 has Ida's photo as the day-card bg the black band looks like
     a stripe across the card — keep it transparent (Uri 2026-05-26). */
  .dp-act-link[data-id="ida-nilsen-prince"] {
    background: transparent;
  }
  .dp-act-link[data-id="ida-nilsen-prince"] .dp-act-thumb {
    object-fit: contain;
  }
  .dp-act-link[data-id="ida-nilsen-prince"] .dp-name-feat {
    display: block;
    margin-top: 0.15rem;
    /* Cancel the 0.4em offset that .dp-name-connector + .dp-name-feat
       adds - when feat goes on its own block line we want it flush-
       left with "Ida Nielsen" above. */
    padding-left: 0;
  }
}
@media (hover: hover) {
  .dp-act-link:hover .dp-name {
    color: #ffe6a8;
    transform: translateX(2px);
  }
  .dp-act-link:hover { border-bottom-color: rgba(200,144,42,0.45); }
  /* Cross-hover: hovering an artist's photo cell in the collage highlights
     the matching name on the right - brighter + slightly larger. */
  .dp-lineup .dp-act-link.photo-hover .dp-name {
    color: #ffe6a8;
    transform: translateX(2px) scale(1.06);
    transform-origin: left center;
  }
  .dp-lineup .dp-act-link.photo-hover {
    border-bottom-color: rgba(200,144,42,0.45);
  }
}
.dp-tbc {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1rem;
  color: rgba(247,236,206,0.4);
  margin: 0;
}

/* ── THEME: ITALY NIGHT (21.07) ─────────────────────────────────────────
   Default day tint stays. Italian identity comes from the top tricolore
   band, ITALIA watermark, sepia photo wash, and a MUTED tricolore on the
   info side only - desaturated green / dark cream / muted brick - so the
   flag is recognisable but doesn't shout. */
.day-poster.theme-italy {
  /* No background override here - inherits the day-tint from the JS-set
     CSS var (--day-tint) like every other day. */
}
.day-poster.theme-italy .dp-info {
  /* Actual Italian flag colours on the info side. A darkening overlay on
     top so cream + brass typography stays legible across all three bands
     (the unmuted white centre would otherwise wash out the type). */
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    linear-gradient(90deg,
      #008c45 0%, #008c45 33.33%,
      #f4f5f0 33.33%, #f4f5f0 66.66%,
      #cd212a 66.66%, #cd212a 100%);
}
/* Top full-width tricolore band removed - Uri's feedback (2026-05-11):
   the info-side tricolore alone reads as Italy clearly, the top band is
   redundant. */
.day-poster.theme-italy::before { display: none; }
/* Italy/Brazil/ACT photo filters removed so the global bluish-duotone
   .dp-photo-cell img filter applies uniformly across all days. */
/* Theme fade overlay removed - was covering the collage's right photos. */
.day-poster.theme-italy .dp-info { position: relative; overflow: hidden; }
.day-poster.theme-italy .dp-info::before {
  content: 'ITALIA';
  position: absolute;
  right: -0.4rem; bottom: -0.6rem;
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 11vw, 9.5rem);
  letter-spacing: 0.14em;
  color: rgba(244,217,127,0.22);  /* Italian gold, clearly visible */
  pointer-events: none;
  line-height: 0.82;
  white-space: nowrap;
}
.day-poster.theme-italy .dp-number {
  color: #f4d97f;  /* Italian gold */
}
.day-poster.theme-italy .dp-name,
.day-poster.theme-italy .dp-name-primary,
.day-poster.theme-italy .dp-name-feat {
  /* Cream matches the other nights - Italian gold/brass reads fine on the
     green band of the tricolore but disappears over the white band. */
  color: var(--cream) !important;
}
.day-poster.theme-italy .dp-month,
.day-poster.theme-italy .dp-weekday {
  color: rgba(247,236,206,0.78);
}
.day-poster.theme-italy .dp-time {
  color: rgba(244,217,127,0.55);
}
@media (max-width: 600px) {
  /* Phone: only the top tricolore band - bottom band removed so it
     doesn't cover the ITALIA watermark. */
  .day-poster.theme-italy::before { height: 7px; }
  .day-poster.theme-italy .dp-info::before {
    font-size: clamp(3.4rem, 16vw, 5rem);
  }
}

/* ── THEME: BRAZILIAN NIGHT (28.07) ─────────────────────────────────────
   Deep tropical green poster with yellow "BRASILIANISCHE NACHT" tag,
   warm/saturated photo, and a soft yellow "BRASIL" watermark on the
   info side. Unmistakably Brazilian. */
.day-poster.theme-brazil {
  --day-tint: #0f2a1c;
  background: #0f2a1c;
}
/* Brazil photo filter removed - see note above .day-poster.theme-italy. */
.day-poster.theme-brazil .dp-number,
.day-poster.theme-brazil .dp-name {
  color: #ffdf00;  /* Brazilian flag yellow */
}
.day-poster.theme-brazil .dp-info { position: relative; overflow: hidden; }
.day-poster.theme-brazil .dp-info::before {
  content: 'BRASIL';
  position: absolute;
  right: -0.4rem; bottom: -0.6rem;
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 12vw, 9.5rem);
  letter-spacing: 0.12em;
  pointer-events: none;
  line-height: 0.82;
  white-space: nowrap;
  /* Wordmark painted with the Brazilian flag colours - green field with
     a yellow diamond/lozenge and a blue celestial disc, clipped to the
     letterforms. The flag itself is invisible; only its colours show
     through the BRASIL letters. */
  background:
    radial-gradient(circle at 50% 60%, #002776 0%, #002776 11%, transparent 12%),
    radial-gradient(ellipse 46% 78% at 50% 50%, #ffdf00 0%, #ffdf00 92%, transparent 100%),
    #009c3b;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.55;  /* keep it watermark-y, not loud */
}
.dp-theme-tag {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 5;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  padding: 0.5rem 0.9rem;
  border-radius: 2px;
}
.dp-theme-tag-brazil {
  background: #ffdf00;
  color: #009c3b;
}
@media (max-width: 600px) {
  .day-poster.theme-brazil .dp-info::before { font-size: clamp(3.2rem, 16vw, 5rem); }
  .dp-theme-tag { font-size: 0.66rem; padding: 0.38rem 0.7rem; }
}

/* ── THEME: ACT WEEKEND (01.08 + 02.08) ─────────────────────────────────
   Minimalist label aesthetic. Near-black canvas, fine off-white hairline
   border, monochrome typography, big ACT wordmark with the red corner
   square that's part of the actmusic.com brand identity. */
.day-poster.theme-act {
  --day-tint: #0a0a0a;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.08);
}
.day-poster.theme-act .dp-number { color: var(--cream); font-weight: 300; letter-spacing: 0; }
.day-poster.theme-act .dp-name {
  color: var(--cream);
  font-family: var(--font-head);
  font-style: normal;
  font-weight: 400;
}
.day-poster.theme-act .dp-month { color: rgba(247,236,206,0.55); }
.day-poster.theme-act .dp-weekday { color: rgba(247,236,206,0.65); }
.day-poster.theme-act .dp-time { color: rgba(247,236,206,0.45); }
/* ACT photo filter removed - global bluish duotone applies uniformly. */
.day-poster.theme-act .dp-info { position: relative; overflow: hidden; }
/* Day-level presenter logo (e.g. FRAMED on 26.07). Pinned to the TOP-right
   of the day card so it's never hidden behind the last band's name. */
.day-poster:has(.dp-presenter-logo) { position: relative; }
.dp-presenter-logo {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  height: clamp(56px, 7.5vw, 88px);
  width: auto;
  display: block;
  pointer-events: none;
  opacity: 0.95;
  z-index: 4;
}
@media (max-width: 600px) {
  .dp-presenter-logo { height: 44px; top: 0.9rem; right: 0.9rem; }
}
/* Presenter with optional "Powered by" label (e.g. Rolling Stone on 24.07).
   Wrapper becomes the absolute element; logo inside flows naturally. */
.dp-presenter--with-label {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  z-index: 4;
  pointer-events: none;
}
.dp-presenter--with-label .dp-presenter-logo {
  position: static;
  top: auto; right: auto;
  height: 34px;
  width: auto;
}
/* Day-card "Powered by Rolling Stone" — SVG has native brand red, just
   add a drop-shadow for legibility against the photo. */
.day-poster[data-date="24.07"] .dp-presenter--with-label .dp-presenter-logo {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.65));
}
.dp-presenter-label {
  font-family: 'Acumin Pro Condensed', 'Antarctican Headline', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f3e2c2;
  opacity: 0.85;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .dp-presenter--with-label { top: 0.9rem; right: 0.9rem; gap: 0.2rem; }
  .dp-presenter-label { font-size: 0.5rem; letter-spacing: 0.18em; }
}
/* Real ACT Music logo in the bottom-right of the info area (SVG with the
   brand's own tight letterforms - no faked text + red square). */
.day-poster.theme-act .dp-act-logo {
  position: absolute;
  right: 1.3rem; bottom: 1rem;
  height: clamp(28px, 4.2vw, 44px);
  width: auto;
  display: block;
  pointer-events: none;
  opacity: 0.95;
}
.dp-theme-tag-act {
  background: transparent;
  /* White with a heavy black shadow + thin outline so the word "ACT"
     reads on both dark (Jazzrausch 01.08) and light (David Helbock 02.08)
     band photos. The previous cream color disappeared on light bgs. */
  color: #ffffff;
  text-shadow:
    0 1px 3px rgba(0,0,0,0.95),
    0 0 1px rgba(0,0,0,1),
    0 0 6px rgba(0,0,0,0.7);
  font-family: 'Helvetica Neue', system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.32em;
  border-left: 4px solid #cc0000;
  padding-left: 0.7rem;
  border-radius: 0;
}
@media (max-width: 600px) {
  .day-poster.theme-act .dp-act-logo {
    height: 26px;
    right: 1rem; bottom: 1rem;
  }
}

/* ── PHONE LAYOUT - festival-list style ──────────────────────────────
   On phone the big photo collage is hidden. Each day becomes a thin
   horizontal date header followed by one row per artist:
     [60×60 thumbnail]   small time
                         BIG SERIF NAME
   Last row's hairline is the bottom of the day - no dead space.
   Names are the hook. Photos are recognition-only at row scale. */
@media (max-width: 600px) {
  .schedule-cards { gap: 1.6rem; }

  .day-poster {
    display: block;
    grid-template-columns: 1fr;
    min-height: 0;
    background: var(--day-tint, var(--ink));
  }
  /* Hide the big photo collage - thumbnails ride inline next to names. */
  .day-poster .dp-photo { display: none; }

  .dp-info {
    padding: 0;
    gap: 0;
  }

  /* Day header: thin bar with date number + month + weekday */
  .dp-date-block {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    flex-wrap: nowrap;
    padding: 0.95rem 1.2rem 0.7rem;
    background: rgba(0,0,0,0.18);
    border-bottom: 1px solid rgba(247,236,206,0.12);
  }
  .dp-number {
    font-size: 1.8rem;
    line-height: 1;
    flex: 0 0 auto;
  }
  .dp-month {
    font-size: 0.85rem;
    letter-spacing: 0.28em;
  }
  .dp-weekday {
    font-size: 0.85rem;
    flex: 1 1 auto;
    color: rgba(247,236,206,0.65);
  }

  /* Lineup as a list of full-width rows */
  .dp-lineup {
    margin: 0;
    padding: 0;
    gap: 0;
  }
  .dp-act { list-style: none; }
  .dp-act-link {
    display: block;
    padding: 1rem 1.2rem 1rem;
    border-bottom: 1px solid rgba(247,236,206,0.10);
    transition: background 0.2s ease;
  }
  .dp-act-link:last-child { border-bottom: 1px solid rgba(247,236,206,0.10); }
  .dp-act-link:active { background: rgba(255,255,255,0.04); }

  /* Thumbnails removed on phone per Uri - names are the show. */
  .dp-act-thumb { display: none; }
  .dp-act-meta {
    display: block;
  }
  .dp-time {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(247,236,206,0.5);
    margin-bottom: 0.25rem;
  }
  /* Two-tone artist name: primary (band) in brass and BIG, secondary
     (feat. / Trio / tagline) in cream and smaller below. */
  .dp-name {
    display: block;
    font-family: var(--font-display);
    color: var(--brass);
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 1.02;
  }
  .dp-name-primary {
    display: block;
    font-size: 2.3rem;
    color: var(--brass);
    line-height: 1.02;
    letter-spacing: 0.002em;
  }
  .dp-name-secondary {
    display: block;
    font-family: var(--font-head);
    font-style: italic;
    font-size: 1.05rem;
    color: rgba(247,236,206,0.85);
    line-height: 1.2;
    margin-top: 0.22rem;
    font-weight: 400;
  }
  /* "feat." + featured artists share one wrapped line below the
     band name. Connector stays cream; names stay brass. They render
     inline so "feat. Richard Bona & Dave Weckl" reads as a single
     italic phrase with the connector tonally separated. */
  .dp-name-connector {
    display: inline;
    font-family: var(--font-head);
    font-style: italic;
    font-size: 1.05rem;
    color: rgba(247,236,206,0.78);
    font-weight: 400;
  }
  .dp-name-feat {
    display: inline;
    /* Phone: featured artist names should look like a smaller version of
       the primary band name - same Bebas Neue display font, NOT the
       Playfair italic. */
    font-family: var(--font-display);
    font-style: normal;
    font-size: 1.5rem;
    color: var(--brass);
    font-weight: 500;
    letter-spacing: 0.005em;
  }
  /* Wrap the connector+names onto a single new line below the primary,
     using the wrapper element they're injected after. The primary span
     forces a block, then connector + feat flow inline. We rely on the
     primary's display:block to create the line break. */
  .dp-name-primary + .dp-name-connector::before { content: ''; }
  .dp-name-connector + .dp-name-feat { padding-left: 0.4em; }

  /* Themed days - accent the day-header bar slightly. */
  .day-poster.theme-italy .dp-date-block {
    background: linear-gradient(90deg,
      rgba(0,140,69,0.32) 0%, rgba(0,140,69,0.32) 33.33%,
      rgba(244,245,240,0.18) 33.33%, rgba(244,245,240,0.18) 66.66%,
      rgba(205,33,42,0.32) 66.66%, rgba(205,33,42,0.32) 100%),
      rgba(0,0,0,0.35);
  }
  .day-poster.theme-brazil .dp-date-block {
    background:
      linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
      #0f2a1c;
  }
  .day-poster.theme-act .dp-date-block {
    background:
      linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
      #0a0a0a;
  }

  /* Empty / TBA day */
  .dp-tbc {
    padding: 0.9rem 1.2rem;
    font-size: 0.95rem;
    color: rgba(247,236,206,0.45);
  }

  /* Default: hide the inherited bottom-right Italy / Brazil watermark
     on phone. We bring it back specifically as a vertical spine label
     on the right edge below. */
  .day-poster .dp-info::before { display: none; }
  .day-poster .dp-act-logo { display: none; }

  /* Vertical spine label for themed nights - "ITALIA" runs top-to-
     bottom on the right edge of the day card, "BRASIL" same on its
     night, so the theme is recognisable at a glance while scrolling. */
  .day-poster.theme-italy,
  .day-poster.theme-brazil { position: relative; }
  .day-poster.theme-italy::after,
  .day-poster.theme-brazil::after {
    position: absolute;
    right: 0.55rem;
    /* Anchor at top so the label grows downward with bigger font,
       instead of expanding equally up + down when centered. */
    top: 3.4rem;
    bottom: 0.8rem;
    transform: none;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 400;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 2;
    display: flex;
    align-items: flex-start;
  }
  .day-poster.theme-italy::after {
    content: 'ITALIA';
    color: rgba(244,217,127,0.55);
  }
  .day-poster.theme-brazil::after {
    content: 'BRASIL';
    color: rgba(255,223,0,0.55);
  }
  /* Phone fade-into-info-section overlay removed - same reason as desktop:
     was covering the right side of the photo collage. */
  .dp-info {
    padding: 1.2rem 1.4rem 1.6rem;
    gap: 1rem;
  }
  .dp-number { font-size: 3rem; }
  .dp-month { font-size: 1rem; letter-spacing: 0.3em; }
  .dp-weekday { font-size: 0.9rem; }
  .dp-act-link { grid-template-columns: 56px 1fr; gap: 0.7rem; padding: 0.4rem 0; }
  .dp-photo-cell.dp-act-link { grid-template-columns: none; gap: 0; padding: 0; }
  .dp-time { font-size: 0.62rem; letter-spacing: 0.18em; }
  .dp-name { font-size: 1.1rem; }
  /* Compact ticket pin on phone - the desktop "bigger + more visible"
     version was overlapping the artist name in the bottom-sheet. */
  .sheet-tickets-pin {
    font-size: 0.64rem;
    padding: 0.55rem 0.95rem;
    letter-spacing: 0.2em;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.45),
      inset 0 -1px 0 rgba(0,0,0,0.25),
      0 3px 10px rgba(0,0,0,0.4);
  }
  .sheet-header { gap: 0.9rem; }
  /* Blink once on phone instead of twice - keeps the attention pulse
     without feeling repetitive. */
  .sheet-tickets-pin.is-fresh { animation-iteration-count: 1; }
  .sheet-tickets-pin.is-fresh::after { animation-iteration-count: 1; }
  /* Italy stripe - top edge on phone (since layout is stacked). */
  .day-poster.theme-italy::before {
    left: 0; right: 0; top: 0; bottom: auto;
    height: 4px; width: auto;
    background: linear-gradient(90deg,
      #008c45 0%, #008c45 33.33%,
      #f4f5f0 33.33%, #f4f5f0 66.66%,
      #cd212a 66.66%, #cd212a 100%);
  }
}
/* Hide the OLD day-card styles - entire .day-card layout is replaced. */
.day-card { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   TICKET PICKER MODAL - nested popup over the artist sheet.
   ═══════════════════════════════════════════════════════════════════════ */
.ticket-modal {
  position: fixed; inset: 0;
  z-index: 1300;
  display: none;
  /* Center the card vertically on all viewports (Uri 2026-05-26: phone
     popup was sitting at the bottom of the screen, hard to reach). */
  align-items: center; justify-content: center;
}
.ticket-modal[open] { display: flex; }
.ticket-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(6,14,28,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: ticketBackdropIn 0.35s ease-out;
}
@keyframes ticketBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ticket-modal-card {
  position: relative;
  width: calc(100% - 2rem);
  max-width: 480px;
  background: var(--ink);
  border: 1px solid rgba(247,236,206,0.18);
  border-radius: 6px;
  padding: 2rem 1.6rem 1.6rem;
  color: var(--cream);
  animation: ticketCardIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes ticketCardIn {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (min-width: 700px) {
  .ticket-modal { align-items: center; }
  .ticket-modal-card { border-radius: 6px; margin-bottom: 0; }
}
.ticket-modal-close {
  position: absolute;
  top: 0.7rem; right: 0.7rem;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid rgba(247,236,206,0.25);
  border-radius: 50%;
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}
.ticket-modal-close svg { width: 16px; height: 16px; }
.ticket-modal-close:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.ticket-modal-eyebrow {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.4rem;
}
.ticket-modal-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing: 0.02em;
  margin: 0 0 1.4rem;
  line-height: 1.05;
}
.ticket-options {
  display: flex; flex-direction: column;
  gap: 0.8rem;
}
.ticket-option {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.4rem 1rem;
  padding: 1.1rem 1.2rem;
  background: rgba(247,236,206,0.05);
  border: 1px solid rgba(247,236,206,0.18);
  border-radius: 4px;
  color: var(--cream);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.ticket-option:hover {
  border-color: var(--brass);
  background: rgba(200,144,42,0.08);
}
.ticket-option:active { transform: scale(0.98); }
.ticket-option-recommended {
  border-color: var(--brass);
  background: rgba(200,144,42,0.10);
}
.ticket-option-flag {
  position: absolute;
  top: -0.6rem; left: 1rem;
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--brass);
  padding: 0.22rem 0.6rem;
  border-radius: 2px;
}
.ticket-option-label {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}
.ticket-option-price {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--brass);
  align-self: center;
}
.ticket-option-meta {
  grid-column: 1;
  font-family: var(--font-head);
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(247,236,206,0.7);
}
.ticket-option-cta {
  grid-column: 1 / -1;
  margin-top: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
}
.ticket-modal-note {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: rgba(247,236,206,0.45);
  margin: 1.1rem 0 0;
  text-align: center;
}
.day-card {
  position: relative;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1.2rem;
  padding: 1.2rem 1.4rem;
  background:
    linear-gradient(135deg, rgba(14,29,51,0.62), rgba(14,29,51,0.42));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(247,236,206,0.16);
  border-radius: 4px;
  transition: border-color 0.35s, transform 0.35s, background 0.35s, box-shadow 0.35s;
  overflow: hidden;
}
/* Soft warm glow that radiates from the date column on hover - gives the
   card an "illuminated" feel rather than a hard accent line. */
.day-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse at 8% 50%, rgba(200,144,42,0.16), transparent 55%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
}
.day-card > * { position: relative; z-index: 1; }
.day-card {
  transition:
    border-color 0.5s ease,
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.5s ease,
    box-shadow 0.5s ease;
}
.day-card:hover {
  border-color: rgba(200,144,42,0.55);
  transform: translateY(-3px);
  background:
    linear-gradient(135deg, rgba(200,144,42,0.06), rgba(14,29,51,0));
  box-shadow:
    0 24px 48px -16px rgba(0,0,0,0.55),
    0 0 0 1px rgba(200,144,42,0.18) inset,
    0 16px 32px -10px rgba(200,144,42,0.18);
}
.day-card:hover::before { opacity: 1; }
/* Date number subtly grows + brightens, weekday turns brass on hover */
.day-card .dc-date .date {
  transition: color 0.35s ease, letter-spacing 0.45s cubic-bezier(0.2,0.8,0.2,1);
}
.day-card:hover .dc-date .date {
  color: #e6a836;  /* lighter brass with warmth */
  letter-spacing: 0.06em;
}
.day-card .dc-date .weekday {
  transition: color 0.35s ease;
}
.day-card:hover .dc-date .weekday { color: rgba(247,236,206,0.95); }
/* Right-side divider on the date column also gains warmth */
.day-card .dc-date {
  transition: border-color 0.5s ease;
}
.day-card:hover .dc-date {
  border-right-color: rgba(200,144,42,0.35);
}
.day-card.empty { opacity: 0.4; }
.day-card.empty:hover {
  border-color: rgba(247,236,206,0.12);
  transform: none;
  box-shadow: none;
  background: linear-gradient(135deg, rgba(247,236,206,0.04), rgba(14,29,51,0.0));
}
.day-card.empty:hover::before { opacity: 0; }

.dc-date {
  display: flex; flex-direction: column; gap: 0.2rem;
  border-right: 1px solid rgba(247,236,206,0.12);
  padding-right: 1.1rem;
}
.dc-date .date {
  font-family: var(--font-display);
  font-size: 2.1rem;
  letter-spacing: 0.04em;
  color: var(--brass);
  line-height: 1;
}
.dc-date .weekday {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(247,236,206,0.7);
}
.dc-date .label {
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: 0.25rem;
}

.dc-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem 1rem;
  align-items: start;
}
@media (max-width: 1024px) {
  .dc-slots { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .dc-slots { grid-template-columns: 1fr; }
}
.dc-slot {
  display: flex; flex-direction: column; gap: 0.15rem;
}
.dc-slot-label {
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  opacity: 0.85;
}
.dc-artist {
  display: block;
  position: relative;
  width: 100%;
  /* Portrait 4:5 - works for both portrait headshots and landscape press
     photos (mild side crop), so every card frames the artist consistently. */
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--ink), #1f3658);
  border-radius: 3px;
  overflow: hidden;
  text-decoration: none;
  margin-bottom: 0.4rem;
  transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.35s;
  border: 1px solid rgba(247,236,206,0.10);
}
.dc-artist-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Bias toward upper third where most press-photo faces live; per-artist
     overrides via the imagePos field on artists.js. */
  object-position: 50% 28%;
  filter: brightness(0.88) saturate(1.05);
  transition: transform 0.7s cubic-bezier(0.2,0.8,0.2,1), filter 0.35s;
}
.dc-artist::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,29,51,0.0) 40%, rgba(14,29,51,0.95) 100%);
  z-index: 1;
}
.dc-artist:hover {
  transform: translateY(-2px);
  border-color: var(--brass);
  box-shadow: 0 10px 22px rgba(0,0,0,0.4);
}
.dc-artist:hover .dc-artist-thumb {
  transform: scale(1.06);
  filter: brightness(0.95) saturate(1.1);
}
.dc-artist-name {
  position: absolute;
  left: 0.7rem; right: 0.7rem; bottom: 0.65rem;
  z-index: 2;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--cream);
  line-height: 1.18;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.85);
  transform-origin: center bottom;
  transition: font-size 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              text-shadow 0.4s ease;
}
/* On hover the name grows for emphasis - feels editorial, not gimmicky.
   Different effect than the headliners (which get the arpeggio reveal). */
@media (hover: hover) {
  .dc-artist:hover .dc-artist-name {
    font-size: 1.4rem;
    text-shadow: 0 3px 12px rgba(0,0,0,0.9);
  }
}
/* Secondary line for "feat." artists - smaller + slightly faded so it
   reads as a credit, not part of the headline. */
.dc-artist-name .dc-feat {
  display: block;
  font-size: 0.78em;
  font-weight: 400;
  font-style: italic;
  color: rgba(247,236,206,0.85);
  margin-top: 0.15em;
}
.dc-empty {
  font-family: var(--font-head);
  font-style: italic;
  color: rgba(247,236,206,0.4);
  font-size: 0.85rem;
}
.dc-slot.empty .dc-slot-label { opacity: 0.6; }
.dc-slot-tbc {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(247,236,206,0.35);
  padding: 0.18rem 0;
}

@media (max-width: 720px) {
  .day-card {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 0.9rem 1rem 1rem;
  }
  .dc-date {
    border-right: none;
    border-bottom: 1px solid rgba(247,236,206,0.12);
    padding-right: 0;
    padding-bottom: 0.6rem;
    flex-direction: row;
    align-items: baseline;
    gap: 0.7rem;
  }
  .dc-date .date { font-size: 1.4rem; }
  .dc-date .weekday { font-size: 0.78rem; }
  .dc-date .label { margin-top: 0; font-size: 0.5rem; }
}
/* Mobile: each artist becomes a contact-row - small circular face thumbnail
   on the left, slot label + name to the right. Keeps the visual hook of the
   photos while making the page scannable instead of dominated by 56 huge
   rectangles. */
/* ── MOBILE BOTTOM SHEET ─────────────────────────────────────
   On phone, tapping an artist opens this sheet sliding up from below
   instead of full-page navigation. Hidden on desktop (>600px). */
/* Sheet must sit ABOVE the page nav (z=1000) - when it's fully expanded
   the close X needs to be reachable, not hidden behind the brand bar. */
.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 1098;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}
.sheet-backdrop.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.32s ease, visibility 0s linear 0s;
}
.artist-sheet {
  /* Native <dialog> resets - defaults add padding/border/max-w/max-h that
     would shrink the sheet inside its UA-styled box. Clear them so our
     own positioning (below) is the only one in play. Safari adds a small
     UA margin around modal dialogs which shows as a cream slither at the
     top edge - force it to 0. */
  padding: 0;
  margin: 0;
  border: 0;
  max-width: none;
  max-height: none;
  color: inherit;
  /* iOS Safari's bottom toolbar is translucent - its blur samples the
     pixels directly underneath it. If the sheet ends at the visible
     viewport bottom (e.g. `inset: 0` or `bottom: 0`), those pixels are
     the actual page (day cards / hero) and "leak through" the toolbar.
     Fix: anchor only at top with `100lvh` (LARGE viewport, ignores
     chrome) so the sheet's dark background extends INTO the chrome
     area, giving iOS only the sheet to sample. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;        /* native <dialog> defaults to fit-content, which
                          let the photo's aspect-ratio + img natural size
                          blow the sheet wider than the viewport (467px on
                          a 390 phone). Pin to viewport width explicitly. */
  height: 100vh;       /* fallback */
  height: 100lvh;      /* large viewport - covers under iOS chrome */
  z-index: 1099;
  background: var(--ink);
  color: var(--cream);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(0.2,0.8,0.2,1);
  display: flex; flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
  /* When closed, the sheet still exists in the DOM. On desktop the
     override centers it on screen with opacity:0 - an INVISIBLE element
     that still intercepts every click/hover beneath it. pointer-events:
     none releases pointer control until .open is added. */
  pointer-events: none;
}
.artist-sheet.open {
  transform: translateY(0);
  pointer-events: auto;
}
/* Native dialog backdrop - replaces the dedicated .sheet-backdrop element
   when the sheet opens via showModal(). Lives in the top layer so it
   renders correctly above z-indexed content. */
.artist-sheet::backdrop {
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
/* Same dialog-default resets for the nested ticket modal so it doesn't
   inherit UA padding/border/max-size/fit-content sizing. */
.ticket-modal {
  padding: 0;
  border: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  color: inherit;
  background: transparent;
}
.ticket-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
/* On phone the sheet's own flex layout (photo + scrolling content) is the
   architecture. The .sheet-scroller wrapper is transparent to layout via
   display:contents so phone styling stays untouched. Desktop overrides
   later (min-width:601px) turn it into a real scroll container. */
.sheet-scroller { display: contents; }
.sheet-handle {
  width: 40px; height: 4px;
  background: rgba(247,236,206,0.3);
  border-radius: 999px;
  margin: 10px auto 0;
}
/* FRAMED logo overlay on the artist popup photo - only shown for 26.07
   artists (controlled by .is-active class added in JS). Bottom-left so
   it stays off band-portrait faces and doesn't fight the Tickets pin. */
/* Rolling Stone presenter on artist popup (24.07 artists). Mirrors FRAMED
   on 26.07 but positioned top-right with a "Powered by" label above. */
.sheet-rolling-presenter { display: none; }
.sheet-rolling-presenter.is-active {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.22rem;
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  pointer-events: none;
}
.sheet-rolling-presenter .sheet-rolling-logo {
  height: 28px;
  width: auto;
  max-width: 150px;
  display: block;
  /* SVG ships in native brand red — keep only a drop-shadow for contrast. */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.sheet-rolling-presenter .sheet-rolling-label {
  font-family: 'Acumin Pro Condensed', 'Antarctican Headline', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff5d4;
  line-height: 1;
  font-weight: 600;
  text-shadow: 0 1px 5px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.6);
  white-space: nowrap;
}
@media (min-width: 601px) {
  .sheet-rolling-presenter.is-active { top: 22px; right: 22px; gap: 0.3rem; }
  .sheet-rolling-presenter .sheet-rolling-logo { height: 40px; max-width: 200px; }
  .sheet-rolling-presenter .sheet-rolling-label { font-size: 0.7rem; letter-spacing: 0.24em; }
}
.sheet-framed-logo { display: none; }
.sheet-framed-logo.is-active {
  display: block;
  position: absolute;
  bottom: 16px;
  left: 16px;
  height: clamp(64px, 10vw, 104px);
  width: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.7));
}
@media (min-width: 601px) {
  .sheet-framed-logo.is-active { bottom: 22px; left: 22px; height: 112px; }
}
/* Close X - lives inside .sheet-photo at top-left so it visually attaches
   to the photo and travels WITH the sheet as you drag it down. */
.sheet-close {
  position: absolute;
  top: 14px; left: 14px;
  width: 40px; height: 40px;
  background: rgba(14,29,51,0.45);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(247,236,206,0.32);
  border-radius: 50%;
  color: var(--cream); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 4;
  padding: 0;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.sheet-close svg { width: 18px; height: 18px; pointer-events: none; }
.sheet-close:active {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}
/* Hide the page nav while the sheet is open so the close X (and the
   sheet's own header content) isn't blocked by the brand bar above. */
body.sheet-open #nav { top: -140px !important; }
/* When the artist sheet is open on phone, blank out all the body's
   direct children EXCEPT the sheet itself + its backdrop + the
   nested ticket modal. iOS Safari's translucent bottom toolbar
   samples whatever is under it on screen even through fixed
   elements - by hiding the page content there's nothing for iOS
   to reflect except the dark body background. */
@media (max-width: 600px) {
  body.sheet-open {
    background: var(--ink) !important;
  }
  body.sheet-open > section,
  body.sheet-open > header,
  body.sheet-open > footer,
  body.sheet-open > div:not(.sheet-backdrop):not(.ticket-modal),
  body.sheet-open > aside:not(.artist-sheet) {
    visibility: hidden;
  }
}
/* Larger touch target on the drag handle so it's easy to grab */
.sheet-handle {
  position: relative;
  cursor: grab;
  touch-action: none;
}
.sheet-handle::before {
  content: '';
  position: absolute;
  inset: -10px -50% -10px -50%;  /* big invisible hit area around the visible bar */
}
.sheet-handle:active { cursor: grabbing; }
.sheet-photo {
  position: relative;
  width: 100%;
  /* 16/10 → 16/12 (= 4/3) - Uri 2026-05-12: photo on the phone
     bottom-sheet was too short, ~20% more vertical so faces read.
     Bio + tags below still visible (sheet content scrolls). Desktop
     override (later) sets aspect-ratio:auto and uses full column.
     `flex-shrink: 0` so the photo keeps its aspect-ratio'd height
     and isn't squeezed by long content below. */
  aspect-ratio: 16/12;
  flex: 0 0 auto;
  overflow: hidden;
  margin-top: 12px;
  background: var(--ink);
}
.sheet-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.18s ease;
}
.sheet-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, var(--ink) 100%);
}

/* ── THEME NIGHTS ON THE SHEET ─────────────────────────────────────────
   Match the day-poster theming when an artist of a themed night opens. */

/* Italy - tricolore stripe along the bottom of the photo. */
.artist-sheet.theme-italy .sheet-photo::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  z-index: 4;
  background: linear-gradient(90deg,
    #008c45 0%, #008c45 33.33%,
    #f4f5f0 33.33%, #f4f5f0 66.66%,
    #cd212a 66.66%, #cd212a 100%);
}

/* Brazilian Night - yellow tag on the photo + green-tinted bottom fade. */
.artist-sheet.theme-brazil .sheet-photo::after {
  background: linear-gradient(180deg, transparent 55%, #133225 100%);
}
.artist-sheet.theme-brazil .sheet-photo::before {
  content: 'BRASILIANISCHE NACHT';
  position: absolute;
  /* Top-right - top-left has the .sheet-close button. */
  top: 0.9rem; right: 0.9rem;
  z-index: 4;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  padding: 0.35rem 0.7rem;
  background: #ffdf00;
  color: #009c3b;
}
html[lang="en"] .artist-sheet.theme-brazil .sheet-photo::before {
  content: 'BRAZILIAN NIGHT';
}
.artist-sheet.theme-brazil { background: #0e1e1a; }

/* ACT label weekend - minimal black sheet with the ACT mark. */
.artist-sheet.theme-act { background: #0a0a0a; }
.artist-sheet.theme-act .sheet-photo::after {
  background: linear-gradient(180deg, transparent 55%, #0a0a0a 100%);
}
.artist-sheet.theme-act .sheet-photo::before {
  content: 'ACT';
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  z-index: 4;
  font-family: 'Helvetica Neue', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--cream);
  border-left: 3px solid #cc0000;
  padding-left: 0.55rem;
}
.sheet-content {
  position: relative;
  /* Big bottom padding so the YouTube embed (last item in the sheet)
     can scroll fully past iOS Safari's dynamic bottom toolbar - the
     toolbar covers ~50-90px when visible, plus safe-area for the
     home indicator. */
  padding: 1.4rem 1.5rem calc(2rem + env(safe-area-inset-bottom, 0px) + 6rem);
  overflow-y: auto;
  flex: 1 1 auto;
}
.sheet-eyebrow {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.8rem;
}
.sheet-name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  letter-spacing: 0.02em;
  line-height: 0.98;
  color: var(--brass);
  margin-bottom: 0.7rem;
  /* Reserve room on the right for the Tickets button so long names never
     run under it. */
  padding-right: 5.5rem;
  /* Sweep-in reveal when sheet opens */
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.2,0.8,0.2,1), filter 0.5s ease;
}
.artist-sheet.open .sheet-name {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: 0.18s;
}
/* Secondary part of an artist name (parenthetical / feat. / ensemble suffix)
   appears on its own line, smaller, so it doesn't fight the Tickets button. */
.sheet-name-sub {
  display: block;
  font-family: var(--font-head);
  /* Upright so the italic "Prince" inside .ida-prince-em can read as a
     deliberate accent (italic-in-upright). */
  font-style: normal;
  font-weight: 400;
  font-size: 0.62em;
  letter-spacing: 0.01em;
  /* Sheet base is cream paper - ink so the sub-line ("Trio", "Group …",
     "feat. …", "A Prince Celebration", etc.) actually reads. Themed
     dark sheets (ACT / Brazil / Italy) override back to cream below. */
  color: rgba(14,29,51,0.78);
  margin-top: 0.25em;
  padding-right: 0;
}
.sheet-cred {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(247,236,206,0.85);
  margin-bottom: 0.9rem;
}
.sheet-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.sheet-tag {
  font-family: var(--font-body);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247,236,206,0.85);
  padding: 0.3rem 0.65rem;
  border: 1px solid rgba(247,236,206,0.25);
  border-radius: 999px;
}
.sheet-bio {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(247,236,206,0.86);
  margin-bottom: 1.4rem;
}
/* Embedded performance video - placeholder frame today, real <iframe>
   when the YouTube URL is wired in per artist. Lives in the sheet content
   so visitors don't bounce to YouTube to hear the artist play. */
.sheet-video {
  margin: 0 0 1.4rem;
}
.sheet-video-frame {
  position: relative;
  border: 1px solid rgba(247,236,206,0.16);
  border-radius: 6px;
  background: #0a0f1d;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.sheet-video-label {
  position: absolute;
  top: 0.9rem; left: 1rem;
  z-index: 2;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brass);
  background: rgba(14,29,51,0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
}
.sheet-video-placeholder {
  appearance: none;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  background:
    radial-gradient(circle at 50% 50%, rgba(200,144,42,0.10) 0%, transparent 60%),
    #0a0f1d;
  border: 0;
  color: rgba(247,236,206,0.55);
  cursor: default;
  transition: color 0.25s ease;
}
.sheet-video-placeholder svg {
  width: 64px;
  height: 64px;
}
.sheet-video-placeholder-text {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.sheet-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Social row - small pill buttons with brand-style icons. Placeholder
   hrefs ("#") for now; wire to real artist data later. */
.sheet-socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
  margin: 0 0 1.4rem;
}
.sheet-social {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.36rem 0.7rem 0.36rem 0.58rem;
  border: 1px solid rgba(247,236,206,0.22);
  border-radius: 999px;
  color: rgba(247,236,206,0.82);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.sheet-social svg {
  width: 13px; height: 13px;
  flex: 0 0 auto;
}
@media (hover: hover) {
  .sheet-social:hover {
    color: var(--brass);
    border-color: var(--brass);
    background: rgba(200,144,42,0.08);
    transform: translateY(-1px);
  }
}
/* Square Tickets button: sticky inside .sheet-content so it stays visible
   while the bio scrolls. Initial position aligns with the artist NAME row
   (eyebrow takes top, name takes second row, button rides at name's line).
   margin-bottom: -3.6rem pulls the eyebrow/name up so they flow next to
   the floated button instead of below it. */
/* Header row: eyebrow+name on the left, tickets pin on the right, bottom-
   aligned so the pin sits flush with the baseline of the name (not the
   top). Replaces the previous float/sticky placement. */
.sheet-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.4rem;
  margin-bottom: 0.9rem;
}
.sheet-header-text { flex: 1 1 auto; min-width: 0; }
.sheet-header .sheet-name { padding-right: 0; margin-bottom: 0; }
.sheet-tickets-pin {
  flex: 0 0 auto;
  position: relative;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  /* 3D-feeling brass: gradient + bevel highlights + drop shadow so the
     button reads as a raised CTA rather than a flat tag. */
  background: linear-gradient(180deg, #e8b048 0%, #c8902a 55%, #9a6d20 100%);
  padding: 0.95rem 1.55rem;
  border-radius: 4px;
  border: 1px solid rgba(255,224,160,0.35);
  text-decoration: none;
  z-index: 3;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 6px 18px rgba(0,0,0,0.5),
    0 1px 3px rgba(0,0,0,0.45);
  transition: background 0.25s, transform 0.18s ease, box-shadow 0.25s ease;
}
.sheet-tickets-pin:hover {
  background: linear-gradient(180deg, #f4c25a 0%, #d6a040 55%, #ad7d28 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 9px 22px rgba(0,0,0,0.55),
    0 1px 3px rgba(0,0,0,0.45);
}
.sheet-tickets-pin:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.35),
    0 2px 6px rgba(0,0,0,0.4);
}
/* Attention pulse: first time the pin is visible (on sheet open) it
   emits two expanding rings + a brightness flash, then settles. The JS
   adds .is-fresh on openSheet and removes it after 2.4s. */
.sheet-tickets-pin.is-fresh {
  animation: ticketPinFlash 0.9s ease-out 2;
}
.sheet-tickets-pin.is-fresh::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(255, 224, 160, 0.65);
  animation: ticketPinRing 1.2s ease-out 2;
}
@keyframes ticketPinFlash {
  0%, 100% { background: var(--brass); }
  40% { background: #ffe6a8; box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 18px rgba(255,224,160,0.7); }
}
@keyframes ticketPinRing {
  0%   { box-shadow: 0 0 0 0 rgba(255,224,160,0.65); }
  100% { box-shadow: 0 0 0 18px rgba(255,224,160,0); }
}

/* When the artist popup closes the browser restores focus to whichever
   link/cell triggered it - and paints a blue :focus-visible ring there.
   Suppress that ring on lineup links and photo cells so the day card
   stays clean after closing the popup. */
.dp-act-link:focus,
.dp-act-link:focus-visible,
.dp-photo-cell:focus,
.dp-photo-cell:focus-visible,
.dc-artist:focus,
.dc-artist:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ── OUTDOORS section - three spaces under one roof ─────────────────── */
.outdoors-section {
  padding: 5rem 0 6rem;
}
.outdoors-section .wrap {
  max-width: 1200px;
  text-align: center;
}
.outdoors-title {
  margin-top: 0.6rem;
}
.outdoors-lead {
  max-width: 720px;
  margin: 2rem auto 3rem;
  font-family: var(--font-head);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  color: rgba(14,29,51,0.78);
}
.outdoors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  margin-top: 1rem;
  text-align: left;
}
.outdoor-tile {
  display: flex;
  flex-direction: column;
  background: transparent;
}
.outdoor-tile-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(14,29,51,0.06);
}
.outdoor-tile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Static tiles — no hover effect (Uri 2026-05-27: any animated transform
   on the detailed FORUM seating pattern produced a moiré shimmer). */
.outdoor-tile-text {
  padding: 1.2rem 0.2rem 0;
}
.outdoor-tile-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.6rem;
}
.outdoor-tile p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(14,29,51,0.78);
  margin: 0;
}
@media (max-width: 760px) {
  .outdoors-section { padding: 3.5rem 0 4rem; }
  .outdoors-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .outdoors-lead { margin: 1.5rem auto 2rem; }
}

/* (No `contain` on .day-poster - both content-visibility:auto and
   contain:layout/paint were causing visible re-paint hiccups at the
   bottom of the lineup as cards entered/left the viewport.) */

/* ── SITE PLAN + SCHEDULE - 3D illustrated map + one-page programme ─────
   Left: day-by-day schedule (auto-generated from the artist data).
   Right: Gasometer 3D site plan; sticky on desktop so the map stays in
   view while scanning the programme. Hover a row → matching pin glows. */
:root {
  --venue-forum: #f5c518;  /* clean yellow — Main Hall */
  --venue-pool:  #2e7fb3;
  --venue-plaza: #4ea83a;  /* brighter green — Plaza */
  --venue-sky:   #e53935;  /* clean red — Sky Bar */
}
.site-plan-grid {
  display: grid;
  /* Schedule left at a steady width, map takes everything else so it
     stretches close to the right edge of the wrap. */
  grid-template-columns: minmax(320px, 380px) 1fr;
  gap: 2.5rem;
  margin-top: 3rem;
  align-items: start;
}
.site-plan-schedule {
  font-family: var(--font-body);
}
.schedule-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  margin-bottom: 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(14,29,51,0.08);
}
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(14,29,51,0.78);
}
.legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.legend-forum .legend-dot { background: var(--venue-forum); }
.legend-pool  .legend-dot { background: var(--venue-pool); }
.legend-plaza .legend-dot { background: var(--venue-plaza); }
.legend-sky   .legend-dot { background: var(--venue-sky); }

/* Schedule list venue legend — sticky on top while scrolling through the
   list section, so the venue key is always visible. Hidden on desktop
   where the 3D map illustrates the venues already. (Uri 2026-05-28) */
.schedule-venue-legend { display: none; }
@media (max-width: 900px) {
  html body .schedule-venue-legend {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    align-items: center;
    justify-content: center;
    position: sticky;
    /* Sit BELOW the fixed nav (≈53px) so it never disappears behind it. */
    top: 53px;
    z-index: 50;
    padding: 0.55rem 1rem;
    /* Extend to full viewport width regardless of .wrap padding. */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw;
    box-sizing: border-box;
    background: #0e1d33 !important;
    border-bottom: 1px solid rgba(247,236,206,0.18);
    margin-bottom: 1rem;
  }
  html body .schedule-venue-legend .legend-chip,
  html body .schedule-venue-legend .legend-text {
    font-size: 0.6rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    color: #f7ecce !important;
    -webkit-text-fill-color: #f7ecce !important;
    text-shadow: none !important;
  }
  html body .schedule-venue-legend .legend-dot {
    width: 11px !important; height: 11px !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
  }
}

.schedule-days {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.schedule-day {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1.2rem;
  align-items: start;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(14,29,51,0.06);
}
.schedule-day:last-child { border-bottom: none; }
.schedule-day-head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 0.2rem;
}
.schedule-wkd {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(14,29,51,0.6);
}
.schedule-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1;
}
.schedule-day-rows {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.schedule-row {
  display: grid;
  grid-template-columns: 56px 14px 1fr auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.45rem 0.6rem 0.45rem 0;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.schedule-row:hover {
  background: rgba(200,144,42,0.08);
  transform: translateX(3px);
}
.schedule-row-static { cursor: default; }
.schedule-row-static:hover { background: rgba(200,144,42,0.05); transform: none; }
.schedule-time {
  font-size: 0.78rem;
  font-weight: 600;
  font-feature-settings: 'tnum';
  color: rgba(14,29,51,0.6);
}
.schedule-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.schedule-dot.venue-forum { background: var(--venue-forum); }
.schedule-dot.venue-pool  { background: var(--venue-pool); }
.schedule-dot.venue-plaza { background: var(--venue-plaza); }
.schedule-dot.venue-sky   { background: var(--venue-sky); }
.schedule-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.25;
}
.schedule-name.is-headliner {
  color: var(--brass);
  font-weight: 600;
}
.schedule-venue-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(14,29,51,0.45);
  padding-left: 0.5rem;
}

/* Map column */
.site-plan-map {
  position: sticky;
  top: 5rem;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #f5efe0;
}
.site-plan-map img {
  width: 100%;
  height: auto;
  display: block;
}
.site-plan-pin {
  position: absolute;
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: var(--brass);
  border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.3);
  transform: scale(0.85);
  opacity: 0.85;
  transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1),
              opacity 0.25s ease,
              box-shadow 0.3s ease;
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
}
.site-plan-pin:hover { transform: scale(1.25); opacity: 1; z-index: 5; }
.pin-forum { background: var(--venue-forum); }
.pin-pool  { background: var(--venue-pool); }
.pin-plaza { background: var(--venue-plaza); }
.pin-sky   { background: var(--venue-sky); }
.pin-label {
  position: absolute;
  /* Anchored above-left of the pin so it sits in the empty space of the
     illustrated map. The ::after diagonal line connects the label corner
     down-right to the pin. */
  bottom: calc(100% + 30px);
  right: calc(100% + 22px);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255,255,255,0.94);
  padding: 0.32rem 0.7rem;
  border-radius: 3px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  pointer-events: none;
}
/* Connector line removed 2026-05-25 - Uri felt the diagonal under each
   label looked wrong. Labels stay floating above-left of each pin, no
   line. */

/* Pop-up photo per pin - shown on hover (over pin OR over schedule
   row that activates the .is-active class). Anchored top-right of the
   pin so it doesn't clash with the top-left label. */
.pin-photo {
  position: absolute;
  top: calc(100% + 12px);
  right: -8px;
  /* !important + max-width:none defeats the global `img { max-width:100% }`
     rule that was clamping pin photos to the 28px parent pin width. */
  width: 200px !important;
  height: 134px !important;
  max-width: none !important;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 10;
}
.site-plan-pin:hover .pin-photo {
  /* Slight transparency so the illustrated map behind still reads. */
  opacity: 0.9;
  transform: translateY(0) scale(1);
}
/* Pool pin sits on the LEFT side of the map - flip its photo to grow
   right into the cylinder area instead of spilling off the left edge. */
.pin-pool .pin-photo {
  right: auto;
  left: -8px;
}
/* (duplicate pin-photo hover rule removed - the earlier 0.9-opacity rule
   above already handles pin hover.) */
.site-plan-pin.is-active {
  transform: scale(1.3);
  opacity: 1;
  box-shadow: 0 0 0 6px rgba(200,144,42,0.32), 0 6px 22px rgba(0,0,0,0.4);
  z-index: 4;
}
.site-plan-pin.is-active .pin-label {
  background: var(--brass);
  color: var(--ink);
  box-shadow: 0 3px 12px rgba(0,0,0,0.3);
}

/* Pin coords on the supplied Gasometer map image. Uri 2026-05-25:
   Sky Bar IS on top of the main Gasometer (he confirmed); Forum in the
   middle of the cylinder; Plaza at the entrance. Pool position TBD. */
/* Measured by sampling orange pixels of the site-plan.webp via canvas:
   cylinder occupies x: 66-76%, y: 38-56%. Center at (71%, 47%). */
.pin-sky   { top: 38%; left: 71%; }   /* TOP of the orange cylinder */
.pin-forum { top: 53%; left: 71%; }   /* MIDDLE of the cylinder (tiny nudge down) */
.pin-plaza { top: 58%; left: 60%; }   /* Plaza - between the two trees south-west of cylinder */
.pin-pool  { top: 70%; left: 50%; }   /* TBD - Uri will confirm */

@media (max-width: 900px) {
  .site-plan-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  /* MUST stay `relative` (or `sticky`) so absolutely-positioned pins anchor
     to the map box. `static` broke pin positioning at narrow widths. */
  .site-plan-map { position: relative; }
  .schedule-row { grid-template-columns: 48px 12px 1fr; }
  .schedule-venue-tag { display: none; }
}
@media (max-width: 760px) {
  /* Hide the 3D festival map on phone — too cramped at this width. The
     schedule list above already conveys what visitors need. */
  .site-plan-map { display: none !important; }
}

/* ── DESKTOP MODAL OVERRIDES FOR THE ARTIST SHEET ───────────────────────
   Phone is a bottom-sheet (handle + slide-up). Desktop reshapes that into
   a centered modal. Phone styles untouched. */
@media (min-width: 601px) {
  .artist-sheet {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: min(820px, 95vw);
    height: 88vh;
    max-height: 88vh;
    border-radius: 14px;
    display: block;
    transform: none;
    opacity: 0;
    transition: opacity 0.32s ease;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: none;
  }
  .artist-sheet.open {
    transform: none;
    opacity: 1;
  }
  .sheet-scroller {
    display: contents;
  }
  /* Drag handle is mobile-only. */
  .sheet-handle { display: none; }
  /* Photo: sticks to the top of the sheet, full width, modest height.
     Scrolls away as the user scrolls down. */
  .sheet-photo {
    position: relative;
    width: 100%;
    height: 42vh;
    min-height: 0;
    aspect-ratio: auto;
    margin: 0;
    flex: none;
  }
  /* Subtle bottom fade into content area - gives a smooth photo→text
     transition as the user scrolls past it. */
  .sheet-photo::after {
    background: linear-gradient(180deg, transparent 80%, rgba(14,29,51,0.5) 100%);
  }
  /* Italy bottom tricolore stripe still works (4px bottom of photo). */
  /* Brazil + ACT corner tags also still anchor to photo top-right - unchanged. */
  .sheet-content {
    position: relative;
    padding: 2.4rem 2.6rem 3rem;
    overflow: visible;
    height: auto;
    min-height: 0;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    flex: none;
  }
  .sheet-name {
    font-size: 2.7rem;
  }
  .sheet-cred {
    font-size: 1rem;
  }
  .sheet-bio {
    font-size: 0.95rem;
    line-height: 1.62;
  }
  .sheet-tickets-pin {
    top: 2.4rem;
  }
  .sheet-close {
    /* Stays at top-left of photo column - easier to spot on the dark photo. */
    top: 14px; left: 14px;
  }
}
.sheet-more {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.3rem;
  border-radius: 2px;
  border: 1px solid var(--brass);
  background: transparent;
  color: var(--brass);
  transition: background 0.25s, color 0.25s;
}
.sheet-more:hover { background: var(--brass); color: var(--ink); }
/* The previous rule "@media (min-width:601px) { .sheet-backdrop, .artist-sheet { display:none } }"
   hid the sheet entirely on desktop - that's why clicking a band on
   computer "did nothing". Sheet now shows on every screen size. */

@media (max-width: 600px) {
  /* Legacy V2 day-card "sticky section" rules below - kept dead since
     .day-card { display: none } hides those elements in V3. */
  .schedule-section { padding: 2.5rem 0 4rem; }
  .day-card {
    /* Override desktop grid - sticky needs the date row in normal block flow */
    display: block;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
  }
  .day-card:hover {
    background: none;
    border: none;
    transform: none;
    box-shadow: none;
  }
  .day-card::before { display: none; }
  .dc-date {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(14, 29, 51, 0.98);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    /* Span full width - offset the .wrap container's left/right padding */
    margin-left: -1.4rem; margin-right: -1.4rem;
    padding: 0.85rem 1.4rem;
    border-top: 1px solid rgba(247,236,206,0.06);
    border-bottom: 1px solid rgba(247,236,206,0.12);
    border-right: none;
    flex-direction: row;
    align-items: baseline;
    gap: 0.7rem;
  }
  .dc-slots { padding: 0.7rem 0 1rem; grid-template-columns: 1fr; gap: 0.6rem; }
  .dc-slot { gap: 0; }
  /* Slot label is shown as a chip on the banner instead of above */
  .dc-slot-label { display: none; }
  /* Each artist becomes a full-width landscape banner with the slot label
     chip top-left and the name overlaid bottom-left. Faces actually read. */
  .dc-artist {
    aspect-ratio: 16/7;
    height: auto;
    background: linear-gradient(135deg, var(--ink), #1f3658);
    border: 1px solid rgba(247,236,206,0.1);
    border-radius: 4px;
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    display: block;
  }
  .dc-artist::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(14,29,51,0.0) 35%, rgba(14,29,51,0.92) 100%);
    z-index: 1;
  }
  .dc-artist:hover { transform: none; box-shadow: none; border-color: rgba(247,236,206,0.18); }
  .dc-artist-thumb {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    flex: none;
    border-radius: 0;
    object-fit: cover;
    object-position: 50% 25%;
    border: none;
    filter: brightness(0.92) saturate(1.05);
  }
  .dc-artist-name {
    position: absolute;
    left: 0.85rem; right: 0.85rem; bottom: 0.65rem;
    z-index: 2;
    font-family: var(--font-head);
    font-size: 1.05rem;
    line-height: 1.15;
    color: var(--cream);
    text-shadow: 0 1px 6px rgba(0,0,0,0.7);
  }
  /* Slot label chip - top-right corner. Most press photos place the
     subject at center/left, so right-side keeps it from landing on faces. */
  .dc-artist[data-slot]::before {
    content: attr(data-slot);
    position: absolute;
    top: 0.55rem; right: 0.6rem;
    z-index: 2;
    font-family: var(--font-body);
    font-size: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--brass);
    background: rgba(14,29,51,0.6);
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .dc-slot-tbc {
    font-size: 0.85rem;
    padding: 0.6rem 0.85rem;
    color: rgba(247,236,206,0.45);
    display: block;
  }
  .dc-slot.empty {
    background: rgba(247,236,206,0.03);
    border: 1px dashed rgba(247,236,206,0.1);
    border-radius: 4px;
  }
  .dc-slot.empty .dc-slot-label {
    display: block;
    padding: 0.5rem 0.85rem 0;
    font-size: 0.5rem;
    letter-spacing: 0.24em;
  }
}

/* ═══════════════════════════════════════════════════════════════════
 * V5 OVERRIDES - cream/parchment everywhere. Kill every remaining blue.
 * Day-posters, popup sheet, ticket modal: all flip to warm cream surfaces
 * with ink type and brass accents. Photos keep their treatment.
 * ═══════════════════════════════════════════════════════════════════ */

/* Day-poster card: warm parchment fill instead of dark blue. */
.day-poster { background: var(--day-tint, #f0e4c6); }
.dp-photo { background: rgba(14,29,51,0.10); }

/* All info-column text now reads ink-on-cream. */
.dp-month { color: rgba(14,29,51,0.78); }
.dp-weekday { color: rgba(14,29,51,0.78); }
.dp-time { color: rgba(14,29,51,0.55); }
.dp-name { color: var(--brass); }
.dp-act-link { border-bottom-color: rgba(14,29,51,0.10); }
.dp-act-link:last-child { border-bottom-color: rgba(14,29,51,0.10); }
@media (hover: hover) {
  .dp-act-link:hover .dp-name { color: #8a5e15; }
  .dp-act-link:hover { border-bottom-color: rgba(200,144,42,0.45); }
}

/* Connector / secondary on desktop split-name (was cream-faded on dark). */
@media (min-width: 601px) {
  .dp-name-connector { color: rgba(14,29,51,0.72); }
  .dp-name-secondary { color: rgba(14,29,51,0.62); }
}

/* Italy / Brazil / ACT themed nights - keep their original dark/colour
   treatments as INTENTIONAL exceptions on the cream paper. Italian flag
   bands on Italy night, deep tropical green on Brazil, black on ACT.
   On these dark surfaces, the V5 ink-on-cream type would disappear - so
   the date/lineup text flips back to cream tones for the themed days. */
.day-poster.theme-italy .dp-month,
.day-poster.theme-italy .dp-weekday,
.day-poster.theme-italy .dp-time,
.day-poster.theme-brazil .dp-month,
.day-poster.theme-brazil .dp-weekday,
.day-poster.theme-brazil .dp-time,
.day-poster.theme-act .dp-month,
.day-poster.theme-act .dp-weekday,
.day-poster.theme-act .dp-time { color: rgba(247,236,206,0.85); }
.day-poster.theme-italy .dp-act-link,
.day-poster.theme-italy .dp-act-link:last-child,
.day-poster.theme-brazil .dp-act-link,
.day-poster.theme-brazil .dp-act-link:last-child,
.day-poster.theme-act .dp-act-link,
.day-poster.theme-act .dp-act-link:last-child {
  border-bottom-color: rgba(247,236,206,0.18);
}
.day-poster.theme-italy .dp-name-connector,
.day-poster.theme-italy .dp-name-secondary,
.day-poster.theme-brazil .dp-name-connector,
.day-poster.theme-brazil .dp-name-secondary,
.day-poster.theme-act .dp-name-connector,
.day-poster.theme-act .dp-name-secondary { color: rgba(247,236,206,0.78); }

/* Phone festival-list date-block on non-themed days: ink-on-cream. */
@media (max-width: 600px) {
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-date-block {
    background: rgba(14,29,51,0.08);
    color: var(--ink);
  }
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { background: transparent; }
  /* Phone non-themed days: the secondary line ("Brothers" / "A Tribute to
     Prince" / "Trio" / "feat. …") was cream-white-on-cream from the base
     phone CSS - unreadable on parchment. Flip to ink tones on cream.
     2026-05-14: primary + feat darkened from brass → ink so band names
     read confidently on every parchment day-tint on phone. */
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-primary,
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-feat {
    color: var(--ink);
  }
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-secondary {
    color: rgba(14,29,51,0.72);
  }
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-connector {
    color: rgba(14,29,51,0.78);
  }
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-time {
    color: rgba(14,29,51,0.55);
  }
}

/* ── ARTIST POPUP SHEET - flip to cream ─────────────────────────── */
.artist-sheet {
  background: var(--cream);
  color: var(--ink);
}
.sheet-photo { background: rgba(14,29,51,0.08); }
.sheet-photo::after {
  background: linear-gradient(180deg, transparent 60%, rgba(14,29,51,0.10) 100%);
}
.sheet-content { color: var(--ink); }
.sheet-eyebrow { color: rgba(14,29,51,0.62); }
.sheet-name { color: var(--brass); }
@media (max-width: 600px) {
  /* Themed-day popups (Italy / Brazil / ACT) - match the bigger
     primary-name size used by the non-themed cream popups. Color,
     texture-or-not, and everything else stays as before; only the
     size moves. */
  .artist-sheet.theme-act .sheet-name,
  .artist-sheet.theme-brazil .sheet-name,
  .artist-sheet.theme-italy .sheet-name {
    font-size: clamp(2.1rem, 10vw, 3.2rem) !important;
    line-height: 0.92 !important;
  }
  /* Phone popup - band name in near-black ink at a bigger size so it
     reads as the loudest thing on the sheet. Texture: fractal-noise
     paper grain clipped to the type, so the ink looks risograph /
     letterpress-printed rather than digitally flat. Themed dark popups
     keep their plain brass treatment. */
  .artist-sheet:not(.theme-act):not(.theme-brazil):not(.theme-italy) .sheet-name {
    font-size: clamp(2.1rem, 10vw, 3.2rem) !important;
    line-height: 0.92 !important;
    letter-spacing: 0.008em;
    font-weight: 700;
    /* Blue Note Records cobalt - a recognizable deep navy that lives
       inside the festival's existing blue palette. Texture is a
       darker, gentler noise (soft-light blend) so the blue stays
       clearly blue and doesn't get washed-out by the grain. */
    background-color: #050d24;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.65  0 0 0 0 0.85  0 0 0 0.28 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 180px 180px;
    background-blend-mode: soft-light;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  /* Wrap "X Group" headlines (Ida) on one no-wrap line so the small
     "Group" can't be pushed to its own line. */
  .artist-sheet:not(.theme-act):not(.theme-brazil):not(.theme-italy) .sheet-name .sheet-name-row {
    display: block;
    white-space: nowrap;
  }
  /* Sub-line sits inside the textured .sheet-name container - its own
     fill must be restored or it inherits the transparent fill from the
     parent and disappears. Opaque medium gray (not alpha-blended) so
     the parent's textured-blue background-clip:text can't bleed
     through the half-transparent fill - that bleed was making
     "Quartet" appear blue with only its descender reading as gray. */
  .artist-sheet:not(.theme-act):not(.theme-brazil):not(.theme-italy) .sheet-name .sheet-name-sub {
    /* Darker gray base + the same fractal-noise paper-grain clipped
       through the type, so the sub-line reads as a tonal match to the
       big textured band name (just smaller, italic, dimmer). Opaque
       fill underneath stops the parent's blue clip from bleeding. */
    background-color: #4f5358;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.78  0 0 0 0 0.78  0 0 0 0 0.78  0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 180px 180px;
    background-blend-mode: soft-light;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  /* "Group" inside Ida's headline - render small italic on the same
     line as the primary name, like a feat./Trio/Quartet treatment.
     Re-establishes solid black fill (parent is texture-clipped to
     transparent). */
  .artist-sheet:not(.theme-act):not(.theme-brazil):not(.theme-italy) .sheet-name .sheet-name-connector {
    display: inline;
    font-family: var(--font-head);
    font-style: italic;
    font-size: 0.4em;
    font-weight: 400;
    letter-spacing: 0.01em;
    padding-left: 0.2em;
    vertical-align: 0.3em;
    background-color: #4f5358;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.78  0 0 0 0 0.78  0 0 0 0 0.78  0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 180px 180px;
    background-blend-mode: soft-light;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  /* Sub-line ("Quartet", "Brothers", "feat. …", "Farewell Tour",
     "A Prince Celebration") on the cream popup - italic Playfair serif
     in dark gray so it's visually clearly distinct from the big blue
     Bebas band name above (different font, different style, different
     colour). Italic "Prince" inside still reads as a tonal accent. */
  .artist-sheet:not(.theme-act):not(.theme-brazil):not(.theme-italy) .sheet-name-sub {
    color: #7a7a7a;
    font-size: 0.56em !important;
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.012em;
    line-height: 1.05;
    margin-top: 0.32em;
    opacity: 1;
  }
  /* Inside an italic sub-line, flip "Prince" back to upright so it
     still reads as the deliberate accent (upright-in-italic). */
  .artist-sheet:not(.theme-act):not(.theme-brazil):not(.theme-italy) .sheet-name-sub .ida-prince-em {
    font-style: normal;
  }
  /* Pin the Tickets button to the TOP of the name area so it doesn't
     slide down when the name has a sub-line. */
  .sheet-header { align-items: flex-start; }
  .sheet-tickets-pin { align-self: flex-start; margin-top: 0.4rem; }
}
.sheet-cred { color: rgba(14,29,51,0.72); }
.sheet-tags .sheet-tag {
  background: rgba(14,29,51,0.08);
  color: var(--ink);
  border-color: rgba(14,29,51,0.18);
}
.sheet-bio { color: rgba(14,29,51,0.78); }
.sheet-socials .sheet-social {
  background: rgba(14,29,51,0.06);
  color: var(--ink);
  border-color: rgba(14,29,51,0.18);
}
.sheet-socials .sheet-social:hover {
  background: var(--brass);
  color: var(--cream);
  border-color: var(--brass);
}
.sheet-video-frame { background: rgba(14,29,51,0.08); }
.sheet-video-label { color: rgba(14,29,51,0.65); }
.sheet-video-placeholder { color: rgba(14,29,51,0.55); }
.sheet-video-placeholder-text { color: rgba(14,29,51,0.55); }
.sheet-close,
.sheet-handle { color: var(--ink); }

/* Sheet desktop right-edge fade now blends into cream, not ink. */
@media (min-width: 601px) {
  .sheet-photo::after {
    background: linear-gradient(90deg, transparent 90%, rgba(14,29,51,0.10) 100%);
  }
}

/* Tickets pin stays brass but lives on cream now - keep contrast. */

/* ── TICKETS MODAL - cream ──────────────────────────────────────── */
.ticket-modal-card {
  background: var(--cream);
  color: var(--ink);
}
.ticket-modal-card h3 { color: var(--ink); }
.ticket-modal-card p { color: rgba(14,29,51,0.72); }
.ticket-modal-close {
  color: var(--ink);
  border-color: rgba(14,29,51,0.25);
}
.ticket-option {
  background: rgba(14,29,51,0.04);
  border-color: rgba(14,29,51,0.15);
  color: var(--ink);
}
.ticket-option:hover {
  background: rgba(200,144,42,0.10);
  border-color: var(--brass);
}
.ticket-option strong { color: var(--ink); }
.ticket-option span { color: rgba(14,29,51,0.7); }

/* Schedule section bg should be transparent so the body cream shows. */
.schedule-section { background: transparent; }

/* ── Themed dark popup sheets (ACT, Brazil) - flip text back to cream ─
   The V5 base `.artist-sheet { background: cream; color: ink }` override
   gets beaten by `.artist-sheet.theme-act { background: #0a0a0a }` (more
   specific), so the sheet stays black on ACT nights - but my ink-on-cream
   text colors above carry over and become invisible. Same for Brazil's
   deep-green sheet. These rules restore cream-on-dark type for those
   themed popups. */
.artist-sheet.theme-act,
.artist-sheet.theme-brazil { color: var(--cream); }
.artist-sheet.theme-act .sheet-eyebrow,
.artist-sheet.theme-brazil .sheet-eyebrow { color: rgba(247,236,206,0.62); }
.artist-sheet.theme-act .sheet-name,
.artist-sheet.theme-brazil .sheet-name { color: var(--brass); }
/* Desktop popup, non-themed days - keep the brass color but clip the
   same fractal-noise paper grain through it so it reads as printed
   ink/leaf rather than flat digital fill. Themed sheets keep plain
   brass (the dark backgrounds already give the type enough character). */
@media (min-width: 601px) {
  .artist-sheet:not(.theme-act):not(.theme-brazil):not(.theme-italy) .sheet-name {
    background-color: #c8902a;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.10  0 0 0 0 0.02  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 180px 180px;
    background-blend-mode: multiply;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  /* The sub-line inside the textured .sheet-name needs its own solid
     fill - otherwise it inherits transparent and disappears. */
  .artist-sheet:not(.theme-act):not(.theme-brazil):not(.theme-italy) .sheet-name .sheet-name-sub {
    -webkit-text-fill-color: rgba(14, 29, 51, 0.78);
    color: rgba(14, 29, 51, 0.78);
    background: none;
  }
  /* "Group" inline accent - small italic next to primary, like
     feat./Trio styling. */
  .artist-sheet:not(.theme-act):not(.theme-brazil):not(.theme-italy) .sheet-name .sheet-name-connector {
    display: inline;
    font-family: var(--font-head);
    font-style: italic;
    font-size: 0.5em;
    font-weight: 400;
    letter-spacing: 0.01em;
    padding-left: 0.2em;
    vertical-align: 0.3em;
    -webkit-text-fill-color: rgba(14, 29, 51, 0.78);
    color: rgba(14, 29, 51, 0.78);
    background: none;
  }
}
.artist-sheet.theme-act .sheet-name-sub,
.artist-sheet.theme-brazil .sheet-name-sub { color: rgba(247,236,206,0.85); }
/* Italia popup background is cream (no dark theme override) - give the
   sub-line the same italic-Playfair / dark-gray treatment as the rest
   of the cream popups so "20 Years Handful of Soul" /
   "Italian Soundtracks" actually reads instead of disappearing into
   the paper. */
.artist-sheet.theme-italy .sheet-name-sub {
  color: #4f5358;
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 400;
  font-size: 0.56em;
  letter-spacing: 0.012em;
  line-height: 1.05;
  margin-top: 0.32em;
}
.artist-sheet.theme-act .sheet-cred,
.artist-sheet.theme-brazil .sheet-cred { color: rgba(247,236,206,0.78); }
.artist-sheet.theme-act .sheet-bio,
.artist-sheet.theme-brazil .sheet-bio { color: rgba(247,236,206,0.85); }
.artist-sheet.theme-act .sheet-tags .sheet-tag,
.artist-sheet.theme-brazil .sheet-tags .sheet-tag {
  background: rgba(247,236,206,0.08);
  color: var(--cream);
  border-color: rgba(247,236,206,0.18);
}
.artist-sheet.theme-act .sheet-socials .sheet-social,
.artist-sheet.theme-brazil .sheet-socials .sheet-social {
  background: rgba(247,236,206,0.06);
  color: var(--cream);
  border-color: rgba(247,236,206,0.18);
}
.artist-sheet.theme-act .sheet-video-frame,
.artist-sheet.theme-brazil .sheet-video-frame {
  background: rgba(247,236,206,0.08);
}
.artist-sheet.theme-act .sheet-video-label,
.artist-sheet.theme-act .sheet-video-placeholder,
.artist-sheet.theme-act .sheet-video-placeholder-text,
.artist-sheet.theme-brazil .sheet-video-label,
.artist-sheet.theme-brazil .sheet-video-placeholder,
.artist-sheet.theme-brazil .sheet-video-placeholder-text {
  color: rgba(247,236,206,0.65);
}
.artist-sheet.theme-act .sheet-photo::after,
.artist-sheet.theme-brazil .sheet-photo::after {
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.55) 100%);
}
@media (min-width: 601px) {
  .artist-sheet.theme-act .sheet-photo::after,
  .artist-sheet.theme-brazil .sheet-photo::after {
    background: linear-gradient(90deg, transparent 90%, rgba(0,0,0,0.5) 100%);
  }
}

/* Partner cards that should NOT be flattened to a dark silhouette.
   Rolling Stone has a 3D striped wordmark that turns to mush under the
   brightness(0)/invert filter - let it render in its natural greys. */
.partner-card.partner-card--no-invert img {
  filter: none;
  opacity: 1;
}

/* ── Venues showcase - force readable cream type on the photo ──────
   The V5 `.section-dark h2 { color: var(--ink) }` rule was beating
   `.showcase-venue-name` (lower specificity) and painting the villa
   name dark navy on top of the photo. These higher-specificity rules
   re-assert the bright-cream readable values. */
.section-dark .showcase-venue-name {
  color: #fff8e0;
  text-shadow: 0 4px 28px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.55);
}
.section-dark .showcase-venue-tag {
  color: #ffe9aa;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.section-dark .showcase-venue-body {
  color: #f7ecce;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
/* V5: dt + dd were vertically misaligned because dt is 0.62rem while dd
   is 0.92rem and the grid defaulted to align-items: stretch - the smaller
   dt text "rode up" the box while dd sat lower. Centre-align the row so
   each label + value share an optical baseline. dt also gets a brighter
   colour + drop-shadow + slightly bigger size so the photo behind it
   doesn't drown the label. */
.section-dark .showcase-venue-meta {
  align-items: center;
  gap: 1.2rem 1.4rem;
}
.section-dark .showcase-venue-meta dt {
  color: #ffd57a;
  font-size: 0.72rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.section-dark .showcase-venue-meta dd {
  color: #f7ecce;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}

/* ── Lineup name hover - much louder on cream ────────────────────
   With dark blue surfaces gone, the previous "lighter brass" hover
   color (#ffe6a8) is barely visible. Push the active name into a
   deep saturated brass + scale up so the highlight is obvious. */
@media (hover: hover) {
  .dp-act-link:hover .dp-name,
  .dp-lineup .dp-act-link.photo-hover .dp-name {
    color: #6b3f0c;
    font-weight: 600;
    /* scale 1.14 made the longest names (Dejan Jovanovic Orchestra feat.
       Boban Marković, Gonzalo Rubalcaba Quintett feat. …) overflow the
       day-poster's clipped right edge. Drop to 1.05 - colour + weight do
       most of the hover signaling anyway. */
    transform: translateX(2px) scale(1.05);
    transform-origin: left center;
  }
  .dp-act-link:hover,
  .dp-lineup .dp-act-link.photo-hover {
    border-bottom-color: rgba(107,63,12,0.55);
  }
  /* On the desktop split-name (primary / connector / feat), brighten
     each segment so the whole featured-artists line lights up together. */
  .dp-act-link:hover .dp-name-primary,
  .dp-act-link:hover .dp-name-feat,
  .dp-lineup .dp-act-link.photo-hover .dp-name-primary,
  .dp-lineup .dp-act-link.photo-hover .dp-name-feat { color: #6b3f0c; }
  .dp-act-link:hover .dp-name-connector,
  .dp-act-link:hover .dp-name-secondary,
  .dp-lineup .dp-act-link.photo-hover .dp-name-connector,
  .dp-lineup .dp-act-link.photo-hover .dp-name-secondary { color: rgba(14,29,51,0.92); }
  /* Themed dark days (ACT black, Brazil deep green): the ink-on-cream
     hover color above turns invisible. Lift the secondary "Trio /
     Quartet" suffix + connector to a cream-tone on hover so it stays
     readable against the dark surface. */
  .day-poster.theme-act .dp-act-link:hover .dp-name-secondary,
  .day-poster.theme-act .dp-act-link:hover .dp-name-connector,
  .day-poster.theme-act .dp-lineup .dp-act-link.photo-hover .dp-name-secondary,
  .day-poster.theme-act .dp-lineup .dp-act-link.photo-hover .dp-name-connector,
  .day-poster.theme-brazil .dp-act-link:hover .dp-name-secondary,
  .day-poster.theme-brazil .dp-act-link:hover .dp-name-connector,
  .day-poster.theme-brazil .dp-lineup .dp-act-link.photo-hover .dp-name-secondary,
  .day-poster.theme-brazil .dp-lineup .dp-act-link.photo-hover .dp-name-connector {
    color: rgba(247,236,206,0.92);
  }
  /* Italy + Brazil + ACT: hovering the band name was making it DARKER
     (deep brass #6b3f0c), which sinks into the green/red/black surfaces.
     Override the primary-name hover here so it brightens to pure white
     instead - visible across every stripe / dark themed bg. */
  .day-poster.theme-italy .dp-act-link:hover .dp-name,
  .day-poster.theme-italy .dp-act-link:hover .dp-name-primary,
  .day-poster.theme-italy .dp-act-link:hover .dp-name-feat,
  .day-poster.theme-italy .dp-lineup .dp-act-link.photo-hover .dp-name,
  .day-poster.theme-italy .dp-lineup .dp-act-link.photo-hover .dp-name-primary,
  .day-poster.theme-italy .dp-lineup .dp-act-link.photo-hover .dp-name-feat,
  .day-poster.theme-brazil .dp-act-link:hover .dp-name,
  .day-poster.theme-brazil .dp-act-link:hover .dp-name-primary,
  .day-poster.theme-brazil .dp-act-link:hover .dp-name-feat,
  .day-poster.theme-brazil .dp-lineup .dp-act-link.photo-hover .dp-name,
  .day-poster.theme-brazil .dp-lineup .dp-act-link.photo-hover .dp-name-primary,
  .day-poster.theme-brazil .dp-lineup .dp-act-link.photo-hover .dp-name-feat,
  .day-poster.theme-act .dp-act-link:hover .dp-name,
  .day-poster.theme-act .dp-act-link:hover .dp-name-primary,
  .day-poster.theme-act .dp-act-link:hover .dp-name-feat,
  .day-poster.theme-act .dp-lineup .dp-act-link.photo-hover .dp-name,
  .day-poster.theme-act .dp-lineup .dp-act-link.photo-hover .dp-name-primary,
  .day-poster.theme-act .dp-lineup .dp-act-link.photo-hover .dp-name-feat {
    color: #ffffff;
  }
  .day-poster.theme-italy .dp-act-link:hover,
  .day-poster.theme-italy .dp-lineup .dp-act-link.photo-hover,
  .day-poster.theme-brazil .dp-act-link:hover,
  .day-poster.theme-brazil .dp-lineup .dp-act-link.photo-hover,
  .day-poster.theme-act .dp-act-link:hover,
  .day-poster.theme-act .dp-lineup .dp-act-link.photo-hover {
    border-bottom-color: rgba(255, 255, 255, 0.55);
  }
}

/* ── Photo-backed section headers - summer atmosphere ────────────
   The lineup heading and jam-sessions section now ride on top of a
   villa photo with a soft overlay. Cream type with drop shadow stays
   readable while the photo reinforces the open-air feel. */
.section-photo-header {
  position: relative;
  background-size: cover;
  background-position: center calc(40% + var(--p-shift, 0px));
  padding: clamp(5rem, 11vw, 9rem) clamp(1.6rem, 5vw, 4rem) clamp(4rem, 9vw, 7rem);
  text-align: center;
  margin-bottom: 4rem;
  overflow: hidden;
}
.section-photo-header .section-photo-overlay {
  position: absolute; inset: 0;
  /* Lightened 2026-05-25 — Uri felt the Programm header was too dark. */
  background:
    linear-gradient(180deg,
      rgba(14,29,51,0.10) 0%,
      rgba(14,29,51,0.22) 60%,
      rgba(14,29,51,0.40) 100%);
  pointer-events: none;
}
.section-photo-header .section-photo-content {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
}
.section-photo-header .section-tag {
  color: #ffe9aa;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
.section-photo-header h2.big-h {
  color: #fff5d4 !important;
  text-shadow: 0 3px 22px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.45);
}
.section-photo-header h2.big-h em { color: var(--brass); }
.section-photo-header .section-rule { background: var(--brass); margin: 0 auto 1.4rem; }
.section-photo-header .jam-teaser {
  color: #ffe9aa;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}

/* Section-as-photo-bg (jam sessions). Same overlay pattern but applied
   to the whole <section>, with the body text centered on top. The
   tall top-padding pushes the headline + body down so they sit on the
   darker lower third of the night-villa photo. */
.section-photo-bg {
  position: relative;
  background-size: cover;
  background-position: center calc(35% + var(--p-shift, 0px));
  padding: clamp(11rem, 22vw, 18rem) 1rem clamp(6rem, 12vw, 9rem);
  overflow: hidden;
}
.section-photo-overlay-dark {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(14,29,51,0.65) 0%,
      rgba(14,29,51,0.78) 60%,
      rgba(14,29,51,0.85) 100%);
  pointer-events: none;
  z-index: 1;
}
.jam-on-photo { color: #ffe9aa !important; text-shadow: 0 1px 8px rgba(0,0,0,0.55); }
.jam-on-photo-title {
  color: #fff5d4 !important;
  text-shadow: 0 3px 22px rgba(0,0,0,0.6);
  position: relative;
  /* Display:inline-block + auto margins lets us anchor the asterisk-star
     to the top-left edge of the actual text without nudging the centered
     heading off its column. The parent wrap already has text-align:center. */
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
/* Brass "bonus" asterisk-star floating above the top-left of the "A".
   Absolute / sits outside the text-flow so the heading itself stays
   visually balanced. */
/* Zero-width inline anchor sits right before the "A" in "After".
   The asterisk-star is positioned absolute relative to this anchor so it
   lands at the top-left of the "A" regardless of how the heading wraps. */
.jam-star-anchor {
  position: relative;
  display: inline;
}
.jam-star-anchor::before {
  content: '★';
  position: absolute;
  top: -0.15em;
  right: 0;
  margin-right: 0.02em;
  font-size: 0.32em;
  color: var(--brass);
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}
.jam-on-photo-title em { color: var(--brass) !important; }
.jam-on-photo-body p { color: #fff5d4 !important; text-shadow: 0 2px 12px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.7); font-weight: 500; }
.jam-on-photo-body p strong { color: #ffffff !important; font-weight: 700; }
.section-photo-bg .section-rule { background: var(--brass) !important; }

/* About section: two-column on desktop - text left, vertical-ish villa
   photo on the right. Phone collapses to single column (photo hidden
   to avoid duplicate of the gallery already above). */
@media (min-width: 901px) {
  .about-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 4rem;
    align-items: start;
  }
  .about-photo {
    position: sticky;
    top: 6rem;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 24px 48px -16px rgba(0,0,0,0.35);
  }
  .about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
    display: block;
  }
}
@media (max-width: 900px) {
  .about-photo { display: none; }
}

/* ── Sheet close button - always-readable, never transparent ─────
   Was a translucent dark pill that disappeared against dark photo
   regions. Now a solid ink disc with a cream X - reads on any photo. */
.sheet-close {
  background: var(--ink) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1.5px solid rgba(247,236,206,0.85) !important;
  color: var(--cream) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.sheet-close:hover {
  background: var(--brass) !important;
  border-color: var(--brass) !important;
  color: var(--ink) !important;
}

/* ── Presented-by (top, under hero) - cream-darker surface ─────────
   Moved up from the bottom of the page so visitors meet the partners
   right after the hero. Cream-darker (deeper toast tone) bg with ink
   type and brass accents. Logo silhouettes stay ink against the warm
   bg. The taller padding gives the section room for two large logos. */
.presented-top-section {
  background: #e6d4a0;
  color: var(--ink);
  padding: clamp(5rem, 9vw, 8rem) clamp(1.4rem, 5vw, 4rem) clamp(5rem, 9vw, 7rem);
}
.presented-top-section .section-tag { color: rgba(14,29,51,0.62); }
.presented-top-section h2 { color: var(--ink); }
.presented-top-section h2 em { color: var(--brass); font-style: normal; }
.presented-top-section .section-rule { background: var(--brass); }
.presented-top-section .body-text p { color: rgba(14,29,51,0.78); }
.presented-top-section .body-text p strong { color: var(--ink); }
.presented-top-section .presented-logo {
  /* On the cream-darker surface, partner logos render as ink silhouettes
     instead of cream - match the V5 partners row. */
  filter: brightness(0) invert(0.18);
  opacity: 0.95;
}
@media (max-width: 600px) {
  /* Phone: drop the cream-darker tone - let the section sit on the
     regular body cream so it reads as one continuous surface from
     hero down through the Programm banner. */
  .presented-top-section { background: transparent; }
}

/* ── Lineup banner - huge "Programm" word over the garden photo ────
   The old "Open Air am Havelufer" tag/heading/teaser stack has been
   replaced with a single oversized word so the section reads instantly
   as the programme entry point. */
.section-photo-header-programm {
  padding-top: clamp(7rem, 14vw, 12rem);
  padding-bottom: clamp(5rem, 11vw, 9rem);
}
.section-photo-programm {
  font-family: var(--font-display);
  font-size: clamp(5rem, 22vw, 18rem) !important;
  line-height: 0.92 !important;
  letter-spacing: 0.04em;
  color: #fff5d4 !important;
  text-shadow: 0 4px 28px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5);
  text-transform: uppercase;
  margin: 0;
  /* Compensate for the trailing letter-spacing after the final "M" so the
     optical centre of the strokes (not the bounding-box centre) lands on
     the page centre. Without this, the trailing 0.04em pushes the visible
     text slightly off-centre toward the right. */
  text-indent: -0.04em;
  position: relative;
}
/* One-shot sun-glint that sweeps diagonally across the PROGRAMM glyphs.
   The ::after duplicates the text on top of the original, masked to the
   text via background-clip so the bright streak only shows inside the
   letter shapes. Triggered by JS adding `.shine-on` when the heading
   enters the viewport. */
/* Sun-glint sweep CLIPPED to the PROGRAMM letters - not the photo behind.
   The ::after duplicates the H2 text on top with text-fill transparent,
   then paints a sliding bright streak via background-clip: text. The
   `mix-blend-mode: plus-lighter` makes the ::after invisible everywhere
   except where the streak gradient is bright - so the H2's cream colour
   + drop-shadow show through normally, and the streak only adds light. */
/* Sun-glint streak clipped to the PROGRAMM letters. The ::after duplicates
   the heading text and paints a bright/gold gradient inside the glyph
   shapes - opaque, no blend-mode trickery (which made the highlight
   invisible against the already-bright cream baseline). With opacity 0
   baseline and an opacity 0→1→0 keyframe, the overlay is fully gone
   before and after the sweep so nothing sticks. */
.section-photo-programm::after {
  content: var(--shine-text, 'PROGRAMM');
  position: absolute;
  inset: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-indent: inherit;
  text-align: center;
  background-image: linear-gradient(65deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.95) 44%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.95) 56%,
    rgba(255, 255, 255, 0) 70%);
  background-size: 70% 100%;
  background-repeat: no-repeat;
  background-position: -75% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.9));
  text-shadow: none;
  pointer-events: none;
  opacity: 0;
}
.section-photo-programm.shine-on::after {
  animation: programmShine 0.85s cubic-bezier(0.3, 0.4, 0.4, 1) forwards;
}
@keyframes programmShine {
  0%   { background-position: -75% 0; opacity: 0; }
  8%   { opacity: 1; }
  82%  { background-position: 175% 0; opacity: 1; }
  100% { background-position: 175% 0; opacity: 0; }
}
/* Add a brief brightness + white halo pulse on the whole heading so the
   white streak reads as actual light catching the surface (cream-on-cream
   alone is too low-contrast to perceive). Synchronised with the streak. */
.section-photo-programm.shine-on {
  animation: programmPulse 0.85s cubic-bezier(0.3, 0.4, 0.4, 1) forwards;
}
@keyframes programmPulse {
  0%   { filter: brightness(1) drop-shadow(0 0 0 transparent); }
  50%  { filter: brightness(1.35) drop-shadow(0 0 22px rgba(255, 255, 255, 0.75)); }
  100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .section-photo-programm::after { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   DESKTOP-ONLY V4-NAVY PALETTE on the full-lineup day cards.
   Phone is locked (its own navy palette + photo days lives inside
   `@media (max-width: 600px)` already). This block ONLY paints the
   desktop poster info column navy and re-tints the text so nothing
   is ever dark-on-dark. Themed days (italy / brazil / act) keep their
   intentional flag/colour treatments via higher specificity.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width: 601px) {
  /* Per-day --day-tint overrides. The `.day-poster { background:
     var(--day-tint, #f0e4c6) }` base already paints from this var, so
     setting it per data-date is enough to change the right-side info
     column from cream parchment to navy. */
  /* program.js sets `--day-tint` via inline style="--day-tint:#XXX" on
     every poster - `!important` is required here to beat that. */
  .day-poster[data-date="20.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) { --day-tint: #1F3556 !important; background: #1F3556 !important; }
  .day-poster[data-date="22.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) { --day-tint: #2e4565 !important; background: #2e4565 !important; }
  .day-poster[data-date="23.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) { --day-tint: #08152b !important; background: #08152b !important; }
  .day-poster[data-date="24.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) { --day-tint: #3d5d8a !important; background: #3d5d8a !important; }
  .day-poster[data-date="25.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) { --day-tint: #1F3556 !important; background: #1F3556 !important; }
  .day-poster[data-date="26.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) { --day-tint: #154b86 !important; background: #154b86 !important; }
  .day-poster[data-date="27.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) { --day-tint: #0e1d33 !important; background: #0e1d33 !important; }
  .day-poster[data-date="29.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) { --day-tint: #2e4565 !important; background: #2e4565 !important; }
  .day-poster[data-date="30.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) { --day-tint: #154b86 !important; background: #154b86 !important; }
  .day-poster[data-date="31.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) { --day-tint: #2e4565 !important; background: #2e4565 !important; }

  /* Band names: bright white with a very fine grain inside the
     letterforms (background-clip: text + low-alpha fractal-noise SVG),
     so they read as "printed on the textured paper" rather than flat
     pixels. Heavier weight + clear cream-on-navy contrast. */
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name,
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-primary,
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-feat {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
      linear-gradient(#ffffff, #ffffff);
    background-size: 240px 240px, 100% 100%;
    background-repeat: repeat, no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
    font-weight: 600;
  }
  @media (hover: hover) {
    .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-act-link:hover .dp-name {
      /* On hover, kick the grain off momentarily by overriding with a
         solid bright fill so the active name is the brightest thing. */
      background-image: linear-gradient(#fffbe8, #fffbe8);
    }
    /* Mirror the underline-on-hover effect when the matching PHOTO is
     hovered - without this the name highlight appears but the underline
     stays invisible (cream at 0.14 alpha). */
    .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-lineup .dp-act-link.photo-hover {
      border-bottom-color: rgba(247, 236, 206, 0.55);
    }
  }
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-month,
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-weekday {
    color: rgba(247, 236, 206, 0.86);
  }
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-time {
    color: rgba(247, 236, 206, 0.62);
  }
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-connector {
    color: rgba(247, 236, 206, 0.86);
  }
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-secondary {
    color: rgba(247, 236, 206, 0.74);
  }
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-act-link {
    border-bottom-color: rgba(247, 236, 206, 0.14);
  }
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-act-link:last-child {
    border-bottom-color: transparent;
  }
  /* Hover: dim cream-tinted brass to a brighter brass so it reads as
     active state against the navy. Previous hover (#8a5e15, darker
     brass) was meant for cream backgrounds - invisible on navy. */
  @media (hover: hover) {
    .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-act-link:hover .dp-name {
      color: #e6b250;
    }
    .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-act-link:hover {
      border-bottom-color: rgba(232, 178, 80, 0.55);
    }
  }

  /* Organic noise + soft light gradient on the navy info column. The SVG
     fractal-noise gives the navy a fine grain (like dyed paper / suede),
     and a low-opacity radial highlight from the top-left adds a subtle
     sense of depth - light catching a 3D-ish material rather than a flat
     fill. Both blend with the navy via overlay / soft-light so the hue
     stays unchanged. */
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info {
    position: relative;
  }
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 18% 14%,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0) 60%),
      radial-gradient(circle at 100% 100%,
        rgba(0, 0, 0, 0.20),
        rgba(0, 0, 0, 0) 55%),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 100% 100%, 100% 100%, 240px 240px;
    background-repeat: no-repeat, no-repeat, repeat;
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 0;
  }
  .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info > * {
    position: relative;
    z-index: 1;
  }

  /* Crumpled-paper variant - only the BRIGHTER navy days (24.07 / 26.07 /
     30.07). Uses SVG turbulence at LOW baseFrequency so the noise pattern
     resolves into large soft splotches instead of fine grain, plus high
     contrast color matrix + overlay blend so the patches read as light
     hitting creases in a folded sheet. Combined with the existing
     top-left highlight, the surface starts to feel like a slightly
     crumpled coloured paper sheet rather than a flat fill. */
  .day-poster[data-date="24.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info::after,
  .day-poster[data-date="26.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info::after,
  .day-poster[data-date="30.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info::after {
    /* Water ripples - horizontally-stretched SVG `turbulence` (low X freq,
       higher Y freq) produces noise patches that stretch sideways and
       stack vertically, the way ripples on a calm surface look when seen
       from above. A second pass adds longer slow swells underneath.
       feTurbulence type='turbulence' (not fractalNoise) flows smoothly. */
    background-image:
      radial-gradient(circle at 18% 16%,
        rgba(255, 255, 255, 0.18),
        rgba(255, 255, 255, 0) 60%),
      radial-gradient(circle at 95% 95%,
        rgba(0, 0, 0, 0.20),
        rgba(0, 0, 0, 0) 60%),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='400'><filter id='w1'><feTurbulence type='turbulence' baseFrequency='0.006 0.055' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.14 0'/></filter><filter id='w2'><feTurbulence type='turbulence' baseFrequency='0.002 0.018' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23w2)'/><rect width='100%' height='100%' filter='url(%23w1)'/></svg>");
    background-size: 100% 100%, 100% 100%, 1000px 400px;
    background-repeat: no-repeat, no-repeat, repeat;
    mix-blend-mode: overlay;
    opacity: 0.9;
  }
}

/* ── Phone-only special-day backgrounds ────────────────────────────
   Brazil day: full Brazilian-flag colour bands on the card background
   (mirrors how Italy day uses the tricolore on .dp-info). Victor Wooten
   day (24.07): his stage photo behind the lineup, with a dark overlay
   so the cream text stays readable. */
@media (max-width: 600px) {
  /* Brazil - the actual Brazilian flag (green field + yellow diamond +
     blue disc) rendered via inline SVG, then darkened slightly so the
     cream lineup text stays readable on top. */
  .day-poster.theme-brazil {
    background:
      linear-gradient(rgba(0,0,0,0.42), rgba(0,0,0,0.42)),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20' preserveAspectRatio='xMidYMid slice'><rect width='28' height='20' fill='%23009c3b'/><polygon points='14,1.7 26.3,10 14,18.3 1.7,10' fill='%23ffdf00'/><circle cx='14' cy='10' r='3.5' fill='%23002776'/></svg>") center / cover no-repeat !important;
  }
  /* Photo-background days (phone only): Dee Dee 20.07, Victor 24.07,
     Tigran 26.07 (silver wash), Samara 29.07. Each gets the artist's
     stage photo full-bleed with a dark vignette overlay so cream text
     stays readable. Tigran's overlay is silvery-grey instead of navy
     to give that night a "silver" feel per Uri's note. */
  .day-poster[data-date="20.07"] {
    background:
      linear-gradient(180deg,
        rgba(14,29,51,0.45) 0%,
        rgba(14,29,51,0.55) 35%,
        rgba(14,29,51,0.80) 100%),
      url('/assets/img/artists/dee-dee-bridgewater.jpg') 50% 20% / cover no-repeat !important;
    color: var(--cream);
  }
  .day-poster[data-date="25.07"] {
    background:
      linear-gradient(180deg,
        rgba(14,29,51,0.45) 0%,
        rgba(14,29,51,0.55) 35%,
        rgba(14,29,51,0.78) 100%),
      url('/assets/img/victor-wooten.jpg') 32% 22% / cover no-repeat !important;
    color: var(--cream);
  }
  .day-poster[data-date="26.07"] {
    /* Tigran's hero shot - standing in the silver elevator chamber. The
       photo itself reads silver/metal, so the overlay is a soft dark
       vignette (not a silver wash) so cream text stays readable without
       further desaturating the existing palette. */
    background:
      linear-gradient(180deg,
        rgba(14,29,51,0.35) 0%,
        rgba(14,29,51,0.50) 40%,
        rgba(14,29,51,0.75) 100%),
      url('/assets/img/artists/tigran-hamasyan-hero.jpg') 50% 20% / cover no-repeat !important;
    color: var(--cream);
  }
  .day-poster[data-date="29.07"] {
    background:
      linear-gradient(180deg,
        rgba(14,29,51,0.45) 0%,
        rgba(14,29,51,0.55) 35%,
        rgba(14,29,51,0.80) 100%),
      url('/assets/img/artists/samara-joy.jpg') 50% 12% / cover no-repeat !important;
    color: var(--cream);
  }

  /* V4-navy variations - wider spread so each night reads as a
     visibly different blue/midnight tone. Mid base, deep midnight,
     bright royal, slate-grey, saturated cobalt, soft denim. */
  .day-poster[data-date="22.07"] {
    background:
      linear-gradient(180deg,
        rgba(14,29,51,0.45) 0%,
        rgba(14,29,51,0.55) 35%,
        rgba(14,29,51,0.80) 100%),
      url('/assets/img/artists/ledisi.webp') 50% 22% / cover no-repeat !important;
    color: var(--cream);
  }
  .day-poster[data-date="23.07"] { --day-tint: #08152b !important; background: #08152b !important; }
  .day-poster[data-date="24.07"] { --day-tint: #3d5d8a !important; background: #3d5d8a !important; }
  .day-poster[data-date="27.07"] { --day-tint: #0e1d33 !important; background: #0e1d33 !important; }
  .day-poster[data-date="30.07"] { --day-tint: #154b86 !important; background: #154b86 !important; }
  .day-poster[data-date="31.07"] { --day-tint: #2e4565 !important; background: #2e4565 !important; }

  /* 27.07 - festival logo as a watermark behind the lineup. CSS mask
     paints a cream-tinted shape clipped to the logo SVG so it reads
     against the dark navy backdrop. */
  .day-poster[data-date="27.07"] {
    position: relative;
    background: #0e1d33 !important;
  }
  .day-poster[data-date="27.07"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(247,236,206,0.28);
    -webkit-mask-image: url('/assets/img/logo-designer.svg');
    mask-image: url('/assets/img/logo-designer.svg');
    /* Right side, dropped down so the painted "bridge" line at the top
     of the logo art sits just below the date-block underline instead
     of having the underline crossing the middle of the logo. */
    -webkit-mask-position: 96% 16%;
    mask-position: 96% 16%;
    -webkit-mask-size: 38% auto;
    mask-size: 38% auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
  }
  .day-poster[data-date="27.07"] > * { position: relative; z-index: 1; }

  /* PHONE TEXTURE: same fractal-noise + soft-light treatment used on the
     desktop navy days, applied to the phone non-themed non-photo days so
     the cards read as a material rather than a flat fill. Skips photo
     days (20/22/25/26/29), themed days (italy 21 / brazil 28 / act),
     and is safely under .day-poster's own children via z-index. The
     27.07 logo watermark stays intact because that uses ::before and
     this uses ::after on the SAME element. */
  .day-poster[data-date="23.07"],
  .day-poster[data-date="24.07"],
  .day-poster[data-date="30.07"],
  .day-poster[data-date="31.07"] {
    position: relative;
  }
  .day-poster[data-date="23.07"]::after,
  .day-poster[data-date="24.07"]::after,
  .day-poster[data-date="27.07"]::after,
  .day-poster[data-date="30.07"]::after,
  .day-poster[data-date="31.07"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 18% 14%,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0) 60%),
      radial-gradient(circle at 100% 100%,
        rgba(0, 0, 0, 0.20),
        rgba(0, 0, 0, 0) 55%),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 100% 100%, 100% 100%, 240px 240px;
    background-repeat: no-repeat, no-repeat, repeat;
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 0;
  }
  .day-poster[data-date="23.07"] > *,
  .day-poster[data-date="24.07"] > *,
  .day-poster[data-date="30.07"] > *,
  .day-poster[data-date="31.07"] > * {
    position: relative;
    z-index: 1;
  }

  /* On every PHOTO day + every DARKER non-themed day on phone, flip text
     to cream-tones so it reads against the dark/photo surface. */
  .day-poster[data-date="20.07"] .dp-date-block,
  .day-poster[data-date="24.07"] .dp-date-block,
  .day-poster[data-date="26.07"] .dp-date-block,
  .day-poster[data-date="29.07"] .dp-date-block,
  .day-poster[data-date="22.07"] .dp-date-block,
  .day-poster[data-date="23.07"] .dp-date-block,
  .day-poster[data-date="25.07"] .dp-date-block,
  .day-poster[data-date="27.07"] .dp-date-block,
  .day-poster[data-date="30.07"] .dp-date-block,
  .day-poster[data-date="31.07"] .dp-date-block {
    background: rgba(14,29,51,0.42);
  }
  .day-poster[data-date="20.07"] .dp-number,
  .day-poster[data-date="20.07"] .dp-month,
  .day-poster[data-date="20.07"] .dp-weekday,
  .day-poster[data-date="24.07"] .dp-number,
  .day-poster[data-date="24.07"] .dp-month,
  .day-poster[data-date="24.07"] .dp-weekday,
  .day-poster[data-date="26.07"] .dp-number,
  .day-poster[data-date="26.07"] .dp-month,
  .day-poster[data-date="26.07"] .dp-weekday,
  .day-poster[data-date="29.07"] .dp-number,
  .day-poster[data-date="29.07"] .dp-month,
  .day-poster[data-date="29.07"] .dp-weekday,
  .day-poster[data-date="22.07"] .dp-number,
  .day-poster[data-date="22.07"] .dp-month,
  .day-poster[data-date="22.07"] .dp-weekday,
  .day-poster[data-date="23.07"] .dp-number,
  .day-poster[data-date="23.07"] .dp-month,
  .day-poster[data-date="23.07"] .dp-weekday,
  .day-poster[data-date="25.07"] .dp-number,
  .day-poster[data-date="25.07"] .dp-month,
  .day-poster[data-date="25.07"] .dp-weekday,
  .day-poster[data-date="27.07"] .dp-number,
  .day-poster[data-date="27.07"] .dp-month,
  .day-poster[data-date="27.07"] .dp-weekday,
  .day-poster[data-date="30.07"] .dp-number,
  .day-poster[data-date="30.07"] .dp-month,
  .day-poster[data-date="30.07"] .dp-weekday,
  .day-poster[data-date="31.07"] .dp-number,
  .day-poster[data-date="31.07"] .dp-month,
  .day-poster[data-date="31.07"] .dp-weekday {
    color: var(--cream) !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  }
  .day-poster[data-date="20.07"] .dp-time,
  .day-poster[data-date="24.07"] .dp-time,
  .day-poster[data-date="26.07"] .dp-time,
  .day-poster[data-date="29.07"] .dp-time,
  .day-poster[data-date="22.07"] .dp-time,
  .day-poster[data-date="23.07"] .dp-time,
  .day-poster[data-date="25.07"] .dp-time,
  .day-poster[data-date="27.07"] .dp-time,
  .day-poster[data-date="30.07"] .dp-time,
  .day-poster[data-date="31.07"] .dp-time {
    color: rgba(247,236,206,0.78) !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  }
  .day-poster[data-date="20.07"] .dp-name,
  .day-poster[data-date="20.07"] .dp-name-primary,
  .day-poster[data-date="20.07"] .dp-name-feat,
  .day-poster[data-date="24.07"] .dp-name,
  .day-poster[data-date="24.07"] .dp-name-primary,
  .day-poster[data-date="24.07"] .dp-name-feat,
  .day-poster[data-date="26.07"] .dp-name,
  .day-poster[data-date="26.07"] .dp-name-primary,
  .day-poster[data-date="26.07"] .dp-name-feat,
  .day-poster[data-date="29.07"] .dp-name,
  .day-poster[data-date="29.07"] .dp-name-primary,
  .day-poster[data-date="29.07"] .dp-name-feat,
  .day-poster[data-date="22.07"] .dp-name,
  .day-poster[data-date="22.07"] .dp-name-primary,
  .day-poster[data-date="22.07"] .dp-name-feat,
  .day-poster[data-date="23.07"] .dp-name,
  .day-poster[data-date="23.07"] .dp-name-primary,
  .day-poster[data-date="23.07"] .dp-name-feat,
  .day-poster[data-date="25.07"] .dp-name,
  .day-poster[data-date="25.07"] .dp-name-primary,
  .day-poster[data-date="25.07"] .dp-name-feat,
  .day-poster[data-date="27.07"] .dp-name,
  .day-poster[data-date="27.07"] .dp-name-primary,
  .day-poster[data-date="27.07"] .dp-name-feat,
  .day-poster[data-date="30.07"] .dp-name,
  .day-poster[data-date="30.07"] .dp-name-primary,
  .day-poster[data-date="30.07"] .dp-name-feat,
  .day-poster[data-date="31.07"] .dp-name,
  .day-poster[data-date="31.07"] .dp-name-primary,
  .day-poster[data-date="31.07"] .dp-name-feat {
    color: var(--cream) !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.55);
  }
  .day-poster[data-date="20.07"] .dp-name-connector,
  .day-poster[data-date="20.07"] .dp-name-secondary,
  .day-poster[data-date="24.07"] .dp-name-connector,
  .day-poster[data-date="24.07"] .dp-name-secondary,
  .day-poster[data-date="26.07"] .dp-name-connector,
  .day-poster[data-date="26.07"] .dp-name-secondary,
  .day-poster[data-date="29.07"] .dp-name-connector,
  .day-poster[data-date="29.07"] .dp-name-secondary,
  .day-poster[data-date="22.07"] .dp-name-connector,
  .day-poster[data-date="22.07"] .dp-name-secondary,
  .day-poster[data-date="23.07"] .dp-name-connector,
  .day-poster[data-date="23.07"] .dp-name-secondary,
  .day-poster[data-date="25.07"] .dp-name-connector,
  .day-poster[data-date="25.07"] .dp-name-secondary,
  .day-poster[data-date="27.07"] .dp-name-connector,
  .day-poster[data-date="27.07"] .dp-name-secondary,
  .day-poster[data-date="30.07"] .dp-name-connector,
  .day-poster[data-date="30.07"] .dp-name-secondary,
  .day-poster[data-date="31.07"] .dp-name-connector,
  .day-poster[data-date="31.07"] .dp-name-secondary {
    color: rgba(247,236,206,0.85) !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  }
  .day-poster[data-date="20.07"] .dp-act-link,
  .day-poster[data-date="24.07"] .dp-act-link,
  .day-poster[data-date="26.07"] .dp-act-link,
  .day-poster[data-date="29.07"] .dp-act-link,
  .day-poster[data-date="22.07"] .dp-act-link,
  .day-poster[data-date="23.07"] .dp-act-link,
  .day-poster[data-date="25.07"] .dp-act-link,
  .day-poster[data-date="27.07"] .dp-act-link,
  .day-poster[data-date="30.07"] .dp-act-link,
  .day-poster[data-date="31.07"] .dp-act-link {
    border-bottom-color: rgba(247,236,206,0.20);
  }

  /* Brazil day (28.07) - flag bg cycles through bright yellow, dark
     blue and green, so no single text colour reads cleanly across all
     three bands. Solution: cream text with a heavy dark drop-shadow
     halo that punches through every band - readable on yellow, green
     AND blue without resorting to a pill backdrop. */
  .day-poster.theme-brazil .dp-name,
  .day-poster.theme-brazil .dp-name-primary,
  .day-poster.theme-brazil .dp-name-feat {
    color: var(--cream) !important;
    text-shadow:
      0 0 14px rgba(0,0,0,0.85),
      0 1px 6px rgba(0,0,0,0.90),
      0 0 3px rgba(0,0,0,0.95);
  }
  .day-poster.theme-brazil .dp-name-connector,
  .day-poster.theme-brazil .dp-name-secondary {
    color: rgba(247,236,206,0.92) !important;
    text-shadow: 0 0 10px rgba(0,0,0,0.8), 0 1px 4px rgba(0,0,0,0.85);
  }
  .day-poster.theme-brazil .dp-time {
    color: rgba(247,236,206,0.85) !important;
    text-shadow: 0 0 8px rgba(0,0,0,0.8), 0 1px 4px rgba(0,0,0,0.85);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   BJK MEMBER DISCOUNT + PRESENTED-BY BRANDING (2026-05-17)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Artist popup: Tickets pin + compact BJK perk stacked together ──── */
.sheet-tickets-stack {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
/* Desktop: cancel the legacy `.sheet-tickets-pin { top: 2.4rem }` offset
   so the pin no longer overlaps the perk below it. Stack now positions
   itself; the pin sits at its natural top of the stack. */
@media (min-width: 601px) {
  .sheet-tickets-pin { top: 0; }
}
/* Phone: the locked rule `.sheet-tickets-pin { align-self: flex-start }`
   targeted the pin when it was a direct child of .sheet-header. Now it
   lives inside the stack, so that align-self pulls the pin to the LEFT
   edge of the column instead of staying right-aligned. Move the
   alignment / top-offset to the stack itself, and let the pin inherit
   the stack's flex-end. */
@media (max-width: 600px) {
  /* Phone popup header: stack eyebrow+name FULL WIDTH on top, then the
     tickets row below (Uri 2026-05-26 confirmed: this reads cleaner than
     the squished side-by-side layout). */
  .sheet-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.9rem !important;
  }
  .sheet-tickets-pin { align-self: auto; margin-top: 0; }
  /* Tickets pin + BJK perk on ONE LINE on phone. BJK perk = compact pill
     with 50% on top row and "Berlin Jazz Kultur Mitglied →" below.
     (Uri 2026-05-28) */
  .sheet-tickets-stack {
    flex-direction: row !important;
    align-self: stretch !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    margin-top: 0.4rem;
    gap: 0.4rem;
  }
  .sheet-tickets-stack > .sheet-tickets-pin { flex: 0 0 auto; }
  .sheet-tickets-stack > .sheet-bjk-perk { flex: 0 1 auto; min-width: 0; }
  /* BJK perk on phone — two ROWS inside the pill: 50% on top, full
     "Berlin Jazz Kultur Mitglied →" beneath. (Uri 2026-05-28) */
  .sheet-bjk-perk {
    box-sizing: border-box;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.48rem 0.85rem !important;
    gap: 0.18rem !important;
  }
  .sheet-bjk-perk-pct {
    display: block !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
  }
  .sheet-bjk-perk-lines {
    display: block !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  .sheet-bjk-perk-cta {
    display: block !important;
    font-size: 0.55rem !important;
    letter-spacing: 0.1em !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
  }
  .sheet-tickets-pin {
    font-size: 0.78rem !important;
    padding: 0.7rem 1.05rem !important;
    letter-spacing: 0.18em !important;
  }
}
/* BJK perk CTA — full text shown by default; phone media query swaps to short */
.sheet-bjk-perk-cta--short { display: none; }
.sheet-bjk-perk-cta--full { display: inline; }
.sheet-bjk-perk {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  background: rgba(200,144,42,0.10);
  border: 1px solid rgba(200,144,42,0.38);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.sheet-bjk-perk:hover {
  background: rgba(200,144,42,0.18);
  border-color: var(--brass);
}
.sheet-bjk-perk-pct {
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--brass);
  letter-spacing: 0.01em;
  flex: 0 0 auto;
}
.sheet-bjk-perk-lines {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.sheet-bjk-perk-line {
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.sheet-bjk-perk-cta {
  font-family: var(--font-body);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
}
/* Themed dark popups (ACT / Brazil) keep cream-on-dark */
.artist-sheet.theme-act .sheet-bjk-perk,
.artist-sheet.theme-brazil .sheet-bjk-perk {
  background: rgba(200,144,42,0.14);
  border-color: rgba(200,144,42,0.45);
}
.artist-sheet.theme-act .sheet-bjk-perk-line,
.artist-sheet.theme-brazil .sheet-bjk-perk-line {
  color: var(--cream);
}

/* ── Artist popup: Presented-by strip at sheet bottom ───────────────── */
.sheet-presented-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0.4rem 0 0.6rem;
  padding: 1rem 0 0.4rem;
  border-top: 1px solid rgba(14,29,51,0.10);
}
.sheet-presented-label {
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(14,29,51,0.55);
}
.sheet-presented-logo {
  height: 30px;
  width: auto;
  filter: brightness(0) invert(0.18);
  opacity: 0.86;
}
.sheet-presented-x {
  color: rgba(14,29,51,0.4);
  font-family: var(--font-head);
  font-style: italic;
  font-size: 0.85rem;
}
.artist-sheet.theme-act .sheet-presented-strip,
.artist-sheet.theme-brazil .sheet-presented-strip {
  border-top-color: rgba(247,236,206,0.15);
}
.artist-sheet.theme-act .sheet-presented-label,
.artist-sheet.theme-brazil .sheet-presented-label {
  color: rgba(247,236,206,0.55);
}
.artist-sheet.theme-act .sheet-presented-logo,
.artist-sheet.theme-brazil .sheet-presented-logo {
  filter: brightness(0) invert(1);
  opacity: 0.84;
}
.artist-sheet.theme-act .sheet-presented-x,
.artist-sheet.theme-brazil .sheet-presented-x {
  color: rgba(247,236,206,0.4);
}

/* ── Ticket modal: member row spans full width with a dashed divider
       above. BJK tag on the left, member price on the right - both
       baseline-aligned with the regular price above. ───────────────── */
.ticket-option .ticket-option-price {
  grid-row: 1;
}
.ticket-option .ticket-option-member {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  margin-top: 0.7rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(14,29,51,0.20);
}
.ticket-option .ticket-option-member-tag {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--brass);
  padding: 0.32rem 0.6rem;
  border-radius: 2px;
  white-space: nowrap;
}
.ticket-option .ticket-option-member-amount {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--brass);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media (max-width: 600px) {
  /* Phone ticket modal: shrink the BJK tag + member amount so the row
     stops bleeding past the right edge of the option card (Uri 2026-05-26). */
  .ticket-option .ticket-option-member {
    gap: 0.5rem;
  }
  .ticket-option .ticket-option-member-tag {
    font-size: 0.5rem;
    letter-spacing: 0.14em;
    padding: 0.28rem 0.45rem;
  }
  .ticket-option .ticket-option-member-amount {
    font-size: 1.15rem;
  }
}
.ticket-modal-bjk-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  margin-top: 1rem;
  padding: 0.95rem 1.1rem;
  background: var(--brass);
  color: var(--ink);
  text-decoration: none;
  border-radius: 4px;
  transition: filter 0.25s, transform 0.2s;
}
.ticket-modal-bjk-cta:hover {
  filter: brightness(1.06);
  transform: translateX(2px);
}
.ticket-modal-bjk-line {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ticket-modal-bjk-arrow {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1;
}

/* ── Jam-sessions: the six dates strip ──────────────────────────────── */
/* html-body prefix + !important to beat both .section-dark p and any
   other inherited dark color. Pure white + heavy text-shadow so it's
   legible over the SKY-rooftop photo at every viewport. */
html body .jam-dates {
  margin: 1.6rem 0 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff5d4 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.95), 0 1px 4px rgba(0,0,0,0.8);
}
@media (max-width: 600px) {
  html body .jam-dates {
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    line-height: 1.6;
  }
}

/* ── Jam-sessions: Curator credit ───────────────────────────────────── */
.jam-curator-credit {
  margin: 1.4rem 0 0;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(247,236,206,0.7);
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.jam-curator-credit em {
  display: inline-block;
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5em;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--cream);
  margin-left: 0.35em;
  transform: translateY(0.05em);
}
@media (min-width: 601px) {
  .jam-curator-credit { font-size: 0.78rem; }
  .jam-curator-credit em { font-size: 2em; }
}

/* ── About: BJK × ZigZag partnership line ───────────────────────────── */
.about-partnership-line {
  margin: 2rem 0 1.2rem !important;
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--brass);
  background: rgba(200,144,42,0.05);
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--ink);
}
.about-partnership-line strong {
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
}

/* ── YouTube tap-catcher (phone only) ───────────────────────────────── */
.sheet-video-tap-catcher {
  position: absolute;
  inset: 0;
  z-index: 5;
  appearance: none;
  border: 0;
  background: rgba(10, 15, 29, 0.46);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.sheet-video-tap-catcher::before {
  content: '';
  width: 78px;
  height: 78px;
  border-radius: 50%;
  /* Festival navy so the cream/white play triangle reads clearly
     (Uri 2026-05-26 — cream circle + cream triangle was invisible). */
  background: #0e1d33;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
}
.sheet-video-tap-catcher::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 22px solid #ffffff;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  transform: translateX(5px);
}

/* ── Phone: enlarge the artist popup video frame for thumb safety ───── */
@media (max-width: 600px) {
  .sheet-video {
    margin-left: -1rem;
    margin-right: -1rem;
  }
  .sheet-video-frame {
    border-radius: 0;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   ZIGZAG · Gasometer venue showcase - readability fix (2026-05-22)
   Photo overlay strengthened so the address/directions block stays
   legible on top of a busy concert photo. Also: brand-logo PNG keeps
   its native colors (no invert filter).
   ═══════════════════════════════════════════════════════════════════════ */

/* Brighten back to neutral for the new Gasometer live photo */
.showcase-venue-img {
  filter: brightness(0.78) saturate(1.04) !important;
}

/* Deeper gradient overlay so the lower text area reads */
.showcase-venue-overlay {
  background: linear-gradient(180deg,
    rgba(10,15,29,0.55) 0%,
    rgba(10,15,29,0.55) 30%,
    rgba(10,15,29,0.78) 65%,
    rgba(10,15,29,0.95) 100%
  ) !important;
  inset: 0 !important;
}

.showcase-venue-content { position: relative; z-index: 2; }
.showcase-venue-content > * { position: relative; z-index: 1; }

/* Address/directions block: a clear panel behind the dt/dd so text wins */
.showcase-venue-meta {
  background: rgba(10,15,29,0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(247,236,206,0.18);
  border-radius: 6px;
  padding: 1.5rem 1.8rem !important;
  margin-top: 1.4rem;
}
.section-dark .showcase-venue-meta dt {
  color: #ffd57a !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.85);
}
.section-dark .showcase-venue-meta dd {
  color: #f7ecce !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.85);
  font-weight: 500;
}

/* Body paragraph above the meta - readable on top of the photo */
.showcase-venue-body {
  text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 1px 4px rgba(0,0,0,0.9);
}

/* ── Brand logo PNG keeps its native peach-on-navy colors ────────────── */
/* Transparent ZigZag logo PNG - keep the V5 white-on-dark filter treatment
   so it floats over photos like the Bridge logo did. */

/* ═══════════════════════════════════════════════════════════════════════
   ZIGZAG · 2026-05-22 - logo at 50%, palette flip to dark industrial
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Logo: half the previous footprint everywhere ─────────────────────── */
.hero-cinematic .hero-logo {
  width: clamp(150px, 30vmin, 380px) !important;
  margin-bottom: 1.4rem;
}
.atmo-brand-logo {
  width: min(26vw, 320px) !important;
}
@media (max-width: 760px) {
  .hero-cinematic .hero-logo { width: 46vw !important; }
  .atmo-brand-logo { width: 50vw !important; }
}

/* ── Palette flip: cream parchment → deep industrial navy ────────────── */
body {
  background-color: #0a0f1d !important;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><circle cx='1' cy='1' r='0.6' fill='%23d4a23a' fill-opacity='0.06'/></svg>") !important;
  color: #f4ead2 !important;
}

/* Section-dark used to be transparent + ink text on cream body. Now flip
   text to cream so it reads on the dark body. */
.section-dark,
.section-dark p,
.section-dark .body-text,
.section-dark .lead {
  color: #f4ead2 !important;
}
.section-dark h2,
.section-dark .big-h,
.section-dark h2 em,
.section-dark .section-tag {
  color: #f4ead2 !important;
}
.section-dark .section-tag {
  color: #d4a23a !important;
}
.section-dark .section-rule {
  background: rgba(212,162,58,0.55) !important;
}

/* About: photo sidecar bg + body text on dark */
.about-text p,
.about-text strong { color: #f4ead2 !important; }
.about-text .body-text em { color: #d4a23a !important; }
.about-partnership-line {
  background: rgba(212,162,58,0.10) !important;
  color: #f4ead2 !important;
}
.about-partnership-line strong { color: #f4ead2 !important; }

/* Presented-top + Partners sections that used cream-paper bg: flip dark */
.presented-top-section,
.partners-section {
  background: transparent !important;
}
.presented-top-section h2,
.partners-section h2,
.presented-top-section h2 em,
.presented-top-section p,
.presented-top-section p strong {
  color: #f4ead2 !important;
}
.partner-tier-label { color: #d4a23a !important; }

/* Schedule day cards used a cream parchment look. Flip them to dark cards
   with cream text + brass accents. */
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) {
  background: linear-gradient(180deg, #0e1633 0%, #182245 100%) !important;
  border: 1px solid rgba(212,162,58,0.22) !important;
  color: #f4ead2 !important;
}
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-primary,
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-secondary,
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-connector,
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-feat,
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-time {
  color: #f4ead2 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

/* Footer on dark body */
footer { background: rgba(10,15,29,0.7) !important; color: #f4ead2 !important; }

/* Lineup name hover - re-tune for dark cards */
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .lineup-row:hover .dp-name-primary {
  color: #f5c456 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ZIGZAG · readability pass on the dark palette (2026-05-22)
   ═══════════════════════════════════════════════════════════════════════ */

/* Atmosphere eyebrow date stamp (replaces the second logo) */
.atmo-eyebrow {
  display: inline-block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(0.9rem, 2vw, 1.4rem);
  letter-spacing: 0.6em;
  color: #f4ead2;
  text-shadow: 0 2px 18px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.8);
  padding: 0.6em 1em;
  border-top: 1px solid rgba(212,162,58,0.55);
  border-bottom: 1px solid rgba(212,162,58,0.55);
  text-align: center;
}

/* ── Partner / presenter logos: flip from ink silhouette → cream ────── */
.partner-card img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.92 !important;
}
.partner-card.partner-card--no-invert img { filter: none !important; opacity: 1 !important; }
.partner-card--text { color: #f4ead2 !important; }
.partner-wordmark { color: #f4ead2 !important; }
.partner-name { color: rgba(244,234,210,0.6) !important; }

.presented-logo { filter: brightness(0) invert(1) !important; opacity: 0.96 !important; }
.about-presenters-logo { filter: brightness(0) invert(1) !important; opacity: 0.96 !important; }
.about-presenters-label { color: rgba(244,234,210,0.6) !important; }

/* ── Lineup band names: brighter cream on dark cards ────────────────── */
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-primary {
  color: #fff5d8 !important;
  text-shadow: 0 1px 5px rgba(0,0,0,0.7);
  font-weight: 500;
}
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-secondary,
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-connector,
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-feat {
  color: rgba(255,245,216,0.84) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-time {
  color: #d4a23a !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-day-num,
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-month {
  color: #d4a23a !important;
}
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-weekday {
  color: rgba(244,234,210,0.7) !important;
}
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-label {
  color: #d4a23a !important;
  border-color: rgba(212,162,58,0.4) !important;
}
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .lineup-row {
  border-color: rgba(244,234,210,0.10) !important;
}
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .lineup-row:hover .dp-name-primary {
  color: #ffe6a8 !important;
}

/* Map legend on dark */
.map-legend { background: rgba(10,15,29,0.78) !important; color: #f4ead2 !important; border: 1px solid rgba(212,162,58,0.28) !important; }
.map-legend strong { color: #d4a23a !important; }

/* Hero meta line on dark */
.hero-meta-line { color: #f4ead2 !important; text-shadow: 0 2px 14px rgba(0,0,0,0.7); }

/* Footer brand */
.footer-brand { color: #f4ead2 !important; }
.footer-tag, .footer-col a, .footer-col h4 { color: rgba(244,234,210,0.78) !important; }
.footer-col h4 { color: #d4a23a !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ZIGZAG · readability + day-card retune (2026-05-22 round 5)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Day-poster cards: drop the blue "water" gradient. Warm dark coffee/
       umber instead so the cards POP against the navy body and stop
       reading as one big blue field. Italian / Brazilian / ACT nights
       keep their themed treatments intact. */
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) {
  background: linear-gradient(180deg, #1d1812 0%, #2a2218 60%, #1a1510 100%) !important;
  border: 1px solid rgba(212,162,58,0.32) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
}
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-primary {
  color: #fff5d8 !important;
  font-weight: 600 !important;
  text-shadow:
    0 1px 6px rgba(0,0,0,0.85),
    0 0 2px rgba(0,0,0,0.6) !important;
}
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-secondary,
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-connector,
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-feat {
  color: rgba(255,245,216,0.90) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-time {
  color: #f0b84a !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .lineup-row {
  border-color: rgba(244,234,210,0.12) !important;
}
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .lineup-row:hover .dp-name-primary {
  color: #ffe0a0 !important;
  text-shadow: 0 0 18px rgba(240,184,74,0.45), 0 1px 6px rgba(0,0,0,0.85) !important;
}

/* ── Atmosphere section - stronger scrim + readable eyebrow ─────────── */
.atmosphere-section .atmo-overlay,
.atmosphere-stage .atmo-overlay {
  background: linear-gradient(180deg,
    rgba(10,15,29,0.55) 0%,
    rgba(10,15,29,0.20) 35%,
    rgba(10,15,29,0.30) 55%,
    rgba(10,15,29,0.78) 100%
  ) !important;
}
.atmo-eyebrow {
  background: rgba(10,15,29,0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ── Presented-by section: fully readable cream on dark ─────────────── */
.presented-top-section .section-tag { color: #d4a23a !important; }
.presented-top-section h2,
.presented-top-section h2 em {
  color: #fff5d8 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.presented-top-section .body-text p,
.presented-top-section .body-text p strong {
  color: #f4ead2 !important;
}
.presented-top-section .section-rule {
  background: rgba(212,162,58,0.55) !important;
}

/* ── Hero venue line (sits under the dates) ─────────────────────────── */
.hero-venue-line {
  display: block;
  margin: 0.35rem 0 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  letter-spacing: 0.5em;
  color: #d4a23a;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   ZIGZAG · 2026-05-22 round 6 - KILL all blue/water on lineup cards.
   V5 had per-date navy backgrounds via `.day-poster[data-date]:not(...)`
   with !important. These overrides win on specificity (`body` prefix) +
   source order. All non-themed nights now share a warm coffee/umber tone.
   ═══════════════════════════════════════════════════════════════════════ */

/* Body off navy → warm coffee dark so nothing reads as water */
body {
  background-color: #15110d !important;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><circle cx='1' cy='1' r='0.6' fill='%23d4a23a' fill-opacity='0.05'/></svg>") !important;
}

/* Replace ALL per-date day-card colors with one warm coffee gradient.
   Themed nights (italy / brazil / act) keep their original treatments. */
@media (min-width: 601px) {
  body .day-poster[data-date]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info {
    --day-tint: #1c1812 !important;
    background: linear-gradient(180deg, #1c1812 0%, #2a2118 60%, #16110a 100%) !important;
    background-image: linear-gradient(180deg, #1c1812 0%, #2a2118 60%, #16110a 100%) !important;
    border-color: rgba(212,162,58,0.30) !important;
  }
}
@media (max-width: 600px) {
  body .day-poster[data-date]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info {
    --day-tint: #1c1812 !important;
    background: linear-gradient(180deg, #1c1812 0%, #2a2118 60%, #16110a 100%) !important;
    background-image: linear-gradient(180deg, #1c1812 0%, #2a2118 60%, #16110a 100%) !important;
    border-color: rgba(212,162,58,0.30) !important;
  }
}

/* Lift the band-name texture: same fractal-noise treatment as V5, but
   brighter cream fill + finer/lighter noise so names read CRISP CREAM,
   not muddy gray. */
body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name,
body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-primary,
body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-feat {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(#fff8e0, #fff5d8) !important;
  background-size: 200px 200px, 100% 100% !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  font-weight: 700 !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.85));
}
body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-secondary,
body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-connector {
  color: rgba(255,248,224,0.86) !important;
  -webkit-text-fill-color: rgba(255,248,224,0.86) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.75);
}
body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-time {
  color: #f0b84a !important;
  -webkit-text-fill-color: #f0b84a !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.85);
}
body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-month,
body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-day-num {
  color: #f0b84a !important;
}
body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-weekday {
  color: rgba(255,248,224,0.7) !important;
}
body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-label {
  color: #f0b84a !important;
  border-color: rgba(212,162,58,0.4) !important;
}

/* On phone, some V5 days have photo backgrounds w/ navy gradient overlay
   (22.07 / 25.07 / 28.07 / 29.07). Flatten those to the warm umber too
   so no day reads blue. Themed nights (italy/brazil/act) stay.  */
@media (max-width: 600px) {
  body .day-poster[data-date="22.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="25.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="29.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="26.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) {
    background: linear-gradient(180deg, #1c1812 0%, #2a2118 60%, #16110a 100%) !important;
    background-image: linear-gradient(180deg, #1c1812 0%, #2a2118 60%, #16110a 100%) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   REVERT (2026-05-22 round 7) - undo unrequested body-bg + brown cards.
   Body returns to dark navy. Day cards become CREAM PARCHMENT
   (lighter than the body, per Uri's rule "dark body → lighter cards"),
   names ink-on-cream so they read crisp without any texture tricks.
   Themed Italian / Brazilian / ACT nights untouched.
   ═══════════════════════════════════════════════════════════════════════ */

body {
  background-color: #0a0f1d !important;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><circle cx='1' cy='1' r='0.6' fill='%23d4a23a' fill-opacity='0.06'/></svg>") !important;
}

/* Restore V5 cream parchment palette per day - non-themed only */
@media (min-width: 601px) {
  body .day-poster[data-date="20.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="20.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #f5e2a8 !important; background: #f5e2a8 !important; background-image: none !important; }
  body .day-poster[data-date="22.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="22.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #fae4b4 !important; background: #fae4b4 !important; background-image: none !important; }
  body .day-poster[data-date="23.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="23.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #eaa37a !important; background: #eaa37a !important; background-image: none !important; }
  body .day-poster[data-date="24.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="24.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #fad978 !important; background: #fad978 !important; background-image: none !important; }
  body .day-poster[data-date="25.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="25.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #d9c281 !important; background: #d9c281 !important; background-image: none !important; }
  body .day-poster[data-date="26.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="26.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #ecb284 !important; background: #ecb284 !important; background-image: none !important; }
  body .day-poster[data-date="27.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="27.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #f5cc7a !important; background: #f5cc7a !important; background-image: none !important; }
  body .day-poster[data-date="29.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="29.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #f1bfa2 !important; background: #f1bfa2 !important; background-image: none !important; }
  body .day-poster[data-date="30.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="30.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #cdb178 !important; background: #cdb178 !important; background-image: none !important; }
  body .day-poster[data-date="31.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="31.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #f0c66b !important; background: #f0c66b !important; background-image: none !important; }
  body .day-poster[data-date]:not(.theme-italy):not(.theme-brazil):not(.theme-act) { border-color: rgba(14,29,51,0.18) !important; box-shadow: 0 14px 38px rgba(0,0,0,0.55); }
}
@media (max-width: 600px) {
  body .day-poster[data-date="20.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="20.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #f5e2a8 !important; background: #f5e2a8 !important; background-image: none !important; }
  body .day-poster[data-date="22.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="22.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #fae4b4 !important; background: #fae4b4 !important; background-image: none !important; }
  body .day-poster[data-date="23.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="23.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #eaa37a !important; background: #eaa37a !important; background-image: none !important; }
  body .day-poster[data-date="24.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="24.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #fad978 !important; background: #fad978 !important; background-image: none !important; }
  body .day-poster[data-date="25.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="25.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #d9c281 !important; background: #d9c281 !important; background-image: none !important; }
  body .day-poster[data-date="26.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="26.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #ecb284 !important; background: #ecb284 !important; background-image: none !important; }
  body .day-poster[data-date="27.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="27.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #f5cc7a !important; background: #f5cc7a !important; background-image: none !important; }
  body .day-poster[data-date="29.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="29.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #f1bfa2 !important; background: #f1bfa2 !important; background-image: none !important; }
  body .day-poster[data-date="30.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="30.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #cdb178 !important; background: #cdb178 !important; background-image: none !important; }
  body .day-poster[data-date="31.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  body .day-poster[data-date="31.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #f0c66b !important; background: #f0c66b !important; background-image: none !important; }
  body .day-poster[data-date]:not(.theme-italy):not(.theme-brazil):not(.theme-act) { border-color: rgba(14,29,51,0.18) !important; }
}

/* Band names on cream parchment: solid dark ink, no texture, no white
   fill. This kills the gray fractal-noise look on the lineup. */
body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name,
body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-primary,
body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-feat {
  background-image: none !important;
  color: #0e1d33 !important;
  -webkit-text-fill-color: #0e1d33 !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  filter: none !important;
  text-shadow: none !important;
  font-weight: 600 !important;
}
body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-secondary,
body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-connector {
  color: rgba(14,29,51,0.78) !important;
  -webkit-text-fill-color: rgba(14,29,51,0.78) !important;
  text-shadow: none !important;
}
body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-time {
  color: #8a5e15 !important;
  -webkit-text-fill-color: #8a5e15 !important;
  text-shadow: none !important;
}
body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-month,
body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-day-num,
body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-weekday {
  color: #0e1d33 !important;
  text-shadow: none !important;
}
body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-label {
  color: #8a5e15 !important;
  border-color: rgba(14,29,51,0.30) !important;
}

/* Rolling Stone: keep the designer's 3D-striped wordmark, sit it on a
   cream chip so the strokes read on the dark body (V5 used cream paper
   to solve the same problem). */
.partner-card.partner-card--rolling {
  background: rgba(244,234,210,0.94);
  border-radius: 4px;
  padding: 0.55rem 1rem;
  box-shadow: 0 6px 22px rgba(0,0,0,0.4);
}
.partner-card.partner-card--rolling img {
  filter: none !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   FINAL - DARK VERSION (2026-05-23)
   Navy body, Concrete (Palette A) lineup cards, ink names, SKY em brass,
   atmosphere logo restored. Themed nights untouched.
   ═══════════════════════════════════════════════════════════════════════ */

/* Lineup cards: uniform Concrete on dark navy body */
body .day-poster[data-date]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
body .day-poster[data-date]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info {
  --day-tint: #c8c1b3 !important;
  background: #c8c1b3 !important;
  background-image: none !important;
}
body .day-poster[data-date]:not(.theme-italy):not(.theme-brazil):not(.theme-act) {
  border-color: rgba(14,29,51,0.20) !important;
}

/* SKY em on jam-sessions heading - brass instead of cream */
body #jam-sessions h2 em { color: #d4a23a !important; -webkit-text-fill-color: #d4a23a !important; }

/* Bigger hero meta + venue line (both versions). 2026-05-25 Uri:
   nudge dates line down a bit so it sits closer to "Gasometer · Berlin"
   and a little further below the festival logo. */
.hero-meta-line {
  font-size: clamp(1rem, 2vw, 1.5rem) !important;
  letter-spacing: 0.4em;
  font-weight: 500;
  margin-top: 2rem !important;
}
.hero-venue-line {
  font-size: clamp(0.95rem, 1.7vw, 1.35rem) !important;
  letter-spacing: 0.5em;
  margin-top: 0.3rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   FINAL - LIGHT VERSION (2026-05-23)
   Champagne body, V5 per-date navy lineup cards, V5 fractal-noise
   textured cream band names, ink text on body sections, brass SKY em.
   Themed nights untouched.
   ═══════════════════════════════════════════════════════════════════════ */

html body {
  background-color: #ece2c0 !important;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><circle cx='1' cy='1' r='0.6' fill='%230e1d33' fill-opacity='0.07'/></svg>") !important;
  color: #0e1d33 !important;
}

/* Section-dark text → ink on light body */
html body .section-dark,
html body .section-dark p,
html body .section-dark h2,
html body .section-dark h2 em,
html body .section-dark .lead,
html body .section-dark .big-h,
html body .section-dark .body-text p,
html body .section-dark .body-text p strong {
  color: #0e1d33 !important;
}
html body .section-dark .section-tag { color: #8a5e15 !important; }
html body .section-dark .section-rule { background: rgba(14,29,51,0.25) !important; }

html body .about-partnership-line { background: rgba(212,162,58,0.10) !important; color: #0e1d33 !important; }
html body .about-partnership-line strong { color: #0e1d33 !important; }
html body .about-text .body-text em { color: #8a5e15 !important; }

html body .partner-tier-label { color: #8a5e15 !important; }
html body .partner-card img { filter: brightness(0) invert(0.18) !important; opacity: 0.92 !important; }
html body .partner-card.partner-card--rolling img { filter: none !important; opacity: 1 !important; }
html body .partner-card.partner-card--rolling { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
/* BKM logo (federal eagle + ministry name) needs MORE space than other
   partner marks to stay legible. Let the image break out of the standard
   card height (overflow visible) so the detail reads on both desktop
   and phone (Uri 2026-05-27). */
html body .partner-card.partner-card--bkm {
  overflow: visible !important;
  height: 120px !important;
  grid-column: span 2 !important;
}
html body .partner-card.partner-card--bkm img {
  max-height: 120px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
}
@media (max-width: 600px) {
  html body .partner-card.partner-card--bkm {
    height: 96px !important;
    grid-column: span 2 !important;
  }
  html body .partner-card.partner-card--bkm img {
    max-height: 96px !important;
  }
}

/* EUREF + FRAMED logos render small at the default card height — bump
   them to a similar visual size as the rest (Uri 2026-05-28). */
html body .partner-card.partner-card--large {
  overflow: visible !important;
}
html body .partner-card.partner-card--large img {
  max-height: 110px !important;
  width: auto !important;
  height: auto !important;
}
@media (max-width: 600px) {
  html body .partner-card.partner-card--large img {
    max-height: 82px !important;
  }
}
/* Victor's Places — the source logo has a solid black background, so the
   normal cream filter turns the whole tile into a cream blob. Trick: use
   the image as a LUMINANCE MASK on a cream-coloured block. White text +
   sax + orange "J" all read as light pixels → become cream silhouettes;
   black background reads as 0 luminance → transparent. */
html body .partner-card.partner-card--victors {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  height: 110px !important;
}
html body .partner-card.partner-card--victors::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #f7ecce;
  opacity: 0.92;
  -webkit-mask-image: url('/assets/img/partners/victors-places.webp');
          mask-image: url('/assets/img/partners/victors-places.webp');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
          mask-mode: luminance;
}

/* Rolling Stone wordmark — embossed/3D logo. Bump CONTRAST so the front
   face of the text flattens to a single cream tone (no internal lines),
   while the darker drop-shadow stays distinguishable as a slightly
   darker cream — preserving the 3D feel. */
html body .partner-card.partner-card--rolling img {
  filter:
    grayscale(1)
    contrast(1.7)
    brightness(1.08)
    sepia(0.55)
    hue-rotate(-25deg)
    saturate(1.15) !important;
  opacity: 0.96 !important;
}
html body .presented-logo, html body .about-presenters-logo { filter: brightness(0) invert(0.18) !important; opacity: 0.92 !important; }
html body .about-presenters-label { color: rgba(14,29,51,0.6) !important; }

html body footer { background: rgba(14,29,51,0.06) !important; color: #0e1d33 !important; }
html body .footer-brand { color: #0e1d33 !important; }
html body .footer-tag, html body .footer-col a { color: rgba(14,29,51,0.78) !important; }
html body .footer-col h4 { color: #8a5e15 !important; }
html body .map-legend { background: rgba(247,236,206,0.85) !important; color: #0e1d33 !important; border: 1px solid rgba(14,29,51,0.18) !important; }
html body .map-legend strong { color: #8a5e15 !important; }

/* Hero meta lines stay cream (sit over hero photos) */
html body .hero-meta-line { color: #f4ead2 !important; }
html body .hero-venue-line { color: #d4a23a !important; }

/* Photo-bg sections keep cream text */
html body #jam-sessions h2,
html body #jam-sessions .body-text p,
html body #jam-sessions .body-text p strong,
html body .jam-curator-credit,
html body .jam-curator-credit em,
html body .atmo-title,
html body .atmo-title em,
html body .showcase-venue-name,
html body .showcase-venue-body,
html body .showcase-venue-body strong,
html body .showcase-venue-tag {
  color: #f4ead2 !important;
  -webkit-text-fill-color: #f4ead2 !important;
}
html body .showcase-venue-meta dt { color: #ffd57a !important; }
html body .showcase-venue-meta dd { color: #f4ead2 !important; }
/* SKY em on jam title → brass (not cream) */
html body #jam-sessions h2 em { color: #d4a23a !important; -webkit-text-fill-color: #d4a23a !important; }

/* Lineup cards: V5 per-date navy palette */
@media (min-width: 601px) {
  html body .day-poster[data-date="20.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="20.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #1F3556 !important; background: #1F3556 !important; background-image: none !important; }
  html body .day-poster[data-date="22.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="22.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #2e4565 !important; background: #2e4565 !important; background-image: none !important; }
  html body .day-poster[data-date="23.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="23.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #08152b !important; background: #08152b !important; background-image: none !important; }
  html body .day-poster[data-date="24.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="24.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #3d5d8a !important; background: #3d5d8a !important; background-image: none !important; }
  html body .day-poster[data-date="25.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="25.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #1F3556 !important; background: #1F3556 !important; background-image: none !important; }
  html body .day-poster[data-date="26.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="26.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #154b86 !important; background: #154b86 !important; background-image: none !important; }
  html body .day-poster[data-date="27.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="27.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #0e1d33 !important; background: #0e1d33 !important; background-image: none !important; }
  html body .day-poster[data-date="29.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="29.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #2e4565 !important; background: #2e4565 !important; background-image: none !important; }
  html body .day-poster[data-date="30.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="30.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #154b86 !important; background: #154b86 !important; background-image: none !important; }
  html body .day-poster[data-date="31.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="31.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #2e4565 !important; background: #2e4565 !important; background-image: none !important; }
}

/* Band names: V5 fractal-noise textured cream */
html body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name,
html body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-primary,
html body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-feat {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(#ffffff, #ffffff) !important;
  background-size: 240px 240px, 100% 100% !important;
  background-repeat: repeat, no-repeat !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  filter: none !important;
  text-shadow: none !important;
  font-weight: 600 !important;
}
html body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-secondary,
html body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-connector {
  color: rgba(247,236,206,0.86) !important;
  -webkit-text-fill-color: rgba(247,236,206,0.86) !important;
}
html body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-time,
html body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-month,
html body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-day-num,
html body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-weekday {
  color: rgba(247,236,206,0.86) !important;
  -webkit-text-fill-color: rgba(247,236,206,0.86) !important;
}
html body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-label {
  color: #d4a23a !important;
  border-color: rgba(212,162,58,0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT VERSION · v2 (2026-05-23)
   - Body champagne → CREAM (#f7ecce)
   - Section tags + dividers: cool deep navy (no more brass-warm-brown on cream)
   - Presented-top-section explicit ink (it's not .section-dark)
   - Water ripples killed on lineup cards
   - Phone-only artist-photo per-date backgrounds flattened to navy
   - All text contrast audited: ink/navy on cream, cream on photo-bg
   ═══════════════════════════════════════════════════════════════════════ */

html body {
  background-color: #f7ecce !important;
}

/* Presented-top-section - NOT .section-dark, needs its own overrides */
html body .presented-top-section h2,
html body .presented-top-section h2 em,
html body .presented-top-section .body-text p,
html body .presented-top-section .body-text p strong,
html body .presented-top-section .body-text {
  color: #0a1838 !important;
  -webkit-text-fill-color: #0a1838 !important;
  text-shadow: none !important;
}
html body .presented-top-section .section-tag { color: #0a1838 !important; }
html body .presented-top-section .section-rule { background: rgba(10,24,56,0.45) !important; }

html body .partners-section h2,
html body .partners-section h2 em,
html body .partners-section > .wrap > p {
  color: #0a1838 !important;
}
html body .partner-tier-label { color: #0a1838 !important; }

/* Section-tags + dividers across the site → cool blue (not warm brass) */
html body .section-dark .section-tag,
html body #about .section-tag,
html body #venues-map .section-tag {
  color: #0a1838 !important;
}
html body .section-dark .section-rule { background: rgba(10,24,56,0.45) !important; }

/* All h2 / .big-h on body sections → strong cool navy on cream */
html body #about h2,
html body #about h2 em,
html body #venues-map h2,
html body #venues-map h2 em,
html body #venues-map .lead {
  color: #0a1838 !important;
  -webkit-text-fill-color: #0a1838 !important;
}

/* About body paragraphs - solid ink + cool brass-darker em */
html body .about-text p,
html body .about-text p strong { color: #0a1838 !important; }
html body .about-text .body-text em { color: #0a1838 !important; font-style: italic; }

/* Partnership line → cool blue tint background, ink text */
html body .about-partnership-line {
  background: rgba(10,24,56,0.06) !important;
  border-left-color: #0a1838 !important;
  color: #0a1838 !important;
}
html body .about-partnership-line strong { color: #0a1838 !important; }

/* About presenters label */
html body .about-presenters-label { color: rgba(10,24,56,0.55) !important; }

/* Footer */
html body footer { background: rgba(10,24,56,0.06) !important; color: #0a1838 !important; }
html body .footer-brand { color: #0a1838 !important; }
html body .footer-tag,
html body .footer-col a { color: rgba(10,24,56,0.78) !important; }
html body .footer-col h4 { color: #0a1838 !important; }
html body .footer-bottom { color: rgba(10,24,56,0.65) !important; }

/* Map legend */
html body .map-legend {
  background: rgba(247,236,206,0.92) !important;
  color: #0a1838 !important;
  border: 1px solid rgba(10,24,56,0.20) !important;
}
html body .map-legend strong { color: #0a1838 !important; }

/* Nav bar text on light body */
html body #nav.scrolled .nav-links a,
html body.solid-nav .nav-links a { color: rgba(10,24,56,0.78) !important; text-shadow: none !important; }
html body #nav.scrolled .nav-brand,
html body.solid-nav .nav-brand { color: #0a1838 !important; text-shadow: none !important; }

/* KILL the water-ripple SVG turbulence pseudo-elements on all non-themed days */
html body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info::after {
  display: none !important;
  background: none !important;
  content: none !important;
}

/* Phone-only V5 artist-photo day backgrounds → flatten to navy palette */
@media (max-width: 600px) {
  html body .day-poster[data-date="20.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="20.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #1F3556 !important; background: #1F3556 !important; background-image: none !important; }
  html body .day-poster[data-date="22.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="22.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #2e4565 !important; background: #2e4565 !important; background-image: none !important; }
  html body .day-poster[data-date="25.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="25.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #1F3556 !important; background: #1F3556 !important; background-image: none !important; }
  html body .day-poster[data-date="26.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="26.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #154b86 !important; background: #154b86 !important; background-image: none !important; }
  html body .day-poster[data-date="29.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="29.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info { --day-tint: #2e4565 !important; background: #2e4565 !important; background-image: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   2026-05-23 - Programm bronze + logo drop animation (both versions)
   ═══════════════════════════════════════════════════════════════════════ */

/* PROGRAMM heading: bronze (keep the existing sun-glint animation untouched) */
html body .section-photo-programm {
  color: #d4a23a !important;
  -webkit-text-fill-color: #d4a23a !important;
  text-shadow: 0 4px 28px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5);
}

/* Hero logo "drop from above" animation. The outer .hero-logo has
   `transform: none !important` from the cinematic CSS, so animate the
   inner .brand-logo wrapper instead. */
@keyframes logoDropFromAbove {
  0%   { transform: translateY(-130vh); opacity: 0; }
  55%  { transform: translateY(14px);   opacity: 1; }
  72%  { transform: translateY(-8px); }
  85%  { transform: translateY(4px); }
  100% { transform: translateY(0);      opacity: 1; }
}
.hero-cinematic .hero-logo .brand-logo {
  animation: logoDropFromAbove 1.6s cubic-bezier(0.5, 0.05, 0.3, 1.0) 0.2s both;
}
@media (prefers-reduced-motion: reduce) {
  .hero-cinematic .hero-logo .brand-logo { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   LIGHT VERSION - kill fractal-noise on lineup band names (2026-05-23)
   Card backgrounds keep their subtle texture; names go solid cream so
   the same noise isn't being applied twice (cards + glyphs).
   ═══════════════════════════════════════════════════════════════════════ */

html body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name,
html body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-primary,
html body .day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-feat {
  background-image: none !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  color: #fff5d8 !important;
  -webkit-text-fill-color: #fff5d8 !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}


/* ═══════════════════════════════════════════════════════════════════════
   2026-05-23 - Hero logo LEAN animation (replaces drop)
   Anticipation back-left, then leans 25° right, holds, overshoots and
   settles upright. Pivots near the bottom so it feels like a tipping
   sign rather than a spinning logo.
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes logoLeanAndBack {
  0%   { transform: rotate(0deg); }
  12%  { transform: rotate(-5deg); }
  45%  { transform: rotate(25deg); }
  62%  { transform: rotate(25deg); }
  80%  { transform: rotate(-4deg); }
  92%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}
.hero-cinematic .hero-logo .brand-logo {
  animation: logoLeanAndBack 1.7s cubic-bezier(0.5, 0.05, 0.35, 1.0) 0.25s both !important;
  transform-origin: 50% 85%;
}
@media (prefers-reduced-motion: reduce) {
  .hero-cinematic .hero-logo .brand-logo { animation: none !important; }
}



/* ═══════════════════════════════════════════════════════════════════════
   2026-05-23 - Logo animation refined: ZIG then ZAG, nothing else.
   One lean right, one move back. No anticipation, no overshoot, no settle.
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes logoLeanAndBack {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(25deg); }
  100% { transform: rotate(0deg); }
}
.hero-cinematic .hero-logo .brand-logo {
  animation: logoLeanAndBack 1.6s ease-in-out 0.3s both !important;
}



/* 2026-05-23 - Logo lean animation: tighter (15°), faster (1.0s) */
@keyframes logoLeanAndBack {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(15deg); }
  100% { transform: rotate(0deg); }
}
.hero-cinematic .hero-logo .brand-logo {
  animation: logoLeanAndBack 1s ease-in-out 0.15s both !important;
}



/* 2026-05-23 - Bigger hero logo (was too small for the new artwork) */
.hero-cinematic .hero-logo {
  width: clamp(260px, 46vmin, 600px) !important;
}
@media (max-width: 760px) {
  .hero-cinematic .hero-logo { width: 70vw !important; }
}



/* 2026-05-23 - hero logo a notch bigger */
.hero-cinematic .hero-logo {
  width: clamp(320px, 54vmin, 720px) !important;
}
@media (max-width: 760px) {
  .hero-cinematic .hero-logo { width: 82vw !important; }
}

/* 2026-05-23 - hero logo +15% (Uri request) */
.hero-cinematic .hero-logo {
  width: clamp(368px, 62vmin, 828px) !important;
}
@media (max-width: 760px) {
  .hero-cinematic .hero-logo { width: 94vw !important; }
}



/* ═══════════════════════════════════════════════════════════════════════
   2026-05-23 - Virtual tour CTA + full-screen modal (3DVista embed)
   ═══════════════════════════════════════════════════════════════════════ */

.venue-tour-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.6rem;
  padding: 0.95rem 1.6rem;
  background: linear-gradient(180deg, #e8b048 0%, #c8902a 55%, #9a6d20 100%);
  color: #0e1d33;
  text-decoration: none;
  font-family: var(--font-body, "Inter", sans-serif);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.78rem;
  border-radius: 4px;
  border: 1px solid rgba(255,224,160,0.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 6px 18px rgba(0,0,0,0.5);
  transition: filter 0.2s, transform 0.2s, box-shadow 0.25s;
}
.venue-tour-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 10px 24px rgba(0,0,0,0.55);
}
.venue-tour-cta:active { transform: translateY(1px); }
.venue-tour-cta-arrow {
  font-family: var(--font-display, "Bebas Neue", sans-serif);
  font-size: 1.1rem;
  letter-spacing: 0;
}

/* Full-screen tour modal */
.tour-modal {
  position: fixed; inset: 0;
  z-index: 9990;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.tour-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.tour-modal-iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
  background: #000;
}
.tour-modal-close {
  position: fixed;
  top: 1.1rem; right: 1.1rem;
  z-index: 9992;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(247,236,206,0.32);
  background: rgba(10,15,29,0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #f4ead2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.tour-modal-close:hover { background: rgba(212,162,58,0.5); transform: scale(1.05); }
.tour-modal-close svg { width: 22px; height: 22px; }
.tour-modal-label {
  position: fixed;
  top: 1.4rem; left: 1.5rem;
  z-index: 9992;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #d4a23a;
  background: rgba(10,15,29,0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 0.65rem 0.95rem;
  border-radius: 4px;
  border: 1px solid rgba(212,162,58,0.32);
}
@media (max-width: 600px) {
  .tour-modal-label { font-size: 0.58rem; padding: 0.5rem 0.7rem; }
  .tour-modal-close { width: 42px; height: 42px; }
  .venue-tour-cta { width: 100%; justify-content: center; }
}



/* 2026-05-23 - Two-CTA layout: FORUM (primary brass) + SKY (ghost) */
.venue-tour-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.6rem;
}
.venue-tour-cta { margin-top: 0 !important; }
.venue-tour-cta--ghost {
  background: transparent !important;
  border: 1px solid rgba(212,162,58,0.6) !important;
  color: #f4ead2 !important;
  box-shadow: none !important;
}
.venue-tour-cta--ghost:hover {
  background: rgba(212,162,58,0.12) !important;
  border-color: #d4a23a !important;
  box-shadow: none !important;
  filter: none !important;
}
@media (max-width: 600px) {
  .venue-tour-ctas { flex-direction: column; }
  .venue-tour-cta { width: 100%; }
}

html body .venue-tour-cta--ghost {
  color: #0a1838 !important;
  border-color: rgba(10,24,56,0.55) !important;
}
html body .venue-tour-cta--ghost:hover {
  background: rgba(10,24,56,0.08) !important;
  border-color: #0a1838 !important;
}


/* 2026-05-23 - Inline interactive 360° tour panel inside venue showcase */
.venue-tour-inline {
  margin-top: 2rem;
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(247,236,206,0.10);
}
.venue-tour-iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
  background: #000;
}
.venue-tour-tabs {
  position: absolute;
  top: 0.85rem; left: 0.85rem; right: 0.85rem;
  z-index: 3;
  display: flex;
  gap: 0.5rem;
}
.venue-tour-tab {
  appearance: none;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #f4ead2;
  background: rgba(10,15,29,0.65);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(247,236,206,0.22);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.venue-tour-tab:hover { background: rgba(212,162,58,0.45); color: #f4ead2; border-color: rgba(212,162,58,0.65); }
.venue-tour-tab.is-active {
  background: var(--brass, #d4a23a);
  color: #0e1d33;
  border-color: var(--brass, #d4a23a);
}
.venue-tour-expand {
  margin-left: auto;
  appearance: none;
  width: 36px; height: 36px;
  background: rgba(10,15,29,0.65);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(247,236,206,0.22);
  border-radius: 50%;
  color: #f4ead2;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.venue-tour-expand:hover { background: rgba(212,162,58,0.45); }
.venue-tour-expand svg { width: 16px; height: 16px; }

@media (max-width: 600px) {
  .venue-tour-inline { aspect-ratio: 4 / 3; margin-top: 1.4rem; }
  .venue-tour-tab { font-size: 0.55rem; padding: 0.45rem 0.8rem; }
}


/* ═══════════════════════════════════════════════════════════════════════
   2026-05-23 - Mock A (Ken-Burns atmosphere) + Mock C (pinned SKY hero)
   Light version only. Restrained - one of each, placed thoughtfully.
   ═══════════════════════════════════════════════════════════════════════ */

/* Mock A - gentle Ken-Burns on the atmosphere SKY photo */
.atmosphere-stage .atmo-img {
  animation: kenBurns 32s ease-in-out infinite alternate;
  transform-origin: 40% 55%;
  will-change: transform;
}
@keyframes kenBurns {
  0%   { transform: scale(1.05) translate(0, 0); }
  100% { transform: scale(1.20) translate(-4%, -2%); }
}
@media (prefers-reduced-motion: reduce) {
  .atmosphere-stage .atmo-img { animation: none; }
}

/* Mock C - pinned SKY photo with scrolling cream overlay */
.pinned-section {
  position: relative;
  min-height: 230vh;
  background: transparent;
}
.pinned-section .pinned-photo {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.pinned-section .pinned-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.pinned-section .pinned-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10,15,29,0.05) 0%,
    rgba(10,15,29,0.15) 60%,
    rgba(10,15,29,0.55) 100%);
  pointer-events: none;
}
.pinned-section .pinned-photo-caption {
  position: absolute;
  bottom: 7vh; left: 7vw;
  color: #f4ead2;
  text-shadow: 0 2px 22px rgba(0,0,0,0.7);
  z-index: 2;
  max-width: 720px;
}
.pinned-section .pinned-photo-caption .eyebrow {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(0.7rem, 1.1vw, 0.95rem);
  letter-spacing: 0.5em;
  color: #d4a23a;
  margin-bottom: 0.7rem;
}
.pinned-section .pinned-photo-caption h2 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  margin: 0;
  line-height: 1.0;
  letter-spacing: -0.01em;
}
.pinned-section .pinned-photo-caption h2 em {
  color: #d4a23a;
  font-style: italic;
}

.pinned-section .pinned-overlay {
  position: relative;
  margin-top: -40vh;
  background: #f7ecce;
  color: #0e1d33;
  padding: 14vh 8vw 18vh;
  box-shadow: 0 -40px 80px rgba(0,0,0,0.30);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
.pinned-section .pinned-overlay .eyebrow {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.5em;
  color: #0a1838;
  margin-bottom: 0.7rem;
}
.pinned-section .pinned-overlay h3 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 3.4rem);
  margin: 0 0 1.4rem;
  color: #0a1838;
  letter-spacing: -0.005em;
  max-width: 760px;
}
.pinned-section .pinned-overlay h3 em {
  color: #8a5e15;
  font-style: italic;
}
.pinned-section .pinned-overlay p {
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 760px;
  color: rgba(10,24,56,0.85);
  margin: 0 0 1.4rem;
}
.pinned-section .pinned-overlay p strong { color: #0a1838; }

@media (max-width: 600px) {
  .pinned-section { min-height: 200vh; }
  .pinned-section .pinned-overlay {
    margin-top: -28vh;
    padding: 10vh 1.4rem 14vh;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
  }
  .pinned-section .pinned-photo-caption { bottom: 12vh; left: 1.4rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   2026-05-23 round 2 - Scroll-driven panorama reveal (atmosphere + program
   header), bigger atmo logo, bigger tour iframe, Ella Radio link block.
   ═══════════════════════════════════════════════════════════════════════ */

/* Cancel the earlier Ken-Burns rule - we're swapping for pano scroll */
.atmosphere-stage .atmo-img--pano { animation: none !important; transform: none !important; }

/* Atmosphere panorama: full-bleed, position controlled by JS via translateX */
.atmosphere-stage .atmo-img--pano {
  position: absolute;
  top: 50%; left: 0;
  height: 100%;
  width: auto;
  max-width: none;
  transform: translate(0, -50%);
  will-change: transform;
}

/* Atmosphere brand logo +15% */
.atmo-brand-logo {
  width: min(30vw, 368px) !important;
}
@media (max-width: 760px) {
  .atmo-brand-logo { width: 58vw !important; }
}

/* Schedule PROGRAMM panorama header - panorama image controlled by JS */
.section-photo-header--pano {
  position: relative;
  overflow: hidden;
}
.section-photo-pano {
  position: absolute;
  top: 50%; left: 0;
  height: 100%;
  width: auto;
  max-width: none;
  transform: translate(0, -50%);
  will-change: transform;
  z-index: 0;
}
.section-photo-header--pano > .section-photo-overlay,
.section-photo-header--pano > .section-photo-content { position: relative; z-index: 2; }
.section-photo-header--pano > .section-photo-overlay { z-index: 1; }

/* Bigger 3D tour panel inside venue showcase */
.venue-tour-inline {
  max-width: 920px !important;
  aspect-ratio: 16 / 9 !important;
}
@media (max-width: 600px) {
  .venue-tour-inline { aspect-ratio: 4 / 3 !important; }
}

/* Ella Radio "Tune in" link block - visible after the partnership line */
.about-ella-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1rem 0 0.4rem;
  padding: 0.65rem 1.1rem;
  background: rgba(10,24,56,0.06) !important;
  border: 1px solid rgba(10,24,56,0.18) !important;
  border-radius: 4px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #0a1838 !important;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.about-ella-link:hover {
  background: rgba(10,24,56,0.12) !important;
  transform: translateY(-1px);
}
.about-ella-link strong { color: #8a5e15; font-weight: 700; }
.about-ella-link-arrow { font-family: 'Inter', sans-serif; font-size: 1rem; letter-spacing: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   2026-05-23 round 3 - cancel pano-scroll experiments, force Ella link
   readability, restore single-photo atmosphere + program header.
   ═══════════════════════════════════════════════════════════════════════ */

/* Ella Radio link - readability force: dark ink on cream chip, ALWAYS */
html body .about-ella-link,
html body .about-text .about-ella-link,
html body .about-text .about-ella-link strong,
html body .about-text .about-ella-link span {
  color: #0a1838 !important;
  -webkit-text-fill-color: #0a1838 !important;
}
html body .about-ella-link strong { color: #8a5e15 !important; -webkit-text-fill-color: #8a5e15 !important; }
html body .about-ella-link {
  background: rgba(247,236,206,0.65) !important;
  border: 1px solid rgba(10,24,56,0.25) !important;
  text-decoration: none !important;
}

/* Cancel earlier pano-scroll CSS - single-photo treatments win now.
   NOTE: no `transform` here - the slow-zoom keyframe owns transform. */
.atmosphere-stage .atmo-img,
.atmosphere-stage .atmo-img.active {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  top: auto !important; left: auto !important;
}
.section-photo-header-programm {
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   2026-05-23 round 4 - Lineup section gets the outdoor gasometer
   structure as background (cherry blossoms exterior). Subtle cream
   scrim keeps the navy day cards crisp on top.
   ═══════════════════════════════════════════════════════════════════════ */

html body .schedule-section {
  background-image:
    linear-gradient(180deg, rgba(247,236,206,0.40) 0%, rgba(247,236,206,0.55) 50%, rgba(247,236,206,0.40) 100%),
    url('../img/gasometer-summer-blossoms.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
@media (min-width: 900px) {
  html body .schedule-section { background-attachment: scroll, fixed !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   2026-05-23 round 5
   - About title <em> ("Berlins neues Jazzfestival") → brass
   - Lineup section bg = same drone-dusk photo as PROGRAMM header so the
     two flow as one continuous photo (no break between header + cards)
   ═══════════════════════════════════════════════════════════════════════ */

html body #about h2 em,
html body .about-text h2 em,
html body .section-dark h2 em {
  color: #d4a23a !important;
  -webkit-text-fill-color: #d4a23a !important;
  font-style: italic;
}

html body .schedule-section {
  background-image:
    linear-gradient(180deg, rgba(247,236,206,0.30) 0%, rgba(247,236,206,0.55) 40%, rgba(247,236,206,0.40) 100%),
    url('../img/gasometer-drone-dusk.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   2026-05-23 round 6
   - Schedule section: kill top padding so PROGRAMM header is FLUSH against
     the cream presented section above (no gap, no bg-leak)
   - Update lineup bg to summer-blossoms (matches new PROGRAMM header bg)
   - Atmosphere logo: another +20% bigger
   ═══════════════════════════════════════════════════════════════════════ */

html body .schedule-section {
  padding-top: 0 !important;
  margin-top: 0 !important;
  background-image:
    linear-gradient(180deg, rgba(247,236,206,0.30) 0%, rgba(247,236,206,0.55) 40%, rgba(247,236,206,0.40) 100%),
    url('../img/gasometer-summer-blossoms.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.section-photo-header-programm { margin-top: 0 !important; }

/* Atmosphere brand logo +20% on top of previous +15% (≈ +38% total over baseline) */
html body .atmo-brand-logo {
  width: min(36vw, 442px) !important;
}
@media (max-width: 760px) {
  html body .atmo-brand-logo { width: 70vw !important; }
}

/* Editorial hint under the 3D tour: drag + walk instructions */
.venue-tour-hint {
  margin: 0.9rem 0 0;
  max-width: 920px;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(10,24,56,0.62);
  letter-spacing: 0.02em;
}

/* Atmosphere brand logo - bigger again */
html body .atmo-brand-logo {
  width: min(44vw, 540px) !important;
}
@media (max-width: 760px) {
  html body .atmo-brand-logo { width: 82vw !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Venue tour cue - ABOVE the iframe, punchy + readable on the dark photo
   ═══════════════════════════════════════════════════════════════════════ */
.venue-tour-cue {
  text-align: center;
  margin: 2.2rem auto 1.1rem;
  max-width: 920px;
}
.venue-tour-call {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  color: #d4a23a !important;
  margin: 0 0 0.45rem;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
  letter-spacing: -0.01em;
}
.venue-tour-instr {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f4ead2 !important;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}
/* Hide the old below-iframe hint if it survives in any layout */
.venue-tour-hint { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Jam-sessions - brighter photo + parallax reveal (photo stays as you
   scroll, more of the image shows over the section's length)
   ═══════════════════════════════════════════════════════════════════════ */
html body #jam-sessions {
  background-attachment: scroll !important;
  background-position: center calc(20% + var(--p-shift, 0px)) !important;
  background-size: cover !important;
  min-height: 92vh;
}
html body #jam-sessions .section-photo-overlay-dark,
html body #jam-sessions .section-photo-overlay {
  background: linear-gradient(180deg,
    rgba(10,15,29,0.10) 0%,
    rgba(10,15,29,0.22) 45%,
    rgba(10,15,29,0.55) 100%) !important;
}
/* Stronger shadows so text stays crisp on the brighter photo */
html body #jam-sessions h2,
html body #jam-sessions h2 em,
html body #jam-sessions .body-text p,
html body #jam-sessions .body-text p strong,
html body #jam-sessions .jam-curator-credit,
html body #jam-sessions .jam-curator-credit em {
  text-shadow:
    0 2px 18px rgba(0,0,0,0.9),
    0 1px 4px rgba(0,0,0,0.95),
    0 0 3px rgba(0,0,0,0.7) !important;
}
/* background-attachment removed everywhere — JS-driven parallax handles
   the pan via --p-shift, works on iOS Safari too. */

/* ═══════════════════════════════════════════════════════════════════════
   Atmosphere bg - slow zoom-in. Earlier rule pinned `transform: none`;
   higher-specificity override here re-enables the animation.
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes atmoSlowZoom {
  0%   { transform: scale(1.02) translate(0, 0); }
  100% { transform: scale(1.35) translate(-3%, -2%); }
}
html body .atmosphere-stage .atmo-img,
html body .atmosphere-stage .atmo-img.active {
  display: none !important;
}
html body .atmosphere-section,
html body .atmosphere-stage {
  background-image: url('../img/gasometer-crowd.jpg') !important;
  background-attachment: fixed !important;
  background-position: center 40% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
@media (max-width: 900px) {
  html body .atmosphere-section,
  html body .atmosphere-stage {
    background-attachment: scroll !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .atmosphere-stage .atmo-img { animation: none !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Venue tour BUBBLE - 3D brass pill, high-class, opens fullscreen tour
   ═══════════════════════════════════════════════════════════════════════ */
.venue-tour-bubble {
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  margin: 2.4rem auto 1.1rem;
  padding: 0.85rem 1.6rem 0.85rem 0.85rem;
  background:
    radial-gradient(140% 100% at 30% 0%, rgba(255,238,180,0.45) 0%, transparent 60%),
    linear-gradient(180deg, #f0c265 0%, #d8a440 45%, #9a6d20 100%);
  color: #1a1310 !important;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid rgba(255,232,170,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    inset 0 0 28px rgba(255,224,160,0.25),
    0 4px 10px rgba(0,0,0,0.18),
    0 14px 36px rgba(0,0,0,0.55),
    0 1px 3px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.2s ease;
  position: relative;
  isolation: isolate;
}
.venue-tour-bubble:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    inset 0 0 34px rgba(255,232,170,0.32),
    0 6px 14px rgba(0,0,0,0.22),
    0 20px 44px rgba(0,0,0,0.62),
    0 1px 3px rgba(0,0,0,0.4);
}
.venue-tour-bubble:active { transform: translateY(1px); }
.venue-tour-bubble-orb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background:
    radial-gradient(120% 100% at 30% 30%, rgba(255,255,255,0.55) 0%, transparent 55%),
    linear-gradient(180deg, #1a2645 0%, #0a0f1d 100%);
  color: #f4ead2;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 1px 3px rgba(0,0,0,0.5);
}
.venue-tour-bubble-orb svg { width: 22px; height: 22px; }
.venue-tour-bubble-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}
.venue-tour-bubble-line1 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0;
  color: #1a1310;
}
.venue-tour-bubble-line2 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(26,19,16,0.72);
  margin-top: 0.32rem;
}
.venue-tour-bubble-arrow {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0;
  color: #1a1310;
}
/* Wrap so the bubble sits centered above the iframe */
.venue-tour-bubble {
  align-self: center;
}
.showcase-venue-content {
  /* allow the bubble + tour to lay out cleanly under the meta */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.showcase-venue-content > .venue-tour-bubble { align-self: center; }
.showcase-venue-content > .venue-tour-inline { align-self: center; }

/* 2026-05-23 - About section Ella logo bigger so the tagline text is readable.
   Only the Ella one - zigzag-logo next to it is untouched. */
html body .about-presenters-logo-ella { height: 130px !important; }
@media (max-width: 600px) {
  /* 130px height was making the Ella logo ~217px wide, which exceeded the
     phone viewport (right edge at 409 on 390 viewport) and let users swipe
     horizontally. Cap the size + ensure max-width clamps the rendered width
     so nothing escapes the viewport (Uri 2026-05-26 phone fix). */
  html body .about-presenters-logo-ella { height: 70px !important; max-width: 35vw !important; object-fit: contain !important; }
  html body .about-presenters-logo { max-width: 35vw !important; object-fit: contain !important; }
}

/* 2026-05-23 - Logo aspect changed to 2.04 (much wider/thinner).
   Scale both placements ~75% bigger so the on-page footprint matches/exceeds
   the old aspect-1.23 logo's vertical presence. */
.hero-cinematic .hero-logo {
  width: clamp(368px, 62vmin, 828px) !important;
}
@media (max-width: 760px) {
  .hero-cinematic .hero-logo { width: 94vw !important; }
}
html body .atmo-brand-logo {
  width: min(44vw, 540px) !important;
}
@media (max-width: 760px) {
  html body .atmo-brand-logo { width: 82vw !important; }
}

/* 2026-05-23 - Hide the 3DVista right-side location menu by widening the
   iframe ~32% beyond its container (which has overflow:hidden), so the right
   menu strip falls outside the visible area. Same trick for the fullscreen
   modal iframe. */
.venue-tour-inline .venue-tour-iframe,
.tour-modal .tour-modal-iframe {
  width: 132% !important;
  height: 119% !important;
  inset: 0 auto auto 0 !important;
}
.tour-modal { overflow: hidden; }

/* 2026-05-23 - Artist sheet presented-by logos doubled (Uri: 30→60px). */
html body .sheet-presented-logo { height: 60px !important; }
@media (max-width: 600px) {
  /* Phone: smaller presented-by strip in popup (Uri 2026-05-28). */
  html body .sheet-presented-logo { height: 38px !important; }
}

/* 2026-05-23 - Brass "Berlin" em in the map-section heading. */
html body #venues-map .big-h em {
  color: #d4a23a !important;
  -webkit-text-fill-color: #d4a23a !important;
  background: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   2026-05-23 - MOBILE FIXES (post-checkup)
   1. Tour iframe right-menu + bottom-bar fully clipped on phone widths
   2. Tour tab labels shrunk so all three + expand fit on 390px
   3. Atmosphere section tight against schedule above
   4. Italian flag scrim lightened so the colours show through
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  /* Tour clip: bigger on mobile because the container is narrower */
  .venue-tour-inline .venue-tour-iframe,
  .tour-modal .tour-modal-iframe {
    width: 175% !important;
    height: 128% !important;
  }
  /* Three tabs fit + expand button on 390px screens */
  .venue-tour-tabs { gap: 0.3rem !important; top: 0.6rem !important; left: 0.6rem !important; right: 0.6rem !important; }
  .venue-tour-tab { font-size: 0.48rem !important; padding: 0.4rem 0.6rem !important; letter-spacing: 0.18em !important; }
  .venue-tour-expand { width: 30px !important; height: 30px !important; }
  .venue-tour-expand svg { width: 13px !important; height: 13px !important; }
  /* Trim empty cream paper above the atmosphere photo */
  html body .schedule-section { padding-bottom: 1rem !important; }
  html body .atmosphere-section { margin: 0.6rem 0 0 !important; }
}

/* Italian flag scrim - was 0.55, too heavy. 0.32 keeps text legible while
   letting the green/white/red read clearly. */
.day-poster.theme-italy .dp-info {
  background:
    linear-gradient(rgba(0,0,0,0.32), rgba(0,0,0,0.32)),
    linear-gradient(90deg,
      #008c45 0%, #008c45 33.33%,
      #f4f5f0 33.33%, #f4f5f0 66.66%,
      #cd212a 66.66%, #cd212a 100%) !important;
}

/* 2026-05-23 - Belt-and-suspenders: cover the 3DVista bottom info bar with
   a solid overlay strip on the container itself. Height-clip doesn't reach it
   because 3DVista repositions the bar relative to the visible viewport. */
.venue-tour-inline { position: relative !important; }
.venue-tour-inline::after,
.tour-modal::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  background: #000;
  z-index: 4;
  pointer-events: none;
}
@media (max-width: 760px) {
  .venue-tour-inline::after,
  .tour-modal::after { height: 50px; }
}

/* 2026-05-23 - Kill the hero logo entrance animation (Uri: "silly, my bad") */
.hero-cinematic .hero-logo .brand-logo { animation: none !important; transform: none !important; }

/* 2026-05-23 - New logo (cream baked into PNG, no more white invert).
   Hero shrunk substantially. */
.hero-cinematic .hero-logo {
  width: clamp(180px, 32vmin, 460px) !important;
}
@media (max-width: 760px) {
  .hero-cinematic .hero-logo { width: 48vw !important; }
}
/* Drop the brightness(0)+invert(1) so the cream artwork shows directly.
   Keep the drop-shadow for legibility on the photo bg. */
.hero-cinematic .hero-logo .brand-logo-img,
.atmo-brand-logo {
  filter: drop-shadow(0 4px 22px rgba(0,0,0,0.55)) !important;
}

/* 2026-05-23 - Revert lineup section background to plain cream (no photo). */
html body .schedule-section {
  background-image: none !important;
  background-color: #f7ecce !important;
}

/* 2026-05-23 - "Ella Radio presents" line above the hero logo, Poppins. */
.hero-cinematic .hero-presents-line {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 400;
  font-size: clamp(0.85rem, 1.6vw, 1.2rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f4ead2;
  margin: 0 0 1.1rem;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}

/* 2026-05-23 - "Ella Radio / presents" as two big lines above the logo,
   sized to match the visual weight of the ZigZag wordmark. */
.hero-cinematic .hero-presents-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0 0 1.2rem;
  text-align: center;
}
.hero-cinematic .hero-presents-1,
.hero-cinematic .hero-presents-2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 5.5vmin, 4.2rem);
  letter-spacing: 0.02em;
  line-height: 1.02;
  color: #f4ead2;
  text-shadow: 0 3px 18px rgba(0,0,0,0.7);
  text-transform: none;
  display: block;
}
@media (max-width: 760px) {
  .hero-cinematic .hero-presents-1,
  .hero-cinematic .hero-presents-2 { font-size: clamp(1.6rem, 8vw, 2.8rem); }
}

/* 2026-05-23 - Hero intro choreography: Ella logo slides in from left,
   "präsentiert" / "presents" from the right, both linger ~2.5s, then fly
   out the opposite way they came in. After the animation, both rest
   off-screen via animation-fill-mode: forwards. Layout doesn't shift -
   transform-only animation keeps the elements taking the same space. */
.hero-cinematic .hero-intro-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.4rem;
  pointer-events: none;
}
.hero-cinematic .hero-intro-ella {
  width: clamp(180px, 28vmin, 360px);
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 4px 18px rgba(0,0,0,0.6));
  animation: heroIntroLogoFly 5s cubic-bezier(0.22, 0.7, 0.28, 1) 0.2s both;
}
.hero-cinematic .hero-intro-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: clamp(1.8rem, 4vmin, 3rem);
  letter-spacing: 0.03em;
  color: #f4ead2;
  text-shadow: 0 3px 18px rgba(0,0,0,0.7);
  animation: heroIntroTextFly 5s cubic-bezier(0.22, 0.7, 0.28, 1) 0.2s both;
}
@keyframes heroIntroLogoFly {
  0%   { transform: translateX(-130vw); opacity: 0; }
  20%  { transform: translateX(0); opacity: 1; }
  70%  { transform: translateX(0); opacity: 1; }
  92%  { transform: translateX(130vw); opacity: 0; }
  100% { transform: translateX(130vw); opacity: 0; }
}
@keyframes heroIntroTextFly {
  0%   { transform: translateX(130vw); opacity: 0; }
  20%  { transform: translateX(0); opacity: 1; }
  70%  { transform: translateX(0); opacity: 1; }
  92%  { transform: translateX(-130vw); opacity: 0; }
  100% { transform: translateX(-130vw); opacity: 0; }
}
.hero-cinematic { overflow: hidden; }
@media (max-width: 760px) {
  .hero-cinematic .hero-intro-ella { width: 55vw; }
  .hero-cinematic .hero-intro-text { font-size: clamp(1.4rem, 7vw, 2.4rem); }
}

/* 2026-05-23 - Refined hero intro sequence (Uri):
   ① Ella logo (smaller, cream) slides in slowly from left
   ② Lingers ~1s
   ③ "präsentiert" / "presents" slides in from right
   ④ Both fade out as the festival logo fades in (cross-fade)
   Total run: ~6.5s. */

/* Ella logo: smaller, no white-invert, native cream PNG */
.hero-cinematic .hero-intro-ella {
  width: clamp(140px, 22vmin, 280px) !important;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.55)) !important;
  animation: heroIntroEllaSeq 6.5s cubic-bezier(0.22, 0.7, 0.28, 1) 0.3s both !important;
}
.hero-cinematic .hero-intro-text {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(1.5rem, 3.4vmin, 2.4rem) !important;
  letter-spacing: 0.03em !important;
  color: #f4ead2 !important;
  text-shadow: 0 3px 18px rgba(0,0,0,0.7) !important;
  animation: heroIntroTextSeq 6.5s cubic-bezier(0.22, 0.7, 0.28, 1) 0.3s both !important;
}

@keyframes heroIntroEllaSeq {
  0%   { transform: translateX(-130vw); opacity: 1; }
  38%  { transform: translateX(0); opacity: 1; }
  84%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}
@keyframes heroIntroTextSeq {
  0%   { transform: translateX(130vw); opacity: 0; }
  53%  { transform: translateX(130vw); opacity: 0; }
  69%  { transform: translateX(0); opacity: 1; }
  84%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

/* Festival ZigZag logo: starts hidden, fades in as the intro fades out */
.hero-cinematic .hero-logo {
  animation: heroFestivalFadeIn 6.5s ease 0.3s both !important;
}
@keyframes heroFestivalFadeIn {
  0%   { opacity: 0; }
  84%  { opacity: 0; }
  100% { opacity: 1; }
}
@media (max-width: 760px) {
  .hero-cinematic .hero-intro-ella { width: 44vw !important; }
  .hero-cinematic .hero-intro-text { font-size: clamp(1.2rem, 6vw, 2rem) !important; }
}

/* 2026-05-25 - Uri: replaced the slide-in sequence with simple fades.
   Ella appears first, THEN "präsentiert", THEN logo + dates. Classes
   .intro-step-1/2/3 are added to #hero in JS at t=200/800/1500ms. */
.hero-cinematic .hero-intro-block {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  display: flex !important;
}
.hero-cinematic .hero-intro-ella,
.hero-cinematic .hero-intro-text,
.hero-cinematic .hero-logo,
.hero-cinematic .hero-meta-line {
  animation: none !important;
  opacity: 0 !important;
  transition: opacity 0.6s ease !important;
}
.hero-cinematic.intro-step-1 .hero-intro-ella { opacity: 1 !important; }
.hero-cinematic.intro-step-2 .hero-intro-text { opacity: 1 !important; }
.hero-cinematic.intro-step-3 .hero-logo,
.hero-cinematic.intro-step-3 .hero-meta-line { opacity: 1 !important; }
@keyframes heroIntroBlockSeq {
  0%   { transform: translateX(-130vw); opacity: 1; }
  35%  { transform: translateX(0); opacity: 1; }
  70%  { transform: translateX(0); opacity: 1; }
  87%  { transform: translateX(0); opacity: 0; }
  100% { transform: translateX(0); opacity: 0; }
}

/* Festival logo: hidden until Ella block fully gone (87%≈4.79s), then fades in */
.hero-cinematic .hero-logo {
  animation: heroFestivalFadeInLate 6.5s ease 0.3s both !important;
}
@keyframes heroFestivalFadeInLate {
  0%, 75% { opacity: 0; }
  100%    { opacity: 1; }
}

/* 2026-05-23 - FINAL hero intro sequence. Kill all previous animations and
   drive timing via JS-applied classes so the festival logo is strictly
   invisible until the Ella block has fully faded. */
html body .hero-cinematic .hero-intro-block,
html body .hero-cinematic .hero-intro-ella,
html body .hero-cinematic .hero-intro-text,
html body .hero-cinematic .hero-logo,
html body .hero-cinematic .hero-logo .brand-logo,
html body .hero-cinematic .hero-logo .brand-logo-img {
  animation: none !important;
  transform: none !important;
}
/* Initial states */
html body .hero-cinematic .hero-intro-block {
  opacity: 0;
  transform: translateX(-130vw);
  transition: opacity 0.8s ease, transform 1.8s cubic-bezier(0.22, 0.7, 0.28, 1);
}
html body .hero-cinematic .hero-intro-block.is-in {
  opacity: 1;
  transform: translateX(0);
}
html body .hero-cinematic .hero-intro-block.is-out {
  opacity: 0;
  transform: translateX(0);
}
html body .hero-cinematic .hero-logo {
  opacity: 0;
  transition: opacity 1.4s ease;
}
html body .hero-cinematic .hero-logo.is-in {
  opacity: 1;
}

/* 2026-05-23 - Lineup section: cream with subtle navy-dot pattern, matching
   the cream cards / Bridge-style backdrop. */
html body .schedule-section {
  background-color: #f7ecce !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><circle cx='1' cy='1' r='0.6' fill='%230e1633' fill-opacity='0.10'/></svg>") !important;
  background-repeat: repeat !important;
  background-size: auto !important;
  background-position: 0 0 !important;
  background-attachment: scroll !important;
}

/* 2026-05-23 - Atmosphere "FOURTEEN NIGHTS LIVE" logo: 40% smaller (Uri). */
html body .atmo-brand-logo { width: min(26vw, 324px) !important; }
@media (max-width: 760px) {
  html body .atmo-brand-logo { width: 49vw !important; }
}

/* 2026-05-24 - Ella + presents smaller initial size, and the whole block
   shrinks further (transform scale) once the festival logo appears. Both
   stay visible - no opacity 0. */
html body .hero-cinematic .hero-intro-ella { width: clamp(90px, 14vmin, 180px) !important; }
html body .hero-cinematic .hero-intro-text {
  font-size: clamp(1.1rem, 2.4vmin, 1.7rem) !important;
}
@media (max-width: 760px) {
  html body .hero-cinematic .hero-intro-ella { width: 24vw !important; }
  html body .hero-cinematic .hero-intro-text { font-size: clamp(0.9rem, 4.5vw, 1.4rem) !important; }
}
html body .hero-cinematic .hero-intro-block.is-shrunk {
  transform: translateX(0) scale(0.6) !important;
  transform-origin: center top;
  margin-bottom: -1.4rem;
}

/* 2026-05-24 - When festival logo appears, Ella block tucks into the
   top-left of the gasometer area instead of overlapping it. And the
   "präsentiert"/"presents" text in a much thinner font weight. */
html body .hero-cinematic .hero-intro-text {
  font-weight: 300 !important;
  letter-spacing: 0.05em !important;
}
html body .hero-cinematic .hero-intro-block.is-shrunk {
  transform: translate(-22vw, -7vh) scale(0.5) !important;
  transform-origin: center center;
  margin-bottom: 0;
}
@media (max-width: 760px) {
  /* Stack from the top with padding so Ella+präsentiert start well below
     the navbar zone. justify-content:center was absorbing margin-top so
     the block never actually moved down (Uri 2026-05-26 phone fix). */
  html body .hero-cinematic .hero-content {
    justify-content: flex-start !important;
    padding-top: 5.2rem !important;
  }
  html body .hero-cinematic .hero-intro-block {
    transform: translateX(-8vw) !important;
    margin-bottom: 0.3rem !important;
  }
  /* Tiny präsentiert text — sits BETWEEN Ella and the festival logo. */
  html body .hero-cinematic .hero-intro-text {
    font-size: clamp(0.55rem, 2.6vw, 0.85rem) !important;
    margin-top: 0.15rem !important;
  }
  /* Pull festival logo up closer to präsentiert, push dates closer to logo
     so the bouncing arrow at the bottom has room (Uri 2026-05-26). */
  html body .hero-cinematic .hero-logo {
    margin-top: 0.4rem !important;
    margin-bottom: 0.6rem !important;
  }
  html body .hero-cinematic .hero-meta-line {
    margin-top: 0.8rem !important;
  }
}

/* 2026-05-24 - Editorial SVG site map (replaces MapTiler) */
.sitemap-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 1.4rem auto 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  border: 1px solid rgba(212,162,58,0.22);
  background: #f7ecce;
}
.sitemap-svg { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
  .sitemap-wrap { border-radius: 8px; }
}

/* 2026-05-24 - 3D interactive site map */
.map3d-wrap {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 1.4rem auto 0;
  height: clamp(420px, 60vh, 720px);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
  border: 1px solid rgba(212,162,58,0.25);
  background: #0a0f1d;
}
.map3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map3d-legend {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(10,15,29,0.78);
  color: #f4ead2;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  border: 1px solid rgba(212,162,58,0.35);
  display: flex; flex-direction: column; gap: 2px;
  z-index: 2;
  pointer-events: none;
}
.map3d-legend strong { font-weight: 600; }
.map3d-legend span { opacity: 0.7; font-size: 0.65rem; }
.map-3d-label {
  font-family: 'Poppins', sans-serif;
  color: #f4ead2;
  text-shadow: 0 2px 8px rgba(0,0,0,0.85);
  text-align: center;
  pointer-events: none;
  user-select: none;
}
.map-3d-label-text {
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(10,15,29,0.78);
  border: 1px solid rgba(212,162,58,0.55);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
}
.map-3d-label-sub {
  font-size: 0.72rem;
  margin-top: 4px;
  opacity: 0.85;
  font-weight: 300;
  letter-spacing: 0.1em;
}
.map-3d-label-arrow { color: #d4a23a; font-size: 1.1rem; line-height: 1; margin-bottom: -2px; }
.map-marker-pulse {
  width: 18px; height: 18px;
  background: #d4a23a;
  border: 2px solid #f4ead2;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(212,162,58,0.7);
  animation: mapPulse 2.2s ease-out infinite;
}
@keyframes mapPulse {
  0% { box-shadow: 0 0 0 0 rgba(212,162,58,0.65); }
  100% { box-shadow: 0 0 0 26px rgba(212,162,58,0); }
}
@media (max-width: 760px) {
  .map3d-wrap { height: 460px; border-radius: 10px; }
  .map-3d-label-text { font-size: 0.8rem; padding: 0.3rem 0.6rem; }
}

/* 2026-05-24 - Showcase venue body: switch from italic Playfair to clean
   Inter for legibility on the photo background. Font only - no scrim/pill. */
html body .showcase-venue-body {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

/* 2026-05-24 - Showcase venue pitch line - BIG editorial tagline above
   the body paragraph. */
.showcase-venue-pitch {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 1.18;
  color: #f4ead2;
  text-shadow: 0 2px 14px rgba(0,0,0,0.7);
  margin: 0.6rem 0 1.6rem;
  max-width: 760px;
}
.showcase-venue-pitch em,
.showcase-venue-pitch strong {
  color: #d4a23a;
  font-style: italic;
  font-weight: 700;
}
@media (max-width: 760px) {
  .showcase-venue-pitch { font-size: clamp(1.25rem, 6vw, 1.8rem); }
}

/* 2026-05-24 - Force pitch line legible - cream on photo */
html body .section-dark .showcase-venue-pitch,
html body .showcase-venue-pitch {
  color: #f4ead2 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.6) !important;
}

/* 2026-05-24 - Hide tag pills inside the artist sheet (Uri: don't need). */
html body .sheet-tags { display: none !important; }


/* 2026-05-24 - VISIBLE SCROLLBAR on the artist sheet (desktop). Some
   Safari users couldn't see that the popup scrolls; force an obvious
   brass-tinted scrollbar so scroll affordance is unmissable. Also
   hide focus outline since the sheet receives focus on open. */
@media (min-width: 601px) {
  html body .artist-sheet {
    scrollbar-width: thin;
    scrollbar-color: var(--brass, #c8a268) rgba(255,255,255,0.08);
    outline: none !important;
  }
  html body .artist-sheet::-webkit-scrollbar {
    width: 12px;
  }
  html body .artist-sheet::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.08);
    border-radius: 6px;
  }
  html body .artist-sheet::-webkit-scrollbar-thumb {
    background: var(--brass, #c8a268);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
    min-height: 40px;
  }
  html body .artist-sheet::-webkit-scrollbar-thumb:hover {
    background: #d8b078;
    background-clip: padding-box;
    border: 2px solid transparent;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK THEME OVERRIDES (2026-05-25)
   The variable swap in styles.css :root flips ~85% of the palette. This
   block catches the rest — sections / rules that hardcoded the cream or
   ink colors as hex or rgba() so they never read the variable.
   ═══════════════════════════════════════════════════════════════════════ */

/* GLOBAL — force PURE BLACK background everywhere. No navy, no gradients,
   no leftover blues. Every section + every container that previously
   inherited an ink/navy value gets clamped to #000. */
html body {
  background-color: #000000 !important;
  background-image: none !important;
  color: #f7ecce !important;
}
html body section,
html body section[id],
html body .section-dark,
html body .section-light,
html body .presented-top-section,
html body .schedule-section,
html body .atmosphere-section,
html body .venues-section,
html body .outdoors-section,
html body .partners-section,
html body #about,
html body #jam-sessions,
html body #atmosphere,
html body #presented,
html body #full-program,
html body #outdoors,
html body #venues,
html body #venues-map {
  background-color: #000000 !important;
  background-image: none !important;
}
html body .schedule-section {
  background: #000000 !important;
  background-image: none !important;
}
/* Day cards: solid black (a touch lighter than body so they read as cards). */
html body .day-poster {
  background: #0a0a0a !important;
}
/* Section dividers: ensure no leftover cream wrappers leak through. */
html body .wrap { background: transparent !important; }
/* Schedule background image override to nothing */
html body .schedule-section,
html body .section-photo-header { background-color: #000000 !important; }

/* ── DARK MODE — text + logo polish (2026-05-25 round 2) ─────────────── */

/* Universal text-on-black: anything still hardcoded to ink/dark colors
   gets pulled to cream. This blanket targets the common dark text colors. */
html body * {
  --cream: #0e1d33;
  --ink: #f7ecce;
}
html body h1, html body h2, html body h3, html body h4,
html body p, html body span, html body a, html body li, html body strong, html body em {
  color: #f7ecce;
}
/* Specific stubborn rules: */
html body .nav-brand, html body .nav-links a, html body .lang-btn,
html body .lang-sep, html body .nav-cta { color: #f7ecce !important; }
html body .nav-cta { background: #c8902a !important; color: #0e1d33 !important; }
html body #nav.scrolled .nav-brand,
html body #nav.scrolled .nav-links a,
html body #nav.scrolled .lang-btn,
html body body.solid-nav .nav-brand,
html body body.solid-nav .nav-links a { color: #f7ecce !important; text-shadow: 0 1px 6px rgba(0,0,0,0.65) !important; }

/* Dark-theme scrolled navbar: cream text needs a DARK background to read.
   Default rule has rgba(247,236,206,0.13) which is cream-tinted translucent
   — invisible on dark theme (Uri 2026-05-26 phone fix). */
html body #nav.scrolled,
html body body.solid-nav #nav {
  background: rgba(10,10,10,0.88) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
  border-bottom-color: rgba(247,236,206,0.10) !important;
}
/* On phone we MUST NOT have backdrop-filter on #nav — it creates a
   containing block on iOS Safari that traps the burger menu
   (position:fixed) inside the small nav strip, so the menu opens but
   only the top sliver is visible. The dark bg alone is enough. */
@media (max-width: 760px) {
  html body #nav,
  html body #nav.scrolled,
  html body body.solid-nav #nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10,10,10,0.95) !important;
  }
}

/* Dark-theme phone burger menu: original gradient ends at var(--ink) which
   the dark-theme variable swap turned into cream — bottom of menu became
   unreadable. Force a solid dark background so cream items always read
   (Uri 2026-05-26 phone fix). */
@media (max-width: 760px) {
  html .nav-links,
  html #nav .nav-links,
  html body.menu-open #nav {
    background: #0a0a0a !important;
  }
  /* When menu is open the brand text + DE/EN toggle were styled to
     var(--cream), but the dark-theme swap turned that into ink (dark).
     Force explicit cream so they stay readable on the dark menu. */
  html body.menu-open .nav-brand,
  html body.menu-open .lang-btn {
    color: #f7ecce !important;
    text-shadow: none !important;
  }
  html body.menu-open .lang-sep {
    color: rgba(247,236,206,0.5) !important;
  }
  html body.menu-open .nav-cta {
    background: #c8902a !important;
    color: #0e1d33 !important;
  }
  /* The menu items themselves (Programm / Venue / About / etc.) used
     var(--cream) — which is ink on dark theme. Force explicit cream. */
  html body #nav .nav-links.mobile-open a,
  html body #nav.scrolled .nav-links.mobile-open a {
    color: #f7ecce !important;
  }
  /* X close button: same var(--cream) swap bug — force cream. */
  html body .nav-close {
    color: #f7ecce !important;
    border-color: rgba(247,236,206,0.35) !important;
  }
  /* Festival logo inside the burger menu: was filter:brightness(0) invert(1)
     (pure white). Tint to cream like the other partner logos. */
  html body .nav-menu-logo {
    filter: brightness(0) invert(0.93) sepia(0.35) saturate(1.6) hue-rotate(348deg) !important;
  }
}

/* Footer text */
html body footer, html body footer * { color: rgba(247,236,206,0.78) !important; }

/* Schedule (next to 3D map) — lines between days + venue tags */
html body .schedule-day { border-bottom: 1px solid rgba(247,236,206,0.18) !important; }
html body .schedule-name { color: #f7ecce !important; }
html body .schedule-venue-tag { color: rgba(247,236,206,0.55) !important; }
html body .schedule-time { color: rgba(247,236,206,0.6) !important; }
html body .schedule-wkd { color: rgba(247,236,206,0.6) !important; }
html body .schedule-num { color: #f7ecce !important; }

/* 3D illustrated map: keep CREAM card around the illustration (looks better) */
html body .site-plan-map {
  background: #f7ecce !important;
  border-radius: 8px;
}

/* Pin labels: keep readable on cream map */
html body .pin-label { background: rgba(14,29,51,0.92) !important; color: #f7ecce !important; }

/* Section "Mitten in Berlin" + EUREF address */
html body #venues-map h2,
html body #venues-map .lead { color: #f7ecce !important; }
html body #venues-map h2 em { color: #c8902a !important; }

/* Jam sessions section — restore the SKY photo as background */
html body #jam-sessions {
  background-image: url('../img/gasometer-sky.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: #000 !important;
}

/* All partner logos that are dark — invert with a warm tint so they end
   up cream (#f7ecce-ish) instead of pure white. The filter chain:
   brightness(0)  → flatten to black
   invert(0.93)   → mostly white (RGB ~237)
   sepia(0.35)    → warm sepia overlay
   saturate(1.6)  → punchier tint
   hue-rotate(348deg) → push toward warm cream
   brightness(1)  → keep at near-max brightness
*/
html body .presented-logo,
html body .hpb-logo,
html body .about-presenters-logo,
html body .nav-menu-presented-logo,
html body .partner-logo,
html body .sheet-presented-logo,
html body .partner-card img,
html body .nav-brand img,
html body .footer-brand img,
html body .partners-bjk-lead {
  filter: brightness(0) invert(0.93) sepia(0.35) saturate(1.6) hue-rotate(348deg) !important;
}

/* BJK lead logo sits to the LEFT of the "Partner." heading. */
.partners-header-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin: 0 auto 0.6rem;
}
.partners-bjk-lead {
  height: clamp(60px, 7vw, 96px);
  width: auto;
  flex-shrink: 0;
}
.partners-header-row h2 {
  margin: 0;
}
@media (max-width: 600px) {
  .partners-header-row {
    flex-direction: column;
    gap: 0.8rem;
  }
}

/* Brazil Night re-tint — give the band names back their cream-on-green */
html body .day-poster.theme-brazil .dp-name,
html body .day-poster.theme-brazil .dp-name-primary,
html body .day-poster.theme-brazil .dp-name-feat {
  color: #ffd54a !important;
}
html body .day-poster.theme-brazil { background: #0e1e1a !important; }

/* Hover-bounce on lineup links: remove the on-leave transition so it
   reverts instantly. Was producing a visible "settle" animation. */
html body .dp-act-link {
  transition: none !important;
}
html body .dp-act-link.photo-hover,
html body .dp-act-link:hover { transition: none !important; }

/* Presented-by + Partners section — earlier rules force #0a1838 with
   -webkit-text-fill-color !important. Need to override both properties. */
html body .presented-top-section,
html body .presented-top-section h2,
html body .presented-top-section h2 em,
html body .presented-top-section .body-text p,
html body .presented-top-section .body-text p strong,
html body .presented-top-section .body-text,
html body .presented-top-section .section-tag,
html body .partners-section h2,
html body .partners-section h2 em,
html body .partners-section > .wrap > p,
html body .partners-section .partner-tier-label,
html body .partners-section,
html body .partners-section * {
  color: #f7ecce !important;
  -webkit-text-fill-color: #f7ecce !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
html body .presented-top-section h2 em,
html body .partners-section h2 em {
  color: #c8902a !important;
  -webkit-text-fill-color: #c8902a !important;
}
html body .presented-top-section .section-rule { background: rgba(247,236,206,0.4) !important; }

/* NUCLEAR — every text element inherits color from currentColor (which
   resolves to cream via body). Kills lingering ink/dark text everywhere
   that was set via -webkit-text-fill-color overrides we couldn't isolate. */
html body * {
  -webkit-text-fill-color: currentColor !important;
}
/* And ensure body cascades cream as the default color. */
html body,
html body p,
html body h1, html body h2, html body h3, html body h4,
html body span, html body a, html body li, html body td, html body th,
html body div { color: #f7ecce; }
/* Brass keepers - re-promote brass on the headings + key accents */
html body h2 em,
html body .section-tag,
html body .brass,
html body .dp-name-primary,
html body .schedule-name.is-headliner { color: #c8902a !important; }
/* Lines/borders cream too */
html body .schedule-day { border-bottom-color: rgba(247,236,206,0.22) !important; }
html body .section-rule { background: #c8902a !important; }

/* Footer - explicit cream override (earlier rules at L4651 force #0a1838). */
html body footer,
html body footer *,
html body .footer-brand,
html body .footer-tag,
html body .footer-col,
html body .footer-col a,
html body .footer-col h4,
html body .footer-bottom {
  color: #f7ecce !important;
  -webkit-text-fill-color: #f7ecce !important;
}
html body .footer-col h4 { color: #c8902a !important; -webkit-text-fill-color: #c8902a !important; }
html body footer { background: #000000 !important; }

/* Hero scroll-cue arrow — uses var(--cream) which got swapped to ink.
   Pin to literal cream so the SVG (stroke: currentColor) stays visible. */
html body .hero-scroll-cue {
  color: #f7ecce !important;
  border-color: rgba(247,236,206,0.45) !important;
}
html body .hero-scroll-cue svg { stroke: #f7ecce !important; }

/* Venues-map section headings + address line — webkit-text-fill-color
   was pinning them to ink. Force cream on both properties. */
html body #venues-map,
html body #venues-map *,
html body #venues-map h2,
html body #venues-map h2 em,
html body #venues-map .lead,
html body #venues-map p,
html body #venues-map span {
  color: #f7ecce !important;
  -webkit-text-fill-color: #f7ecce !important;
}
html body #venues-map h2 em { color: #c8902a !important; -webkit-text-fill-color: #c8902a !important; }

/* About / Das Festival section — same webkit-text-fill-color forcing dark. */
html body #about,
html body #about *,
html body #about h2,
html body #about h2 em,
html body #about .body-text p,
html body #about .body-text p strong,
html body #about .section-tag {
  color: #f7ecce !important;
  -webkit-text-fill-color: #f7ecce !important;
}
html body #about h2 em { color: #c8902a !important; -webkit-text-fill-color: #c8902a !important; }
html body #about .section-tag { color: #c8902a !important; -webkit-text-fill-color: #c8902a !important; }

/* Outdoors section text */
html body #outdoors,
html body #outdoors *,
html body #outdoors h2,
html body #outdoors h2 em,
html body #outdoors p,
html body #outdoors .outdoor-tile-tag {
  color: #f7ecce !important;
  -webkit-text-fill-color: #f7ecce !important;
}
html body #outdoors h2 em,
html body #outdoors .outdoor-tile-tag,
html body #outdoors .section-tag { color: #c8902a !important; -webkit-text-fill-color: #c8902a !important; }

/* Partner card logos — invert to bright cream/white. The earlier filter
   only targeted .partner-logo; the actual class is .partner-card img. */
/* (partner-card img already in the cream filter group above.) */

/* ═══════════════════════════════════════════════════════════════════════
   ADOBE FONTS (2026-05-26) — kit https://use.typekit.net/uzr4rxz.css
   Antarctican Headline → big headlines + dates
   Bebas Neue           → lineup band names (already loaded, stays)
   Acumin Pro Condensed → secondary parts ("Quartet", "feat.", "Trio")
   ═══════════════════════════════════════════════════════════════════════ */

/* Headlines + dates — Antarctican Headline */
html body h1,
html body h2,
html body h2 em,
html body .big-h,
html body .big-h em,
html body .hero-meta-line,
html body .hero-venue-line,
html body .dp-number,
html body .dp-month,
html body .dp-weekday,
html body .schedule-num,
html body .schedule-wkd,
html body .section-photo-programm,
html body .atmo-title,
html body .outdoors-title,
html body .artist-sheet .sheet-name,
html body .artist-sheet .sheet-name-primary {
  font-family: 'antarctican-headline', 'Bebas Neue', 'Impact', sans-serif !important;
  font-weight: 800;
}

/* Lineup band names — Bebas Neue (stays). Themed-day selectors below
   beat the per-theme font-family overrides (theme-act forced Playfair). */
html body .dp-name,
html body .dp-name-primary,
html body .dp-name-feat,
html body .day-poster.theme-act .dp-name,
html body .day-poster.theme-act .dp-name-primary,
html body .day-poster.theme-act .dp-name-feat,
html body .day-poster.theme-italy .dp-name,
html body .day-poster.theme-italy .dp-name-primary,
html body .day-poster.theme-italy .dp-name-feat,
html body .day-poster.theme-brazil .dp-name,
html body .day-poster.theme-brazil .dp-name-primary,
html body .day-poster.theme-brazil .dp-name-feat,
html body .schedule-name,
html body .atmo-brand-logo {
  font-family: 'Bebas Neue', 'Impact', sans-serif !important;
}

/* Secondary parts — Acumin Pro Condensed (including themed-day overrides) */
html body .dp-name-secondary,
html body .dp-name-connector,
html body .day-poster.theme-act .dp-name-secondary,
html body .day-poster.theme-act .dp-name-connector,
html body .day-poster.theme-italy .dp-name-secondary,
html body .day-poster.theme-italy .dp-name-connector,
html body .day-poster.theme-brazil .dp-name-secondary,
html body .day-poster.theme-brazil .dp-name-connector,
html body .sheet-name-secondary,
html body .sheet-name-sub,
html body .sheet-name-feat,
html body .sheet-name-connector,
html body .schedule-venue-tag,
html body .dp-time,
html body .schedule-time,
html body .sheet-eyebrow,
html body .ahs-eyebrow {
  font-family: 'acumin-pro-condensed', 'Helvetica Neue Condensed', 'Arial Narrow', sans-serif !important;
  font-weight: 400;
}

/* NUCLEAR FONT + SIZE + WEIGHT OVERRIDE — themed (Italian/Brazil/ACT)
   nights must match non-themed days IDENTICALLY in font, size, weight,
   style. Only color stays themed. */
html body .day-poster .dp-name,
html body .day-poster.theme-italy .dp-name,
html body .day-poster.theme-brazil .dp-name,
html body .day-poster.theme-act .dp-name {
  font-family: 'Bebas Neue', 'Impact', sans-serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 0.015em !important;
  line-height: 1.1 !important;
  font-size: clamp(1.45rem, 2.4vw, 2rem) !important;
}
html body .day-poster .dp-name-primary,
html body .day-poster.theme-italy .dp-name-primary,
html body .day-poster.theme-brazil .dp-name-primary,
html body .day-poster.theme-act .dp-name-primary,
html body .day-poster .dp-name-feat,
html body .day-poster.theme-italy .dp-name-feat,
html body .day-poster.theme-brazil .dp-name-feat,
html body .day-poster.theme-act .dp-name-feat {
  font-family: 'Bebas Neue', 'Impact', sans-serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 0.002em !important;
  line-height: 1.02 !important;
}
@media (min-width: 601px) {
  html body .day-poster .dp-name-primary,
  html body .day-poster.theme-italy .dp-name-primary,
  html body .day-poster.theme-brazil .dp-name-primary,
  html body .day-poster.theme-act .dp-name-primary {
    font-size: 2.3rem !important;
  }
}
html body .day-poster .dp-name-secondary,
html body .day-poster .dp-name-connector,
html body .day-poster.theme-italy .dp-name-secondary,
html body .day-poster.theme-italy .dp-name-connector,
html body .day-poster.theme-brazil .dp-name-secondary,
html body .day-poster.theme-brazil .dp-name-connector,
html body .day-poster.theme-act .dp-name-secondary,
html body .day-poster.theme-act .dp-name-connector {
  font-family: 'acumin-pro-condensed', 'Helvetica Neue Condensed', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 1.05rem !important;
  line-height: 1.2 !important;
}
html body .day-poster .dp-number,
html body .day-poster .dp-month,
html body .day-poster .dp-weekday {
  font-family: 'antarctican-headline', 'Bebas Neue', sans-serif !important;
  font-weight: 800 !important;
}
html body .day-poster .dp-time {
  font-family: 'acumin-pro-condensed', 'Helvetica Neue Condensed', sans-serif !important;
  font-weight: 400 !important;
}

/* Sticky close button on the artist popup — CSS-only `position: sticky`,
   no JS, so the browser's native compositor follows scroll without lag.
   Float removes the button from vertical flow so the photo isn't pushed
   down by an empty row; negative margin shrinks the row to zero so the
   button only overlays. */
html body .artist-sheet > .sheet-close-sticky {
  position: sticky !important;
  top: 18px;
  left: 18px;
  z-index: 50 !important;
  float: left;
  width: 40px;
  height: 40px;
  /* The dialog is a flex column; without flex-shrink:0 the close button
     gets compressed to ~21px tall and the 50% border-radius renders as
     an oval (Uri 2026-05-26). */
  flex: 0 0 40px;
  flex-shrink: 0;
  min-height: 40px;
  margin: 18px 0 -58px 18px;
}

/* Phone: scroll the ENTIRE sheet (photo + content together) instead of
   pinning the photo at top while only the content scrolls. Only the X
   close stays put via position: sticky above. (Uri 2026-05-28) */
@media (max-width: 600px) {
  html body .artist-sheet {
    overflow-y: auto !important;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  html body .artist-sheet .sheet-photo {
    flex: 0 0 auto !important;
  }
  html body .artist-sheet .sheet-content {
    overflow-y: visible !important;
    flex: 0 0 auto !important;
  }
}

/* Programm header word — explicit cream so it never inherits ink. */
html body .section-photo-programm,
html body .section-photo-header h2.big-h {
  color: #f7ecce !important;
  -webkit-text-fill-color: #f7ecce !important;
  text-shadow: 0 3px 18px rgba(0,0,0,0.7);
}
/* Antarctican Headline is wider than Bebas Neue but Uri wants the word
   "Programm" to still feel large. Up from the cautious first pass while
   staying safely under viewport width. */
html body .section-photo-programm {
  font-size: clamp(3.4rem, 17vw, 14rem) !important;
  letter-spacing: 0.02em !important;
  max-width: 94vw;
  margin: 0 auto !important;
  text-indent: 0 !important;
}
html body .section-photo-header .section-photo-content {
  text-align: center !important;
  width: 100%;
}

/* Programm header bg parallax — JS sets --p-shift based on scroll so the
   gasometer photo pans inside the header on every browser (iOS Safari
   ignores background-attachment: fixed, so we drive the bg-position
   directly). (Uri 2026-05-28) */
html body .section-photo-header-programm,
html body .section-photo-header {
  background-attachment: scroll !important;
  background-position: center calc(30% + var(--p-shift, 0px)) !important;
  background-size: cover !important;
}
html body .partner-name {
  color: rgba(247,236,206,0.78) !important;
  -webkit-text-fill-color: rgba(247,236,206,0.78) !important;
}

/* Ticket modal — all non-brass text turns cream. */
html body .ticket-modal,
html body .ticket-modal *,
html body .ticket-modal-card,
html body .ticket-modal-card *,
html body .ticket-modal-title,
html body .ticket-modal-eyebrow,
html body .ticket-option,
html body .ticket-option *,
html body .ticket-option-label,
html body .ticket-option-meta,
html body .ticket-option-cta,
html body .ticket-modal-bjk-line {
  color: #f7ecce !important;
  -webkit-text-fill-color: #f7ecce !important;
}
/* Brass-tinted parts stay brass */
html body .ticket-option-price,
html body .ticket-option-flag,
html body .ticket-option-member-tag,
html body .ticket-option-member-amount,
html body .ticket-modal-bjk-cta { color: #c8902a !important; -webkit-text-fill-color: #c8902a !important; }
html body .ticket-modal-card { background: #1a1a1a !important; border-color: rgba(247,236,206,0.18) !important; }
html body .ticket-option { background: rgba(247,236,206,0.06) !important; border-color: rgba(247,236,206,0.18) !important; }

/* Artist popup secondary name parts (Quartet/Quintet/Trio/Feat. etc.) */
html body .sheet-name-sub,
html body .sheet-name-secondary,
html body .sheet-name-connector,
html body .sheet-cred,
html body .sheet-bio,
html body .sheet-presented-strip,
html body .sheet-presented-label,
html body .sheet-tag {
  color: #f7ecce !important;
  -webkit-text-fill-color: #f7ecce !important;
}
html body .sheet-cred { color: rgba(247,236,206,0.78) !important; -webkit-text-fill-color: rgba(247,236,206,0.78) !important; }
html body .sheet-bio { color: rgba(247,236,206,0.85) !important; -webkit-text-fill-color: rgba(247,236,206,0.85) !important; }
html body .sheet-presented-label { color: rgba(247,236,206,0.7) !important; -webkit-text-fill-color: rgba(247,236,206,0.7) !important; }

/* ACT-themed day cards (01.08 + 02.08) on dark theme — band names cream */
html body .day-poster.theme-act .dp-name,
html body .day-poster.theme-act .dp-name-primary,
html body .day-poster.theme-act .dp-name-feat,
html body .day-poster.theme-act .dp-number,
html body .day-poster.theme-act .dp-month,
html body .day-poster.theme-act .dp-weekday {
  color: #f7ecce !important;
  -webkit-text-fill-color: #f7ecce !important;
}

/* Artist popup — all name sub-parts: feat./connector/secondary/sub.
   Earlier sub rules targeted via deep selectors with the cream-paper
   bg in mind; on dark theme, force everything inside .sheet-name to
   read cream while .sheet-name itself stays brass. */
html body .artist-sheet .sheet-name .sheet-name-sub,
html body .artist-sheet .sheet-name .sheet-name-feat,
html body .artist-sheet .sheet-name .sheet-name-connector,
html body .artist-sheet .sheet-name .sheet-name-secondary,
html body .artist-sheet .sheet-name-sub,
html body .artist-sheet .sheet-name-feat,
html body .artist-sheet .sheet-name-connector,
html body .artist-sheet .sheet-name-secondary {
  color: #f7ecce !important;
  -webkit-text-fill-color: #f7ecce !important;
}

/* Brass-background chips (BELIEBT flag, BJK-Mitglied tag) — text needs
   to be INK on brass so it's readable. Earlier overrides made them
   brass-on-brass = invisible. */
html body .ticket-option-flag,
html body .ticket-option-member-tag {
  background: #c8902a !important;
  color: #0e1d33 !important;
  -webkit-text-fill-color: #0e1d33 !important;
}
/* Italian Night band names → cream (dark version only). */
html body .day-poster.theme-italy .dp-name,
html body .day-poster.theme-italy .dp-name-primary,
html body .day-poster.theme-italy .dp-name-feat,
html body .day-poster.theme-italy .dp-name-connector,
html body .day-poster.theme-italy .dp-name-secondary {
  color: #f7ecce !important;
  -webkit-text-fill-color: #f7ecce !important;
}
html body .section-dark,
html body .section-dark p,
html body .section-dark h2,
html body .section-dark h2 em,
html body .section-dark .lead,
html body .section-dark .big-h,
html body .section-dark .body-text p,
html body .section-dark .body-text p strong {
  color: #f7ecce !important;
}
html body .section-dark .section-tag { color: #c8902a !important; }
html body .section-dark .section-rule { background: #c8902a !important; }

/* Presented-by section (was cream-toast #e6d4a0, ink type). */
.presented-top-section { background: #1a2a48 !important; }
.presented-top-section .section-tag { color: rgba(247,236,206,0.62) !important; }
.presented-top-section h2,
.presented-top-section .body-text p strong { color: var(--ink) !important; }
.presented-top-section .body-text p { color: rgba(247,236,206,0.78) !important; }
.presented-top-section .presented-logo {
  filter: brightness(0) invert(0.95);   /* dark logos -> bright cream */
}

/* Outdoors section (was section-light cream). */
.outdoors-section { background: #0e1d33 !important; }
.outdoors-section .section-tag,
.outdoors-section .outdoors-lead,
.outdoors-section .outdoor-tile p { color: rgba(247,236,206,0.78) !important; }
.outdoors-section .outdoors-title,
.outdoors-section .outdoor-tile-text h3 { color: var(--ink) !important; }
.outdoor-tile-photo { background: rgba(247,236,206,0.04) !important; }

/* Venues showcase + venues map (section-dark with mixed paint). */
.venues-section { background: #0e1d33 !important; }
.venues-section h2,
.venues-section .lead { color: var(--ink) !important; }
.venues-section .lead { color: rgba(247,236,206,0.78) !important; }

/* Site plan / schedule list */
.site-plan-map { background: #1a2a48 !important; }
.schedule-day { border-bottom-color: rgba(247,236,206,0.10) !important; }
.schedule-num,
.schedule-name,
.site-plan-item-text h3 { color: var(--ink) !important; }
.schedule-wkd { color: rgba(247,236,206,0.6) !important; }
.schedule-time { color: rgba(247,236,206,0.55) !important; }
.schedule-venue-tag { color: rgba(247,236,206,0.45) !important; }
.schedule-row:hover { background: rgba(200,144,42,0.14) !important; }
.pin-label { background: rgba(14,29,51,0.92) !important; color: var(--ink) !important; }

/* Day cards (parchment-cream lineup). */
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) {
  background: #14253f !important;
}
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name,
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-primary,
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-feat,
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-number,
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-month,
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-weekday {
  color: var(--ink) !important;
}
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-connector,
.day-poster:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-name-secondary {
  color: rgba(247,236,206,0.78) !important;
}
.dp-act-link { border-bottom-color: rgba(247,236,206,0.08) !important; }

/* Italian Night band names - cream worked on the tricolore over green;
   on dark theme the cylinder/poster is darker, so cream still works. OK. */

/* About / Das Festival section (currently section-dark with cream bg
   override at line 4101 - check). */
html body section#about,
html body section#about .body-text p { color: var(--ink) !important; }
html body section#about .body-text p strong { color: var(--ink) !important; }
html body section#about h2 { color: var(--ink) !important; }
html body section#about .about-presenters-logo {
  filter: brightness(0) invert(0.95);
}

/* Jam sessions section already lives on a photo bg - keep cream text. */

/* Sheet popup - the artist <dialog>. Already uses ink/cream vars. */
.artist-sheet { background: #1a2a48 !important; color: var(--ink) !important; }
.sheet-name { color: var(--brass) !important; }
.sheet-bio,
.sheet-cred,
.sheet-eyebrow { color: var(--ink) !important; }

/* Gasometer venue card — EUREF logo sits to the RIGHT of the "Gasometer
   Berlin" headline (Uri 2026-05-27); the EUREF tagline stays below. */
.showcase-venue-name-row {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2.4rem);
  flex-wrap: wrap;
}
.showcase-venue-name-row .showcase-venue-name { margin: 0; }
.showcase-venue-name-euref {
  height: clamp(80px, 8vw, 120px);
  width: auto;
  flex-shrink: 0;
  filter: brightness(0) invert(0.93) sepia(0.35) saturate(1.6) hue-rotate(348deg);
}
.showcase-venue-host {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(247,236,206,0.14);
}
.showcase-venue-host-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: rgba(247,236,206,0.85);
}
@media (max-width: 600px) {
  .showcase-venue-name-row { gap: 1rem; }
  .showcase-venue-name-euref { height: 60px; }
  .showcase-venue-host-text { font-size: 1rem; }
}

/* ─────────────────────────────────────────────────────────────────────
   PARTNERS — phone grid tightened (Uri 2026-05-27: logos felt too big
   and messy at 2 columns / 70px tall on phone).
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  html body .partner-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.1rem 0.9rem !important;
    max-width: 100% !important;
  }
  html body .partner-card {
    height: 56px !important;
    padding: 0.3rem !important;
  }
  /* phone BKM image limit already handled in the partner-card--bkm block above */
  html body .partner-card.partner-card--victors img {
    max-height: 50px !important;
  }
  html body .partner-card.partner-card--shrink-phone img {
    transform: scale(1) !important;
  }
  html body .partner-card img[src*="bspa"] {
    transform: scale(0.82) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   HERO — Uri 2026-05-27: all logos + meta text WHITE so they read over
   the Dee Dee photo (darker tones in the background, lighter in the face).
   ───────────────────────────────────────────────────────────────────── */
html body .hero-cinematic .hero-intro-ella,
html body .hero-cinematic .hero-logo .brand-logo-img,
html body .hero-cinematic .hero-logo img {
  filter: brightness(0) invert(1) drop-shadow(0 3px 18px rgba(0,0,0,0.55)) !important;
}
html body .hero-cinematic .hero-intro-text,
html body .hero-cinematic .hero-meta-line,
html body .hero-cinematic .hero-venue-line {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.55) !important;
}
html body .hero-cinematic .hero-meta-line em,
html body .hero-cinematic .hero-venue-line em {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Phone hero (Dee Dee) — strip the desktop scale + translate. Use plain
   object-position to slide the cover-crop window so her face lands LEFT
   of the centred logos. Slightly smaller scale leaves a soft dark frame
   around the photo so it doesn't dominate. (Staging only.) */
@media (max-width: 600px) {
  html body .hero-cinematic .hero-media img.active.shifted,
  html body .hero-cinematic .hero-media img.active {
    /* translateY pushes the photo DOWN so the top of her head is in
       full frame on phone (no vertical overflow to redistribute via
       object-position alone). The dark gradient overlay covers the
       exposed strip up top. */
    transform: translateY(7%) !important;
    object-position: 72% 12% !important;
  }
  /* Soft dark gradient over the hero photo so the white logo + text pop. */
  html body .hero-cinematic .hero-overlay {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg,
      rgba(0,0,0,0.28) 0%,
      rgba(0,0,0,0.35) 55%,
      rgba(0,0,0,0.48) 100%) !important;
    pointer-events: none !important;
    z-index: 3 !important;
  }
  /* Ella RADIO + präsentiert block — centered above the festival logo
     (no horizontal shift) so the lockup reads as a single stack. The
     drop-shadow on the Ella logo created a visible soft rectangle behind
     it — strip the shadow on phone, keep the silhouette clean. */
  html body .hero-cinematic .hero-intro-block {
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body .hero-cinematic .hero-intro-ella {
    filter: brightness(0) invert(1) !important;
    transition: none !important;
    background: transparent !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   LEGAL PAGES (Impressum / Datenschutz) — minimal editorial typography.
   ───────────────────────────────────────────────────────────────────── */
.legal-page {
  padding: clamp(5rem, 10vh, 8rem) 0 6rem;
  background: #0a0a0a;
  color: #f7ecce;
  min-height: 100vh;
}
.legal-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(1.4rem, 5vw, 2.6rem);
}
.legal-wrap h1 {
  font-family: 'antarctican-headline', 'Bebas Neue', sans-serif;
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0.6rem 0 1.2rem;
  color: #f7ecce;
}
.legal-wrap .section-rule {
  width: 64px;
  height: 2px;
  background: #c8902a;
  margin: 0 0 2.6rem;
}
.legal-block {
  margin-bottom: 1.4rem;
}
.legal-block h2 {
  font-family: 'acumin-pro-condensed', 'Helvetica Neue Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #c8902a;
  margin: 0 0 0.5rem;
}
.legal-block p {
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 0.6rem;
  color: rgba(247,236,206,0.85);
}
.legal-block a,
.legal-list a {
  color: #c8902a;
  text-decoration: none;
  border-bottom: 1px solid rgba(200,144,42,0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.legal-block a:hover,
.legal-list a:hover {
  color: #f7ecce;
  border-bottom-color: rgba(247,236,206,0.6);
}
/* Compact key/value list used on the Impressum page. */
.legal-list {
  display: grid;
  grid-template-columns: minmax(11rem, 14rem) 1fr;
  gap: 0.5rem 2rem;
  margin: 0 0 3rem;
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  font-size: 0.98rem;
  line-height: 1.55;
}
.legal-list dt {
  font-family: 'acumin-pro-condensed', 'Helvetica Neue Condensed', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #c8902a;
  padding-top: 0.15rem;
}
.legal-list dd {
  margin: 0 0 0.6rem;
  color: rgba(247,236,206,0.88);
}
@media (max-width: 600px) {
  .legal-list {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .legal-list dt {
    margin-top: 1rem;
  }
  .legal-list dd {
    margin-bottom: 0;
  }
}
.legal-back {
  margin-top: 4rem;
}
.legal-back a {
  display: inline-block;
  font-family: 'acumin-pro-condensed', 'Helvetica Neue Condensed', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c8902a;
  border-bottom: none;
}
.legal-back a:hover { color: #f7ecce; }

/* Footer hardcoded ink/cream rules - invert. */
.footer-section { background: #0e1d33 !important; }
.footer-section,
.footer-section a { color: rgba(247,236,206,0.78) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   PHONE DAY-CARD BACKGROUNDS — Uri 2026-05-26
   On phone .dp-photo is hidden and .dp-info covers the whole card with its
   own solid bg — so we paint .dp-info directly. .day-poster also gets the
   same bg so any uncovered area stays consistent.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Photo backgrounds for headliner days — set on .day-poster only. */
  html body .day-poster[data-date="20.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="20.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info {
    background:
      linear-gradient(180deg, rgba(14,29,51,0.38) 0%, rgba(14,29,51,0.55) 60%, rgba(14,29,51,0.78) 100%),
      url('/assets/img/artists/fusion-experience.webp') 50% 35% / 145% auto no-repeat !important;
    background-image: linear-gradient(180deg, rgba(14,29,51,0.38) 0%, rgba(14,29,51,0.55) 60%, rgba(14,29,51,0.78) 100%), url('/assets/img/artists/fusion-experience.webp') !important;
    background-size: auto, 145% auto !important;
    background-position: 0 0, 50% 35% !important;
    --day-tint: #1F3556 !important;
  }
  html body .day-poster[data-date="22.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="22.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info {
    background:
      linear-gradient(180deg, rgba(14,29,51,0.38) 0%, rgba(14,29,51,0.55) 60%, rgba(14,29,51,0.78) 100%),
      url('/assets/img/artists/ledisi.webp') 50% 22% / cover no-repeat !important;
    --day-tint: #2e4565 !important;
  }
  html body .day-poster[data-date="24.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="24.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info {
    background:
      linear-gradient(180deg, rgba(14,29,51,0.38) 0%, rgba(14,29,51,0.55) 60%, rgba(14,29,51,0.78) 100%),
      url('/assets/img/artists/ida-nielsen.jpg') 50% 20% / cover no-repeat !important;
    --day-tint: #3d5d8a !important;
  }
  html body .day-poster[data-date="27.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="27.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info {
    background:
      linear-gradient(180deg, rgba(14,29,51,0.38) 0%, rgba(14,29,51,0.55) 60%, rgba(14,29,51,0.78) 100%),
      url('/assets/img/artists/al-di-meola.jpg') 50% 20% / cover no-repeat !important;
    --day-tint: #0e1d33 !important;
  }
  /* 29.07 — Samara was cut from the lineup 2026-05-27, day is now TBC.
     Use a solid blue so the empty card still looks intentional. */
  html body .day-poster[data-date="29.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="29.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info {
    background: #1F3556 !important;
    --day-tint: #1F3556 !important;
  }

  /* 23.07 — Bad Plus headliner photo bg. */
  html body .day-poster[data-date="23.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="23.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info {
    background:
      linear-gradient(180deg, rgba(14,29,51,0.38) 0%, rgba(14,29,51,0.55) 60%, rgba(14,29,51,0.78) 100%),
      url('/assets/img/artists/bad-plus.webp') 50% 22% / cover no-repeat !important;
    --day-tint: #08152b !important;
  }
  /* 25.07 — Victor Wooten headliner photo bg. */
  html body .day-poster[data-date="25.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="25.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info {
    background:
      linear-gradient(180deg, rgba(14,29,51,0.38) 0%, rgba(14,29,51,0.55) 60%, rgba(14,29,51,0.78) 100%),
      url('/assets/img/victor-wooten.jpg') 32% 22% / cover no-repeat !important;
    --day-tint: #1F3556 !important;
  }
  /* 26.07 — Tigran Hamasyan headliner photo bg. */
  html body .day-poster[data-date="26.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="26.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info {
    background:
      linear-gradient(180deg, rgba(14,29,51,0.38) 0%, rgba(14,29,51,0.55) 60%, rgba(14,29,51,0.78) 100%),
      url('/assets/img/artists/tigran-hamasyan-hero.jpg') 50% 20% / cover no-repeat !important;
    --day-tint: #154b86 !important;
  }
  /* 30.07 — Dhafer Youssef headliner photo bg. */
  html body .day-poster[data-date="30.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act),
  html body .day-poster[data-date="30.07"]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info {
    background:
      linear-gradient(180deg, rgba(14,29,51,0.38) 0%, rgba(14,29,51,0.55) 60%, rgba(14,29,51,0.78) 100%),
      url('/assets/img/artists/dhafer-youssef-hero.jpg') 50% 20% / cover no-repeat !important;
    --day-tint: #2e4565 !important;
  }

  /* PHONE DUPLICATE-PHOTO FIX (Uri 2026-05-28):
     The bg was painted on BOTH .day-poster and .dp-info, but .dp-info is
     ~24px shorter on phone, so the two cover-scaled images rendered at
     different sizes — producing a visible second smaller photo near the
     top. Force .dp-info transparent so only .day-poster's photo renders.
     Must come AFTER the day-specific rules above to win the cascade. */
  html body .day-poster[data-date]:not(.theme-italy):not(.theme-brazil):not(.theme-act) .dp-info {
    background: transparent !important;
    background-image: none !important;
  }

  /* Restore Brazil flag on 28.07. */
  html body .day-poster.theme-brazil,
  html body .day-poster.theme-brazil .dp-info {
    background:
      linear-gradient(rgba(0,0,0,0.42), rgba(0,0,0,0.42)),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20' preserveAspectRatio='xMidYMid slice'><rect width='28' height='20' fill='%23009c3b'/><polygon points='14,1.7 26.3,10 14,18.3 1.7,10' fill='%23ffdf00'/><circle cx='14' cy='10' r='3.5' fill='%23002776'/></svg>") center / cover no-repeat !important;
  }

  /* FRAMED Berlin logo on 26.07 — doubled in size. */
  html body .day-poster[data-date="26.07"] .dp-presenter-logo {
    height: 88px !important;
    top: 1rem !important;
    right: 1rem !important;
  }

  /* Rolling Stone presenter on 24.07 — phone: top-right corner of the day
     card, column layout ("POWERED BY" small above the wordmark) so each
     line is clearly readable. (Uri 2026-05-28) */
  html body .day-poster[data-date="24.07"] .dp-presenter--with-label {
    top: 0.9rem !important;
    right: 1rem !important;
    left: auto !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0.22rem !important;
    z-index: 6 !important;
  }
  html body .day-poster[data-date="24.07"] .dp-presenter--with-label .dp-presenter-logo {
    height: 34px !important;
    width: auto !important;
    max-width: 165px !important;
    /* SVG ships in native brand red — keep only a drop-shadow for contrast. */
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7)) !important;
  }
  html body .day-poster[data-date="24.07"] .dp-presenter-label {
    font-size: 0.6rem !important;
    letter-spacing: 0.22em !important;
    line-height: 1 !important;
    color: #fff5d4 !important;
    text-shadow: 0 1px 5px rgba(0,0,0,0.95), 0 0 2px rgba(0,0,0,0.7) !important;
    font-weight: 600 !important;
  }

  /* ACT logo on phone: move to TOP right of the info area (was bottom right). */
  html body .day-poster.theme-act .dp-act-logo {
    top: 0.8rem !important;
    bottom: auto !important;
    right: 1rem !important;
    height: 26px !important;
  }
}