/* =========================================================
   Jerry & the Springers — vintage saloon brand
   Palette: cream + gold on near-black, distressed serif
   ========================================================= */

:root {
  --bg:        #0d0a07;
  --bg-2:     #15110b;
  --bg-3:     #1d1810;
  --cream:    #efe6cf;
  --cream-2:  #d7cfb8;
  --gold:     #c9962b;
  --gold-2:   #e0b757;
  --gold-soft:#8a6a23;
  --red:      #a23a2c;
  --ink:      #0d0a07;

  --serif:    'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --sans:     'Inter', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;

  --maxw:     1180px;
  --maxw-narrow: 760px;

  --radius:   2px;
  --shadow-1: 0 1px 0 rgba(239,230,207,.06), 0 12px 30px rgba(0,0,0,.45);
  --shadow-2: 0 1px 0 rgba(239,230,207,.08), 0 24px 60px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--gold-2); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--cream); }

::selection { background: var(--gold); color: var(--ink); }

/* ============== Layout ============== */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--maxw-narrow); }

.section { padding: 96px 0; position: relative; scroll-margin-top: 80px; }
@media (max-width: 720px) { .section { padding: 64px 0; scroll-margin-top: 72px; } }

.section-header { max-width: 640px; margin: 0 0 56px; }
.section-header-center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--gold-2);
  margin-bottom: 16px;
}
.eyebrow-light { color: var(--gold); }

.section-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0 0 20px;
  color: var(--cream);
}

.section-lede {
  font-size: 1.1rem;
  color: var(--cream-2);
  max-width: 56ch;
  margin: 0;
}
.section-header-center .section-lede { margin-left: auto; margin-right: auto; }

/* ============== Nav ============== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px;
  background: linear-gradient(180deg, rgba(13,10,7,.92) 0%, rgba(13,10,7,.6) 70%, rgba(13,10,7,0) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.nav-brand {
  display: flex; align-items: center; gap: 12px;
  color: var(--cream);
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 14px;
}
.nav-brand:hover { color: var(--gold-2); }
.nav-brand-name { display: inline-block; }
.nav-brand-mark {
  width: 44px; height: auto;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
  transition: transform .25s ease, filter .25s ease;
}
.nav-brand:hover .nav-brand-mark {
  transform: rotate(-3deg) scale(1.04);
  filter: drop-shadow(0 2px 6px rgba(224,183,87,.35));
}
.nav-links {
  display: flex; gap: 28px;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.nav-links a { color: var(--cream); position: relative; padding-bottom: 4px; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta {
  color: var(--ink) !important;
  background: var(--gold);
  padding: 8px 18px !important;
  border-radius: var(--radius);
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: var(--gold-2); color: var(--ink) !important; }

.nav-toggle { display: none; background: transparent; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--cream); margin: 5px 0; transition: .3s; }

@media (max-width: 820px) {
  .nav-brand-name { display: none; }
  .nav-links {
    position: absolute; top: 100%; right: 0; left: 0;
    flex-direction: column;
    background: rgba(13,10,7,.96);
    padding: 24px;
    gap: 22px;
    border-bottom: 1px solid rgba(201,150,43,.15);
    transform: translateY(-12px);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .nav-links.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .nav-toggle { display: block; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ============== Hero ============== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  text-align: center;
}
.hero-image {
  position: absolute; inset: 0;
  background: url('img/hero-bar.jpg') center 35% / cover no-repeat;
  filter: brightness(.62) contrast(1.06) saturate(1.05);
  transform: scale(1.04);
  z-index: 0;
}
/* Hero overlay: a dark wash that has FOUR transparent holes punched through it
   (3 musician spotlights + 1 large halo behind the wordmark), so the bar still
   reads through the wash but Jerry, the keys player, Ashley, and the wordmark
   all sit in pools of light. A hard floor wipe (::after) crushes the front-row
   audience to black regardless. */
.hero-overlay {
  position: absolute; inset: 0;
  z-index: 1;
  /* Solid dark wash — strong enough to mute the busy bar background while
     keeping the architecture (string lights, window frames, signage) visible. */
  background: rgba(13,10,7,.55);
  /* Mask: TRANSPARENT removes wash (photo shows through bright);
     BLACK keeps wash (photo darkened). Stacking with mask-composite:add means
     every transparent spot lets the photo punch through. */
  -webkit-mask-image:
    /* 1. Jerry (left third) */
    radial-gradient(ellipse 22% 38% at 21% 42%,
      rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%,
      rgba(0,0,0,.55) 75%, rgba(0,0,0,1) 100%),
    /* 2. Keys player (center) */
    radial-gradient(ellipse 16% 32% at 51% 38%,
      rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%,
      rgba(0,0,0,.55) 75%, rgba(0,0,0,1) 100%),
    /* 3. Ashley (right third) */
    radial-gradient(ellipse 20% 38% at 75% 40%,
      rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%,
      rgba(0,0,0,.55) 75%, rgba(0,0,0,1) 100%),
    /* 4. Wordmark halo (lower center, large + soft) */
    radial-gradient(ellipse 42% 30% at 50% 68%,
      rgba(0,0,0,.10) 0%, rgba(0,0,0,.10) 30%,
      rgba(0,0,0,.70) 80%, rgba(0,0,0,1) 100%);
  -webkit-mask-composite: source-over;
          mask-image:
    radial-gradient(ellipse 22% 38% at 21% 42%,
      rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%,
      rgba(0,0,0,.55) 75%, rgba(0,0,0,1) 100%),
    radial-gradient(ellipse 16% 32% at 51% 38%,
      rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%,
      rgba(0,0,0,.55) 75%, rgba(0,0,0,1) 100%),
    radial-gradient(ellipse 20% 38% at 75% 40%,
      rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%,
      rgba(0,0,0,.55) 75%, rgba(0,0,0,1) 100%),
    radial-gradient(ellipse 42% 30% at 50% 68%,
      rgba(0,0,0,.10) 0%, rgba(0,0,0,.10) 30%,
      rgba(0,0,0,.70) 80%, rgba(0,0,0,1) 100%);
  mask-composite: add;
}
/* Hard floor wipe — sits above the masked overlay so the bottom edge
   (front-row audience, stage cabling) goes to true black no matter what. */
.hero-overlay::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  -webkit-mask: none; mask: none;
  background:
    linear-gradient(180deg,
      rgba(13,10,7,0)   60%,
      rgba(13,10,7,.55) 76%,
      rgba(13,10,7,.92) 87%,
      rgba(13,10,7,1)   96%),
    linear-gradient(180deg,
      rgba(13,10,7,.30) 0%,
      rgba(13,10,7,.06) 18%,
      rgba(13,10,7,0)   38%);
}
/* Bottom-right shadow — anchored ON the bald audience member's head
   (~80% across / 70% down of this panel), not the corner. Two stacked
   radials: a tight opaque core that erases the head + laptop, plus a wide
   soft falloff that blends naturally into the surrounding bar darkness so
   it reads like a shadow, not a black blob. */
.hero-blur-fuzz {
  position: absolute;
  right: 0; bottom: 0;
  width: 56%; height: 78%;
  z-index: 1;
  pointer-events: none;
  background:
    /* Tight opaque core right on the head — fully crushes him out */
    radial-gradient(ellipse 32% 36% at 78% 62%,
      rgba(8,6,4,1) 0%,
      rgba(8,6,4,1) 35%,
      rgba(8,6,4,.85) 60%,
      rgba(8,6,4,.35) 85%,
      rgba(8,6,4,0) 100%),
    /* Wide soft falloff — natural shadow off the right + bottom edges */
    radial-gradient(ellipse 95% 100% at 100% 95%,
      rgba(13,10,7,.92) 0%,
      rgba(13,10,7,.78) 25%,
      rgba(13,10,7,.5) 55%,
      rgba(13,10,7,.2) 80%,
      rgba(13,10,7,0) 100%);
}
@media (max-width: 820px) {
  /* All three band members must be visible on portrait. Cover-crops the
     wide 4:3 photo to only the center player, so instead we fit the photo
     WIDTH to the viewport, anchor it near the top, and let the natural dark
     bar floor extend below with a matching color + gradient. */
  .hero-image {
    background:
      linear-gradient(180deg, transparent 0%, transparent 55%, #0d0a07 78%, #0d0a07 100%),
      url('img/hero-bar.jpg') center 14% / 112% auto no-repeat,
      #0d0a07;
    filter: brightness(.68) contrast(1.06) saturate(1.05);
  }
  /* Simple right-side fade: starts mid-Ashley (~60%) and ramps to solid
     black at the edge — erases the audience cleanly without touching the
     band members or fighting with the photo */
  .hero-blur-fuzz {
    display: block;
    width: 45%; height: 100%;
    top: 0; right: 0; bottom: auto;
    background: linear-gradient(90deg,
      rgba(13,10,7,0)    0%,
      rgba(13,10,7,.35) 25%,
      rgba(13,10,7,.75) 55%,
      rgba(13,10,7,.95) 80%,
      rgba(13,10,7,1)   100%);
  }
}
@media (max-width: 540px) {
  .hero-image {
    background:
      linear-gradient(180deg, transparent 0%, transparent 48%, #0d0a07 72%, #0d0a07 100%),
      url('img/hero-bar.jpg') center 12% / 118% auto no-repeat,
      #0d0a07;
  }
}
/* Wordmark anchored so its TOP edge sits just above the red Nord keyboard.
   Keyboard sits at ~58% from top of hero on landscape, lower on portrait. */
.hero-content {
  position: absolute; left: 0; right: 0;
  top: 52%;
  z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 24px;
  pointer-events: none;
}
.hero-content .hero-wordmark { pointer-events: auto; }
.hero-bottom {
  position: absolute; left: 0; right: 0;
  bottom: clamp(48px, 6.5vh, 80px);
  z-index: 2;
  text-align: center;
  padding: 0 24px;
}
.hero-bottom .ornament { margin-bottom: 14px; }
.hero-bottom .hero-sup { margin: 0 0 10px; }
.hero-bottom .hero-sub { margin: 0 auto 18px; }

.ornament {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-bottom: 28px;
  color: var(--gold);
}
.orn-line { height: 1px; width: 80px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.orn-mark { font-size: 16px; }

.hero-title { margin: 0 0 24px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hero-sup {
  font-family: var(--serif);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.36em;
  font-size: clamp(14px, 1.6vw, 18px);
  color: var(--gold-2);
}
.hero-tag {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.4rem, 6.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--cream);
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.hero-wordmark {
  display: block;
  width: 100%;
  max-width: min(440px, 54vw);
  height: auto;
  margin: 0 auto;
  /* Blend into background — dimmer gold lets the photo show through behind
     the letterforms so the wordmark feels printed onto the scene */
  opacity: .72;
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,.4))
    drop-shadow(0 6px 18px rgba(0,0,0,.4));
  user-select: none;
  -webkit-user-drag: none;
}
@media (max-width: 820px) {
  .hero-content { top: 44%; }
  .hero-wordmark { max-width: 68vw; opacity: .78; }
}
@media (max-width: 540px) {
  .hero-content { top: 40%; }
  .hero-wordmark { max-width: 74vw; }
}
.hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  color: var(--cream-2);
  max-width: 56ch;
  margin: 0 auto 36px;
}
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.hero-scroll {
  position: absolute; bottom: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--gold-2);
  font-size: 20px;
  animation: bounce 2.4s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); opacity: .6; }
  50% { transform: translate(-50%, 6px); opacity: 1; }
}

/* ============== Buttons ============== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .25s ease;
}
.btn-primary {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.btn-primary:hover {
  background: var(--gold-2);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(201,150,43,.25);
}
.btn-ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(239,230,207,.4);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold-2);
}
.btn-large { padding: 18px 36px; font-size: 14px; }
.btn-small { padding: 10px 18px; font-size: 11px; }

/* ============== Marquee ============== */
.marquee {
  background: var(--bg-2);
  border-top: 1px solid rgba(201,150,43,.18);
  border-bottom: 1px solid rgba(201,150,43,.18);
  overflow: hidden;
  padding: 18px 0;
}
.marquee-track {
  display: flex; gap: 36px;
  white-space: nowrap;
  animation: marquee 36s linear infinite;
  font-family: var(--serif);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--cream-2);
}
.marquee-track span:nth-child(even) { color: var(--gold); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============== Band Section ============== */
.section-band {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(201,150,43,.06), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(162,58,44,.05), transparent 50%),
    var(--bg);
}

.band-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-bottom: 80px;
}
@media (max-width: 820px) { .band-grid { grid-template-columns: 1fr; gap: 48px; } }

.member { text-align: left; }
.member-photo {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 20px;
  box-shadow: var(--shadow-1);
}
.member-photo::after {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid rgba(201,150,43,.25);
  pointer-events: none;
  border-radius: var(--radius);
}
.member-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s ease, opacity .35s ease;
  filter: contrast(1.04) saturate(1.02);
}
.member:hover .member-photo img { transform: scale(1.04); }

/* Live Photo hover playback */
.member-photo .member-live {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  filter: contrast(1.04) saturate(1.02);
  z-index: 1;
}
.member-photo.is-live-playing .member-live { opacity: 1; }
.member-photo.is-live-playing img { opacity: 0; }
.member-photo .member-badge { z-index: 2; }
.member-photo::after { z-index: 3; }

/* Subtle hint that the portrait is interactive */
.member-photo[data-live] { cursor: pointer; }
.member-photo[data-live]::before {
  content: '▸ LIVE';
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  background: rgba(13,10,7,.78);
  border: 1px solid rgba(201,150,43,.45);
  color: var(--gold-2);
  padding: 4px 8px 4px 7px;
  font-family: var(--serif);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border-radius: 2px;
  opacity: .85;
  transition: opacity .25s ease;
}
.member-photo.is-live-playing[data-live]::before { opacity: 1; color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  .member-photo .member-live { display: none; }
  .member-photo[data-live]::before { display: none; }
}
.member-badge {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(13,10,7,.85);
  border: 1px solid rgba(201,150,43,.4);
  color: var(--gold-2);
  padding: 6px 12px;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.member-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.6rem;
  margin: 0 0 8px;
  color: var(--cream);
  letter-spacing: 0.04em;
}
.member-bio { color: var(--cream-2); margin: 0; }

.band-feature {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
  padding-top: 56px;
  border-top: 1px solid rgba(201,150,43,.15);
}
@media (max-width: 820px) { .band-feature { grid-template-columns: 1fr; gap: 32px; } }
.band-feature-img {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.band-feature-img::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid rgba(201,150,43,.25);
}
.band-feature-img img { aspect-ratio: 4/3; object-fit: cover; }
.band-feature-text p { font-size: 1.08rem; color: var(--cream-2); margin: 18px 0 0; }

/* ============== Listen ============== */
.section-listen { background: var(--bg-2); border-top: 1px solid rgba(201,150,43,.12); border-bottom: 1px solid rgba(201,150,43,.12); }

.listen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 820px) { .listen-grid { grid-template-columns: 1fr; } }

.player-card {
  background: var(--bg-3);
  border: 1px solid rgba(201,150,43,.2);
  border-radius: var(--radius);
  padding: 32px;
  position: relative;
}
.player-card::before {
  content: '';
  position: absolute; inset: 6px;
  border: 1px solid rgba(201,150,43,.1);
  pointer-events: none;
  border-radius: var(--radius);
}
.player-card-dark {
  background: linear-gradient(160deg, var(--bg-3) 0%, var(--bg) 100%);
  border-color: rgba(201,150,43,.35);
}
.player-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.player-label {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.player-len { font-size: 12px; color: var(--cream-2); opacity: .7; }
.player-title { font-family: var(--serif); font-weight: 700; font-size: 1.6rem; margin: 0 0 8px; color: var(--cream); }
.player-desc { color: var(--cream-2); margin: 0 0 20px; }
audio { width: 100%; }

/* ============== Set List ============== */
.section-setlist {
  background:
    radial-gradient(ellipse at top, rgba(201,150,43,.05) 0%, transparent 60%),
    var(--bg);
  border-top: 1px solid rgba(201,150,43,.12);
  border-bottom: 1px solid rgba(201,150,43,.12);
}

.setlist-card {
  position: relative;
  background:
    linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
  border: 1px solid rgba(201,150,43,.35);
  border-radius: var(--radius);
  padding: 48px 56px;
  box-shadow: var(--shadow-1), inset 0 0 0 1px rgba(13,10,7,.4);
}
.setlist-card::before {
  content: '';
  position: absolute; inset: 10px;
  border: 1px solid rgba(201,150,43,.18);
  border-radius: calc(var(--radius) - 4px);
  pointer-events: none;
}
@media (max-width: 720px) {
  .setlist-card { padding: 32px 22px; }
}

.setlist-header { text-align: center; margin-bottom: 36px; position: relative; z-index: 1; }
.setlist-meta {
  display: flex; flex-direction: column; gap: 4px;
  align-items: center;
  margin-bottom: 18px;
}
.setlist-venue {
  font-family: var(--serif);
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
}
.setlist-date {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-2);
  opacity: .85;
}
.setlist-divider {
  color: var(--gold-2);
  font-size: 14px;
  letter-spacing: 0.6em;
  opacity: .6;
  text-align: center;
}

.setlist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  position: relative;
  z-index: 1;
}
.setlist-grid::before {
  content: '';
  position: absolute;
  top: 36px; bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(201,150,43,.3) 20%, rgba(201,150,43,.3) 80%, transparent 100%);
}
@media (max-width: 820px) {
  .setlist-grid { grid-template-columns: 1fr; gap: 36px; }
  .setlist-grid::before { display: none; }
}

.setlist-side {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-2);
  text-align: center;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(201,150,43,.25);
}

ol.setlist {
  list-style: none;
  counter-reset: track;
  padding: 0;
  margin: 0;
}
ol.setlist[start="13"] { counter-reset: track 12; }
ol.setlist[start="14"] { counter-reset: track 13; }
ol.setlist li {
  counter-increment: track;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(201,150,43,.12);
  font-size: 0.98rem;
}
ol.setlist li:last-child { border-bottom: 0; }
ol.setlist li::before {
  content: counter(track, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold-2);
  opacity: .65;
}
ol.setlist .song {
  font-family: var(--serif);
  color: var(--cream);
  font-weight: 500;
  letter-spacing: 0.01em;
}
ol.setlist .artist {
  color: var(--cream-2);
  font-size: 0.86rem;
  font-style: italic;
  opacity: .75;
  text-align: right;
  letter-spacing: 0.02em;
}
@media (max-width: 480px) {
  ol.setlist li { grid-template-columns: 24px 1fr; }
  ol.setlist .artist { grid-column: 2; text-align: left; margin-top: 2px; }
}

.setlist-footer { margin-top: 36px; text-align: center; position: relative; z-index: 1; }
.setlist-note {
  margin: 18px auto 0;
  max-width: 640px;
  color: var(--cream-2);
  font-size: 0.95rem;
}
.setlist-note a {
  color: var(--gold-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,150,43,.4);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.setlist-note a:hover { color: var(--cream); border-color: var(--gold); }

.feature-link {
  margin-top: 18px !important;
  font-size: 0.95rem !important;
}
.feature-link a {
  color: var(--gold-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,150,43,.4);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.feature-link a:hover { color: var(--cream); border-color: var(--gold); }

/* Past-show highlights snippet */
.show-highlights {
  margin-top: 18px;
  border-top: 1px solid rgba(201,150,43,.15);
  padding-top: 14px;
}
.show-highlights-label {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-2);
  opacity: .85;
  margin-bottom: 10px;
}
.show-highlights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 28px;
}
@media (max-width: 640px) {
  .show-highlights-list { grid-template-columns: 1fr; }
}
.show-highlights-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(201,150,43,.1);
  font-size: 0.92rem;
}
.show-highlights-list li:last-child,
.show-highlights-list li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.show-highlights-list .song {
  font-family: var(--serif);
  color: var(--cream);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.show-highlights-list .artist {
  color: var(--cream-2);
  font-size: 0.82rem;
  font-style: italic;
  opacity: .7;
  margin-left: auto;
  text-align: right;
}
@media (max-width: 480px) {
  .show-highlights-list li { flex-wrap: wrap; gap: 2px 10px; }
  .show-highlights-list .artist { margin-left: 0; text-align: left; flex-basis: 100%; }
}

/* Show recap — photos + moments side-by-side */
.show-recap {
  margin-top: 18px;
  border-top: 1px solid rgba(201,150,43,.15);
  padding-top: 18px;
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 22px 28px;
  align-items: start;
}
.show-recap-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.show-recap-photo {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(201,150,43,.22);
  cursor: pointer;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.show-recap-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease, filter .25s ease;
  filter: saturate(.92) brightness(.96);
}
.show-recap-photo:hover {
  border-color: var(--gold);
  box-shadow: 0 6px 22px rgba(201,150,43,.22);
  transform: translateY(-1px);
}
.show-recap-photo:hover img {
  transform: scale(1.06);
  filter: saturate(1.05) brightness(1);
}
.show-recap-text .show-highlights-label {
  margin-bottom: 12px;
}
.show-recap-text .show-highlights-list {
  grid-template-columns: 1fr;
  gap: 0;
}
@media (max-width: 820px) {
  .show-recap {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .show-recap-photos {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

/* Past show variant (was show-featured for the Aged In Oak entry) */
.show-past {
  background: linear-gradient(135deg, rgba(201,150,43,.04) 0%, var(--bg-3) 60%);
  border-color: rgba(201,150,43,.28);
  position: relative;
}
.show-past .show-day,
.show-past .show-mo,
.show-past .show-yr { opacity: .8; }
.show-tag.show-tag-past {
  background: transparent;
  color: var(--gold-2);
  border: 1px solid rgba(201,150,43,.45);
}

/* ============== Shows ============== */
.section-shows {
  background:
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

.shows-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.show {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 28px 32px;
  background: var(--bg-3);
  border: 1px solid rgba(201,150,43,.15);
  border-radius: var(--radius);
}
@media (max-width: 720px) {
  .show { grid-template-columns: 1fr; padding: 22px; }
  .show-cta { justify-self: start; }
}
.show-featured {
  background: linear-gradient(135deg, rgba(201,150,43,.08) 0%, var(--bg-3) 60%);
  border-color: rgba(201,150,43,.45);
}
.show-date {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--serif);
  border-right: 1px solid rgba(201,150,43,.2);
  padding-right: 28px;
}
@media (max-width: 720px) {
  .show-date { border-right: 0; border-bottom: 1px solid rgba(201,150,43,.2); padding-right: 0; padding-bottom: 14px; flex-direction: row; gap: 10px; align-items: baseline; }
}
.show-day { font-size: 3rem; font-weight: 700; color: var(--gold-2); line-height: 1; }
.show-mo { font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream); margin-top: 6px; }
.show-yr { font-size: 11px; color: var(--cream-2); opacity: .7; margin-top: 4px; }

.show-tag {
  display: inline-block;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  padding: 4px 10px;
  margin-bottom: 10px;
}
.show-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.4rem;
  margin: 0 0 6px;
  color: var(--cream);
  line-height: 1.2;
}
.show-meta { color: var(--gold-2); font-size: 14px; margin: 0 0 8px; letter-spacing: 0.04em; }
.show-desc { color: var(--cream-2); margin: 0; font-size: 0.96rem; }

.show-status {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-2);
  border: 1px solid rgba(239,230,207,.2);
  padding: 8px 14px;
}

.show-placeholder { opacity: 0.7; }
.show-placeholder .show-day { color: var(--cream-2); font-size: 2.4rem; }

/* ============== Book Us ============== */
.section-book {
  position: relative;
  text-align: center;
  background: var(--bg);
  overflow: hidden;
}
.book-bg {
  position: absolute; inset: 0;
  background: url('img/hero-outdoor.jpg') center / cover no-repeat;
  filter: brightness(.32) saturate(1.05) blur(2px);
  z-index: 0;
}
.section-book::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,10,7,.85) 0%, rgba(13,10,7,.92) 100%);
  z-index: 1;
}
.section-book .container { position: relative; z-index: 2; }

.book-card {
  background: rgba(13,10,7,.7);
  border: 1px solid rgba(201,150,43,.35);
  padding: 36px 44px;
  text-align: left;
  margin: 12px auto 32px;
  max-width: 620px;
  backdrop-filter: blur(8px);
}
@media (max-width: 560px) { .book-card { padding: 28px 22px; } }
.book-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(201,150,43,.15);
  align-items: center;
}
.book-row:last-child { border-bottom: 0; }
.book-label {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.book-value { color: var(--cream); font-size: 1.02rem; }
a.book-value:hover { color: var(--gold-2); }

.book-actions { display: flex; justify-content: center; }

/* ============== Footer ============== */
.footer {
  background: var(--bg-2);
  padding: 56px 0 36px;
  border-top: 1px solid rgba(201,150,43,.15);
  color: var(--cream-2);
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } }
.footer-brand { display: flex; gap: 16px; align-items: center; color: var(--cream); }
.footer-name { font-family: var(--serif); font-weight: 700; color: var(--cream); letter-spacing: 0.08em; }
.footer-tag { font-size: 13px; color: var(--cream-2); opacity: .8; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: var(--cream); font-family: var(--serif); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; }
.footer-links a:hover { color: var(--gold-2); }
.footer-meta { display: flex; flex-direction: column; gap: 10px; }
.footer-copy { font-size: 12px; opacity: .6; }