/*
  GRS Components Stylesheet
  Buttons, cards, header, nav, footer, eyebrow, lede, scrim.
  Depends on: tokens.css, base.css
*/

/* ─── Eyebrow ──────────────────────────────────────────────────────────────── */
.eyebrow {
  display: block;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Teal, not gold: bright gold (#f4aa00) on the light vellum/white sections
     only reaches ~2:1 contrast. Dark sections re-gold the eyebrow below. */
  color: var(--grs-primary);
  margin-bottom: var(--space-2);
}

/* Over dark backdrops the gold eyebrow returns (gold on deep navy clears AA). */
.hero .eyebrow,
.trailer .eyebrow,
.section--dark .eyebrow,
.page-hero .eyebrow,
.single-tickets .eyebrow {
  color: var(--grs-gold);
}

/* ─── Lede ─────────────────────────────────────────────────────────────────── */
.lede {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-4);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--grs-ink);
  max-width: 50ch;
}

/* ─── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.75rem var(--space-4);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  line-height: 1;
}

.btn:focus-visible {
  outline: 2px solid var(--grs-primary);
  outline-offset: 3px;
}

.btn--primary {
  background-color: var(--grs-primary);
  color: #ffffff;
  border-color: var(--grs-primary);
}

.btn--primary:hover {
  background-color: var(--grs-secondary);
  border-color: var(--grs-secondary);
  color: #ffffff;
  text-decoration: none;
}

.btn--ghost {
  background-color: transparent;
  color: var(--grs-primary);
  border-color: var(--grs-primary);
}

.btn--ghost:hover {
  background-color: var(--grs-primary);
  color: #ffffff;
  text-decoration: none;
}

/* Ghost on dark backgrounds */
.btn--ghost-light {
  background-color: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
}

.btn--ghost-light:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
  text-decoration: none;
}

/* ─── Scrim ────────────────────────────────────────────────────────────────── */
/* Gradient overlay for text legibility over media */
.scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scrim--bottom {
  background: linear-gradient(
    to top,
    rgba(9, 16, 22, 0.78) 0%,
    rgba(9, 16, 22, 0.4) 40%,
    transparent 100%
  );
}

.scrim--full {
  background: linear-gradient(
    180deg,
    rgba(9, 16, 22, 0.2) 0%,
    rgba(9, 16, 22, 0.55) 100%
  );
}

/* ─── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: min(90vh, 800px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--grs-secondary);
}

.hero__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The scrim sits above the scene but below the content */
.hero__scrim {
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: var(--space-4);
  padding-block: var(--space-7);
  color: #ffffff;
}

.hero__headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
  max-width: 16ch;
  margin-block: 0 var(--space-4);
}

.hero__lede {
  color: rgba(255, 255, 255, 0.85);
  margin-block: 0 var(--space-5);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ─── Cards ────────────────────────────────────────────────────────────────── */
.card {
  background: #ffffff;
  border: 1px solid rgba(12, 12, 14, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: var(--grs-secondary);
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.card:hover .card__image img {
  transform: scale(1.03);
}

.card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.card__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--grs-ink);
  margin: 0;
}

.card__body p {
  font-size: var(--step-0);
  color: rgba(12, 12, 14, 0.7);
  margin: 0;
  line-height: 1.6;
}

.card__footer {
  margin-top: auto;
  padding-top: var(--space-3);
}

/* ─── Series Card ──────────────────────────────────────────────────────────── */
/* Taller aspect, gold accent bar, concert-series specific */
.series-card {
  background: #ffffff;
  border: 1px solid rgba(12, 12, 14, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.series-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--grs-gold);
  z-index: 1;
}

.series-card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background-color: var(--grs-secondary);
}

.series-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.series-card:hover .series-card__image img {
  transform: scale(1.04);
}

.series-card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.series-card__series {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Teal for AA on the light card; gold fails (~2:1) at this size. */
  color: var(--grs-primary);
}

.series-card__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-4);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--grs-ink);
  margin: 0;
}

.series-card__meta {
  font-size: var(--step-0);
  color: rgba(12, 12, 14, 0.6);
  line-height: 1.5;
  margin: 0;
}

.series-card__footer {
  margin-top: auto;
  padding: 0 var(--space-4) var(--space-4);
}

/* ─── Section Layout ───────────────────────────────────────────────────────── */
.section {
  padding-block: var(--space-7);
  background-color: var(--grs-paper);
}

.section__inner {
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.section__heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--grs-ink);
  margin-block: 0 var(--space-3);
}

.section__lede {
  margin-block: 0 var(--space-6);
}

/* ─── Series Grid ──────────────────────────────────────────────────────────── */
.series-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 700px) {
  .series-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ─── Interstitial ─────────────────────────────────────────────────────────── */
.interstitial {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--grs-secondary);
}

.interstitial__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.interstitial__scrim {
  z-index: 1;
}

.interstitial__overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-inline: var(--space-4);
}

.interstitial__line {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.75rem, 5vw, 4rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0;
  max-width: 22ch;
}

/* ─── Featured Concert ─────────────────────────────────────────────────────── */
.featured {
  background-color: #ffffff;
}

.featured__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 800px) {
  .featured__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }
}

.featured__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--grs-secondary);
}

.featured__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.featured__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.featured__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--grs-ink);
  margin: 0;
}

.featured__date,
.featured__venue {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: var(--step-0);
  color: rgba(12, 12, 14, 0.6);
  margin: 0;
  line-height: 1.5;
}

.featured__date {
  font-weight: 500;
  color: var(--grs-ink);
}

.featured__price {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--grs-primary);
  margin: 0;
}

/* ─── Site Header ──────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: rgba(244, 239, 230, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(12, 12, 14, 0.1);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: var(--space-4);
  height: 4.5rem;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--grs-ink);
  flex-shrink: 0;
}

.site-header__logo img {
  height: 2.25rem;
  width: auto;
  filter: invert(1);
}

.site-header__wordmark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--grs-ink);
  line-height: 1;
}

/* ─── Site Nav ─────────────────────────────────────────────────────────────── */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A global flow rule adds margin-top to every li except the first, which pushed
   all the nav items (but not the first) down a few pixels. Zero it and center. */
.site-nav__list > li {
  display: flex;
  align-items: center;
  margin: 0;
}

.site-nav__link {
  display: block;
  padding: 0.375rem var(--space-2);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--grs-ink);
  white-space: nowrap;
  transition: color 0.15s ease;
}

.site-nav__link:hover {
  color: var(--grs-primary);
  text-decoration: none;
}

.site-nav__link--cta {
  margin-left: var(--space-2);
  padding: 0.5rem var(--space-3);
  background-color: var(--grs-primary);
  color: #ffffff;
  border-radius: 0;
  letter-spacing: 0.1em;
}

.site-nav__link--cta:hover {
  background-color: var(--grs-secondary);
  color: #ffffff;
}

/* ─── Mobile Nav Toggle ────────────────────────────────────────────────────── */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  color: var(--grs-ink);
  line-height: 1;
}

.nav-toggle__icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.nav-toggle__icon span {
  display: block;
  height: 1.5px;
  background-color: currentColor;
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Mobile breakpoint */
@media (max-width: 767px) {
  .site-nav__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background-color: var(--grs-paper);
    border-top: 1px solid rgba(12, 12, 14, 0.1);
    padding-block: var(--space-3);
    gap: 0;
  }

  .site-nav__list.is-open {
    display: flex;
  }

  .site-nav__link {
    padding-block: var(--space-2);
    padding-inline: var(--space-4);
    font-size: 0.8125rem;
  }

  .site-nav__link--cta {
    margin: var(--space-2) var(--space-4) 0;
    text-align: center;
    padding: 0.75rem;
  }

  .nav-toggle {
    display: block;
  }
}

/* ─── Site Footer ──────────────────────────────────────────────────────────── */
.site-footer {
  background-color: var(--grs-secondary);
  color: rgba(255, 255, 255, 0.85);
  padding-block: var(--space-7) var(--space-5);
  border-top: 3px solid var(--grs-gold);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 600px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-5);
  }
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__logo {
  height: 2rem;
  width: auto;
  /* The brand column is a flex column (align-items: stretch by default), which
     stretches the logo's width to the column and squishes the wide crest.
     Pin the cross-axis so width: auto keeps the natural aspect ratio. */
  align-self: flex-start;
  opacity: 0.9;
}

.site-footer__tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-2);
  font-weight: 300;
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
  max-width: 24ch;
}

.site-footer__heading {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grs-gold);
  margin-bottom: var(--space-2);
}

.site-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.site-footer__links a {
  font-size: var(--step-0);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer__links a:hover {
  color: #ffffff;
  text-decoration: none;
}

.site-footer__bottom {
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.site-footer__copyright {
  font-size: 0.6875rem;
  /* 0.45 alpha on the navy footer is ~3.5:1; 0.72 clears AA for this small text
     (the inline-inherited footer links ride the same color). */
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.02em;
}

/* ─── Season Trailer (poster-only) ─────────────────────────────────────────── */
.trailer {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../img/hero-orchestra.jpg');
  background-size: cover;
  background-position: center 30%;
  overflow: hidden;
}

.trailer__scrim {
  /* inherits .scrim .scrim--full, sits beneath content */
}

.trailer__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-inline: var(--space-4);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.trailer__heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
  max-width: 22ch;
}

.trailer__sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-3);
  font-weight: 300;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 36ch;
}

.trailer__play {
  margin-top: var(--space-2);
}

.trailer__play-icon {
  flex-shrink: 0;
}

/* ─── Visit Grid ────────────────────────────────────────────────────────────── */
.visit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .visit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.visit-card {
  background: #ffffff;
  border: 1px solid rgba(12, 12, 14, 0.08);
  padding: var(--space-4);
  border-top: 3px solid var(--grs-gold);
}

.visit-card__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--grs-ink);
  margin: 0 0 var(--space-2);
}

.visit-card p {
  font-size: var(--step-0);
  color: rgba(12, 12, 14, 0.7);
  line-height: 1.65;
  margin: 0;
}

/* ─── Get Involved / Education ──────────────────────────────────────────────── */
.section--dark {
  background-color: var(--grs-secondary);
}

.section--dark .section__heading {
  color: #ffffff;
}

.involved__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 800px) {
  .involved__inner {
    grid-template-columns: 1fr 1fr;
  }
}

.involved__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--grs-secondary);
}

.involved__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.involved__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

/* ─── Support ───────────────────────────────────────────────────────────────── */
.support__inner {
  max-width: 60rem;
}

/* ─── Cinematic Photo Treatment ────────────────────────────────────────────── */
/*
  .cinematic          — the outer container (sets overflow:hidden, clips Ken Burns)
  .cinematic__img     — the photo layer (background-image or <img>); Ken Burns lives here
  .cinematic__wash    — brand tint overlay, sits above the photo
  .reveal             — any element that should fade in as it enters the viewport
  .is-revealed        — added by IntersectionObserver in site.js
*/

.cinematic {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--grs-secondary);
}

.cinematic__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Ken Burns: slow scale with a slight pan. Scale starts at 1.08 so the
     reverse leg still covers the container (no white edges). */
  animation: ken-burns 18s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes ken-burns {
  from { transform: scale(1.00) translate(0, 0); }
  to   { transform: scale(1.08) translate(-1.5%, 1%); }
}

/* Brand tint: a semi-transparent navy multiply-style wash.
   Kept intentionally light so photo reads clearly. */
.cinematic__wash {
  position: absolute;
  inset: 0;
  background-color: rgba(9, 67, 86, 0.28);  /* --grs-secondary at 28% */
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ── Scroll reveal ─────────────────────────────────────────────────────────── */
/* Start state: slightly off (scale, opacity). Transition to revealed state.
   Only applied when JS has wired up the observer — a .cinematic inside a
   .reveal-wrap transitions the whole media block. */
.reveal {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-revealed {
  opacity: 1;
  transform: scale(1);
}

/* ── Reduced motion overrides ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cinematic__img {
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .reveal.is-revealed {
    opacity: 1;
    transform: none;
  }
}

/* ─── Page Hero (compact, ambient-wash only) ───────────────────────────────── */
.page-hero {
  position: relative;
  min-height: min(42vh, 480px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--grs-secondary);
}

.page-hero__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.page-hero__scrim {
  z-index: 1;
}

.page-hero__content {
  position: relative;
  z-index: 2;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: var(--space-4);
  padding-block: var(--space-7);
  color: #ffffff;
}

.page-hero__heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-block: 0 var(--space-3);
  max-width: 20ch;
}

.page-hero__lede {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.85);
  max-width: 46ch;
  margin: 0;
}

/* ─── Package Cards ────────────────────────────────────────────────────────── */
.pkg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

@media (min-width: 700px) {
  .pkg-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .pkg-grid {
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
  }
}

.pkg-card {
  background: #ffffff;
  border: 1px solid rgba(12, 12, 14, 0.1);
  border-top: 3px solid rgba(12, 12, 14, 0.15);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.2s ease;
}

.pkg-card:hover {
  box-shadow: 0 4px 24px rgba(9, 67, 86, 0.1);
}

/* Featured: Grand */
.pkg-card--featured {
  border-top: 3px solid var(--grs-gold);
  background: #ffffff;
  box-shadow: 0 2px 16px rgba(9, 67, 86, 0.08);
}

/* Showcase: secondary accent */
.pkg-card--showcase {
  border-top: 3px solid var(--grs-primary);
}

.pkg-card__badge {
  position: absolute;
  top: -1px;
  right: var(--space-3);
  transform: translateY(-100%);
  background-color: var(--grs-gold);
  color: var(--grs-ink);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.625rem;
  line-height: 1;
  pointer-events: none;
}

.pkg-card__header {
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid rgba(12, 12, 14, 0.07);
}

.pkg-card__label {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Teal for AA on the white card; gold (#f4aa00) is only ~2:1 at this size. */
  color: var(--grs-primary);
  display: block;
  margin-bottom: var(--space-1);
}

.pkg-card--showcase .pkg-card__label {
  color: var(--grs-primary);
}

.pkg-card__name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--grs-ink);
  margin: 0 0 var(--space-2);
}

.pkg-card__for {
  font-size: var(--step-0);
  color: rgba(12, 12, 14, 0.6);
  line-height: 1.6;
  margin: 0;
}

.pkg-card__perks {
  list-style: none;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.pkg-card__perks li {
  font-size: var(--step-0);
  color: rgba(12, 12, 14, 0.75);
  line-height: 1.5;
  padding-left: 1.1em;
  position: relative;
}

.pkg-card__perks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background-color: var(--grs-gold);
}

.pkg-card--showcase .pkg-card__perks li::before {
  background-color: var(--grs-primary);
}

.pkg-card__footer {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid rgba(12, 12, 14, 0.07);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pkg-card__price {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: var(--step-2);
  font-weight: 400;
  color: var(--grs-ink);
  margin: 0;
  line-height: 1;
}

.pkg-card__price strong {
  font-size: var(--step-4);
  font-weight: 600;
  color: var(--grs-secondary);
}

.pkg-card--featured .pkg-card__price strong {
  color: var(--grs-primary);
}

.pkg-card__price-note {
  font-size: 0.6875rem;
  /* 0.45 alpha is ~3:1 on white; 0.6 clears AA. */
  color: rgba(12, 12, 14, 0.6);
  letter-spacing: 0.02em;
}

.pkg-card__cta {
  width: 100%;
  justify-content: center;
}

/* ─── Single Tickets Band ───────────────────────────────────────────────────── */
.single-tickets {
  background-color: var(--grs-secondary);
}

.single-tickets__inner {
  max-width: 60rem;
}

/* ─── FAQ ──────────────────────────────────────────────────────────────────── */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

@media (min-width: 800px) {
  .faq-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.faq-block__heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--grs-ink);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--grs-gold);
}

.faq-item {
  border-bottom: 1px solid rgba(12, 12, 14, 0.1);
}

.faq-item + .faq-item {
  margin-top: 0;
}

.faq-item__q {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--grs-ink);
  cursor: pointer;
  padding: var(--space-3) 1.5rem var(--space-3) 0;
  list-style: none;
  position: relative;
  line-height: 1.45;
  transition: color 0.15s ease;
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__q::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--grs-primary);
  line-height: 1;
  transition: transform 0.2s ease;
}

details[open] .faq-item__q::after {
  content: '\2212';
}

.faq-item__q:hover {
  color: var(--grs-primary);
}

.faq-item__a {
  padding-bottom: var(--space-3);
}

.faq-item__a p {
  font-size: var(--step-0);
  color: rgba(12, 12, 14, 0.7);
  line-height: 1.7;
  margin: 0;
}

/* ─── Newsletter ────────────────────────────────────────────────────────────── */
.newsletter {
  /* Deep navy, not the lighter teal: on teal the gold eyebrow (3.6:1) and the
     light-gray field label (4.47:1) both miss AA. Navy lifts both clear. */
  background-color: var(--grs-secondary);
}

.newsletter .eyebrow {
  color: var(--grs-gold);
}

.newsletter .section__heading {
  color: #ffffff;
}

.newsletter__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 700px) {
  .newsletter__inner {
    grid-template-columns: 1fr 1fr;
  }
}

.newsletter-form__label {
  display: block;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-2);
}

.newsletter-form__row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.newsletter-form__input {
  flex: 1 1 16rem;
  padding: 0.75rem var(--space-3);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: var(--step-0);
  color: var(--grs-ink);
  background: #ffffff;
  border: 1.5px solid transparent;
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease;
}

.newsletter-form__input:focus {
  border-color: var(--grs-gold);
}

.newsletter-form__input::placeholder {
  color: rgba(12, 12, 14, 0.4);
}

.newsletter-form__submit {
  white-space: nowrap;
  background-color: var(--grs-secondary);
  border-color: var(--grs-secondary);
}

.newsletter-form__submit:hover {
  background-color: var(--grs-ink);
  border-color: var(--grs-ink);
}

.newsletter-form__thanks {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--step-3);
  font-weight: 300;
  font-style: italic;
  color: #ffffff;
  margin: 0;
}

/* ─── Immersive mode ───────────────────────────────────────────────────────── */
/* The whole page sits over one fixed particle background (the grs-hero scene at
   delivery:ambient, placed at z-index:-1 by the engine). Content floats as dark
   glass cards so the morphing field is always visible behind it. */

body.immersive {
  background-color: #05161e;            /* dark base behind the fixed WebGL canvas */
  color: #fff;
}

/* Header: translucent dark bar instead of the vellum one. */
.immersive .site-header {
  background-color: rgba(5, 22, 30, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* White logo on the dark header (the crest PNG is white; force it pure white
   instead of the base rule that inverts it to black for light headers). */
.immersive .site-header__crest { filter: brightness(0) invert(1); }
.immersive .site-nav__link { color: rgba(255, 255, 255, 0.85); }
.immersive .site-nav__link:hover { color: var(--grs-gold); }
.immersive .nav-toggle__icon span { background: #fff; }

/* Header items on one consistent centerline. */
.immersive .site-header__logo { display: inline-flex; align-items: center; }
.immersive .site-nav__list { align-items: center; }

/* Footer: a readable dark glass over the final cloud (the cloud glows through
   the blur, but the content stays legible). */
.immersive .site-footer {
  background-color: rgba(5, 18, 25, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Sections go transparent so the field shows; their inner block becomes a card. */
.immersive .section,
.immersive .section--dark,
.immersive .newsletter,
.immersive .hero,
.immersive .interstitial,
.immersive .trailer { background: transparent; }

/* Cards carry the tint + border + a slight blur of the field behind them. */
.immersive .section__inner,
.immersive .trailer__content {
  background: rgba(7, 22, 30, 0.55);
  border: 1px solid rgba(244, 170, 0, 0.16);
  border-radius: 1rem;
  padding: var(--space-6) var(--space-5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Light text on the glass. */
.immersive .section__heading,
.immersive .featured__title,
.immersive .trailer__heading,
.immersive .visit-card__title,
.immersive .series-card__title,
.immersive .hero__headline,
.immersive .interstitial__line { color: #fff; }
.immersive .lede,
.immersive .section__lede,
.immersive .visit-card p,
.immersive .series-card__meta,
.immersive .featured__date,
.immersive .featured__venue,
.immersive .featured__price,
.immersive .trailer__sub { color: rgba(255, 255, 255, 0.82); }
.immersive .eyebrow,
.immersive .series-card__series { color: var(--grs-gold); }

/* Inner sub-cards: translucent instead of solid white. */
.immersive .series-card,
.immersive .visit-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/* Hero: intro text directly over the field (no card), centered tall. */
.immersive .hero__content { color: #fff; }
.immersive .hero__lede { color: rgba(255, 255, 255, 0.85); }

/* Newsletter input stays readable on the glass. */
.immersive .newsletter-form__label { color: rgba(255, 255, 255, 0.85); }

/* Spacing rhythm: each section gets ~a viewport so the model behind it has open
   space; the content sits centered and the card lands during a transition. */
.immersive #main > section {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Ensure all button text reads white on the immersive (dark) page. */
.immersive .btn { color: #ffffff; }
.immersive .btn--primary { color: #ffffff; }

/* Footer social row: the global flow rule adds margin-top to every item except
   the first, which misaligns the row. Zero it and center (same fix as the nav). */
.site-footer__links[style*="flex-direction: row"] { align-items: center; }
.site-footer__links[style*="flex-direction: row"] > li { margin: 0; }

/* ─── Immersive mobile pass ───────────────────────────────────────────────────
   On phones the mobile nav dropdown inherits the light paper background, which
   makes the white immersive links invisible. Give it the same dark glass as the
   header. Tighten card padding, and guarantee 44px tap targets. */
@media (max-width: 767px) {
  .immersive .site-nav__list {
    background-color: rgba(5, 22, 30, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .immersive .site-nav__link { color: rgba(255, 255, 255, 0.9); }

  /* Cards: less inset so content gets more width on a narrow screen. */
  .immersive .section__inner,
  .immersive .trailer__content {
    padding: var(--space-5) var(--space-4);
  }

  /* Sections still get vertical room, but not a near-full screen each — on a
     phone that turns into an exhausting amount of scrolling between forms. */
  .immersive #main > section { min-height: 78vh; }

  /* Comfortable tap targets (WCAG 2.5.5). */
  .btn,
  .site-nav__link,
  .nav-toggle { min-height: 44px; }
  .btn { align-items: center; }
}