/* =========================================================
   BOCA TRAIN — styles.css
   Dark "stage" design system for the booking site.

   Hover rule: only things that do something when clicked
   (links, buttons, form controls) change on hover. Static
   surfaces (.panel, venue tiles, member cards) never do.

   Contents
     1.  Design tokens
     2.  Reset & base
     3.  Utilities & layout
     4.  Buttons & surfaces
     5.  Header & navigation
     6.  Hero
     7.  Watch & listen
     8.  Ensembles
     9.  Music styles & song requests
     10. Venues
     11. About, members & add-ons
     12. FAQ accordion
     13. Contact & booking form
     14. Footer & mobile CTA bar
     15. Motion
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root {
  /* Brand palette */
  --bg-obsidian: #0D0F12;
  --bg-card: #161A23;
  --color-accent: #D4AF37;
  --text-ivory: #F8FAFC;
  --text-muted: #94A3B8;

  /* Derived tones */
  --bg-band: #11141A;                         /* alternate section band */
  --accent-hover: #E3C35A;
  --accent-wash: rgba(212, 175, 55, 0.08);
  --border-brass: rgba(212, 175, 55, 0.2);
  --border-brass-strong: rgba(212, 175, 55, 0.55);
  --border-subtle: rgba(148, 163, 184, 0.22);
  --text-soft: rgba(248, 250, 252, 0.82);

  /* Typography */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Geometry */
  --radius: 12px;
  --radius-sm: 8px;
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 76px;
  --section-y: clamp(72px, 10vw, 120px);

  /* Effects */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --shadow-gold: 0 12px 30px -12px rgba(212, 175, 55, 0.55);
}


/* =========================================================
   2. RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--bg-obsidian);
  color: var(--text-ivory);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, iframe, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
address { font-style: normal; }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Italic gold emphasis inside headings */
h1 em, h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--color-accent);
}

::selection { background: var(--color-accent); color: var(--bg-obsidian); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}


/* =========================================================
   3. UTILITIES & LAYOUT
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: 16px;
  z-index: 200;
  padding: 0.75em 1.25em;
  background: var(--color-accent);
  color: var(--bg-obsidian);
  font-weight: 700;
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: 16px; }

/* Sections */
.section {
  position: relative;
  padding-block: var(--section-y);
}

.section-alt {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(212, 175, 55, 0.05), transparent 70%),
    var(--bg-band);
  border-block: 1px solid rgba(212, 175, 55, 0.07);
}

.section-head {
  max-width: 720px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  text-align: center;
}
.section-head h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
.section-head h2:last-child { margin-bottom: 0; }
.section-head p:last-child:not(.kicker) { color: var(--text-muted); font-size: 1.075rem; margin: 0; }

/* Small uppercase label above headings, flanked by brass rules */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.kicker::before, .kicker::after {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.kicker-left::before, .kicker-left::after { display: none; }

/* Small uppercase descriptor (lineups, album type, etc.) */
.label {
  margin-bottom: 0.5rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sub-heading {
  margin: clamp(48px, 7vw, 80px) 0 20px;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.muted { color: var(--text-muted); }
.lead { font-size: 1.1rem; color: var(--text-soft); }

.text-link {
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-accent);
  transition: color 0.2s;
}
.text-link:hover { color: var(--accent-hover); }


/* =========================================================
   4. BUTTONS & SURFACES
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85em 1.5em;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    background-color 0.25s,
    border-color 0.25s,
    color 0.25s;
}
.btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.btn:disabled { opacity: 0.6; cursor: progress; }

/* Primary CTA: solid satin gold, obsidian bold text, upward lift */
.btn-primary {
  background: var(--color-accent);
  color: var(--bg-obsidian);
  font-weight: 700;
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}
.btn-primary:active { transform: translateY(0); }

/* Secondary: outlined brass */
.btn-outline {
  background: rgba(13, 15, 18, 0.35);
  border-color: var(--border-brass-strong);
  color: var(--text-ivory);
}
.btn-outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

.btn-xs { padding: 0.5em 0.9em; font-size: 0.8rem; }
.btn-sm { padding: 0.65em 1.1em; font-size: 0.875rem; }
.btn-lg { padding: 1em 1.9em; font-size: 1rem; }
.btn-block { width: 100%; }

/* Static surface: deliberately no hover state */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border-brass);
  border-radius: var(--radius);
}


/* =========================================================
   5. HEADER & NAVIGATION
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(13, 15, 18, 0.55);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s, border-color 0.3s;
}
.site-header.is-scrolled,
.site-header.nav-open {
  background: rgba(13, 15, 18, 0.94);
  border-bottom-color: var(--border-brass);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
}

.brand { flex-shrink: 0; display: block; }
.brand img,
.footer-brand img {
  width: auto;
  font-family: var(--font-serif);   /* styles the alt text until logo.png is added */
  color: var(--text-ivory);
}
.brand img { height: 52px; }

.primary-nav { margin-inline: auto; }
.primary-nav ul { display: flex; gap: 4px; }
.primary-nav a {
  position: relative;
  display: block;
  padding: 0.5em 0.8em;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.2s;
}
.primary-nav a:hover,
.primary-nav a[aria-current] { color: var(--text-ivory); }
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0.8em; right: 0.8em; bottom: 2px;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform 0.3s var(--ease);
}
.primary-nav a:hover::after,
.primary-nav a[aria-current]::after { transform: scaleX(1); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s;
}
.header-phone svg { width: 18px; height: 18px; color: var(--color-accent); }
.header-phone:hover { color: var(--color-accent); }

/* Hamburger (hidden on desktop) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 11px;
  background: transparent;
  border: 1px solid var(--border-brass);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--text-ivory);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1160px) {
  .nav-toggle { display: inline-flex; }
  .header-actions { margin-left: auto; }

  /* Drop-down panel under the header */
  .primary-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    margin: 0;
    padding: 8px var(--gutter) 24px;
    background: rgba(13, 15, 18, 0.98);
    border-bottom: 1px solid var(--border-brass);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s, transform 0.25s var(--ease), visibility 0.25s;
  }
  .nav-open .primary-nav { opacity: 1; visibility: visible; transform: none; }
  .primary-nav ul { flex-direction: column; gap: 0; }
  .primary-nav a {
    padding: 0.95em 0;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(248, 250, 252, 0.06);
  }
  .primary-nav a::after { display: none; }
  .primary-nav a[aria-current] { color: var(--color-accent); }
}

@media (max-width: 640px) {
  :root { --header-h: 68px; }
  .brand img { height: 46px; }
  .header-phone span { display: none; }   /* icon-only phone */
  .header-cta { display: none; }          /* mobile CTA bar takes over */
  .header-phone {
    width: 44px; height: 44px;
    justify-content: center;
    border: 1px solid var(--border-brass);
    border-radius: var(--radius-sm);
  }
}


/* =========================================================
   6. HERO
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(88vh, 820px);
  margin-top: calc(-1 * var(--header-h));   /* slide under the transparent header */
  padding-top: var(--header-h);
  overflow: hidden;
  background: var(--bg-obsidian);
}

/* Media fills the hero behind the text. A dark gradient runs from the left
   (under the headline) to clear on the right (where the band plays), with
   soft fades under the header and into the next section. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* The bottom fade is a mask, not an overlay, so no hard video edge shows at the seam */
  -webkit-mask-image: linear-gradient(180deg, #000 66%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 66%, transparent 97%);
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 15, 18, 0.7) 0%, rgba(13, 15, 18, 0) 20%),
    linear-gradient(90deg,
      rgba(13, 15, 18, 0.92) 0%,
      rgba(13, 15, 18, 0.84) 16%,
      rgba(13, 15, 18, 0.68) 32%,
      rgba(13, 15, 18, 0.46) 48%,
      rgba(13, 15, 18, 0.22) 64%,
      rgba(13, 15, 18, 0.06) 78%,
      rgba(13, 15, 18, 0) 90%);
  pointer-events: none;
}
.hero-media img,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 70%;
  filter: brightness(0.82) saturate(0.95);
}
.hero-video { object-position: center 35%; opacity: 0; transition: opacity 0.8s ease; }   /* keeps heads clear of the header */
.hero-video.is-playing { opacity: 1; }

/* YouTube loop, sized to cover the media box like object-fit: cover */
.hero-yt {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
  pointer-events: none;
  opacity: 0;
  filter: brightness(0.82) saturate(0.95);
  transition: opacity 1s ease;
}
.hero-yt.is-playing { opacity: 1; }
.hero-yt iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: max(100cqw, 177.78cqh);
  height: max(100cqh, 56.25cqw);
  max-width: none;
  border: 0;
  transform: translate(-50%, -38%) scale(1.26);   /* trims the video's corner watermark and YouTube overlays */
}

/* Tablets and phones: the text spans the width, so the video covers the top of
   the screen and the headline overlaps its lower half, with the gradient
   running bottom to top instead of left to right. */
@media (max-width: 900px) {
  .hero { min-height: 0; justify-content: flex-start; }
  .hero-media {
    inset: 0 0 auto;
    height: clamp(380px, 118vw, 680px);
    -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
  }
  .hero-media::after {
    background: linear-gradient(180deg,
      rgba(13, 15, 18, 0.65) 0%,
      rgba(13, 15, 18, 0.1) 15%,
      rgba(13, 15, 18, 0.05) 32%,
      rgba(13, 15, 18, 0.4) 52%,
      rgba(13, 15, 18, 0.75) 74%,
      rgba(13, 15, 18, 0.9) 100%);
  }
  .hero-video { object-position: center 30%; }
}

.hero-content { position: relative; padding-block: clamp(56px, 10vh, 112px); }
.hero-copy { max-width: 600px; }
@media (max-width: 900px) {
  .hero-content { padding-block: clamp(150px, 48vw, 360px) clamp(40px, 9vw, 64px); }   /* text starts partway down the video */
  .hero-copy { max-width: 640px; }
}

.eyebrow {
  display: inline-block;
  margin-bottom: 1.6rem;
  padding: 0.55em 1.2em;
  background: rgba(13, 15, 18, 0.55);
  border: 1px solid var(--border-brass-strong);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.hero h1 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.05;
  margin-bottom: 0.45em;
}

.hero-sub {
  margin-bottom: 0.9rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  color: var(--text-ivory);
}

.hero-styles {
  margin-bottom: 2.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-styles span { margin-inline: 0.5em; color: var(--color-accent); }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 520px) {
  .eyebrow { font-size: 0.66rem; letter-spacing: 0.12em; }
  .hero-ctas .btn { width: 100%; }
}


/* =========================================================
   7. WATCH & LISTEN
   ========================================================= */
.video-frame {
  position: relative;
  max-width: 1040px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-brass);
  border-radius: var(--radius);
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 0.95);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Click-to-load YouTube player (poster set via --poster in JS) */
.yt-facade {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background-color: var(--bg-card);
  background-image:
    var(--poster, none),
    radial-gradient(ellipse 60% 70% at 50% 40%, rgba(212, 175, 55, 0.16), transparent 70%);
  background-size: cover;
  background-position: center;
}
.yt-facade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(13, 15, 18, 0.85) 100%);
}

.play-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(68px, 9vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--bg-obsidian);
  box-shadow: 0 0 0 10px rgba(212, 175, 55, 0.18);
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.play-btn svg { width: 42%; margin-left: 6%; }
.yt-facade:hover .play-btn {
  transform: scale(1.07);
  box-shadow: 0 0 0 16px rgba(212, 175, 55, 0.14);
}

.video-caption {
  position: absolute;
  left: clamp(16px, 3vw, 32px);
  bottom: clamp(14px, 3vw, 28px);
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-ivory);
  text-align: left;
}

/* Featured Spotify track and album cards */
.featured-track {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  margin-top: clamp(40px, 6vw, 64px);
  padding: 24px;
}
.featured-track h4 { font-size: 1.35rem; margin-bottom: 0.5em; }
.featured-more { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.featured-more .tracklist { align-self: stretch; }
.album-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 760px) { .featured-track, .album-grid { grid-template-columns: 1fr; } }

.album-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
}
.album-card h4 { font-size: 1.35rem; margin-bottom: 0.5em; }
.album-card .muted { font-size: 0.93rem; }

.spotify-embed {
  width: 100%;
  height: 352px;
  border: 0;
  border-radius: var(--radius);
  background: var(--bg-obsidian);
}


.platform-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;          /* keeps buttons aligned across album cards */
  padding-top: 6px;
}

.tracklist { margin: 4px 0 20px; }
.tracklist li {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(248, 250, 252, 0.07);
}
.track-num { font-family: var(--font-serif); color: var(--color-accent); font-size: 0.95rem; }
.track-title { font-weight: 600; }
.track-play {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border-brass-strong);
  border-radius: 50%;
  color: var(--color-accent);
  transition: background-color 0.2s, color 0.2s;
}
.track-play svg { width: 16px; margin-left: 2px; }
.track-play:hover { background: var(--color-accent); color: var(--bg-obsidian); }


/* =========================================================
   8. ENSEMBLES
   ========================================================= */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 960px) { .tier-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

.tier-card {
  display: flex;
  flex-direction: column;
  padding: 30px 26px 26px;
  transition: border-color 0.3s, box-shadow 0.3s;   /* for the selected state only */
}

/* Selected via an "Inquire About…" button */
.tier-card.is-selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-gold);
}

.tier-num {
  margin-bottom: 0.6rem;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--color-accent);
  letter-spacing: 0.12em;
}
.tier-card h3 { font-size: 1.5rem; margin-bottom: 0.35em; }
.tier-card .label { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(212, 175, 55, 0.15); }

.tier-features { margin-bottom: 26px; }
.tier-features li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 20px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.tier-features li::before {               /* small brass diamond bullet */
  content: "";
  position: absolute;
  left: 2px; top: 0.55em;
  width: 6px; height: 6px;
  background: var(--color-accent);
  transform: rotate(45deg);
}
.tier-card .btn { margin-top: auto; }


/* =========================================================
   9. MUSIC STYLES & SONG REQUESTS
   ========================================================= */
.tag-list { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-list--cloud { justify-content: center; max-width: 920px; margin: 0 auto; }

/* Clickable pill: "+ Item" → gold "✓ Item" when selected */
.tag-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.55em 1em;
  background: transparent;
  border: 1px solid var(--border-brass-strong);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  color: var(--text-ivory);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.tag-btn::before { content: "+"; font-weight: 700; color: var(--color-accent); }
.tag-btn:hover { border-color: var(--color-accent); background: var(--accent-wash); }
.tag-btn[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--bg-obsidian);
  font-weight: 600;
}
.tag-btn[aria-pressed="true"]::before { content: "✓"; color: var(--bg-obsidian); }

/* Song search */
.song-search {
  max-width: 720px;
  margin: clamp(40px, 6vw, 56px) auto 0;
}
.search-label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  text-align: center;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-brass-strong);
  border-radius: 999px;
  transition: border-color 0.2s;
}
.search-box:focus-within { border-color: var(--color-accent); }
.search-box svg { flex: none; width: 20px; height: 20px; color: var(--color-accent); }
.search-box input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 4px;
  background: transparent;
  border: 0;
  font-size: 1rem;
  color: var(--text-ivory);
}
.search-box input:focus { outline: none; }
.search-box input::-webkit-search-cancel-button { filter: invert(1) opacity(0.5); }
.search-box .btn { border-radius: 999px; }
.search-hint { margin: 10px 0 0; font-size: 0.85rem; text-align: center; color: var(--text-muted); }

.search-results { display: grid; gap: 6px; margin-top: 14px; }
.result-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 8px 14px 8px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-brass);
  border-radius: var(--radius-sm);
  text-align: left;
  color: var(--text-ivory);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.result-btn:hover { border-color: var(--color-accent); background: var(--accent-wash); }
.result-btn img { flex: none; width: 44px; height: 44px; border-radius: 4px; object-fit: cover; }
.result-text { flex: 1; min-width: 0; display: grid; }
.result-title,
.result-artist { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.result-title { font-weight: 600; }
.result-artist { font-size: 0.85rem; color: var(--text-muted); }
.result-add { flex: none; font-size: 0.85rem; font-weight: 600; color: var(--color-accent); }
.search-status { padding: 10px 4px; font-size: 0.9rem; text-align: center; color: var(--text-muted); }

/* Setlist tray — sticks to the bottom of the screen while in this section */
.setlist-tray {
  position: sticky;
  bottom: 16px;
  z-index: 20;
  margin-top: 36px;
  padding: 18px 20px;
  background: rgba(22, 26, 35, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-brass-strong);
  border-radius: var(--radius);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.9);
}
.setlist-tray.has-items { border-color: var(--color-accent); }

.tray-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.tray-head h3 { margin: 0; font-size: 1.2rem; }
.tray-count { font-size: 0.82rem; color: var(--text-muted); }

.tray-empty { margin: 0 0 14px; font-size: 0.9rem; color: var(--text-muted); }
.has-items .tray-empty { display: none; }

.tray-items { display: flex; flex-wrap: wrap; gap: 8px; }
.has-items .tray-items { margin-bottom: 14px; }

/* Selected item chip — click to remove */
.tray-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.85em;
  background: var(--accent-wash);
  border: 1px solid var(--border-brass-strong);
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.tray-chip::after { content: "×"; font-size: 1.1em; line-height: 1; color: var(--color-accent); }
.tray-chip:hover { border-color: var(--color-accent); background: rgba(212, 175, 55, 0.16); }

.tray-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

@media (max-width: 640px) {
  .setlist-tray { position: static; }          /* don't cover content on phones */
  .tray-actions .btn-primary { width: 100%; }
}


/* =========================================================
   10. VENUES
   ========================================================= */
.venue-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;                                /* hairline grid */
  overflow: hidden;
  background: var(--border-brass);
  border: 1px solid var(--border-brass);
  border-radius: var(--radius);
}
@media (max-width: 900px) { .venue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.venue-tile,
.venue-tile--cta a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 128px;
  padding: 24px 16px;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}
.venue-tile { background: var(--bg-card); }

/* The only interactive tile */
.venue-tile--cta { padding: 0; background: var(--accent-wash); }
.venue-tile--cta a { height: 100%; transition: background-color 0.3s; }
.venue-tile--cta a:hover { background: rgba(212, 175, 55, 0.16); }
.venue-tile--cta span {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.venue-note {
  margin: 32px 0 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
}


/* =========================================================
   11. ABOUT, MEMBERS & ADD-ONS
   ========================================================= */
.story {
  max-width: 720px;
  margin: 0 auto clamp(40px, 6vw, 64px);
  font-size: 1.08rem;
  color: var(--text-soft);
}
.story p:last-child { margin-bottom: 0; color: var(--text-ivory); }

.member-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 900px) { .member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.member h3 { margin: 14px 0 2px; font-size: 1.2rem; }
.member p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }

.member-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, rgba(212, 175, 55, 0.14), transparent 70%),
    var(--bg-card);
  border: 1px solid var(--border-brass);
  border-radius: var(--radius);
}
.member-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Initials placeholder until the photo exists (class added by script) */
.member-photo.is-missing img { display: none; }
.member-photo.is-missing::after {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--border-brass-strong);
}

/* Optional add-ons */
.addons-bar {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr);
  gap: 32px;
  margin-top: clamp(48px, 7vw, 72px);
  padding: clamp(24px, 4vw, 36px);
  background: var(--bg-card);
  border: 1px solid var(--border-brass);
  border-top: 2px solid var(--color-accent);
  border-radius: var(--radius);
}
.addons-head h3 { font-size: 1.5rem; }
.addons-head p { margin: 0; font-size: 0.92rem; color: var(--text-muted); }

.addon-list {
  counter-reset: addon;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
}
.addon-list li {
  counter-increment: addon;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.addon-list li::before {
  content: counter(addon);
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  margin-bottom: 10px;
  border: 1px solid var(--border-brass-strong);
  border-radius: 50%;
  font-family: var(--font-serif);
  color: var(--color-accent);
}
.addon-list strong { display: block; margin-bottom: 4px; font-size: 1rem; color: var(--text-ivory); }

@media (max-width: 900px) {
  .addons-bar { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .addon-list { grid-template-columns: 1fr; }
}


/* =========================================================
   12. FAQ ACCORDION
   ========================================================= */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border-brass);
  border-radius: var(--radius);
}
.faq-item + .faq-item { border-top: 1px solid var(--border-brass); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px clamp(20px, 3vw, 28px);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-ivory);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--color-accent); }

/* Plus sign that turns into a close mark when open */
.faq-item summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--border-brass-strong);
  border-radius: 50%;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-accent);
  transition: transform 0.25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
  margin: -6px 0 0;
  padding: 0 clamp(20px, 3vw, 28px) 24px;
  max-width: 68ch;
  color: var(--text-soft);
}
.faq-item p a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.faq-item p a:hover { color: var(--accent-hover); }


/* =========================================================
   13. CONTACT & BOOKING FORM
   ========================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 72px);
  align-items: start;
}
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-intro h2 { font-size: clamp(2rem, 3.8vw, 2.8rem); }

.contact-methods { display: grid; gap: 12px; margin: 28px 0 36px; }
.method { display: flex; gap: 10px; }
.method-main {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-brass);
  border-radius: var(--radius);
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.method-main:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.method-side {
  display: grid;
  place-items: center;
  padding: 0 18px;
  border: 1px solid var(--border-brass-strong);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
}
.method-side:hover { border-color: var(--color-accent); color: var(--color-accent); }

.icon-box {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  background: var(--accent-wash);
  border: 1px solid var(--border-brass);
  border-radius: 10px;
  color: var(--color-accent);
}
.icon-box svg { width: 20px; height: 20px; }

.method-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.method-value { display: block; font-weight: 600; font-size: 1.05rem; overflow-wrap: anywhere; }

/* Numbered next steps */
.next-steps { counter-reset: step; display: grid; gap: 14px; }
.next-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: center;
  font-size: 0.98rem;
  font-weight: 500;
}
.next-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--border-brass-strong);
  border-radius: 50%;
  font-family: var(--font-serif);
  color: var(--color-accent);
}

/* Form card */
.form-card {
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.booking-form { scroll-margin-top: calc(var(--header-h) + 24px); }

/* Styles and songs picked in Music Styles, carried into the inquiry */
.form-requests {
  margin-bottom: 24px;
  padding: 16px 18px;
  background: var(--accent-wash);
  border: 1px solid var(--border-brass-strong);
  border-radius: var(--radius-sm);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.form-requests[hidden] { display: none; }
.form-requests-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.form-requests-head .label { margin: 0; }
.form-requests-edit { font-size: 0.85rem; color: var(--color-accent); transition: color 0.2s; }
.form-requests-edit:hover { color: var(--text-ivory); }
.form-requests-list { display: flex; flex-wrap: wrap; gap: 8px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  margin-bottom: 24px;
}
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-full { grid-column: 1 / -1; }

.field > label:not(.check),
.addons legend {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.req { color: var(--color-accent); }

/* Text inputs (form + setlist tray) */
.booking-form input:not([type="checkbox"]),
.booking-form select,
.booking-form textarea,
.tray-input input {
  width: 100%;
  min-height: 50px;
  padding: 0.8em 1em;
  background: var(--bg-obsidian);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 1rem;                          /* ≥16px prevents iOS zoom */
  color: var(--text-ivory);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tray-input input { min-height: 44px; padding-block: 0.6em; }
.booking-form textarea { resize: vertical; min-height: 130px; }
.booking-form ::placeholder,
.tray-input ::placeholder { color: rgba(148, 163, 184, 0.6); }
.booking-form input:hover,
.booking-form select:hover,
.booking-form textarea:hover,
.tray-input input:hover { border-color: rgba(212, 175, 55, 0.4); }
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus,
.tray-input input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}
.booking-form input[type="date"] { color-scheme: dark; }

.booking-form select {
  appearance: none;
  padding-right: 2.75em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D4AF37' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85em center;
  background-size: 22px;
  cursor: pointer;
}
.booking-form select:invalid { color: rgba(148, 163, 184, 0.75); }
.booking-form option { background: var(--bg-card); color: var(--text-ivory); }

/* Gold pulse when a field is filled in from elsewhere on the page */
.flash { animation: flash 1.4s var(--ease); }
@keyframes flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
  25%      { box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.45); border-color: var(--color-accent); }
}

/* Add-on checkboxes */
.addons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
.addons legend { padding: 0; margin-bottom: 8px; }
@media (max-width: 760px) { .addons { grid-template-columns: 1fr; } }

.check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-obsidian);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.check:hover { border-color: rgba(212, 175, 55, 0.4); }
.check:has(input:checked) { background: var(--accent-wash); border-color: var(--color-accent); }
.check input {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin: 0;
  accent-color: var(--color-accent);
}

/* Submission feedback */
.form-status {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}
.form-status:empty { display: none; }
.form-status[data-state="success"] {
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid var(--color-accent);
  color: var(--text-ivory);
}
.form-status[data-state="error"] {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #FECACA;
}

.form-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}


/* =========================================================
   14. FOOTER & MOBILE CTA BAR
   ========================================================= */
.site-footer {
  padding-top: 64px;
  background: #0A0C0F;
  border-top: 1px solid var(--border-brass);
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Logo in the middle, menu on its left, contact on its right */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 56px;
  padding-bottom: 48px;
}
.footer-grid > nav { order: 1; justify-self: end; }
.footer-brand { order: 2; display: flex; flex-direction: column; align-items: center; }
.footer-contact { order: 3; justify-self: start; }
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .footer-grid > nav, .footer-brand, .footer-contact { order: 0; justify-self: center; }
  .footer-links { justify-content: center; }
}

.footer-brand img { height: 76px; margin-bottom: 20px; }

.social-links { display: flex; justify-content: center; gap: 10px; }
.social-links a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border-brass);
  border-radius: 50%;
  color: var(--text-ivory);
  transition: border-color 0.2s, color 0.2s;
}
.social-links a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.social-links svg { width: 18px; height: 18px; }

.footer-links { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 24px; justify-content: end; text-align: right; }
@media (max-width: 800px) { .footer-links { text-align: center; } }
.footer-links a, .footer-contact a { transition: color 0.2s; }
.footer-links a:hover, .footer-contact a:hover { color: var(--color-accent); }
.footer-contact { line-height: 1.9; }
.footer-contact a { color: var(--text-ivory); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  padding-block: 22px;
  border-top: 1px solid rgba(248, 250, 252, 0.06);
  font-size: 0.8rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom p:last-child { font-family: var(--font-serif); font-style: italic; color: var(--color-accent); }

/* Sticky thumb-zone CTA bar on phones */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(13, 15, 18, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-brass);
}
@media (max-width: 640px) {
  .mobile-cta { display: grid; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}


/* =========================================================
   15. MOTION
   ========================================================= */
/* Gentle staggered entrance for hero copy */
.hero-copy > * { animation: rise 0.9s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: 0.08s; }
.hero-copy > :nth-child(3) { animation-delay: 0.16s; }
.hero-copy > :nth-child(4) { animation-delay: 0.24s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

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