/* v7c · Headliner II, round 4 — from v7b (Anton + Host Grotesk).
   Clear video hero with the name and two faintly glowing buttons low and centered, the white
   Anton ticker, Who's Bad date rows, hover zoom on photos, flip cards, and a crowd loop behind the close. */

:root {
  --ground: #0a0a0f;
  --raised: #16151c;
  --black: #000000;
  --white: #ffffff;
  --text: #ecebf1;
  --muted: #aeaabb;       /* 8.6:1 on ground, 7.9:1 on raised */
  --line: rgba(255, 255, 255, 0.16);
  --line-strong: rgba(255, 255, 255, 0.34);
  --red: #e21c21;         /* the one red: buttons, upcoming tiles and row rules, form borders, starbursts */
  --red-press: #c3141a;
  --violet: #7006ac;      /* flat only: proof panel, flip-card backs */
  --lilac: #cd80ef;       /* focus ring, roles, FAQ marker */

  --display: "Anton", "Arial Narrow", sans-serif;
  --sans: "Host Grotesk", system-ui, sans-serif;

  --head-h: 68px;
  --tick-h: 56px;
  --gutter: clamp(16px, 2.8vw, 40px);
  --max: 1240px;
  --gap-sec: clamp(56px, 6.7vw, 96px);      /* the same space between every section */
  --stage-w: clamp(290px, 54vw, 780px);     /* From the stage: big landscape cards */
  --face-w: clamp(220px, 25vw, 360px);      /* The band: tall portrait cards */
  --merch-w: clamp(200px, 21.5vw, 310px);   /* Merch: a step smaller than the band cards */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ground); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[id] { scroll-margin-top: calc(var(--head-h) + 16px); }
:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 50;
  background: var(--white); color: var(--ground); padding: 12px 16px; min-height: 44px;
}
.skip:focus { top: 12px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- buttons (one shape: red filled primary, white filled secondary) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px;
  background: var(--red); color: var(--white);
  border: 0; border-radius: 2px;
  font-family: var(--sans); font-weight: 700; font-size: 0.9375rem;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn:hover { background: var(--red-press); }
.btn-alt { background: var(--white); color: var(--ground); }
.btn-alt:hover { background: #e4e2ea; }

.tlink {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
  color: var(--white); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color 0.15s ease;
}
.tlink:hover { text-decoration-color: currentColor; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 30;
  height: var(--head-h);
  background: var(--black);
  border-bottom: 1px solid #2a2930;
}
.head-inner {
  height: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 20px;
}
.brand { display: flex; align-items: center; min-height: 44px; min-width: 44px; flex: none; }
.brand img { height: 50px; width: auto; }
.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-list > li { position: relative; }
.nav-link, .sub-btn {
  display: flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 11px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 500; line-height: 1.2;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.nav-link:hover, .sub-btn:hover { color: var(--white); }
.nav-link[aria-current="page"], .sub-btn.is-current {
  color: var(--white);
  text-decoration: underline; text-decoration-color: var(--red);
  text-decoration-thickness: 2px; text-underline-offset: 8px;
}
.chev { flex: none; transition: transform 0.15s ease; }
.sub-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.sub {
  display: none; position: absolute; left: 0; top: calc(100% + 11px); z-index: 2;
  min-width: 210px; padding: 6px 0;
  background: var(--black); border: 1px solid #2a2930; border-top: 2px solid var(--red);
}
.sub-btn[aria-expanded="true"] + .sub { display: block; }
.sub a {
  display: flex; align-items: center; min-height: 46px; padding: 0 18px;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.sub a:hover { background: var(--raised); color: var(--white); }
.sub a[aria-current="page"] { color: var(--white); box-shadow: inset 3px 0 0 var(--red); }
.btn-head { min-height: 44px; padding: 0 18px; font-size: 0.8125rem; flex: none; }
.menu-btn { display: none; }

@media (min-width: 1000px) and (hover: hover) {
  /* bridge the gap so the pointer can travel from the button to the list */
  .has-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
  .has-sub:hover > .sub { display: block; }
}

@media (max-width: 999px) {
  :root { --head-h: 64px; }
  .head-inner { gap: 10px; }
  .brand img { height: 46px; }
  .nav { order: 3; margin-left: 0; }
  .btn-head { margin-left: auto; }
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 70px; padding: 0 12px;
    background: transparent; border: 1px solid var(--line-strong); border-radius: 2px;
    color: var(--white); font-weight: 500; cursor: pointer;
  }
  .nav-list {
    display: none; position: absolute; left: 0; right: 0; top: var(--head-h);
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100svh - var(--head-h)); overflow-y: auto;
    padding: 8px var(--gutter) 28px;
    background: var(--black); border-bottom: 1px solid #2a2930;
  }
  .nav-list.open { display: flex; }
  .nav-link, .sub-btn {
    width: 100%; justify-content: space-between;
    min-height: 54px; padding: 0; font-size: 1.125rem;
    border-bottom: 1px solid var(--line);
  }
  .sub { position: static; min-width: 0; padding: 4px 0 10px 16px; border: 0; border-bottom: 1px solid var(--line); }
  .sub a { padding: 0; font-size: 1.0625rem; }
  .sub a[aria-current="page"] { box-shadow: none; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 6px; }
}
@media (max-width: 380px) {
  .brand img { height: 42px; }
  .btn-head { padding: 0 12px; }
}

/* ---------- hero: the clear video; the name and two buttons sit low and centered ---------- */
.hero {
  position: relative; overflow: hidden; background: var(--black);
  height: max(460px, min(calc(100svh - var(--head-h) - var(--tick-h)), 56.25vw));
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 24%;
}
.hero-stack {
  position: absolute; left: 50%; bottom: clamp(32px, 10vh, 100px); transform: translateX(-50%);
  width: min(92%, 980px);
  display: grid; justify-items: center; gap: clamp(16px, 2.2vw, 26px); text-align: center;
}
.hero-name {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; color: var(--white);
  font-size: clamp(2.25rem, 4.4vw, 4rem); line-height: 0.92; letter-spacing: 0.01em; /* 63 px at 1440 */
  /* a tight shadow that hugs the letters only: no box, no cover over the video */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.45);
}
.hero-sub { display: block; margin-top: 0.22em; font-size: max(0.42em, 1rem); letter-spacing: 0.1em; }
.hero-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hero-btns .btn { min-height: 54px; padding: 0 30px; font-size: 1rem; }
.vid-toggle {
  position: absolute; right: var(--gutter); bottom: clamp(16px, 3vh, 28px);
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(10, 10, 15, 0.6); color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 2px; cursor: pointer;
}
@media (max-width: 699px) {
  .hero { height: max(460px, min(calc(100svh - var(--head-h) - var(--tick-h)), 177.7vw)); }
  .hero-video { object-position: 50% 30%; }
  .hero-stack { bottom: 29px; width: calc(100% - 2 * var(--gutter)); }
  .hero-name { font-size: min(8.6vw, 2.25rem); }
  .hero-sub { font-size: 1rem; }
  .hero-btns { width: 100%; gap: 10px; flex-wrap: nowrap; }
  .hero-btns .btn { flex: 1 1 0; min-height: 50px; padding: 0 10px; font-size: 0.875rem; letter-spacing: 0.04em; }
  .vid-toggle { top: 12px; bottom: auto; }
}

/* faint glow: hero buttons and the closing Book Now */
.glow { box-shadow: 0 0 10px rgba(226, 28, 33, 0.32); transition: background-color 0.15s ease, box-shadow 0.25s ease; }
.glow:hover, .glow:focus-visible { box-shadow: 0 0 14px 1px rgba(226, 28, 33, 0.45); }
.glow.btn-alt { box-shadow: 0 0 10px rgba(255, 255, 255, 0.22); }
.glow.btn-alt:hover, .glow.btn-alt:focus-visible { box-shadow: 0 0 14px 1px rgba(255, 255, 255, 0.32); }

/* ---------- the white ticker (Cartelón Night strip, in Anton) ---------- */
.ticker {
  height: var(--tick-h); overflow: hidden; white-space: nowrap;
  display: flex; align-items: center;
  background: var(--white); color: var(--ground);
}
.ticker__track { display: inline-flex; animation: ticker 55s linear infinite; }
.ticker__run {
  flex: none; display: inline-flex; align-items: center; gap: 0.55em; padding-right: 0.55em;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: 1.625rem; letter-spacing: 0.02em;
}
.burst { flex: none; width: 20px; height: 20px; fill: var(--red); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (max-width: 699px) { .ticker__run { font-size: 1.375rem; } .burst { width: 16px; height: 16px; } }

/* ---------- section heads ---------- */
.sec-head {
  margin: 0 auto 20px;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px;
}
.dates { padding: var(--gap-sec) var(--gutter) 0; }
.dates .wb-rows { margin: 0 auto; }

/* ---------- date rows, the Who's Bad treatment: dark panel, red rules, outlined tiles, lighten on hover ---------- */
.wb-rows { background: #1e1d24; border-top: 1px solid var(--line); }
.rows-empty { padding: 24px 0; color: var(--text); font-size: 1.125rem; }
.wb-row {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) auto auto;
  align-items: center; gap: 12px 28px;
  padding: 16px clamp(14px, 2vw, 24px);
  border-bottom: 1px solid rgba(226, 28, 33, 0.55);
  transition: background-color 0.18s ease;
}
.wb-row:last-child { border-bottom: 0; }
.wb-row:hover, .wb-row:focus-within { background: #2c2b33; }
.wb-tile {
  width: 112px; height: 104px; padding: 6px;
  display: grid; place-content: center; justify-items: center; line-height: 1.05;
  border: 1.5px solid var(--red); border-radius: 8px; color: var(--white);
  transition: background-color 0.18s ease;
}
.wb-row:hover .wb-tile { background: rgba(226, 28, 33, 0.14); }
.wb-tile .tm, .wb-tile .ty { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.wb-tile .td { font-size: 2rem; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.wb-title { font-size: 1.25rem; font-weight: 500; line-height: 1.3; color: var(--white); }
.wb-where { margin-top: 2px; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.0625rem; color: var(--text); }
.wb-soon {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1px dashed var(--line-strong);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.wb-cal {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  background: var(--white); color: var(--ground); border-radius: 2px; text-decoration: none; white-space: nowrap;
  font-weight: 500; font-size: 0.875rem; letter-spacing: 0.05em; text-transform: uppercase;
  transition: background-color 0.15s ease;
}
.wb-cal:hover { background: #e4e2ea; }
.wb-tix { background: var(--red); color: var(--white); }
.wb-tix:hover { background: var(--red-press); }
@media (max-width: 720px) {
  .wb-row { grid-template-columns: 84px minmax(0, 1fr); gap: 10px 16px; padding: 14px 12px; }
  .wb-tile { width: 84px; height: 84px; }
  .wb-tile .td { font-size: 1.5rem; }
  .wb-soon, .wb-cal { grid-column: 2; justify-self: start; text-align: left; }
  .wb-soon { min-height: 0; padding: 0; border: 0; font-size: 0.75rem; }
  .wb-title { font-size: 1.125rem; }
  .wb-where { font-size: 0.9375rem; }
}

/* ---------- hover zoom on photos (Live Nation style), pointer devices only ---------- */
.zoom img, .zoom video { transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.face-img { overflow: hidden; background: var(--raised); }
@media (hover: hover) {
  .zoom:hover img, .zoom:hover video { transform: scale(1.07); }
}
.block.flush { border-top: 0; padding-top: 0; }

/* ---------- meet the band: cards flip to the bio ---------- */
.flips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(16px, 2vw, 28px); }
.flip-card { position: relative; perspective: 1400px; cursor: pointer; }
.flip-in { position: relative; aspect-ratio: 4 / 5; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.flip-card.is-flipped .flip-in { transform: rotateY(180deg); }
@media (hover: hover) { .flip-card:hover .flip-in { transform: rotateY(180deg); } }
.flip-front, .flip-back { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-front img { width: 100%; height: 100%; object-fit: cover; }
.flip-tag { position: absolute; left: 0; right: 0; bottom: 0; background: var(--black); padding: 12px 84px 14px 16px; }
.flip-tag h2 { font-size: 1.25rem; font-weight: 800; color: var(--white); line-height: 1.2; }
.flip-tag p { color: var(--lilac); font-size: 0.9375rem; font-weight: 500; }
.flip-back {
  transform: rotateY(180deg);
  /* option C: the logo violet at 84% over the member's own photo, so the person stays faintly visible */
  background-color: #46046c;
  background-size: cover; /* the tint and photo are set per card in the HTML */
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 34px) 62px;
  display: grid; align-content: center; gap: 4px;
}
.flip-name { font-size: 1.375rem; font-weight: 800; color: var(--white); line-height: 1.2; }
.flip-role { color: var(--white); font-weight: 500; font-size: 0.9375rem; }
.flip-bio { margin-top: 10px; color: var(--white); font-size: 0.9375rem; line-height: 1.5; } /* room for the longer bios (Oct 23) */
.flip-btn {
  position: absolute; right: 12px; bottom: 14px; z-index: 3;
  min-width: 60px; min-height: 44px; padding: 0 12px;
  background: transparent; color: var(--white); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 2px;
  font-weight: 700; font-size: 0.875rem; cursor: pointer;
}
@media (max-width: 1000px) { .flips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- section titles ---------- */
.section-title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.75rem, 2.9vw, 2.6rem); line-height: 1; letter-spacing: 0.02em;
  color: var(--white);
}

/* ---------- proof: one flat violet statement ---------- */
.proof {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: stretch;
  margin: 0 auto;
  padding: var(--gap-sec) var(--gutter) 0;
  gap: 0;
}
.proof-panel {
  background: var(--violet);
  padding: clamp(36px, 5vw, 72px);
  display: grid; align-content: center; gap: 20px;
}
.statement {
  max-width: 17ch;
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.9rem, 3.9vw, 3.5rem); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--white);
}
.proof-cap { font-weight: 500; font-size: 1.0625rem; color: var(--white); }
.award {
  background: var(--raised);
  padding: clamp(28px, 4vw, 56px);
  display: grid; align-content: center; justify-items: start; gap: 18px;
}
.award img { width: min(100%, 460px); height: auto; }
.award figcaption { font-weight: 700; font-size: 1.125rem; line-height: 1.35; color: var(--white); max-width: 26ch; }

/* ---------- reveal on scroll: the proof card slides in, the certificate settles; both zoom a little on hover ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), scale 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .proof-panel.reveal { transform: translateX(-56px); }
  .js .award.reveal { transition-delay: 0.15s, 0.15s, 0s; }
  .js .award.reveal img { transform: scale(0.9); transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s, scale 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .award.reveal.in img { transform: none; }
  .proof-panel, .award img { transition: scale 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
}
/* hover: a slight zoom, no tilt. It uses the separate `scale` property, so it never fights the slide-in. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .proof-panel:hover { scale: 1.02; }
  .award:hover img { scale: 1.04; }
}

/* the 100+ counter: three fixed digit slots that roll into place */
.count { font-variant-numeric: tabular-nums; }
.reel { display: inline-block; height: 1.08em; overflow: hidden; vertical-align: top; }
.reel-in { display: flex; flex-direction: column; transition: transform 1.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms); }
.reel-in span { display: block; height: 1.08em; line-height: 1.08em; }
.count.roll .reel-in { transform: translateY(calc(var(--steps) * -1.08em)); }

/* ---------- media strip ---------- */
.head-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.m { position: relative; overflow: hidden; background: var(--black); }
.m img, .m video { width: 100%; height: 100%; object-fit: cover; }
.m-video video { object-position: 60% 12%; }
.play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--black); color: var(--white); border: 2px solid var(--white);
  cursor: pointer;
}
.play[aria-pressed="true"] { opacity: 0; }
.m-video:hover .play[aria-pressed="true"], .play[aria-pressed="true"]:focus-visible { opacity: 1; }

/* ---------- band faces (names and instruments only) ---------- */
.face img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--raised); }
.face h3 { margin-top: 12px; font-size: 1.0625rem; font-weight: 700; line-height: 1.25; color: var(--white); }
.face p { font-size: 0.9375rem; color: var(--lilac); font-weight: 500; }

/* ---------- close: the words straight on a muted crowd loop; an even dark layer in this section only ---------- */
.close {
  position: relative; overflow: hidden; background: var(--black);
  min-height: clamp(480px, 74vh, 700px); /* a little taller than Merch, not a full screen */
  display: grid; place-items: center; text-align: center;
  padding: clamp(72px, 9vw, 120px) var(--gutter);
}
.close-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.close::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.close-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; }
.close-title {
  max-width: 16ch;
  font-family: var(--sans); font-weight: 800; color: var(--white);
  font-size: clamp(2.2rem, 5.6vw, 4.8rem); line-height: 1.02; letter-spacing: -0.03em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}
.close-cap { color: var(--text); font-size: 1.125rem; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.close .btn { min-height: 54px; padding: 0 34px; font-size: 1rem; }

/* ---------- inner pages ---------- */
.page-head {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(48px, 7vw, 104px) var(--gutter) clamp(36px, 5vw, 64px);
}
.page-head.split {
  max-width: 1400px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 80px); align-items: end;
}
.page-title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(3rem, 8vw, 7rem); line-height: 0.92; letter-spacing: 0.01em; color: var(--white);
}
.page-cap { margin-top: 18px; max-width: 54ch; font-size: 1.125rem; line-height: 1.55; color: var(--text); }
.page-actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.page-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

.jump { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 18px; }
.jump a { min-width: 44px; justify-content: center; font-size: 0.9375rem; }

.block { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--gutter); border-top: 1px solid var(--line); }
.block-title { margin-bottom: clamp(24px, 3vw, 40px); }
.rows-note { margin-top: 16px; color: var(--muted); font-size: 0.9375rem; }
.privacy h2 { margin-top: 32px; color: var(--white); font-size: 1.25rem; font-weight: 700; }
.privacy h2:first-child { margin-top: 0; }
.privacy p { margin-top: 8px; max-width: 62ch; color: var(--text); line-height: 1.6; }

.contact-list { border-top: 1px solid var(--line-strong); max-width: 860px; }
.contact-list div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-list dt { color: var(--muted); font-weight: 500; }
.contact-list dd { color: var(--white); }
.contact-list a { overflow-wrap: anywhere; text-underline-offset: 4px; }

/* ---------- forms (red borders on black) ---------- */
.field { display: grid; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field label, .field legend { font-size: 0.9375rem; font-weight: 500; color: var(--text); padding: 0; }
.opt { color: var(--muted); font-weight: 400; }
input[type="text"], input[type="email"], input[type="date"], select, textarea {
  width: 100%; min-height: 50px; padding: 10px 14px;
  background: var(--ground); color: var(--white);
  border: 1.5px solid var(--red); border-radius: 2px; font-size: 1rem;
}
input[type="date"] { color-scheme: dark; }
select {
  appearance: none; padding-right: 44px;
  background: var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center;
}
textarea { resize: vertical; min-height: 120px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--lilac); outline-offset: 2px; }
[aria-invalid="true"] { border-color: #ff6b6e !important; border-width: 2.5px !important; }
.form-err { color: #ff8f91; font-size: 0.9375rem; }
.done { color: var(--white); font-weight: 700; font-size: 1.125rem; padding: 12px 0; }

.book-form {
  max-width: 900px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px;
  background: var(--raised); padding: clamp(24px, 4vw, 48px);
}
.wide { grid-column: 1 / -1; }
.radios { display: grid; gap: 4px; }
.radio { display: flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 400 !important; cursor: pointer; }
.radio input {
  appearance: none; flex: none; margin: 0 0 0 -11px; width: 44px; height: 44px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='9.5' fill='none' stroke='%23e21c21' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
}
.radio input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='9.5' fill='none' stroke='%23e21c21' stroke-width='2'/%3E%3Ccircle cx='11' cy='11' r='5' fill='%23ffffff'/%3E%3C/svg%3E");
}
.radio input[aria-invalid="true"] { border: 0 !important; outline: 2px solid #ff6b6e; outline-offset: -8px; }
.form-lede { margin-bottom: 28px; max-width: 58ch; }
.form-lede a { overflow-wrap: anywhere; text-underline-offset: 4px; }

.signup-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; max-width: 560px; }
.signup-form .form-err, .signup-form .done { grid-column: 1 / -1; }
.ts-box { grid-column: 1 / -1; }

/* ---------- footer: signup, billing, disclaimer ---------- */
.site-foot { background: var(--black); border-top: 1px solid #2a2930; }
.foot-signup {
  max-width: 1400px; margin: 0 auto; padding: clamp(48px, 6vw, 72px) var(--gutter) 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 56px; align-items: end;
  border-bottom: 1px solid #2a2930;
}
.foot-signup h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -0.015em; color: var(--white); line-height: 1.15; }
.foot-signup p { color: var(--muted); margin-top: 6px; }
.foot-base { max-width: 1400px; margin: 0 auto; padding: 40px var(--gutter) 56px; display: grid; gap: 22px; align-items: flex-start; }
.foot-logo { width: 88px; height: auto; flex: none; }
.foot-text { display: grid; gap: 10px; color: var(--muted); font-size: 0.9375rem; }
.foot-billing { color: var(--white); font-weight: 700; font-size: 1rem; }
.foot-text a { color: var(--text); }
.mail { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; text-underline-offset: 4px; }
.disclaimer { max-width: 70ch; }

/* Gallery photos: a left-to-right wipe as they arrive, settling from a slight zoom; zoom on hover */
.pp-img { overflow: hidden; }
.pp-img img { transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (prefers-reduced-motion: no-preference) {
  .js .photo-fx .pp-img { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1); }
  .js .photo-fx .pp-img img { transform: scale(1.12); transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .photo-fx.in .pp-img { clip-path: inset(0 0 0 0); }
  .js .photo-fx.in .pp-img img { transform: none; }
}
@media (hover: hover) {
  .photo-fx:hover .pp-img img, .js .photo-fx.in:hover .pp-img img { transform: scale(1.07); transition-duration: 0.7s; }
}

/* ---------- merch: Live Nation cards (square photo, name in caps, price); one drifting row on Home, a grid on Merch ---------- */
.merch { margin-top: var(--gap-sec); padding: clamp(44px, 5vw, 72px) var(--gutter) clamp(52px, 5.6vw, 80px); background: var(--raised); } /* one charcoal band, edge to edge, so Merch reads as its own section between The band and the close */
.title-link { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; } /* the smaller title still makes a full-size tap target */
.title-link:hover { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.drift-wrap { position: relative; margin: 0 calc(-1 * var(--gutter)); } /* edge to edge: the row runs off both sides of the screen */
.drift { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.drift::-webkit-scrollbar { display: none; }
.drift:focus-visible { outline: 2px solid var(--lilac); outline-offset: 4px; }
.drift-track { display: flex; gap: 16px; width: max-content; }
.drift-track li { width: var(--merch-w); }
.drift-btn {
  position: absolute; z-index: 2; top: calc(var(--merch-w) / 2); transform: translateY(-50%);
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--black); color: var(--white); border: 1px solid var(--line-strong); border-radius: 2px;
  cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.drift-btn.prev { left: clamp(8px, 2vw, 24px); }
.drift-btn.next { right: clamp(8px, 2vw, 24px); }
.drift-btn:hover { border-color: var(--white); background: #1e1d24; }
.drift-btn:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; }
.mcard { display: grid; align-content: start; gap: 6px; color: var(--white); text-decoration: none; }
.mcard-img { display: block; aspect-ratio: 1; overflow: hidden; margin-bottom: 6px; } /* products are cut out (transparent), so they sit straight on the section colour */
.mcard-img img { width: 100%; height: 100%; object-fit: cover; }
.mcard-name { font-size: 0.875rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; }
.mcard-price { font-size: 0.9375rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mcard-shop { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
a.mcard:hover .mcard-shop { color: var(--white); }
a.mcard:focus-visible { outline: 2px solid var(--lilac); outline-offset: 4px; }
.merch-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 16px; } /* 5 across: shirts fill one row, bags two */
.merch-grid .mcard { display: flex; flex-direction: column; scroll-margin-top: calc(var(--head-h) + 24px); }
.merch-grid .shop { margin-top: auto; } /* every Shop now on one line across a row, even when a name wraps */
.merch-grid .mcard:target .mcard-img { outline: 2px solid var(--lilac); outline-offset: 4px; }
.shop {
  justify-self: start; display: inline-flex; align-items: center; min-height: 44px;
  color: var(--white); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.shop:hover { color: var(--text); text-decoration-thickness: 3px; }
@media (max-width: 1100px) { .merch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) { .drift-btn { width: 44px; height: 44px; } }
@media (max-width: 560px) { .merch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; } }

/* ---------- touch screens: tap and scroll stand-ins for the hover effects ---------- */
@media (hover: none) {
  .zoom, .photo-fx, .flip-card { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .zoom.tap-zoom img, .zoom.tap-zoom video { transform: scale(1.07); }
  .photo-fx.tap-zoom .pp-img img, .js .photo-fx.in.tap-zoom .pp-img img { transform: scale(1.07); transition-duration: 0.6s; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .proof { grid-template-columns: 1fr; }
  .proof-panel { padding: 48px var(--gutter); }
  .award { padding: 32px var(--gutter); grid-template-columns: 120px minmax(0, 1fr); align-items: center; }
  .award img { width: 120px; }
  .page-head.split { grid-template-columns: 1fr; }
  .book-form { grid-template-columns: 1fr; }
  .foot-signup { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .contact-list div { grid-template-columns: 1fr; gap: 2px; }
  .signup-form { grid-template-columns: 1fr; }
  .signup-form .btn { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
  .ticker__track { animation: none; }
  .zoom img { transition: none; }
  .zoom:hover img { transform: none !important; }
  .drift-track { padding-inline: var(--gutter); } /* the row holds still, so it starts on the page margin */
  .pp-img img { transition: none; }
  .flip-in { transition: none; transform: none !important; }
  .flip-back { transform: none; visibility: hidden; }
  .flip-card.is-flipped .flip-back { visibility: visible; }
  .flip-card.is-flipped .flip-front { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .flip-card:hover .flip-back { visibility: visible; }
  .flip-card:hover .flip-front { visibility: hidden; }
}

/* ---------- Wide layout (Oct 23): Live Nation proportions. Smaller section titles, 40 px side margins,
   the same space between every section, and From the stage + The band as rows that run off the right edge ---------- */
/* proof: the certificate and caption sit centred in their panel */
@media (min-width: 901px) { .award { grid-template-columns: minmax(0, 460px); justify-content: center; } }

/* From the stage + The band: rows that start on the margin and run off the right edge, with arrows */
.media, .faces { padding: var(--gap-sec) 0 0; }
.media .sec-head, .faces .sec-head { padding: 0 var(--gutter); }
.row-wrap { position: relative; }
.strip, .face-grid {
  max-width: none; display: flex; gap: 16px; overflow-x: auto;
  padding: 0 var(--gutter); scroll-padding: 0 var(--gutter); scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.strip::-webkit-scrollbar, .face-grid::-webkit-scrollbar { display: none; }
.strip .m { flex: 0 0 auto; width: var(--stage-w); aspect-ratio: 16 / 9; scroll-snap-align: start; }
.face { flex: 0 0 auto; width: var(--face-w); scroll-snap-align: start; }
.face h3 { font-size: 1.125rem; }
.face-link { display: block; color: inherit; text-decoration: none; }
.face-link .face-img { display: block; }
.face-link:focus-visible { outline: 2px solid var(--lilac); outline-offset: 4px; }
.row-btn {
  display: grid; place-items: center; position: absolute; z-index: 2; transform: translateY(-50%);
  width: 48px; height: 48px; background: var(--black); color: var(--white);
  border: 1px solid var(--line-strong); border-radius: 2px; cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.row-btn.prev { left: clamp(8px, 2vw, 24px); }
.row-btn.next { right: clamp(8px, 2vw, 24px); }
.row-btn:hover { border-color: var(--white); background: #1e1d24; }
.row-btn:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; }
.media .row-btn { top: calc(var(--stage-w) * 9 / 32); }
.faces .row-btn { top: calc(var(--face-w) * 5 / 8); }

@media (max-width: 699px) {
  :root { --stage-w: 84vw; --face-w: 64vw; --merch-w: 62vw; }
  .row-btn { width: 44px; height: 44px; }
}

/* Meet the Band */
@media (max-width: 760px) { .flips { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .flip-in { aspect-ratio: 3 / 4; } }
@media (min-width: 641px) and (max-width: 760px) { .flips { max-width: 480px; margin: 0 auto; } }

/* ---------- Gallery (Oct 23): every photo and clip, in columns at their own shapes; each wipes in as it arrives
   and zooms on hover or tap (the Book Now photo treatment); clips play only when pressed ---------- */
.gallery { columns: 3; column-gap: 16px; }
.g-item { position: relative; break-inside: avoid; margin: 0 0 16px; background: var(--raised); }
.g-item img, .g-item video { display: block; width: 100%; height: auto; }
.g-video .play { z-index: 2; }
.g-video:hover .play[aria-pressed="true"] { opacity: 1; }
@media (max-width: 1000px) { .gallery { columns: 2; } }
@media (max-width: 560px) { .gallery { columns: 1; } }

/* ---------- Book Now as chapters (Oct 23, Live Nation Premium treatment): an eyebrow, a big Anton headline, one sentence,
   one thing to tap (an accordion or tabs), dimmed full-width photos behind three chapters, the form below.
   Every motion here is skipped under prefers-reduced-motion. ---------- */
.bn-hero { position: relative; padding: 0 var(--gutter); } /* the menu bar sits flush on the band below: no strip of page colour under it */
.bn-title, .bn-big { font-family: var(--display); font-weight: 400; text-transform: uppercase; color: var(--white); line-height: 0.92; letter-spacing: 0.01em; }
.bn-title { font-size: clamp(3.5rem, 11vw, 10rem); }
.bn-big { font-size: clamp(2.75rem, 7.4vw, 6.75rem); margin: 10px 0 22px; max-width: 16ch; }
.ln { display: block; overflow: hidden; padding-bottom: 0.04em; }
.ln > span { display: inline-block; }
.bn-eyebrow { font-weight: 800; font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lilac); }
.bn-text { max-width: 54ch; font-size: 1.125rem; line-height: 1.55; color: var(--text); margin-bottom: 28px; }

/* the jump bar under the title: sticks under the header while you read */
.bn-jump {
  position: sticky; top: var(--head-h); z-index: 20; margin: 32px calc(-1 * var(--gutter)) 0;
  padding: 0 var(--gutter); display: flex; gap: 4px 26px; overflow-x: auto; scrollbar-width: none;
  background: var(--ground); border-bottom: 1px solid var(--line);
}
.bn-jump::-webkit-scrollbar { display: none; }
.bn-jump a {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; min-width: 44px; position: relative;
  color: var(--white); text-decoration: none; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.bn-jump a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; }
.bn-jump a:hover::after, .bn-jump a.is-here::after { transform: scaleX(1); }
.bn-jump .bn-jump-cta { margin-left: auto; }
.bn-jump .bn-jump-cta::after { transform: scaleX(1); } /* white text with a standing red line: red text this small fails contrast on the dark ground */

/* chapters */
.bn-ch { position: relative; padding: var(--gap-sec) var(--gutter); }
.bn-in { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; }
.bn-narrow { max-width: 980px; margin: 0; }
.bn-photo { overflow: hidden; background: #000; }
/* the dimmed photo behind a chapter; Rooms keeps one layer per tab and cross-fades between them */
.bn-bgs { position: absolute; inset: 0; }
.bn-bgs span { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0; transform: scale(1.06); transition: opacity 0.8s ease, transform 2.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.bn-bgs span.on { opacity: 0.32; }
.bn-photo.in .bn-bgs span { transform: none; }
.bn-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.2) 100%); }

/* four big quick facts */
.bn-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 36px; border-top: 1px solid var(--line-strong); max-width: 1100px; }
.bn-facts div { padding: 18px 18px 18px 0; }
.bn-facts div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.bn-facts dt { font-family: var(--display); font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1; text-transform: uppercase; color: var(--white); }
.bn-facts dd { margin-top: 8px; font-size: 0.9375rem; color: var(--text); }

/* accordion: big caps rows with a plus that turns into a cross; the panel slides open */
.acc { max-width: 980px; margin-bottom: 32px; border-top: 1px solid var(--line-strong); }
.acc-label { font-weight: 800; font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 16px 0 4px; }
.acc-label + .acc-item { border-top: 0; }
.acc-item { border-bottom: 1px solid var(--line-strong); }
.acc-btn {
  width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 0; background: none; border: 0; color: var(--white); text-align: left; cursor: pointer;
  font-family: var(--sans); font-weight: 800; font-size: clamp(1.0625rem, 1.6vw, 1.375rem); letter-spacing: 0.02em; text-transform: uppercase;
}
.acc-btn:hover { color: var(--lilac); }
.acc-btn:focus-visible { outline: 2px solid var(--lilac); outline-offset: 4px; }
.acc-x { position: relative; flex: none; width: 18px; height: 18px; }
.acc-x::before, .acc-x::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: currentColor; transition: transform 0.35s ease; }
.acc-x::after { transform: rotate(90deg); }
.acc-btn[aria-expanded="true"] .acc-x { color: var(--red); }
.acc-btn[aria-expanded="true"] .acc-x::before { transform: rotate(45deg); }
.acc-btn[aria-expanded="true"] .acc-x::after { transform: rotate(135deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.acc-panel > div { overflow: hidden; }
.acc-panel p { padding: 0 48px 22px 0; font-size: 1.0625rem; line-height: 1.55; color: var(--text); max-width: 62ch; }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }

/* tabs: a list on the left with a growing red line; the photo and venues on the right cross-fade */
.bn-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.tabs { display: grid; gap: 2px; margin-top: 8px; }
.tabs [role="tab"] {
  display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 0; background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--muted); font-family: var(--sans); font-weight: 800; font-size: clamp(1.0625rem, 1.6vw, 1.375rem); letter-spacing: 0.02em; text-transform: uppercase;
}
.tabs [role="tab"]::after { content: ""; height: 2px; width: 0; background: var(--red); transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tabs [role="tab"][aria-selected="true"] { color: var(--white); }
.tabs [role="tab"][aria-selected="true"]::after { width: clamp(40px, 8vw, 120px); }
.tabs [role="tab"]:hover { color: var(--white); }
.tabs [role="tab"]:focus-visible { outline: 2px solid var(--lilac); outline-offset: 4px; }
.tab-panel.is-on .tp-line, .tab-panel.is-on .tp-venues { animation: tp-text 0.6s ease both 0.15s; }
@keyframes tp-text { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tp-line { font-family: var(--display); font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.05; text-transform: uppercase; color: var(--white); max-width: 18ch; }
.tp-venues { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-strong); font-size: 1.0625rem; line-height: 1.7; color: var(--text); max-width: 46ch; }

/* What's included: the accordion on the left, a tall portrait on the right that holds still while rows open */
.bn-split-photo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: start; }
.bn-portrait { position: sticky; top: calc(var(--head-h) + 76px); aspect-ratio: 2 / 3; max-height: calc(100vh - var(--head-h) - 110px); overflow: hidden; background: var(--raised); justify-self: end; width: 100%; }
.bn-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.bn-ch .book-form { margin-top: 8px; }

/* the slow strip of venue names */
.bn-strip { position: relative; z-index: 1; margin-top: clamp(40px, 5vw, 64px); overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bn-strip-track { display: inline-flex; white-space: nowrap; animation: bn-strip 70s linear infinite; }
.bn-strip-track span { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.25rem); text-transform: uppercase; color: var(--white); padding: 14px 0; }
@keyframes bn-strip { to { transform: translateX(-50%); } }

/* headlines rise line by line as each chapter arrives */
@media (prefers-reduced-motion: no-preference) {
  .js .ln > span { transform: translateY(105%); transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .ln + .ln > span { transition-delay: 0.08s; }
  .js .in .ln > span, .js .bn-hero .ln > span.up { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bn-strip-track { animation: none; }
  .acc-panel, .acc-x::before, .acc-x::after, .tabs [role="tab"]::after, .bn-jump a::after { transition: none; }
  .tab-panel.is-on .tp-line, .tab-panel.is-on .tp-venues { animation: none; }
  .bn-bgs span { transition: none; }
}

@media (max-width: 900px) {
  .bn-split, .bn-split-photo { grid-template-columns: 1fr; }
  .bn-portrait { position: relative; top: 0; max-height: none; aspect-ratio: 4 / 5; justify-self: stretch; }
  .bn-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bn-facts div:nth-child(3) { padding-left: 0; border-left: 0; }
  .bn-facts div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .bn-jump .bn-jump-cta { margin-left: 0; }
  .acc-panel p { padding-right: 0; }
}


/* Book Now bands (Oct 23): every band has its own solid background, and each is drawn on its own layer at all times.
   On Macs, Chrome renders an animating element through a different colour path, so a near-black like --ground came out
   a shade off while a headline rose in (a grey band that snapped back to black) and left strips where bands met.
   Pure black can't shift, and a band that is always its own layer can't switch paths mid-animation. */
.bn-ch, .bn-hero { background: var(--black); transform: translateZ(0); }
.bn-hero .bn-jump { margin-bottom: 0; background: transparent; }

/* ---------- Book Now with Live Nation Premium's rhythm (measured on premium.livenation.com/experiences, Oct 23):
   a full-screen header photo, black space between sections, sections that fade up 100 px over 1 s as they arrive
   (and drop away again when you scroll back up), tall photo sections about 1.8 screens high, and the black sections
   with their photo beside the content. The animation is off below 992 px and under reduced motion, as on their page. These rules apply only on Book Now (<html class="ln-page">). ---------- */
.ln-page, .ln-page body, .ln-page main { background: #000; }

/* full-screen header: the title and menu sit near the bottom of the photo */
.ln-page .bn-hero { min-height: calc(100svh - var(--head-h)); display: flex; flex-direction: column; justify-content: flex-end; padding-top: 0; }
.ln-page .bn-hero-in { position: relative; z-index: 1; width: 100%; max-width: none; margin: 0; } /* line the title up with the sections below */
.ln-page .bn-hero .bn-bgs span.on { opacity: 0.55; transform: none; }
.ln-page .bn-hero.bn-photo::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.85) 100%); }

/* black space between sections */
.ln-page .bn-ch { margin-top: clamp(140px, 16vw, 230px); padding-top: 0; padding-bottom: 0; }
.ln-page #show { margin-top: 100px; }
.ln-page #check { padding-bottom: clamp(96px, 10vw, 160px); }

/* tall photo sections: about 1.8 screens of photo, the text over the top part, fading to black at the foot */
.ln-page .bn-tall { min-height: min(110vw, 1600px); padding-top: clamp(96px, 11vw, 170px); }
.ln-page .bn-tall .bn-bgs span.on { opacity: 0.6; background-position: 50% 20%; }
.ln-page .bn-tall::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 38%, rgba(0, 0, 0, 0.25) 70%, #000 100%); }

/* Rooms: the chosen tab's photo beside the list, on black */
.ln-page .tp-img { aspect-ratio: 906 / 550; overflow: hidden; background: var(--raised); margin-bottom: 22px; }
.ln-page .tp-img img { width: 100%; height: 100%; object-fit: cover; }
.ln-page .tab-panel.is-on .tp-img img { animation: tp-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes tp-in { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
.ln-page .tp-line { font-size: clamp(1.375rem, 2.2vw, 2rem); }

/* What's included: a landscape photo beside the accordion */
.ln-page .bn-portrait { aspect-ratio: 906 / 550; max-height: none; }

/* the fade-up (AOS "fade-up": opacity 0 and 100 px lower, 1 s, ease) */
.ln-aos .bn-ch.aos-pre { opacity: 0; transform: translate3d(0, 100px, 0); transition: opacity 1s ease, transform 1s ease; }
.ln-aos .bn-ch.aos-pre.aos-in { opacity: 1; transform: translate3d(0, 0, 0); }

@media (max-width: 991px) {
  .ln-page .bn-ch { margin-top: clamp(72px, 12vw, 120px); }
  .ln-page #show { margin-top: 0; }
  .ln-page .bn-tall { min-height: 0; padding-top: 72px; padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .ln-page .tab-panel.is-on .tp-img img { animation: none; }
}

/* ---- round 2 (Ruben, Oct 23): Live Nation's title and sub-menu ----
   One column for the whole page, with the live Book Now's margins: every headline starts at the same left edge
   (40 px in at 1440, 260 px at 1920). The header keeps only the title and the menu, low in the photo, with no hairline. */
.ln-page { --bn-col: 1400px; } /* the live Book Now's margins: the page gutter (40 px at 1440), a 1400 px column on wider screens */
.ln-page .bn-in, .ln-page .bn-narrow, .ln-page .bn-hero-in { width: 100%; max-width: var(--bn-col); margin-left: auto; margin-right: auto; }
.ln-page .bn-narrow > * { max-width: 980px; }
.ln-page .bn-hero { padding-bottom: clamp(40px, 6vh, 64px); }
.ln-page .bn-hero .bn-title { font-size: clamp(3.75rem, 9vw, 8.25rem); }
.ln-page .bn-hero .bn-jump {
  position: static; margin: clamp(14px, 2vh, 22px) 0 0; padding: 0; border: 0; background: transparent;
  gap: 4px clamp(22px, 3.2vw, 48px); overflow-x: auto;
}
.ln-page .bn-hero .bn-jump a { min-height: 48px; font-size: clamp(0.9375rem, 1.3vw, 1.125rem); font-weight: 800; letter-spacing: 0.04em; }
.ln-page .bn-hero .bn-jump a::after { bottom: 4px; }
.ln-page .bn-hero .bn-jump .bn-jump-cta { margin-left: 0; }

/* ---- FAQs (Oct 23, option A): a photo on the right, the questions on the left ---- */
.ln-page #faq .bn-narrow > * { max-width: none; }
.ln-page #faq .faq-photo { position: absolute; z-index: 0; top: clamp(80px, 8.5vw, 124px); right: 0; width: 54%; aspect-ratio: 906 / 600; margin: 0; overflow: hidden; }
.ln-page #faq .faq-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 35%; }
.ln-page #faq .bn-eyebrow, .ln-page #faq .bn-big, .ln-page #faq .acc { position: relative; z-index: 1; }
.ln-page #faq .acc { width: 40%; min-width: 300px; margin-top: clamp(40px, 5vw, 80px); }
.ln-page #faq .acc-btn { font-size: clamp(0.9375rem, 1.25vw, 1.125rem); }
.ln-page #faq { min-height: calc(clamp(80px, 8.5vw, 124px) + min(1400px, 100vw - 2 * var(--gutter)) * 0.54 * 600 / 906); }
@media (max-width: 991px) {
  .ln-page #faq .faq-photo { position: static; width: 100%; margin: 0 0 24px; }
  .ln-page #faq .acc { width: 100%; margin-top: 0; }
  .ln-page #faq { min-height: 0; }
  .ln-page #faq .bn-in { display: flex; flex-direction: column; }
  .ln-page #faq .faq-photo { order: 3; }
  .ln-page #faq .acc { order: 4; }
}

/* Check a date on a dimmed crowd photo, so photo and plain sections keep alternating to the end */
.ln-page #check { overflow: hidden; padding-top: clamp(96px, 11vw, 170px); }
.ln-page #check .check-bgs span.on { opacity: 0.55; transform: none; background-position: 50% 78%; } /* the Grandscape-from-behind photo (Oct 26) is darker, so it sits a little brighter and lower */
.ln-page #check::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.85) 100%); }
.ln-page #check .book-form { background: rgba(22, 21, 28, 0.92); }

/* What's included: a bigger photo that holds still (no longer sticky), as tall as the headline and the five rows */
.ln-page #included .bn-split-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: stretch; }
.ln-page #included .bn-portrait { position: relative; top: 0; aspect-ratio: auto; height: 100%; min-height: 460px; max-height: none; }
@media (max-width: 900px) {
  .ln-page #included .bn-split-photo { grid-template-columns: 1fr; }
  .ln-page #included .bn-portrait { height: auto; min-height: 0; aspect-ratio: 3 / 2; }
}
.ln-page .bn-text { max-width: 60ch; } /* keep running text to a readable line length inside the wide column */

/* ---------- Pre-launch round (Oct 26) ---------- */

/* Footer: the name and contact on the left, round social icons on the right, one row of page links, then the disclaimer */
.foot-base { display: grid; gap: 22px; }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 32px; }
.foot-brand { display: flex; gap: 24px; align-items: center; min-width: 0; }
.foot-social { display: flex; gap: 12px; }
.contact-list .foot-social { padding-top: 4px; } /* a little air under the Follow label when the rows stack on phones */
.soc {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  padding: 3px; background-clip: content-box !important; /* a 38px circle inside a 44px tap area (Ruben, Oct 27: circles smaller, marks bigger) */
  border-radius: 50%; color: var(--white); transition: filter 0.2s;
}
.soc svg { width: 24px; height: 24px; }
/* each network's own colors (Ruben, Oct 26); white marks on them */
.soc-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.soc-fb { background: #1877f2; }
.soc-yt { background: #ff0000; }
.soc:hover { filter: brightness(1.12); }
.foot-pages { border-top: 1px solid #2a2930; padding-top: 12px; }
.foot-pages ul { display: flex; flex-wrap: wrap; gap: 0 24px; }
.foot-pages a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--text); font-weight: 500; font-size: 0.9375rem; text-decoration: none; }
.foot-pages a:hover, .foot-pages a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.foot-base .disclaimer { color: var(--muted); font-size: 0.875rem; }
.foot-credit { display: flex; flex-wrap: wrap; gap: 0 20px; }
.foot-credit a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 0.875rem; text-underline-offset: 4px; }
.foot-credit a:hover { color: var(--text); text-decoration-color: var(--red); }
@media (max-width: 560px) {
  .foot-brand { flex-direction: column; align-items: flex-start; gap: 16px; }
  .foot-pages ul { gap: 0 18px; }
}
@media (prefers-reduced-motion: reduce) { .soc { transition: none; } }

/* Past Shows: every show by area, two columns of date / venue / city rows */
.area .section-title { margin-bottom: 4px; }
.area-count { color: var(--muted); margin-bottom: 20px; }
.shows { columns: 2 340px; column-gap: 48px; }
.shows li {
  break-inside: avoid; display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.45;
}
.shows time { color: var(--muted); font-variant-numeric: tabular-nums; }
.shows b { display: block; color: var(--white); font-weight: 600; }
.shows span { color: var(--muted); }
.block.area { padding-top: clamp(48px, 5vw, 72px); padding-bottom: 0; border-top: 0; }
.block.area:last-of-type { padding-bottom: clamp(64px, 7vw, 96px); }

/* Spanish page */
.es-billing { font-weight: 700; color: var(--white); }
.es-note { margin-top: 18px; color: var(--muted); }
.es-note a, .es-text a { overflow-wrap: anywhere; }
.es-text { max-width: 58ch; }

/* Book Now downloads: one row per file under What's included (the whole row is the link). Hover or focus draws a red line
   beside the file name, as on the Rooms we play tabs, and the whole row lightens, as on the Upcoming Shows rows; nothing moves sideways (Ruben, Oct 26) */
.bn-dl { margin-top: clamp(56px, 6vw, 96px); }
.bn-dl-title { font-family: var(--display); font-weight: 400; font-size: clamp(1.75rem, 2.9vw, 2.625rem); line-height: 1; text-transform: uppercase; color: var(--white); }
.bn-dl-cap { color: var(--muted); margin: 8px 0 20px; }
.dl-rows { --dl-in: clamp(12px, 1.6vw, 20px); margin-inline: calc(-1 * var(--dl-in)); border-top: 1px solid var(--line); } /* the rules and the hover shade reach a little past the column; the text stays in line with the heading */
.dl-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 24px; align-items: center;
  padding: 16px var(--dl-in);
  border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text);
  transition: background-color 0.18s ease;
}
.dl-row:hover, .dl-row:focus-visible { background: #1e1d24; } /* the Upcoming Shows rows' hover shade */
.dl-name { font-weight: 700; color: var(--white); font-size: 1.0625rem; }
.dl-n { display: inline-flex; align-items: center; gap: 16px; }
.dl-n::after { content: ""; height: 2px; width: 0; background: var(--red); transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.dl-row:hover .dl-n::after, .dl-row:focus-visible .dl-n::after { width: clamp(40px, 6vw, 96px); }
.dl-what { display: block; font-weight: 400; color: var(--muted); font-size: 0.9375rem; }
.dl-meta { color: var(--muted); font-size: 0.875rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; background: var(--red); color: var(--white); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; }
@media (hover: hover) { .dl-row:hover .dl-btn { background: var(--red-press); } }
@media (max-width: 700px) {
  .dl-row { grid-template-columns: minmax(0, 1fr) auto; }
  .dl-meta { grid-column: 1; grid-row: 2; }
  .dl-btn { grid-column: 2; grid-row: 1 / span 2; padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) { .dl-row, .dl-n::after { transition: none; } }

/* Sound on the clips (Oct 26): a speaker button appears once a clip has started; it mutes and unmutes */
.mute {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0, 0, 0, 0.72); color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.7); cursor: pointer;
}
.mute[aria-pressed="true"] .waves { opacity: 0; }

/* Videos page (option A): the newest big with its title beside it, the YouTube videos in a grid below */
.vp { display: grid; gap: clamp(40px, 5vw, 64px); }
.vp-feature { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: end; }
.vp-media, .yt { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--black); overflow: hidden; }
.vp-media video, .yt img { width: 100%; height: 100%; object-fit: cover; }
.vp-media .play { z-index: 2; }
.vp-media:hover .play[aria-pressed="true"] { opacity: 1; }
.vp-dur { position: absolute; left: 10px; bottom: 10px; background: var(--black); color: var(--white); font-size: 0.8125rem; font-weight: 700; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.vp-media video[controls] ~ .vp-dur { display: none; }
.vp-eyebrow { color: var(--lilac); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
.vp-title { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 0.95; text-transform: uppercase; color: var(--white); }
.vp-where { color: var(--muted); margin-top: 6px; }
.vp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
.vp-card-title { margin-top: 14px; font-size: 1.0625rem; font-weight: 700; color: var(--white); }
.vp-card .vp-where { margin-top: 2px; font-size: 0.9375rem; }
.yt-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; background: var(--black); color: var(--white); border: 2px solid var(--white);
  transition: background-color 0.2s, border-color 0.2s;
}
.yt img { transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (hover: hover) { .yt:hover .yt-play { background: var(--red); border-color: var(--red); } .yt:hover img { transform: scale(1.05); } }
.yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--black); }
@media (max-width: 900px) { .vp-feature { grid-template-columns: 1fr; } .vp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vp-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .yt img, .yt-play { transition: none; } .yt:hover img { transform: none; } }

/* the Book Now eyebrow wraps on phones since "Quintanilla" was added: split it into two even lines, never one word alone */
.bn-hero .bn-eyebrow { text-wrap: balance; }

/* Song list on Book Now (Oct 27): titles in three columns, two on phones, each on a hairline like the download rows */
.songs { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: clamp(24px, 4vw, 64px); }
.songs li { break-inside: avoid; padding: 12px 0; border-top: 1px solid var(--line); font-size: 1.0625rem; line-height: 1.35; color: var(--text); }
@media (max-width: 860px) { .songs { columns: 2; } }

/* Contact Us (Oct 27): the message form and the contact list in one section. Desktop (from 1000px): the form's heading on top,
   then the form box on the left and the details on the right, both starting at the top of the box. Phones: heading, form, details. */
.contact-wrap { display: grid; }
.contact-wrap .contact-list { max-width: 860px; margin-top: 48px; }
.contact-form-h { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; color: var(--white); margin-bottom: 8px; }
.contact-head .form-lede { margin-bottom: 20px; }
@media (min-width: 1000px) {
  .contact-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "head ." "form list"; column-gap: clamp(40px, 5vw, 80px); align-items: start; }
  .contact-head { grid-area: head; }
  .contact-wrap .book-form { grid-area: form; }
  .contact-wrap .contact-list { grid-area: list; margin-top: 0; }
  .contact-wrap .contact-list div { grid-template-columns: 120px minmax(0, 1fr); }
}

/* ---------- Buyer pages and the Book Now hub (Nov 3, 2026; from the approved draft's preview.css, draft-only rules left out) ---------- */
.shows-list { list-style: none; margin: 0; padding: 0; }
.shows-list li { display: grid; grid-template-columns: 8.5em 1fr; gap: 1em; padding: 0.6em 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.95rem; }
.shows-list .sl-d { opacity: 0.7; white-space: nowrap; }
@media (max-width: 600px) { .shows-list li { grid-template-columns: 1fr; gap: 0.15em; } }
input[type="tel"] { width: 100%; min-height: 50px; padding: 10px 14px; background: var(--ground); color: var(--white); border: 1.5px solid var(--red); border-radius: 2px; font-size: 1rem; }
.two-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.two-lists h3 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; text-transform: uppercase; margin: 0 0 0.5rem; }
.two-lists-more { margin-top: 1.5rem; }
@media (max-width: 800px) { .two-lists { grid-template-columns: 1fr; } }
.next-show { margin-top: 1.6rem; padding: 1.1rem 1.2rem; border: 1.5px solid var(--red); border-radius: 6px; }
.next-show p { margin: 0 0 0.8rem; }
.acc-more { margin-top: 1rem; }
/* tilde and accents on display titles (QUINCEAÑERAS): give the clipped lines headroom */
.bn-title .ln, .bn-big .ln { padding-top: 0.16em; margin-top: -0.16em; }
.who-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px; }
.who-card { background: #111; border: 1px solid #2a2a2a; padding: 0 0 18px; }
.who-card .who-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.who-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.who-card h3 { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: 1.5rem; line-height: 1; margin: 16px 16px 8px; }
.who-card h3 a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.who-card p { margin: 0 16px 12px; color: #ccc; }
.who-card .tlink { margin: 0 16px; }
@media (max-width: 1000px) { .who-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .who-grid { grid-template-columns: 1fr; } }
.ln-page .acc-panel p { max-width: 68ch; }