/* ==========================================================================
   Brooklyn Art Song Society — static site
   Pixel-built to the Figma "BASS Final Mockups" (file VWlShpQPCKRGq9Gn1XkwYg)
   at the 1440 baseline. Plain CSS, no build step.

   FONTS: Cormorant Garamond (display) + Inter are exact (Google).
   Tablet Gothic (body) and Fenwick (caps/nav/buttons) are the design's
   commercial fonts — substituted with Inter here; drop the real kit in via
   --font-body / --font-caps when licensed.
   ========================================================================== */

:root {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "tablet-gothic", "Inter", system-ui, sans-serif;  /* Adobe Fonts (Typekit fid3lcy) */
  --font-caps: "fenwick", "Inter", system-ui, sans-serif;        /* Adobe Fonts (Typekit fid3lcy) */

  --ink: #0d0d0d;
  --white: #ffffff;
  --rose: #d9a490;          /* hero italic accent */
  --cream: #f6f1e7;         /* light section bg (refined when building it) */
  --navy: #1e2842;          /* headings / titles (exact) */
  --rust: #9e5e3b;          /* eyebrow / dates / links / buttons (exact) */
  --navy-card: #1a2240;     /* Digital Concert Hall card */
  --cream-card: #f5ecd8;    /* The Library card */
  --gold: #c9a962;          /* eyebrows on dark + stat numbers */
  --cream-bg: #f5ecd8;      /* cream section bg (stats) */

  --maxw: 1440px;
  --pad: 51px;

  /* Motion tokens (subtle & refined) — used only by the additive motion layer
     at the end of this file. Existing hardcoded timings are left untouched. */
  --dur-fast: .2s;          /* hovers */
  --dur-slow: .8s;          /* image zoom */
  --dur-reveal: .9s;        /* scroll reveal + hero entrance (smooth, unhurried) */
  --ease-out: cubic-bezier(.33, 1, .68, 1);      /* easeOutCubic — smooth deceleration */
  --ease-emphasized: cubic-bezier(.4, 0, .2, 1); /* reuse nav-indicator easing (hovers) */
  --reveal-shift: 24px;     /* scroll-reveal rise distance */
  --reveal-stagger: 130ms;  /* per-child stagger step (clear, readable sequence) */

  /* Left edge of the centered content column — used to align the full-bleed
     concerts carousel's first card with the rest of the page content. */
  --content-left: calc((100vw - min(100vw, var(--maxw))) / 2 + var(--pad));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ---- shared button: flat solid rectangle, sharp corners, tracked caps ----
   (the Sketch→Figma export dropped the real fills; the actual mockup buttons
   are plain solid rectangles, e.g. the rust "BUY TICKETS" card button.) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-caps);
  font-size: 14px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  line-height: 1;
  height: 58px;
  padding: 0 38px;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  background: var(--rust);
  color: #fff;
  transition: opacity .2s ease, background .2s ease;
}
.btn:hover { opacity: .9; }
.btn-rust { background: var(--rust); color: #fff; }
.btn-light { background: #fffcfa; color: var(--ink); }
.btn-light:hover { background: #fff; opacity: 1; }
.btn-outline-light { background: transparent; border: 1px solid rgba(255,255,255,.55); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.12); opacity: 1; }
.btn-outline { background: transparent; border: 1px solid rgba(30,40,66,.45); color: var(--navy); }
.btn-outline:hover { background: rgba(30,40,66,.06); opacity: 1; }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 34px; }
.two-col-text .btn-row { margin-top: 34px; }
.two-col-text .btn-row .btn { width: auto; margin-top: 0; }

/* ==========================================================================
   HEADER  (transparent overlay on the dark hero; white nav for legibility)
   ========================================================================== */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  height: 97px;
  background: #fafafa;
  border-bottom: 1px solid rgba(13,13,13,.07);
}
.header-inner {
  display: flex;
  align-items: center;
  height: 97px;
}
.brand-logo {
  width: 124px;
  height: auto;
  /* Optical nudge: the box is centered, but the polygon's mass sits low, so the
     wordmark reads below the nav text. Lift it slightly to align optically.
     transform (not margin) gives an exact shift without flex re-centering. */
  transform: translateY(-6px);
}
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 32px;
  font-family: var(--font-caps);
  font-size: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink);
}
.nav a { opacity: 1; transition: color .2s ease; }
.nav a:not(.nav-donate):hover { color: var(--rust); }
.nav a[aria-current="page"]:not(.nav-donate) { color: var(--rust); }
.nav .nav-donate {
  color: var(--white);
  background: var(--rust);
  padding: 12px 24px;
  letter-spacing: 2.4px;
  opacity: 1;
}
/* Keep the Donate pill text white on hover (the generic .nav a:hover rust
   would otherwise turn it rust-on-rust = invisible). */
.nav .nav-donate:hover { opacity: .9; color: var(--white); }

/* Animated current-page underline: a 4px rust bar snapped to the bottom of the
   header bar. JS positions it under the active item, eases to a hovered item,
   and fades back / out on mouseout. Absolutely positioned so it never pushes
   the nav text out of vertical centre (the old per-page border-bottom did). */
.nav-indicator {
  position: absolute;
  bottom: 0;
  height: 4px;
  background: var(--rust);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: left .32s cubic-bezier(.4, 0, .2, 1), width .32s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
}

/* ---- Dropdown menus (About, Events) ---- */
.nav-group { position: relative; display: inline-flex; align-items: center; }
.nav-top { display: inline-flex; align-items: center; gap: 7px; }
.nav-caret {
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin-top: -3px; opacity: .75;
  transition: transform .2s ease, margin-top .2s ease;
}
.nav-group:hover .nav-caret { transform: rotate(225deg); margin-top: 2px; }
.nav-sub {
  position: absolute; top: 100%; left: 50%;
  margin-top: 14px; padding: 8px 0; min-width: 232px;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(13,13,13,.08); box-shadow: 0 18px 40px rgba(13,13,13,.14);
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
}
/* invisible bridge across the gap so hover doesn't drop between item and panel */
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-sub-link {
  font-family: var(--font-caps); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink); padding: 12px 26px; white-space: nowrap;
}
.nav-sub-link:hover { color: var(--rust); background: rgba(158,94,59,.06); }
.hamburger { display: none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 900px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  color: var(--white);
  background: #0a0a0a;
}
.hero-media {
  position: absolute;
  inset: 0;
  background: url("../images/hero-bg.jpg") center top / cover no-repeat;
}
/* extra left-side darkening so the headline stays legible at all widths */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,8,8,.72) 0%, rgba(8,8,8,.35) 45%, rgba(8,8,8,0) 70%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 106px;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 120px;
  line-height: 107px;
  letter-spacing: -0.03em; /* em so the clamp()'d size keeps proportional tracking on mobile */
  margin-top: 160px;
}
.hero-title em { font-style: italic; color: var(--rose); }
.hero-sub {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0.3px;
  margin-top: 32px;
  max-width: 820px;
}
.hero-sub strong { font-weight: 700; }
.hero-cta {
  display: flex;
  gap: 18px;
  margin-top: 40px;
}
.hero-scroll {
  position: absolute;
  right: var(--pad);
  bottom: 34px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-caps);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.hero-scroll::after {
  content: "";
  width: 40px;
  height: 1px;
  background: rgba(255,255,255,.4);
}

/* ==========================================================================
   SHARED section heading + link + rust button
   ========================================================================== */
.eyebrow {
  font-family: var(--font-caps);
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 10px;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 80px;
  line-height: 0.96;
  letter-spacing: -0.02em; /* em so clamp()'d size keeps proportional tracking */
  color: var(--navy);
}
/* heading italic-accent word: rust on light sections, gold on dark */
.section-title em { font-style: italic; color: var(--rust); }
.section-title-light em { color: var(--gold); }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.link-arrow {
  font-family: var(--font-caps);
  font-size: 14px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--rust);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(158,94,59,.5);
  white-space: nowrap;
}
.link-arrow::after { content: " \2192"; }
.btn-rust { background: var(--rust); color: var(--white); }

/* ==========================================================================
   UPCOMING CONCERTS  (white bg, navy headings, rust accents, overflow carousel)
   ========================================================================== */
.upcoming {
  background: var(--white);
  padding: 90px 0 84px;
  overflow: hidden;
}
.concert-row {
  display: flex;
  gap: 41px;
  margin-top: 60px;
}
.concert {
  flex: 0 0 597px;
  max-width: 597px;
}
.concert-cover {
  width: 597px;
  height: 597px;
  object-fit: cover;
  border-radius: 0;
}
.concert-date {
  font-family: var(--font-caps);
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--rust);
  margin-top: 28px;
}
.concert-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 50px;
  line-height: 50px;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-top: 14px;
}
.concert-venue {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--rust);
  margin-top: 16px;
}
.concert .btn-rust {
  margin-top: 24px;
  height: 59px;
  clip-path: none;
}
/* Auto-scroll marquee variant (home Upcoming Concerts): two identical rows
   slide left continuously; cards exit the left edge and re-enter from the
   right. The section's overflow:hidden clips them at the viewport. */
.concert-marquee { margin-top: 60px; overflow: hidden; }
.concert-track { display: flex; width: max-content; animation: concert-marquee 55s linear infinite; }
.upcoming:hover .concert-track { animation-play-state: paused; }
.concert-track .concert-row { margin-top: 0; flex: 0 0 auto; gap: 41px; padding-right: 41px; }
@keyframes concert-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .concert-track { animation: none; } }

/* Full-bleed, slide-by-slide carousel (auto-advance + drag/swipe; JS in
   main.js). Lives OUTSIDE .wrap so it spans the viewport edge to edge: the
   first card is flush-left, later cards run off the right and snap one at a
   time. Replaces the marquee for the Upcoming Concerts / Events concerts row. */
.concert-carousel {
  position: relative; /* be the cards' offsetParent so JS scroll math is exact */
  margin-top: 60px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--content-left); /* snap the first card to the content edge */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.concert-carousel::-webkit-scrollbar { display: none; }
/* First card aligns to the page content column (looks normal); cards run off
   the RIGHT edge (full bleed) and slide off the left one at a time. */
.concert-carousel .concert-row { display: flex; gap: 41px; width: max-content; margin: 0; padding: 0 0 0 var(--content-left); }
.concert-carousel .concert { flex: 0 0 auto; width: min(597px, 86vw); max-width: none; margin: 0; scroll-snap-align: start; }
.concert-carousel .concert .concert-cover { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.concert-carousel.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.concert-carousel.is-dragging .concert { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .concert-carousel { scroll-behavior: auto; } }

/* ==========================================================================
   PRESS QUOTES  (thin rust marquee strip on white)
   ========================================================================== */
/* Navy ticker bar with a faint gold/rust wash — Figma 0:42/0:43. */
.press {
  background:
    radial-gradient(60% 130% at 20% 50%, rgba(201,169,98,.12), rgba(201,169,98,0) 70%),
    radial-gradient(60% 130% at 80% 50%, rgba(158,94,59,.14), rgba(158,94,59,0) 70%),
    var(--navy);
  overflow: hidden;
}
/* Infinite marquee: .press-track holds TWO identical .press-rows and slides
   left by one row width (-50%) for a seamless loop; pauses on hover. */
.press-track {
  display: flex;
  width: max-content;
  animation: press-marquee 50s linear infinite;
}
.press:hover .press-track { animation-play-state: paused; }
@keyframes press-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.press-row {
  display: flex;
  align-items: center;
  gap: 44px;
  height: 93px;
  white-space: nowrap;
  padding-right: 44px;
}
@media (prefers-reduced-motion: reduce) { .press-track { animation: none; } }
.press-logo {
  display: inline-block;
  background: var(--gold);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  flex: 0 0 auto;
}
.press-quote { font-family: var(--font-body); font-size: 18px; line-height: 30px; color: var(--gold); }
.press-pub {
  font-family: var(--font-body); font-weight: 600;
  font-size: 13px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--gold);
}
.press-div { width: 1px; height: 50px; background: rgba(201,169,98,.4); flex: 0 0 auto; }

/* ==========================================================================
   HEAR BASS  (black media section + track list)
   ========================================================================== */
.hear { background: #000; color: #fff; padding: 63px 0 90px; }
/* Eyebrow on dark sections — WHITE by default (matches Figma), overridable
   from the Site Settings "Eyebrow accent colour" option. */
.eyebrow-dark { color: var(--eyebrow-accent, #fff); }
.hear-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 80px;
  line-height: 92px;
  letter-spacing: -0.02em;
  color: #fff;
}
.hear-title em { font-style: italic; }
.hear-photo {
  position: relative;
  margin-top: 40px;
  border-radius: 0;
  overflow: hidden;
}
/* aspect-ratio (not a fixed 714px height) so the media scales with viewport width
   instead of staying portrait-tall on mobile. 1.87 ≈ 1338/714 = the desktop ratio,
   so the desktop height is unchanged. */
.hear-photo img { width: 100%; height: auto; aspect-ratio: 1.87; object-fit: cover; }
.hear-video {
  position: relative;
  margin-top: 40px;
  aspect-ratio: 16 / 9;
}
.hear-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.play-btn {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 110px; height: 110px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.92);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.play-btn::after {
  content: "";
  position: absolute; left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 15px 0 15px 26px;
  border-color: transparent transparent transparent #111;
}
.play-btn:hover { transform: translate(-50%, -50%) scale(1.05); background: #fff; }
/* While a track is playing, the play triangle becomes a pause glyph (two bars). */
.hear.is-playing .play-btn::after {
  left: 50%;
  border: none;
  width: 24px; height: 28px;
  background:
    linear-gradient(#111, #111) left / 8px 100% no-repeat,
    linear-gradient(#111, #111) right / 8px 100% no-repeat;
}
.now-playing {
  font-family: var(--font-caps);
  font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--rust);
  margin-top: 56px;
}
.now-title {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: 40px; color: #fff; margin-top: 14px;
}
.now-sub { font-family: var(--font-display); font-style: italic; font-size: 18px; color: rgba(255,255,255,.55); margin-top: 8px; }
.tracklist { list-style: none; margin: 36px 0 0; padding: 0; }
.track {
  display: flex; align-items: center; gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.track .t-num { font-family: var(--font-caps); font-size: 13px; color: rgba(255,255,255,.5); width: 28px; }
.track .t-title { font-family: var(--font-display); font-style: italic; font-size: 26px; color: #fff; flex: 1; }
.track .t-time { font-family: var(--font-caps); font-size: 13px; color: rgba(255,255,255,.5); }
.track.is-active {
  padding: 26px 0 26px 24px;
  border-left: 3px solid var(--rust);
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-left: -24px;
}
.track.is-active .t-num { color: var(--rust); }

/* ==========================================================================
   LISTEN  (two feature cards + full-width hall band)
   ========================================================================== */
.listen { background: #fff; padding-top: 80px; }
.listen-no-band { padding-bottom: 96px; }
.listen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 49px; }
.lcard { border-radius: 0; overflow: hidden; display: flex; flex-direction: column; }
.lcard-dark { background: var(--navy-card); }
.lcard-light { background: var(--cream-card); }
.lcard-img { width: 100%; height: 270px; object-fit: cover; }
.lcard-body { padding: 44px 40px 40px; display: flex; flex-direction: column; flex: 1; }
.lcard-title { font-family: var(--font-display); font-weight: 600; font-size: 50px; line-height: 1.04; letter-spacing: -0.02em; color: #fff; margin-top: 6px; }
.lcard-title-navy { color: var(--navy); }
.lcard-text { font-family: var(--font-body); font-size: 16px; line-height: 28px; color: rgba(255,255,255,.72); margin-top: 18px; }
.lcard-text-dark { color: rgba(30,40,66,.78); }
.lcard-list { list-style: none; margin: 28px 0 0; padding: 0; }
.lcard-list li { font-family: var(--font-body); font-size: 15px; color: rgba(255,255,255,.72); padding: 6px 0 6px 20px; position: relative; }
.lcard-list li::before { content: "•"; position: absolute; left: 0; color: var(--rust); }
.lcard-list-dark li { color: rgba(30,40,66,.78); }
.lcard-btn { margin-top: auto; width: 100%; clip-path: none; }
.lcard-list { margin-bottom: 34px; }
.lcard-btn-outline { background: transparent; border: 1px solid rgba(30,40,66,.4); color: var(--navy); }
.lcard-btn-outline:hover { background: rgba(30,40,66,.05); opacity: 1; }
.hall-band { margin-top: 80px; }
.hall-band img { width: 100%; height: 586px; object-fit: cover; display: block; }

/* ==========================================================================
   FOOTER  (white, newsletter + explore/contact + social + copyright)
   ========================================================================== */
.site-footer { background: #0d0d0d; color: #fff; padding: 64px 0 56px; }
.site-footer .eyebrow { color: var(--gold); }
.foot-newsletter { display: flex; justify-content: space-between; align-items: flex-start; gap: 60px; }
.foot-news-title { font-family: var(--font-display); font-weight: 600; font-size: 33px; color: #fff; }
.foot-news-sub { font-family: var(--font-body); font-size: 16px; color: rgba(255,255,255,.6); margin-top: 12px; max-width: 520px; }
.foot-form { display: flex; align-items: stretch; }
.foot-form input {
  font-family: var(--font-body); font-size: 15px;
  background: transparent; border: 1px solid rgba(255,255,255,.25); border-right: none;
  padding: 0 22px; height: 63px; width: 248px; outline: none; color: #fff;
}
.foot-form input::placeholder { color: rgba(255,255,255,.5); }
.foot-subscribe { height: 63px; clip-path: none; background: var(--gold); color: var(--navy); }
.foot-rule { border: none; border-top: 1px solid rgba(255,255,255,.12); margin: 64px 0 56px; }
.foot-main { display: flex; justify-content: space-between; gap: 60px; }
.foot-explore { flex: 0 0 618px; }
.foot-links {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; max-width: 560px;
}
.foot-links a { font-family: var(--font-caps); font-size: 15px; letter-spacing: .4px; color: rgba(255,255,255,.82); opacity: 1; }
.foot-links a:hover { color: var(--gold); }
.foot-contact { text-align: right; }
.foot-email { display: inline-block; margin-top: 30px; font-family: var(--font-body); font-size: 16px; color: #fff; }
.foot-addr { font-family: var(--font-body); font-size: 15px; line-height: 24px; color: rgba(255,255,255,.6); margin-top: 26px; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 56px; }
.foot-social { display: flex; gap: 24px; align-items: center; }
.foot-social a { display: inline-flex; color: rgba(255,255,255,.7); transition: color .2s ease; }
.foot-social a:hover { color: var(--gold); }
.foot-social svg { width: 20px; height: 20px; display: block; }
.foot-copy { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,.5); }

/* ==========================================================================
   INNER-PAGE shared blocks (About / Events / Donate)
   ========================================================================== */
.eyebrow-gold { color: var(--gold); }
.hero-page { min-height: 700px; align-items: center; }
.hero-page .hero-inner { padding-top: 97px; }
.hero-title-sm { font-size: 96px; line-height: 96px; margin-top: 0; }
.section-title-light { color: #fff; }
.body { font-family: var(--font-body); font-size: 18px; line-height: 30px; color: #162441; margin-top: 22px; max-width: 620px; }
.body-light { color: rgba(255,255,255,.8); }
.inline-link { color: var(--rust); border-bottom: 1px solid rgba(158,94,59,.5); }

/* two-column text + media */
.two-col { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: center; }
.two-col-rev .two-col-media { order: -1; }
.two-col-text .section-title { margin-bottom: 4px; }
.two-col-text .btn { margin-top: 34px; width: 100%; }
.two-col-media img { width: 100%; border-radius: 0; object-fit: cover; }
.story { background: #fff; padding: 96px 0; }
.community { background: #fff; padding: 96px 0; }

/* stats — Fenwick gold number + navy uppercase tracked label on a light cream
   band (Figma: number Fenwick 120px #c9a962, label Fenwick 25px #162441 5px). */
.stats { background: #f5efe2; padding: 88px 0; }
.stats-row { display: flex; }
.stat { flex: 1; text-align: center; padding: 0 30px; border-right: 1px solid rgba(30,40,66,.18); }
.stat:last-child { border-right: none; }
.stat-num { display: block; font-family: var(--font-caps); font-weight: 400; font-size: 120px; line-height: 1; color: var(--gold); }
.stat-label { display: block; font-family: var(--font-caps); font-size: 22px; line-height: 30px; letter-spacing: 4px; text-transform: uppercase; color: #162441; margin-top: 18px; }

/* full-bleed photo band */
.band img { width: 100%; height: 560px; object-fit: cover; display: block; }

/* mission (dark) */
.mission { background: #0d0d0d; color: #fff; padding: 96px 0; }
.mission-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 30px; }
.mission-cols .body { max-width: none; }

/* split: dark Board card + light Artistic Director card (mirrors the homepage
   Listen dual cards — gap, rounded, equal height; AD photo beside its bio). */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 49px; max-width: var(--maxw); margin: 0 auto; padding: 96px var(--pad); align-items: stretch; }
.split-dark { background: var(--navy); color: #fff; border-radius: 0; }
.split-light { background: #fcf9f3; border-radius: 0; }
.split-pad { padding: 56px 48px; max-width: none; margin: 0; }
.split-pad::after { content: ""; display: table; clear: both; }
/* Artistic Director: photo floats so the bio text wraps around it. */
.split-light .ad-photo { float: left; margin: 6px 28px 10px 0; }
.split-light .split-pad .body { max-width: none; }
.roster { list-style: none; margin: 36px 0 0; padding: 0; }
.roster li { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.roster .r-name { font-family: var(--font-body); font-size: 18px; color: #fff; }
.roster .r-role { font-family: var(--font-caps); font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); }
.roster-light li { border-bottom: 1px solid rgba(30,40,66,.14); }
.roster-light .r-name { color: #162441; }
.roster-light .r-role { color: var(--rust); }
.ad-photo { width: 197px; height: 228px; object-fit: cover; border-radius: 0; flex: 0 0 197px; }

/* duo (new music + young artist) on cream */
.duo { background: #fff; padding: 110px 0; }
.duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.duo-card { background: #fcf9f3; padding: 56px 48px; display: flex; flex-direction: column; }
.duo .btn { margin-top: 30px; width: 100%; }
.duo .btn::after { content: "\00a0\00a0\2192"; }

/* ==========================================================================
   HEADER light variant (dark nav over white inner-page hero)
   ========================================================================== */
.header-light { position: relative; background: #fff; border-bottom: 1px solid rgba(30,40,66,.08); }
.header-light .nav { color: var(--ink); }
.btn-gold { background: var(--gold); color: #1e2842; }
.btn-navy { background: var(--navy); color: #fff; }

/* ==========================================================================
   EVENTS
   ========================================================================== */
.ev-hero { background: #fff; padding: 64px 0 10px; }
.ev-hero-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.ev-title { font-family: var(--font-display); font-weight: 600; font-size: 96px; line-height: 92px; letter-spacing: -0.025em; color: var(--navy); }
.ev-title em { font-style: italic; }
.ev-hero-btns { display: flex; flex-direction: column; gap: 14px; }
/* Events "Every concert, every series": the row aligns to the content on the
   left but runs FLUSH to the right viewport edge (no margin) — the 3rd card
   always peeks off the right. No arrows; native scroll / drag. */
.upcoming-flush { padding-top: 40px; }
.upcoming-flush .wrap {
  max-width: none;
  margin: 0;
  padding-left: calc((100vw - min(100vw, var(--maxw))) / 2 + var(--pad));
  padding-right: 0;
}
.carousel .concert-row {
  display: flex; gap: 41px; margin-top: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: 6px;
}
.carousel .concert-row::-webkit-scrollbar { display: none; }
.carousel .concert { flex: 0 0 40%; max-width: 40%; scroll-snap-align: start; }
.carousel .concert .concert-cover { width: 100%; height: auto; aspect-ratio: 1 / 1; }
@media (max-width: 1024px) { .carousel .concert { flex-basis: 58%; max-width: 58%; } }
@media (max-width: 680px) { .carousel .concert { flex-basis: 84%; max-width: 84%; } }
.calendar { background: #fff; padding: 70px 0 100px; }
.cal-filters { display: flex; flex-wrap: wrap; gap: 14px; margin: 36px 0 50px; }
.filter {
  font-family: var(--font-caps); font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
  padding: 11px 20px; border: 1px solid rgba(30,40,66,.3); background: #fff; color: var(--navy);
  cursor: pointer; transition: all .2s ease;
}
.filter.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.cal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 49px 41px; }
.cal-grid .concert { flex: none; max-width: none; }
.cover-sm { width: 100%; height: 300px; }
.concert-title-sm { font-size: 34px; line-height: 36px; }
.ev-cta { position: relative; color: #fff; overflow: hidden; }
.ev-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-cta-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 120px 51px; text-align: center; }
.ev-cta-inner::before { content: ""; position: absolute; inset: 0; background: rgba(8,8,8,.55); z-index: -1; }
.ev-cta-body { max-width: 620px; margin-left: auto; margin-right: auto; }
.ev-cta .btn { margin-top: 34px; }

/* ==========================================================================
   DONATE
   ========================================================================== */
.hero-donate { margin-top: 40px; }
.eyebrow-gold-solid { color: var(--gold); }
.give { background: #fff; padding: 64px 0 90px; }
.give-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 49px; margin-top: 50px; align-items: stretch; }
.give-card { background: #f8f1e3; border-radius: 0; padding: 44px 40px; display: flex; flex-direction: column; }
.give-title { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; color: var(--navy); margin-top: 6px; }
.give-note { font-family: var(--font-body); font-size: 14px; color: rgba(30,40,66,.6); margin-top: 18px; }
.give-addr { font-family: var(--font-display); font-size: 26px; line-height: 36px; color: var(--navy); margin-top: 18px; }
.give-card .btn { margin-top: 26px; width: 100%; clip-path: none; }
.give-tax { margin-top: 64px; border-left: 4px solid var(--rust); padding-left: 28px; }
.give-tax-title { font-family: var(--font-display); font-weight: 600; font-size: 40px; color: var(--navy); }
.give-tax-title em { font-style: italic; color: var(--rust); }

.donors { background: #0d0d0d; color: #fff; padding: 100px 0; }
.donors-lede { max-width: 860px; }
.tiers { display: flex; flex-wrap: wrap; gap: 12px; margin: 40px 0 0; }
.tier {
  font-family: var(--font-caps); font-size: 12px; letter-spacing: 1.4px;
  padding: 11px 18px; border: 1px solid rgba(255,255,255,.45); color: #fff;
  background: transparent; margin: 0; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.tier:hover { border-color: var(--gold); color: var(--gold); }
.tier.is-open { background: var(--gold); border-color: var(--gold); color: var(--navy); }
/* Selected tier's donors — large serif lines with hairline rules (Figma). One
   tier is always shown (default: the top tier / institutional partners). */
.donor-list { margin-top: 44px; }
.donor-list[hidden] { display: none; }
.donor-names { list-style: none; margin: 0; padding: 0; }
.donor-names li {
  font-family: var(--font-display); font-size: 28px; line-height: 1.25; color: #fff;
  padding: 22px 4px; border-bottom: 1px solid rgba(255,255,255,.18); break-inside: avoid;
}
.donor-names.is-multi { columns: 3; column-gap: 72px; }
.donor-names.is-multi li { font-size: 22px; padding: 14px 4px; }
@media (max-width: 1024px) { .donor-names.is-multi { columns: 2; } }
@media (max-width: 680px) { .donor-names.is-multi { columns: 1; } }
.agencies { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1000px; }
.agency { font-family: var(--font-display); font-size: 30px; color: #fff; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16); }

.stats-impact { background: #f5efe2; }
.impact-head { text-align: center; margin-bottom: 56px; font-family: var(--font-caps); font-weight: 400; text-transform: uppercase; font-size: 46px; line-height: 1.1; letter-spacing: 2px; }
.impact-head em { font-style: normal; color: var(--rust); }

/* ==========================================================================
   RESPONSIVE  (mockups are desktop-only at 1440; below that, graceful reflow)
   ========================================================================== */
.hamburger { width: 30px; height: 22px; margin-left: auto; background: none; border: none; cursor: pointer; flex-direction: column; justify-content: space-between; padding: 0; }
.hamburger span { display: block; height: 2px; width: 100%; background: currentColor; }
.site-header .hamburger { color: var(--ink); }

@media (max-width: 1280px) {
  :root { --pad: 36px; }
  .hero-title { font-size: clamp(64px, 8.4vw, 120px); line-height: 1.05; }
  .hero-title-sm, .ev-title { font-size: clamp(54px, 7vw, 96px); line-height: 1.04; }
  .section-title, .give-tax-title, .give-title, .lcard-title, .concert-title, .hear-title { font-size: clamp(40px, 5.6vw, 80px); line-height: 1.08; }
  .stat-num { font-size: clamp(72px, 9vw, 120px); }
  .concert { flex-basis: 46%; max-width: 46%; }
  .concert-cover { width: 100%; height: auto; aspect-ratio: 1/1; }
}

@media (max-width: 1024px) {
  /* ---- Mobile nav (hamburger) ---- */
  .nav { display: none; }
  .nav-indicator { display: none; }            /* desktop hover underline — off on mobile */
  .hamburger { display: flex; position: relative; z-index: 60; }
  .hamburger span { transition: transform .25s ease, opacity .2s ease; }
  body.nav-open { overflow: hidden; }            /* lock the page behind the menu */
  /* keep the toggle above the panel + tappable to CLOSE; morph to an X */
  body.nav-open .hamburger { position: fixed; top: 37px; right: var(--pad); color: #fff; }
  body.nav-open .hamburger span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
  body.nav-open .hamburger span:nth-child(2) { opacity: 0; }
  body.nav-open .hamburger span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
  body.nav-open .nav {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: fixed; inset: 0; z-index: 50; background: #0d0d0d; color: #fff;
    padding: 100px 36px 48px; font-size: 22px; overflow-y: auto;
  }
  body.nav-open .nav a { color: #fff; padding: 8px 0; }
  body.nav-open .nav .nav-donate { display: inline-flex; margin-top: 18px; padding: 14px 28px; }
  /* dropdown groups expand inline (no hover on touch): show the sub-items as an
     indented static list under their tappable parent page link */
  body.nav-open .nav-group { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
  body.nav-open .nav-caret { display: none; }
  body.nav-open .nav-sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; border: 0; box-shadow: none; min-width: 0; margin: 0;
    padding: 2px 0 8px 18px;
  }
  body.nav-open .nav-sub::before { display: none; }
  body.nav-open .nav-sub-link { color: rgba(255,255,255,.72); font-size: 16px; padding: 9px 0; }
  /* the desktop hover rule (.nav-group:hover .nav-sub) re-applies translateX(-50%);
     on the static mobile list that yanks the sub-items left. Kill the transform. */
  body.nav-open .nav-group:hover .nav-sub,
  body.nav-open .nav-group:focus-within .nav-sub { transform: none; }
  /* stack two-column layouts */
  /* minmax(0,1fr) so a 1fr track can shrink below its content's min-content
     (a plain 1fr expands to min-content and overflows narrow viewports). */
  .two-col, .mission-cols, .duo-grid, .listen-grid, .give-grid, .foot-main, .foot-newsletter, .agencies { grid-template-columns: minmax(0, 1fr); display: grid; gap: 40px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-pad { max-width: none; padding: 64px 36px; }
  .two-col-rev .two-col-media { order: 0; }
  .foot-newsletter, .foot-bottom { flex-direction: column; align-items: flex-start; gap: 30px; }
  .foot-contact { text-align: left; }
  .cal-grid { grid-template-columns: repeat(2, 1fr); }
  .ev-hero-head { flex-direction: column; align-items: flex-start; gap: 28px; }
  /* stack the big impact/stat numbers on tablet too — 3 across (e.g. "1000+")
     overflow below ~900px */
  .stats-row { flex-direction: column; gap: 40px; }
  .stat { border-right: none; border-bottom: 1px solid rgba(30,40,66,.18); padding-bottom: 30px; }
  .stat:last-child { border-bottom: none; padding-bottom: 0; }
}

@media (max-width: 680px) {
  :root { --pad: 22px; }
  .hero { min-height: 620px; }
  /* desktop's 160px title margin leaves a huge gap under the fixed header on mobile;
     trim it and add breathing room below the buttons. Shift the bg crop toward the
     right so the figure (right side of the photo) stays in frame. */
  .hero-inner { padding-bottom: 60px; }
  .hero-title { font-size: clamp(44px, 12vw, 64px); margin-top: 40px; }
  .hero-media { background-position: 72% top; }
  .hero-sub { font-size: 19px; line-height: 30px; }
  .hero-cta, .ev-hero-btns { flex-direction: column; align-items: stretch; }
  /* eyebrow + title get the full row; the "View full calendar" link drops below
     instead of fighting the heading for horizontal space */
  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .btn { width: 100%; }
  .concert-row { gap: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .concert { flex-basis: 80%; max-width: 80%; }
  .cal-grid { grid-template-columns: 1fr; }
  .foot-form { flex-direction: column; gap: 12px; }
  .foot-form input { width: 100%; border-right: 1px solid rgba(30,40,66,.25); }
  .foot-links { grid-template-columns: 1fr; }
  .press-row { gap: 18px; justify-content: flex-start; overflow-x: auto; }
  .hero-scroll { display: none; }
  .band img, .hall-band img, .lcard-img { height: 320px; }
}

/* ==========================================================================
   INNER CONTENT PAGES (Roster, Press, Watch, Leadership, Learn, YAP, etc.)
   ========================================================================== */
.page-intro { padding: 72px 0 36px; }
.page-intro-title { margin-top: 8px; }
.page-intro-lede { max-width: 760px; margin-top: 22px; }

/* Roster */
.roster-section { padding: 24px 0 96px; }
.roster-group { margin-top: 56px; }
.roster-group:first-child { margin-top: 16px; }
.roster-group-title {
  font-family: var(--font-caps); font-size: 15px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--rust); padding-bottom: 16px; margin-bottom: 36px; border-bottom: 1px solid rgba(13,13,13,.12);
}
.roster-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 36px; }
.roster-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #ece6da; }
.roster-name { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.1; color: var(--navy); margin-top: 18px; }
.roster-bio { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: rgba(13,13,13,.62); margin-top: 10px; }
@media (max-width: 1024px) { .roster-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .roster-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; } .roster-name { font-size: 22px; } }

/* Video grid + lightbox */
.video-grid-section { padding: 24px 0 96px; }
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px; }
.video-card { position: relative; display: block; padding: 0; border: none; background: none; cursor: pointer; text-align: left; }
.video-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--navy) center / cover no-repeat; }
.video-card .video-play {
  position: absolute; left: 50%; top: calc(50% - 26px); transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.92);
  transition: transform .2s ease, background .2s ease;
}
.video-card .video-play::after {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #111;
}
.video-card:hover .video-play { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
.video-meta { display: flex; flex-direction: column; gap: 3px; margin-top: 16px; }
.video-title { font-family: var(--font-display); font-size: 23px; line-height: 1.15; color: var(--navy); }
.video-date { font-family: var(--font-caps); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--rust); }
.video-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(8,8,8,.9); padding: 5vw; }
.video-lightbox[hidden] { display: none; }
.video-lightbox-frame { width: min(1100px, 100%); aspect-ratio: 16 / 9; }
.video-lightbox-frame iframe { width: 100%; height: 100%; border: 0; }
.video-lightbox-close { position: absolute; top: 24px; right: 32px; background: none; border: none; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }
@media (max-width: 1024px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .video-grid { grid-template-columns: 1fr; } }

/* Press page */
.press-page { padding: 24px 0 96px; }
.press-feature { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-bottom: 56px; margin-bottom: 56px; border-bottom: 1px solid rgba(13,13,13,.12); }
.press-feature-quote { font-family: var(--font-display); font-style: italic; font-size: 44px; line-height: 1.05; color: var(--navy); }
.press-feature-pub { font-family: var(--font-caps); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--rust); margin-top: 14px; }
.press-clips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(13,13,13,.12); border: 1px solid rgba(13,13,13,.12); }
.press-clip { display: block; background: #fff; padding: 30px 32px; transition: background .2s ease; }
a.press-clip:hover { background: #faf6ee; }
.press-clip-quote { font-family: var(--font-display); font-size: 22px; line-height: 1.3; color: var(--ink); }
.press-clip-pub { font-family: var(--font-caps); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--rust); margin-top: 14px; display: flex; align-items: center; gap: 8px; }
.press-clip-arrow { font-size: 13px; }
@media (max-width: 880px) { .press-feature { grid-template-columns: 1fr; gap: 28px; } .press-feature-quote { font-size: 34px; } .press-clips { grid-template-columns: 1fr; } }

/* ==========================================================================
   MOTION LAYER  (additive; subtle & refined)
   Resting/end states equal the static design. Every initial-hidden state is
   scoped to `html.js` (set pre-paint in inc/enqueue.php) so no-JS / slow-JS
   renders everything visible. prefers-reduced-motion + a JS safety timeout
   also force-reveal. Hover/zoom are pure CSS (work without JS).
   ========================================================================== */

/* Cascade containers whose children reveal SEQUENTIALLY (staggered via --i):
   grids + the dual-column layouts (.two-col text|media, .split dark|light).
   Marquee sections (.press-track / .concert-track) are deliberately NOT
   revealed — they already move on their own. Kept in sync with main.js. */

/* ---- Scroll reveal: whole sections (no cascade container, no marquee) ---- */
html.js main > section:not(:has(.roster-grid, .video-grid, .give-grid, .listen-grid, .stats-row, .cal-grid, .duo-grid, .press-clips, .two-col, .split-dark, .press-track, .concert-track)) {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
html.js body main > section.is-in { opacity: 1; transform: none; }

/* ---- Scroll reveal: cascade children, staggered into a clear sequence ---- */
html.js .roster-grid > *, html.js .video-grid > *, html.js .give-grid > *,
html.js .listen-grid > *, html.js .stats-row > *, html.js .cal-grid > *,
html.js .duo-grid > *, html.js .press-clips > *,
html.js .two-col > *, html.js .split > * {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--reveal-stagger));
}
html.js .roster-grid > *.is-in, html.js .video-grid > *.is-in, html.js .give-grid > *.is-in,
html.js .listen-grid > *.is-in, html.js .stats-row > *.is-in, html.js .cal-grid > *.is-in,
html.js .duo-grid > *.is-in, html.js .press-clips > *.is-in,
html.js .two-col > *.is-in, html.js .split > *.is-in {
  opacity: 1;
  transform: none;
}

/* Story (Two-Col) block: no scroll-reveal — keep its columns visible at all
   times. The reveal was stranding the second section's content hidden. */
html.js section.story .two-col > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ---- Image fade-in on load (full-bleed bands only) ---- */
html.js img.bass-fade { opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out); }
html.js img.bass-fade.is-loaded { opacity: 1; }

/* ---- Hero entrance (on load) + Ken Burns background ---- */
html.js .hero-inner > *, html.js .ev-hero-head > * {
  opacity: 0;
  transform: translateY(18px);
  animation: bass-hero-rise var(--dur-reveal) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 140ms + 150ms);
}
@keyframes bass-hero-rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-media { animation: bass-kenburns 24s ease-out forwards; transform-origin: center; }
}
@keyframes bass-kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }

/* ---- Card hover: CONTAINED image zoom only. No card lift/shadow — that
        shifted the whole card (and its button), which read as disorienting.
        The zoom scales the image INSIDE its fixed media box, so nothing else
        on the card moves. ---- */
.concert-media, .roster-media, .lcard-media { overflow: hidden; }
.concert-media img, .roster-media img, .lcard-img {
  transition: transform var(--dur-slow) var(--ease-out);
}
.concert:hover .concert-media img,
.roster-card:hover .roster-media img,
.lcard:hover .lcard-img { transform: scale(1.04); }

/* ---- Sticky header + shadow on scroll ---- */
.header-light { position: sticky; top: 0; z-index: 40; }
body.is-pinned .site-header:not(.header-light) {
  position: fixed;
  animation: bass-header-drop var(--dur-fast) var(--ease-emphasized);
}
@keyframes bass-header-drop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
body.is-scrolled .site-header { box-shadow: 0 6px 24px rgba(13,13,13,.08); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
section[id] { scroll-margin-top: 110px; }

/* ---- Micro-interactions ---- */
.link-arrow::after { display: inline-block; transition: transform var(--dur-fast) var(--ease-emphasized); }
.link-arrow:hover::after { transform: translateX(4px); }
.inline-link { transition: color var(--dur-fast) var(--ease-emphasized); }
.inline-link:hover { color: #7d4a2e; }

/* ---- Reduced-motion: force everything visible + static ---- */
@media (prefers-reduced-motion: reduce) {
  html.js main > section,
  html.js .roster-grid > *, html.js .video-grid > *, html.js .give-grid > *,
  html.js .listen-grid > *, html.js .stats-row > *, html.js .cal-grid > *,
  html.js .duo-grid > *, html.js .press-clips > *,
  html.js .two-col > *, html.js .split > *,
  html.js .hero-inner > *, html.js .ev-hero-head > *,
  html.js img.bass-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  html.js .hero-media { animation: none !important; }
  body.is-pinned .site-header:not(.header-light) { animation: none; }
  .concert:hover .concert-media img, .roster-card:hover .roster-media img,
  .lcard:hover .lcard-img { transform: none; }
  .link-arrow:hover::after { transform: none; }
  html { scroll-behavior: auto; }
}