/* ============================================================
   Luce Auditorium — "Curtain Call" customer theme
   Velvet darks + Silliman gold, Fraunces display serif,
   image-led sections, reveal motion (reduced-motion safe).
   ============================================================ */

/* ---------- Display typography ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.display em, .display i { font-style: italic; font-weight: 500; color: var(--su-gold-300); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-strong);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent); }
.eyebrow--light { color: var(--su-gold-300); }

/* ---------- Page shell ---------- */
.wrap { max-width: 1200px; margin-inline: auto; }

/* ---------- Header: velvet glass ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); padding: var(--s-3) var(--s-7);
  background: color-mix(in srgb, var(--su-velvet-900) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(212, 168, 67, 0.22);
}
.site-header__brand { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.site-header__brand:hover { text-decoration: none; }
.site-header__seal  { width: 42px; height: 42px; flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(212,168,67,0.35)); }
.site-header__name  { display: flex; flex-direction: column; line-height: 1.15; }
.site-header__name small {
  font-size: 10px; color: var(--su-gold-300); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.site-header__name strong {
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  color: #fff; letter-spacing: 0.01em;
}
.site-header__nav { display: flex; gap: var(--s-6); align-items: center; }
.site-header__nav a {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.85); font-weight: 500; font-size: 14px; padding: 6px 0;
}
.site-header__nav a:hover { color: #fff; text-decoration: none; }
.site-header__nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--accent);
  transition: right 240ms var(--ease-out-soft);
}
.site-header__nav a:hover::after, .site-header__nav a.is-active::after { right: 0; }
.site-header__nav a.is-active { color: var(--su-gold-300); }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(88vh, 760px);
  display: flex; align-items: flex-end;
  padding: var(--s-10) var(--s-7) var(--s-9);
  color: #fff; background: var(--su-velvet-900);
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  /* 62%: keeps the stage + proscenium of the square house photo in frame */
  background-size: cover; background-position: center 62%;
  /* gradient beneath the image doubles as a graceful fallback */
  background-color: var(--su-velvet-800);
  animation: kenburns 26s var(--ease-out-soft) both;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 75% 10%, transparent 35%, rgba(20, 8, 13, 0.55) 100%),
    linear-gradient(180deg, rgba(20, 8, 13, 0.55) 0%, rgba(29, 11, 18, 0.30) 40%, rgba(20, 8, 13, 0.92) 100%),
    linear-gradient(100deg, rgba(107, 21, 40, 0.55) 0%, transparent 60%);
}
.hero__inner { width: 100%; max-width: 1200px; margin-inline: auto; }
.hero h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(44px, 7vw, 88px); line-height: 1.02; letter-spacing: -0.015em;
  color: #fff; max-width: 13ch; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,0.45);
}
.hero h1 em { font-style: italic; font-weight: 500; color: var(--su-gold-300); }
.hero__lede {
  max-width: 56ch; margin-top: var(--s-5);
  font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; color: rgba(255,255,255,0.88);
}
.hero__actions { display: flex; gap: var(--s-3); margin-top: var(--s-7); flex-wrap: wrap; }
.hero__facts {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid rgba(212,168,67,0.30);
  color: rgba(255,255,255,0.75); font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.hero__facts span { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero__facts svg { color: var(--su-gold-300); }
.hero__scroll {
  position: absolute; right: var(--s-7); bottom: var(--s-7); z-index: 1;
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid rgba(212,168,67,0.5); border-radius: 50%;
  color: var(--su-gold-300); background: rgba(20,8,13,0.35);
  animation: floaty 2.6s ease-in-out infinite;
}
.hero__scroll:hover { background: rgba(212,168,67,0.18); text-decoration: none; }

/* Gold outline button for dark surfaces */
.btn--gold {
  background: linear-gradient(135deg, var(--su-gold-500), var(--su-gold-700));
  color: var(--su-velvet-950); border: 0; box-shadow: 0 8px 28px rgba(212,168,67,0.28);
}
.btn--gold:hover { background: linear-gradient(135deg, var(--su-gold-300), var(--su-gold-500)); }
.btn--outline-light {
  background: rgba(255,255,255,0.04); color: #fff; border-color: rgba(255,255,255,0.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn--outline-light:hover { background: rgba(255,255,255,0.14); border-color: #fff; }

/* ---------- Marquee strip ---------- */
.marquee {
  overflow: hidden; white-space: nowrap;
  background: var(--su-velvet-950);
  border-top: 1px solid rgba(212,168,67,0.25);
  border-bottom: 1px solid rgba(212,168,67,0.25);
  padding: var(--s-3) 0;
}
.marquee__track { display: inline-flex; gap: var(--s-7); padding-right: var(--s-7);
  animation: marquee 36s linear infinite; will-change: transform; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: var(--s-7);
  color: var(--su-gold-300); font-size: 13px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
}
.marquee__item::after { content: "✦"; color: var(--su-gold-700); font-size: 11px; }

/* ---------- Sections ---------- */
.section { padding: var(--s-10) var(--s-7); }
.section__head { display: flex; justify-content: space-between; align-items: end; gap: var(--s-4);
  margin-bottom: var(--s-7); }
.section__head h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -0.01em; margin-top: var(--s-3);
}
.section__head h2 em { font-style: italic; font-weight: 500; color: var(--su-burgundy-500); }
.section__sub { color: var(--text-muted); margin-top: var(--s-3); max-width: 60ch; }

/* ---------- Event cards: playbill ---------- */
.events-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-6); }
.event-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4);
  box-shadow: var(--shadow-sm);
  transition: transform 280ms var(--ease-out-soft), box-shadow 280ms var(--ease-out-soft),
              border-color 280ms var(--ease-out-soft);
}
.event-card:hover, .event-card:focus-visible {
  transform: translateY(-6px); text-decoration: none;
  border-color: rgba(212,168,67,0.55); box-shadow: var(--shadow-gold);
}
.event-card:hover h3 { color: var(--brand); }
.event-card__poster {
  position: relative; aspect-ratio: 3/2; overflow: hidden;
  border-radius: calc(var(--r-4) - 1px) calc(var(--r-4) - 1px) 0 0;
  background:
    radial-gradient(80% 80% at 70% 20%, rgba(212,168,67,0.35), transparent 60%),
    linear-gradient(135deg, var(--su-burgundy-700), var(--su-velvet-800));
  display: grid; place-items: center; color: rgba(255,255,255,0.9);
  font-family: var(--font-display); font-size: 56px; font-weight: 600;
}
.event-card__poster img { width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease-out-soft); }
.event-card:hover .event-card__poster img { transform: scale(1.06); }
.event-card__poster::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,8,13,0.35) 0%, transparent 38%,
              transparent 60%, rgba(20,8,13,0.45) 100%);
}
.event-card__date {
  position: absolute; top: var(--s-4); left: var(--s-4); z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 58px; height: 62px; border-radius: var(--r-3);
  background: rgba(20,8,13,0.82); border: 1px solid rgba(212,168,67,0.5);
  color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.event-card__date strong { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1; }
.event-card__date small { font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--su-gold-300); text-transform: uppercase; margin-top: 3px; }
.event-card__type {
  position: absolute; top: var(--s-4); right: var(--s-4); z-index: 1;
  height: 24px; display: inline-flex; align-items: center; padding: 0 var(--s-3);
  border-radius: var(--r-pill); background: rgba(20,8,13,0.72); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.event-card__body { padding: var(--s-5) var(--s-5) var(--s-4); display: flex; flex-direction: column;
  gap: var(--s-2); flex: 1; }
.event-card h3 {
  font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.15;
  transition: color 200ms ease;
}
.event-card__when { display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--text-muted); font-size: 13px; font-weight: 600; }
.event-card__when svg { color: var(--accent-strong); }
.event-card__summary { color: var(--text-muted); font-size: 14px; line-height: 1.6; }
/* Ticket-stub perforation */
.event-card__tear { position: relative; margin: var(--s-3) var(--s-5) 0;
  border-top: 2px dashed color-mix(in srgb, var(--border) 90%, var(--accent)); }
.event-card__tear::before, .event-card__tear::after {
  content: ""; position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface-bg); border: 1px solid var(--border);
}
.event-card__tear::before { left: calc(-1 * var(--s-5) - 10px); }
.event-card__tear::after  { right: calc(-1 * var(--s-5) - 10px); }
.event-card__footer { display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-4) var(--s-5) var(--s-5); }
.event-card__price { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--brand); }
.event-card__price small { display: block; font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.event-card__cta { display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--brand); font-weight: 700; font-size: 14px; }
.event-card__cta svg { transition: transform 240ms var(--ease-out-soft); }
.event-card:hover .event-card__cta svg { transform: translateX(4px); }

/* ---------- "Before the curtain rises" band ---------- */
.curtain-band {
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--s-10) var(--s-7); color: #fff;
  background:
    linear-gradient(180deg, rgba(20,8,13,0.88), rgba(29,11,18,0.86)),
    var(--curtain-img, linear-gradient(135deg, var(--su-velvet-900), var(--su-burgundy-900)));
  background-size: cover; background-position: center; background-attachment: fixed;
}
.curtain-band h2 { font-family: var(--font-display); font-weight: 600; color: #fff;
  font-size: clamp(30px, 3.6vw, 46px); margin-top: var(--s-3); }
.curtain-band h2 em { font-style: italic; font-weight: 500; color: var(--su-gold-300); }
.knows { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-7); }
.knows__item {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6); border-radius: var(--r-4);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(212,168,67,0.28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform 280ms var(--ease-out-soft), background 280ms ease, border-color 280ms ease;
}
.knows__item:hover { transform: translateY(-4px); background: rgba(255,255,255,0.09);
  border-color: rgba(212,168,67,0.55); }
.knows__icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  color: var(--su-gold-300); background: rgba(212,168,67,0.12);
  border: 1px solid rgba(212,168,67,0.45);
}
.knows__item h4 { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 20px; }
.knows__item p  { color: rgba(255,255,255,0.78); font-size: 14px; line-height: 1.65; }

/* ---------- Venue band (image + copy split) ---------- */
.venue-band { padding: var(--s-10) var(--s-7); background: var(--surface-warm); overflow: hidden; }
.venue-band__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s-9);
  align-items: center; max-width: 1200px; margin-inline: auto; }
.venue-band__media { position: relative; }
.venue-band__media::before {
  content: ""; position: absolute; inset: var(--s-5) calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) var(--s-5);
  border: 1px solid var(--accent); border-radius: var(--r-4); z-index: 0;
}
.venue-band__media img {
  position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 4/3;
  object-fit: cover; border-radius: var(--r-4); box-shadow: var(--shadow-lg);
  background: linear-gradient(135deg, var(--su-burgundy-900), var(--su-velvet-800));
}
.venue-band__copy h2 { font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 3.4vw, 44px); margin-top: var(--s-3); }
.venue-band__copy h2 em { font-style: italic; font-weight: 500; color: var(--su-burgundy-500); }
.venue-band__copy > p { color: var(--text-strong); line-height: 1.75; margin-top: var(--s-4); max-width: 56ch; }
.venue-band__stats { display: flex; gap: var(--s-7); margin-top: var(--s-6); flex-wrap: wrap; }
.venue-band__stat strong { display: block; font-family: var(--font-display); font-size: 32px;
  font-weight: 600; color: var(--brand); }
.venue-band__stat small { color: var(--text-muted); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative; padding: var(--s-9) var(--s-7) var(--s-6);
  background: var(--su-velvet-950); color: rgba(255,255,255,0.72);
}
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--su-gold-500), transparent); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-7);
  max-width: 1200px; margin-inline: auto; }
.site-footer__brand { display: flex; gap: var(--s-4); align-items: start; }
.site-footer__brand img { filter: drop-shadow(0 0 8px rgba(212,168,67,0.3)); }
.site-footer__brand strong { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: #fff; }
.site-footer__brand small { display: inline-block; margin-top: var(--s-2); color: var(--su-gold-300);
  letter-spacing: 0.22em; font-size: 11px; }
.site-footer h5 { margin: 0 0 var(--s-3); color: var(--su-gold-300); font-size: 12px;
  font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.site-footer__row { display: flex; align-items: start; gap: var(--s-3); margin-top: var(--s-2);
  font-size: 14px; line-height: 1.6; }
.site-footer__row svg { flex-shrink: 0; margin-top: 3px; color: var(--su-gold-700); }
.site-footer__bottom { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  max-width: 1200px; margin: var(--s-7) auto 0; padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.10); font-size: 13px; color: rgba(255,255,255,0.5); }

/* ---------- Page hero (about, etc.) ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end; min-height: 380px;
  padding: var(--s-10) var(--s-7) var(--s-8); color: #fff;
  background: var(--su-velvet-900);
}
.page-hero__bg { position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  background-color: var(--su-velvet-800); animation: kenburns 26s var(--ease-out-soft) both; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,8,13,0.50), rgba(20,8,13,0.88)); }
.page-hero h1 { font-family: var(--font-display); font-weight: 600; color: #fff;
  font-size: clamp(38px, 5vw, 64px); margin-top: var(--s-3); }
.page-hero h1 em { font-style: italic; font-weight: 500; color: var(--su-gold-300); }
.page-hero p { max-width: 60ch; margin-top: var(--s-4); color: rgba(255,255,255,0.85); line-height: 1.7; }

/* ---------- About page ---------- */
.about-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--s-9);
  max-width: 1200px; margin-inline: auto; align-items: start; }
.about-grid .event-prose { margin-top: 0; }
.about-aside { display: flex; flex-direction: column; gap: var(--s-5); }
.about-aside img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--r-4); box-shadow: var(--shadow-lg);
  background: linear-gradient(135deg, var(--su-burgundy-900), var(--su-velvet-800)); }
.info-card { border: 1px solid var(--border); border-radius: var(--r-4);
  background: var(--surface); box-shadow: var(--shadow-sm); padding: var(--s-5); }
.info-card h4 { display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.info-card h4 svg { color: var(--accent-strong); }
.info-card p { margin-top: var(--s-2); color: var(--text-muted); font-size: 14px; line-height: 1.65; }
.pull-quote { position: relative; margin: var(--s-6) 0; padding: var(--s-5) var(--s-6);
  border-left: 3px solid var(--accent); background: var(--surface-warm); border-radius: 0 var(--r-3) var(--r-3) 0;
  font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.5;
  color: var(--text-strong); }

/* ---------- Event detail ---------- */
.event-detail { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(280px, 380px);
  gap: var(--s-7); padding: var(--s-7); max-width: 1320px; margin-inline: auto; }
.event-detail__main { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }
.event-detail__side { position: sticky; top: 84px; align-self: start;
  display: flex; flex-direction: column; gap: var(--s-4); }
.event-detail h1 { font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px, 4vw, 52px); line-height: 1.05; }
.breadcrumb { font-size: 13px; color: var(--text-muted); max-width: 1320px;
  margin: var(--s-5) auto 0; padding: 0 var(--s-7); }

.fact-chips { display: flex; gap: var(--s-2); margin-top: var(--s-5); flex-wrap: wrap; }
.fact-chip { display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-strong); font-weight: 600; font-size: 13px; }
.fact-chip svg { color: var(--accent-strong); }

/* Pricing tiers as gilt ticket cards */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3); margin-top: var(--s-4); }
.tier-card { position: relative; overflow: hidden; padding: var(--s-4);
  border: 1px solid var(--border); border-left: 4px solid var(--tier-c, var(--accent));
  border-radius: var(--r-3); background: var(--surface);
  transition: transform 240ms var(--ease-out-soft), box-shadow 240ms ease; }
.tier-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tier-card__label { font-weight: 800; font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tier-c, var(--accent-strong)); }
.tier-card__price { font-family: var(--font-display); font-weight: 600; font-size: 24px;
  margin-top: var(--s-1); color: var(--text); }
.tier-card small { color: var(--text-muted); font-size: 12px; }

/* Selection / checkout summary — velvet ticket */
.checkout-card { display: flex; flex-direction: column; gap: var(--s-4); }
.card--velvet { background: linear-gradient(165deg, var(--su-velvet-800), var(--su-velvet-950));
  border: 1px solid rgba(212,168,67,0.4); color: #fff; }
.card--velvet h3 { color: #fff; font-family: var(--font-display); font-weight: 600; }
.card--velvet .checkout-card__hint, .card--velvet #selection-summary { color: rgba(255,255,255,0.72); }
.checkout-card__row { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-3); border-top: 1px dashed rgba(212,168,67,0.4); padding-top: var(--s-3); }
.card--velvet .checkout-card__row span:first-child { color: rgba(255,255,255,0.72); }
.checkout-card__total { font-family: var(--font-display); font-size: 26px; font-weight: 600;
  color: var(--su-gold-300); }

/* Light contexts (checkout form reuse) */
.card .checkout-card__total { color: var(--brand); }

/* Seat-hold countdown on the checkout card */
.hold-timer {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-pill);
  background: rgba(212, 168, 67, 0.14); border: 1px solid rgba(212, 168, 67, 0.45);
  color: var(--su-gold-300); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Checkout form on the velvet side card */
.card--velvet .field__label { color: rgba(255,255,255,0.85); }
.card--velvet .field__input, .card--velvet .field__select {
  background: rgba(255,255,255,0.07); border-color: rgba(212,168,67,0.35); color: #fff;
}
.card--velvet .field__input:focus, .card--velvet .field__select:focus { border-color: var(--su-gold-300); }
.card--velvet .field__select option { color: var(--text); background: var(--surface); }

/* Pickers locked while the checkout form is showing */
#seatmap.is-locked { position: relative; pointer-events: none; }
#seatmap.is-locked .seatmap { opacity: 0.55; filter: saturate(0.55); }
#seatmap.is-locked::after {
  content: "Seat picking is locked during checkout — use “Modify seats” to change your selection.";
  position: absolute; top: var(--s-4); left: 50%; transform: translateX(-50%);
  z-index: 2; max-width: min(92%, 480px); text-align: center;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-3);
  background: var(--su-velvet-900); color: #fff; font-size: 13px; font-weight: 600;
  border: 1px solid rgba(212,168,67,0.5); box-shadow: var(--shadow-lg);
}
/* Sales-closed: dim + disable the seat map without the checkout caption */
#seatmap.is-sales-closed { position: relative; pointer-events: none; }
#seatmap.is-sales-closed .seatmap { opacity: 0.55; filter: saturate(0.55); }
#seatmap.is-sales-closed::after { content: none; }
.ga-rows.is-locked { opacity: 0.55; pointer-events: none; }

/* Open seating (general admission) quantity picker */
.ga-rows { display: flex; flex-direction: column; margin-top: var(--s-4); }
.ga-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding: var(--s-4) 0; border-bottom: 1px dashed var(--border); }
.ga-row:last-child { border-bottom: 0; }
.ga-row__info { display: flex; flex-direction: column; gap: 2px; }
.ga-row__info strong { font-size: 15px; letter-spacing: 0.02em; }
.ga-row__info .tabular { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--text); }
.ga-row__info small { color: var(--text-muted); font-size: 12px; }
.ga-stepper { display: inline-flex; align-items: center; gap: var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px; }
.ga-stepper .btn { border-radius: 50%; width: 32px; padding: 0; }
.ga-stepper__qty { min-width: 28px; text-align: center; font-weight: 800; font-size: 16px; }

/* Gallery */
.event-gallery { display: flex; flex-direction: column; gap: var(--s-3); }
.event-gallery__main { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-4);
  box-shadow: var(--shadow-lg); background: linear-gradient(135deg, var(--su-burgundy-900), var(--su-velvet-800)); }
.event-gallery__thumbs { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.event-gallery__thumb { width: 88px; height: 62px; padding: 0; border: 2px solid transparent;
  border-radius: var(--r-2); overflow: hidden; cursor: pointer; background: var(--surface-warm);
  transition: border-color 160ms ease, transform 160ms ease; }
.event-gallery__thumb:hover { transform: translateY(-2px); }
.event-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.event-gallery__thumb.is-active { border-color: var(--accent-strong); }
.event-gallery__thumb:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.event-prose { margin-top: var(--s-4); color: var(--text-strong); line-height: 1.75; max-width: 65ch; }
.event-prose p { margin-top: var(--s-3); }
.event-prose h2 { font-family: var(--font-display); font-size: 26px; margin-top: var(--s-5); }
.event-prose h3 { font-family: var(--font-display); font-size: 20px; margin-top: var(--s-4); }
.event-prose ul, .event-prose ol { margin-top: var(--s-3); padding-left: var(--s-5); }
.event-prose li { margin-top: var(--s-1); }
.event-prose blockquote { border-left: 3px solid var(--accent); padding-left: var(--s-4);
  margin-top: var(--s-3); color: var(--text-muted); font-style: italic; }
.event-prose a { color: var(--brand); text-decoration: underline; }
.event-tags { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }

/* Schedule (multiple performances) */
.schedule { margin-top: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-3); overflow: hidden; }
.schedule h3 { padding: var(--s-3) var(--s-4); background: var(--surface-warm);
  border-bottom: 1px solid var(--border); font-size: 15px; }
.schedule__list { list-style: none; margin: 0; padding: 0; }
.schedule__item { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); font-size: 14px; }
.schedule__item:last-child { border-bottom: 0; }
.schedule__date { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); }
.schedule__time { color: var(--text-muted); }

/* ---------- My tickets ---------- */
.ticket-list { display: grid; gap: var(--s-4); margin-top: var(--s-6); max-width: 760px; }
.ticket-card { border-left: 4px solid var(--accent); }
.ticket-card__head { display: flex; justify-content: space-between; align-items: start; gap: var(--s-4); flex-wrap: wrap; }
.ticket-card__head h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; }
.ticket-card__when { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-2);
  color: var(--text-muted); font-size: 13px; font-weight: 600; }
.ticket-card__when svg { color: var(--accent-strong); }
.ticket-card__seats { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }
.ticket-card__footer { display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px dashed var(--border); }
.ticket-card__total { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--brand); }

/* ---------- Success page ---------- */
.success-band { position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-4); padding: var(--s-8) var(--s-6); color: #fff; text-align: center;
  background:
    linear-gradient(180deg, rgba(20,8,13,0.82), rgba(107,21,40,0.78)),
    var(--success-img, linear-gradient(135deg, var(--su-burgundy-900), var(--su-velvet-800)));
  background-size: cover; background-position: center; }
.success-band h2 { color: #fff; font-family: var(--font-display); font-weight: 600;
  display: inline-flex; align-items: center; gap: var(--s-3); }
.success-band svg { color: var(--su-gold-300); }
.success-band p { color: rgba(255,255,255,0.85); margin-top: var(--s-3); }

/* ---------- Reveal motion ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px);
  transition: opacity 700ms var(--ease-out-soft), transform 700ms var(--ease-out-soft);
  transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; }
[data-reveal].is-in { opacity: 1; transform: none; }

@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero__bg, .page-hero__bg, .hero__scroll { animation: none; }
  .marquee__track { animation: none; }
  .event-card, .event-card__poster img, .knows__item, .tier-card,
  .event-card__cta svg, .site-header__nav a::after { transition: none; }
  .curtain-band { background-attachment: scroll; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .events-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .knows, .site-footer__grid { grid-template-columns: 1fr; }
  .venue-band__grid, .about-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .event-detail { grid-template-columns: 1fr; }
  .event-detail__side { position: static; }
  .hero { min-height: 70vh; }
  .hero__scroll { display: none; }
  .curtain-band { background-attachment: scroll; }
  .site-header__nav { gap: var(--s-4); }
}
@media (max-width: 560px) {
  .events-grid { grid-template-columns: 1fr; }
  .site-header { padding: var(--s-3) var(--s-4); }
  .site-header__name small { display: none; }
  .section, .hero, .curtain-band, .venue-band, .site-footer, .page-hero {
    padding-left: var(--s-4); padding-right: var(--s-4); }
  .breadcrumb { padding: 0 var(--s-4); }
  .event-detail { padding: var(--s-5) var(--s-4); }
  .hero__facts { gap: var(--s-2) var(--s-4); }
}

/* ── Hosted ticket page (.hosted-ticket — .ticket-card is the My Tickets list card) ── */
.hosted-ticket { max-width: 480px; margin: 0 auto; display: grid; gap: var(--s-5); text-align: center; }
.hosted-ticket__head h1 { font-size: 26px; margin-top: var(--s-2); }
.hosted-ticket__head p { color: var(--text-muted); margin: var(--s-2) 0; }
.hosted-ticket__qr { display: grid; place-items: center; gap: var(--s-2); padding: var(--s-4);
  background: var(--surface-warm); border-radius: var(--r-3); }
.hosted-ticket__qr img { background: #fff; padding: 10px; border-radius: var(--r-2); }
.hosted-ticket__qr small { color: var(--text-muted); }
.hosted-ticket__seats { width: 100%; border-collapse: collapse; font-size: 14px; }
.hosted-ticket__seats th { text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted); padding: var(--s-2); border-bottom: 1px solid var(--border); }
.hosted-ticket__seats td { text-align: left; padding: var(--s-2); border-bottom: 1px solid var(--border); }
.hosted-ticket__total { display: flex; justify-content: space-between; font-size: 16px; }
.hosted-ticket__note { font-size: 13px; color: #8a5a00; background: #fdf4dd; padding: var(--s-3); border-radius: var(--r-2); }
.hosted-ticket__void { font-size: 14px; color: #b91c1c; text-align: center; max-width: 36ch; margin: 0; }

@media print {
  .site-header, .site-footer, .hosted-ticket__actions { display: none !important; }
  .hosted-ticket { max-width: none; }
}

/* ---------- Events page (list + calendar) ---------- */
.page-hero--compact { min-height: 280px; }
.page-hero p { color: rgba(255,255,255,0.82); max-width: 56ch; margin-top: var(--s-3); }

.events-toggle { display: inline-flex; gap: 2px; background: var(--surface-warm);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px; margin-bottom: var(--s-6); }
.events-toggle__btn { display: inline-flex; align-items: center; gap: var(--s-2);
  border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 14px;
  font-weight: 600; color: var(--text-muted); padding: 8px 18px; border-radius: 999px; }
.events-toggle__btn.is-active { background: var(--brand); color: #fff; }

.events-section { margin-bottom: var(--s-9); }
.events-section .section__head { margin-bottom: var(--s-5); }

.event-card--past .event-card__poster { filter: grayscale(0.55) brightness(0.85); }
.event-card__free { position: absolute; bottom: var(--s-3); right: var(--s-3);
  background: #1d6b34; color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }

/* Calendar */
.cal { background: #fff; border: 1px solid var(--border); border-radius: var(--r-3);
  padding: var(--s-5); }
.cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
.cal__title { font-family: var(--font-display); font-weight: 600; font-size: 22px; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__grid--head { margin-bottom: 6px; }
.cal__dow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); text-align: center; padding: var(--s-2) 0; }
.cal__cell { min-height: 92px; border: 1px solid var(--border); border-radius: var(--r-2);
  padding: 6px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); }
.cal__cell--pad { border: 0; background: transparent; }
.cal__cell--past { background: var(--surface-warm); opacity: 0.7; }
.cal__cell--today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cal__cell--today .cal__daynum { color: var(--brand); font-weight: 800; }
.cal__daynum { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.cal__chip { display: block; font-size: 11.5px; line-height: 1.3; font-weight: 600;
  background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand);
  border-radius: var(--r-1, 6px); padding: 3px 6px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cal__chip:hover { background: var(--brand); color: #fff; text-decoration: none; }
.cal__chip--free { background: #e6f4ea; color: #1d6b34; }
.cal__chip--free:hover { background: #1d6b34; color: #fff; }
.cal__legend { display: flex; gap: var(--s-5); margin-top: var(--s-4);
  font-size: 12px; color: var(--text-muted); }
.cal__legend > span { display: inline-flex; align-items: center; gap: 6px; }
.cal__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); display: inline-block; }
.cal__dot--free { background: #1d6b34; }

@media (max-width: 720px) {
  .cal__cell { min-height: 64px; }
  .cal__chip { font-size: 10px; padding: 2px 4px; }
}