/* ════════════════════════════════════════════════════════════════════
   OMNI FOUNDATION · DYNAMITE GUITARS 2026–2027 · SINGLE-PAGE SITE
   Built to docs/BUILD_CONTRACT.md. Brand tokens from brand-guide.md.
   ════════════════════════════════════════════════════════════════════ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ─── DESIGN TOKENS ───────────────────────────────────────────────── */
:root {
    /* Darks — warm browns for TEXT (not page backgrounds) */
    --omni-espresso: #2F1A14;
    --omni-umber: #36231B;
    --omni-quote-brown: #2C211C;
    --omni-black-brown: #100B07;

    /* Cinematic darks — dark sections only */
    --omni-portfolio-bg: #25211F;
    --omni-page-night: #15110D;
    --omni-page-body: #211B18;

    /* Lights — warm ivory and parchment */
    --omni-ivory: #E2D6C2;
    --omni-muted-ivory: #CFC1AA;
    --omni-parchment: #D9C9B5;
    --omni-parchment-deep: #B9A58E;
    --omni-cream-card: #FBF7F0;
    --omni-cream-outer: #F0EAE0;
    --omni-cream-warm: #F0EBE0;
    --omni-edge: #D6C5A8;

    /* Accent */
    --omni-antique-gold: #B98B45;
    --omni-burnished-gold: #A9793D;
    /* Deep bronze-gold for small accent text on LIGHT backgrounds (WCAG AA).
       The antique/burnished golds only pass on dark sections; on cream/card/
       rosemary they fall below 4.5:1, so light sections use this instead.
       #785218 ≥ 5.16:1 on the lightest bg it sits on (rosemary #E8DEB8). */
    --omni-gold-on-light: #785218;
    --omni-rosemary-gold: #E8DEB8;
    --omni-terracotta: #F5956A;
    --omni-sage: #4A7C3F;
    /* Early Bird accent. Deliberately a deep, desaturated prussian rather than
       a bright blue: the palette is warm cream, gold and terracotta, and navy is
       the classical complement to terracotta. A saturated modern blue would read
       as a tech UI and fight the editorial mood the brand guide asks for.
       Precedent: --omni-sage is already an off-palette accent. */
    --omni-prussian: #2A4B66;
    --omni-prussian-light: #35597A;

    /* Fonts */
    --omni-display: "Trajan Pro", "Cinzel", "Cormorant Garamond SC", serif;
    --omni-editorial: "Cormorant Garamond", "EB Garamond", "Adobe Garamond Pro", serif;
    --omni-font-display: var(--omni-display);
    --omni-font-editorial: var(--omni-editorial);
    --omni-font-newsletter: "Libre Baskerville", Georgia, serif;

    /* Letter-spacing scale */
    --omni-track-xs: 0.10em;
    --omni-track-sm: 0.13em;
    --omni-track-md: 0.18em;
    --omni-track-lg: 0.22em;
    --omni-track-xl: 0.28em;
    --omni-track-2xl: 0.34em;

    /* Spacing scale */
    --omni-space-4: 16px;
    --omni-space-5: 20px;
    --omni-space-6: 24px;
    --omni-space-8: 32px;
    --omni-space-10: 40px;
    --omni-space-12: 48px;
    --omni-space-16: 64px;

    /* Radii */
    --omni-radius-xs: 3px;
    --omni-radius-sm: 4px;
    --omni-radius-md: 6px;

    /* Shadows */
    --omni-text-shadow-dark: 0 2px 8px rgba(0, 0, 0, 0.42);
    --omni-text-shadow-light: 0 1px 3px rgba(60, 38, 24, 0.16);
    --omni-shadow-poster: 0 24px 70px rgba(0, 0, 0, 0.45);
    --omni-shadow-lightbox: 0 2rem 5rem rgba(0, 0, 0, 0.42);
    --omni-shadow-card: 0 1rem 2rem rgba(0, 0, 0, 0.25);

    /* Layout */
    --header-h: 84px;
    --content-max: 1180px;
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ─── BASE ────────────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--omni-editorial);
    font-size: 18px;
    line-height: 1.44;
    color: var(--omni-umber);
    background: var(--omni-cream-outer);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 2000;
    background: var(--omni-espresso);
    color: var(--omni-ivory);
    padding: 0.75rem 1.25rem;
    border-radius: var(--omni-radius-sm);
    text-decoration: none;
    font-family: var(--omni-display);
    letter-spacing: var(--omni-track-md);
    text-transform: uppercase;
    font-size: 0.72rem;
}

.skip-link:focus {
    left: 0.75rem;
    top: 0.75rem;
}

:focus-visible {
    outline: 2px solid var(--omni-antique-gold);
    outline-offset: 3px;
}

/* ─── SHARED PRIMITIVES ───────────────────────────────────────────── */
.section {
    position: relative;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0;
    scroll-margin-top: var(--header-h);
}

.section__inner {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 3.5rem);
    padding-left: max(clamp(1.25rem, 5vw, 3.5rem), var(--safe-l));
    padding-right: max(clamp(1.25rem, 5vw, 3.5rem), var(--safe-r));
}

.section__head {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.section__actions {
    text-align: center;
    margin-top: clamp(2.25rem, 4vw, 3.25rem);
}

.eyebrow {
    font-family: var(--omni-display);
    font-weight: 500;
    font-size: clamp(0.72rem, 1.4vw, 0.82rem);
    line-height: 1.55;
    letter-spacing: var(--omni-track-xl);
    text-transform: uppercase;
    color: var(--omni-antique-gold);
}

/* Light sections (cream/card/rosemary): antique gold fails AA on these
   backgrounds, so eyebrows use the deep bronze-gold token. Dark sections
   (#home, #concerts, #venues) keep the antique gold above. */
.support .eyebrow,
.raffle .eyebrow,
.about .eyebrow {
    color: var(--omni-gold-on-light);
}

.section-title {
    font-family: var(--omni-display);
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.04;
    letter-spacing: var(--omni-track-sm);
    text-transform: uppercase;
    color: var(--omni-espresso);
    margin-top: 0.7rem;
    text-wrap: balance;
}

.section-title--light {
    color: var(--omni-ivory);
    text-shadow: var(--omni-text-shadow-dark);
}

.section-intro {
    font-family: var(--omni-editorial);
    font-size: clamp(1.08rem, 2vw, 1.32rem);
    line-height: 1.5;
    color: var(--omni-umber);
    margin-top: 1.1rem;
    text-wrap: pretty;
}

.section-intro--light {
    color: var(--omni-muted-ivory);
}

/* Ornament divider ◇ ∞ ◇ */
.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin: 1.15rem auto 0;
    max-width: 17rem;
    color: var(--omni-antique-gold);
    font-family: var(--omni-display);
    font-size: 0.9rem;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(185, 139, 69, 0.55));
}

.divider::after {
    background: linear-gradient(90deg, rgba(185, 139, 69, 0.55), transparent);
}

/* Buttons */
.btn {
    --btn-bg: var(--omni-terracotta);
    --btn-fg: var(--omni-espresso);
    --btn-bd: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.9rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-bd);
    border-radius: var(--omni-radius-sm);
    font-family: var(--omni-display);
    font-weight: 600;
    font-size: clamp(0.72rem, 1.4vw, 0.8rem);
    letter-spacing: var(--omni-track-md);
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease,
                background 0.2s ease, color 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: var(--omni-shadow-card);
}

.btn:active {
    transform: translateY(0);
}

.btn--primary {
    --btn-bg: var(--omni-terracotta);
    --btn-fg: var(--omni-espresso);
}

.btn--secondary {
    --btn-bg: var(--omni-antique-gold);
    --btn-fg: #fff;
}

/* Early Bird. Blue so the time-limited offer is instantly separable from the
   terracotta Buy Tickets primary, without competing with it for weight. */
.btn--earlybird {
    --btn-bg: var(--omni-prussian);
    --btn-fg: #fff;
}

.btn--earlybird:hover {
    --btn-bg: var(--omni-prussian-light);
    --btn-fg: #fff;
}

.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--omni-ivory);
    --btn-bd: rgba(226, 214, 194, 0.5);
}

.btn--ghost:hover {
    --btn-bg: rgba(226, 214, 194, 0.1);
    --btn-bd: var(--omni-antique-gold);
    color: var(--omni-ivory);
}

/* Ghost button on the cream hero ("Explore Concerts"): the default ghost is
   built for dark backgrounds (light text + light outline), so over cream it
   would vanish. Re-skin it to an espresso outline + espresso text, with a faint
   espresso wash on hover. Tap target stays ≥48px via the base .btn min-height. */
.hero .btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--omni-espresso);
    --btn-bd: rgba(47, 26, 20, 0.55);
}

.hero .btn--ghost:hover {
    --btn-bg: rgba(47, 26, 20, 0.06);
    --btn-bd: var(--omni-espresso);
    color: var(--omni-espresso);
}

/* ─── HEADER ──────────────────────────────────────────────────────── */
/* Two color states driven by the JS-toggled .is-condensed class:
   • TOP (over the cream hero) — translucent cream bar with DARK text/logo so
     it reads on the warm-cream hero.
   • CONDENSED (scrolled, over the dark sections below) — the original dark
     espresso bar with light ivory text. Unchanged from before. */
#siteHeader {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(240, 234, 224, 0.86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--omni-espresso);
    border-bottom: 1px solid rgba(120, 82, 24, 0.28);
    padding-top: var(--safe-t);
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

#siteHeader.is-condensed {
    background: rgba(33, 23, 18, 0.97);
    color: var(--omni-ivory);
    border-bottom-color: rgba(185, 139, 69, 0.32);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Tightened from 1.5rem when the 15% badge joined the bar: at the old gap
       the logo, menu and badge no longer fitted on one row. */
    gap: 1rem;
    max-width: var(--content-max);
    margin-inline: auto;
    height: var(--header-h);
    padding-inline: clamp(1.25rem, 5vw, 3.5rem);
    padding-left: max(clamp(1.25rem, 5vw, 3.5rem), var(--safe-l));
    padding-right: max(clamp(1.25rem, 5vw, 3.5rem), var(--safe-r));
    transition: height 0.3s ease;
}

#siteHeader.is-condensed .nav {
    height: 64px;
}

.nav__menu {
    list-style: none;
    display: flex;
    /* Wrapping stays on as a safety net: it is what stops the bar overflowing
       into a horizontal scrollbar if a width ever outgrows it. The badge is
       kept narrow enough (see .promo-badge below) that the wrap is never
       actually reached, so Buy Tickets stays on the row. */
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem 1rem;
}

/* TOP state (default): dark links on cream, no text-shadow. */
.nav__menu a {
    position: relative;
    color: var(--omni-espresso);
    font-family: var(--omni-display);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: var(--omni-track-md);
    line-height: 1.55;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: none;
    transition: color 0.2s ease;
}

/* CONDENSED state: restore the original light links + dark text-shadow. */
#siteHeader.is-condensed .nav__menu a {
    color: rgba(226, 214, 194, 0.86);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
}

.nav__menu a:not(.nav__cta)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background: var(--omni-gold-on-light);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
}

#siteHeader.is-condensed .nav__menu a:not(.nav__cta)::after {
    background: var(--omni-antique-gold);
}

/* Hover / active accent: on-light gold at top, antique gold when condensed. */
.nav__menu a:not(.nav__cta):hover,
.nav__menu a.is-active:not(.nav__cta) {
    color: var(--omni-gold-on-light);
}

#siteHeader.is-condensed .nav__menu a:not(.nav__cta):hover,
#siteHeader.is-condensed .nav__menu a.is-active:not(.nav__cta) {
    color: var(--omni-antique-gold);
}

.nav__menu a:not(.nav__cta):hover::after,
.nav__menu a.is-active:not(.nav__cta)::after {
    transform: scaleX(1);
}

.nav__cta {
    min-height: 40px;
    padding: 0.6rem 1.4rem;
    color: var(--omni-espresso);
    text-shadow: none;
}

.nav__cta:hover {
    color: var(--omni-espresso);
}

.nav__cta-item {
    margin-left: 0.4rem;
}

/* Hamburger — TOP state: dark bars + deeper gold frame on cream. */
.nav__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0;
    background: none;
    border: 1px solid rgba(120, 82, 24, 0.45);
    border-radius: var(--omni-radius-sm);
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.nav__toggle-bar {
    display: block;
    width: 22px;
    height: 1.5px;
    margin-inline: auto;
    background: var(--omni-espresso);
    transition: transform 0.3s ease, opacity 0.2s ease, background 0.3s ease;
}

/* CONDENSED state: restore the original light bars + gold frame. */
#siteHeader.is-condensed .nav__toggle {
    border-color: rgba(185, 139, 69, 0.4);
}

#siteHeader.is-condensed .nav__toggle-bar {
    background: var(--omni-ivory);
}

/* OPEN drawer: the menu panel is dark in both states, and the bars form the
   "X" beside it — keep them light + gold frame so they read on the dark panel
   even at the top over cream. */
#siteHeader.is-open .nav__toggle {
    border-color: rgba(185, 139, 69, 0.4);
}

#siteHeader.is-open .nav__toggle-bar {
    background: var(--omni-ivory);
}

#siteHeader.is-open .nav__toggle-bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

#siteHeader.is-open .nav__toggle-bar:nth-child(2) {
    opacity: 0;
}

#siteHeader.is-open .nav__toggle-bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ─── HERO ────────────────────────────────────────────────────────── */
/* Warm-cream hero (approved direction). The dark backdrop/veil are retired
   for the hero (see below); a very subtle warm radial glow keeps the cream
   from reading as a dead-flat fill while staying clearly light. Dark text
   is set per-element below, all clearing WCAG AA on the cream. */
.hero {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(115% 80% at 50% 8%, rgba(185, 139, 69, 0.10), transparent 60%),
        radial-gradient(120% 90% at 50% 100%, rgba(214, 197, 168, 0.30), transparent 62%),
        var(--omni-cream-outer);
    color: var(--omni-espresso);
    padding-block: clamp(3rem, 8vh, 6rem);
    padding-bottom: max(clamp(3rem, 8vh, 6rem), calc(var(--safe-b) + 2rem));
}

@supports (min-height: 100dvh) {
    .hero {
        min-height: 100dvh;
    }
}

/* Retired for the warm-cream hero. The blurred dark poster + dark veil are no
   longer rendered; the elements remain in the DOM (HeroParallax targets the
   backdrop) but are collapsed so they paint nothing. HeroParallax still writes
   a transform here harmlessly — display:none means it has no visual effect and
   never throws. These classes are hero-only, so this does not affect anything
   reused elsewhere. */
.hero__backdrop,
.hero__veil {
    display: none;
}

.hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 54rem;
}

.hero__logo {
    width: clamp(96px, 14vw, 168px);
    height: auto;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.5));
}

/* Eyebrow on cream: antique gold fails AA, so use the deep bronze-gold token
   (#785218 ≥ 4.5:1 on cream). */
.hero__eyebrow {
    color: var(--omni-gold-on-light);
}

/* Title in espresso on cream. The light text-shadow is the pale-bg variant; no
   -webkit-text-fill-color / gradient clip is used, so the color renders solidly
   dark (overriding any prior light fill). */
.hero__title {
    font-family: var(--omni-display);
    font-weight: 600;
    font-size: clamp(2.9rem, 10vw, 6.4rem);
    line-height: 0.96;
    letter-spacing: var(--omni-track-sm);
    text-transform: uppercase;
    color: var(--omni-espresso);
    -webkit-text-fill-color: var(--omni-espresso);
    text-shadow: var(--omni-text-shadow-light);
    margin-top: 0.85rem;
    text-wrap: balance;
}

.hero__subhead {
    font-family: var(--omni-editorial);
    font-style: italic;
    font-size: clamp(1.1rem, 2.6vw, 1.55rem);
    line-height: 1.3;
    color: var(--omni-umber);
    margin-top: 1.15rem;
    text-wrap: balance;
}

/* Divider ornament on cream: the antique gold default is too pale to read, so
   the hero divider (decorative, aria-hidden) uses the deeper on-light gold for
   both the glyph and its flanking hairlines. */
.hero__divider {
    margin-block: clamp(1.5rem, 3vw, 2.25rem) 0;
    color: var(--omni-gold-on-light);
}

.hero__divider::before {
    background: linear-gradient(90deg, transparent, rgba(120, 82, 24, 0.55));
}

.hero__divider::after {
    background: linear-gradient(90deg, rgba(120, 82, 24, 0.55), transparent);
}

.hero__mission {
    font-family: var(--omni-editorial);
    font-size: clamp(1.08rem, 2.1vw, 1.38rem);
    line-height: 1.55;
    color: var(--omni-umber);
    max-width: 40rem;
    margin-top: clamp(1.4rem, 3vw, 2.1rem);
    text-wrap: pretty;
}

/* The early-bird pill that sat here was removed on 2026-07-18: the offer closed
   on July 1st. Its styles went with it rather than being left behind unused. */

.hero__cta {
    /* Two-by-two, not a wrapping flex row. With four buttons the natural flex
       wrap put three on top and orphaned Donate underneath, which read as a
       mistake. A 2x2 grid also groups them sensibly: the two ways to buy on the
       first row, the two ways to browse and give on the second.
       minmax(0, 18rem) lets the columns match each other rather than each
       button sizing to its own label, so the grid stays even however the
       wording changes. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 18rem));
    align-items: center;
    justify-content: center;
    gap: 0.85rem 1rem;
    margin-top: clamp(2rem, 4vw, 2.9rem);
}

.hero__cta .btn {
    width: 100%;
}

/* Scroll cue on cream: deeper gold frame + dot so it stays visible. */
.hero__scroll-cue {
    position: absolute;
    left: 50%;
    bottom: max(1.5rem, calc(var(--safe-b) + 0.75rem));
    transform: translateX(-50%);
    z-index: 2;
    width: 28px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 8px;
    border: 1px solid rgba(120, 82, 24, 0.55);
    border-radius: 14px;
    opacity: 0.78;
    transition: opacity 0.2s ease;
}

.hero__scroll-cue:hover {
    opacity: 1;
}

.hero__scroll-line {
    width: 2px;
    height: 8px;
    border-radius: 2px;
    background: var(--omni-gold-on-light);
    animation: scrollCue 1.8s ease-in-out infinite;
}

@keyframes scrollCue {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(10px); opacity: 1; }
}

/* ─── CONCERTS SECTION WRAPPER ────────────────────────────────────── */
.concerts {
    background: var(--omni-portfolio-bg);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.concerts__head {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
}

/* ─── PORTFOLIO / SLIDER SECTION (UNCHANGED INTERNALS) ────────────── */
.portfolio {
    background: #25211f;
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* ─── SLIDER CONTAINER ───────────────────────────────── */
.slider {
    --slider-edge-space: clamp(3rem, 14vw, 12rem);
    position: relative;
    overflow: hidden;
    padding: 0 3vw;
    cursor: grab;
    user-select: none;
}

.slider.is-dragging {
    cursor: grabbing;
}

/* ─── TRACK (the moving row) ─────────────────────────── */
.slider__track {
    display: flex;
    gap: 30px;
    padding-inline: var(--slider-edge-space);
    will-change: transform;
}

/* ─── INDIVIDUAL CARDS ───────────────────────────────── */
.slider__card {
    /* Narrowed from 14.96vw so the card matches the poster's shape without
       getting taller: 14.96 / 0.75 * (1023/1537) = 13.28vw keeps the previous
       height and simply makes each card slimmer. */
    flex: 0 0 13.28vw;
    min-width: 108px;
    cursor: pointer;
}

.slider__img-wrap {
    width: 100%;
    /* Every poster is 1023x1537. Matching that exactly means the artwork
       fills the card edge to edge with no gap and nothing cropped. */
    aspect-ratio: 1023 / 1537;
    max-height: 62vh;
    overflow: hidden;
    background: #2f2f2f;
    border-radius: 3px;
    position: relative;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.slider__img-wrap::before {
    content: "";
    position: absolute;
    inset: -12%;
    background-image: var(--card-bg);
    background-size: cover;
    background-position: center;
    filter: blur(18px) saturate(1.08);
    opacity: 0.72;
    transform: scale(1.08);
    z-index: 0;
}

.slider__img-wrap img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    display: block;
    pointer-events: none;
    will-change: transform;
    transition: filter 0.3s ease;   /* hover brighten only — transform stays instant for the parallax rAF */
    /* transform set entirely by JS every frame */
}

/* Hover glow — same treatment as the Videos carousel cards: gold ring,
   gold glow, lift, and a subtle image brighten. Applied to the wrapper so it
   never collides with the poster <img> transform (driven by the parallax rAF). */
.slider__card:hover .slider__img-wrap,
.slider__card:focus-visible .slider__img-wrap {
    transform: translateY(-5px);
    box-shadow:
        0 0 0 1.5px var(--omni-antique-gold),
        0 0 18px rgba(185, 139, 69, 0.40),
        0 18px 42px rgba(0, 0, 0, 0.5);
}

.slider__card:hover .slider__img-wrap img,
.slider__card:focus-visible .slider__img-wrap img {
    filter: saturate(1.08) brightness(1.05);
}

.slider__caption {
    padding: 0.78rem 0 0;
    color: var(--omni-ivory);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
}

.slider__artist {
    font-family: var(--omni-display);
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.13em;
    line-height: 1.08;
    font-size: 1.08rem;
    color: var(--omni-ivory);
    overflow-wrap: anywhere;
}

.slider__concert-details {
    margin-top: 0.55rem;
    padding-top: 0.52rem;
    border-top: 1px solid rgba(185, 139, 69, 0.58);
}

.slider__concert-date,
.slider__concert-meta,
.slider__concert-venue,
.slider__concert-price {
    color: var(--omni-antique-gold);
    font-family: var(--omni-display);
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.55;
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.slider__concert-meta,
.slider__concert-price {
    color: var(--omni-muted-ivory);
}

.slider__concert-venue {
    color: rgba(226, 214, 194, 0.78);
}

/* ─── PREV / NEXT BUTTONS ────────────────────────────── */
.slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(47, 26, 20, 0.5);
    border: 1px solid rgba(185, 139, 69, 0.48);
    color: var(--omni-ivory);
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    /* keep button above track but inside slider padding */
    margin-top: -2.6rem; /* offset for caption height below image */
}

.slider__btn:hover {
    background: rgba(185, 139, 69, 0.22);
}

.slider__btn--prev { left: 0.6rem; }
.slider__btn--next { right: 0.6rem; }

.slider__btn:disabled {
    opacity: 0.25;
    cursor: default;
}

/* ─── TEXT REVEAL (line-mask, existing) ──────────────────────────── */
.reveal-line {
    display: block;
    overflow: hidden;
    line-height: 1.4;
}

.reveal-inner {
    display: block;
    transform: translateY(100%);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-inner.is-visible {
    transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════════════
   VIDEOS — "From the Stage" infinite auto-rotating marquee
   ════════════════════════════════════════════════════════════════════ */
.videos {
    background:
        radial-gradient(130% 120% at 50% -10%, rgba(185, 139, 69, 0.10), transparent 60%),
        linear-gradient(180deg, var(--omni-page-night) 0%, var(--omni-portfolio-bg) 100%);
    color: var(--omni-ivory);
    overflow: hidden;   /* belt-and-braces: marquee never bleeds the page */
}

/* viewport that clips the wide track; soft edge fade applied via mask below */
.video-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-block: clamp(0.5rem, 2vw, 1rem);
}

/* Spacing lives on each card's right margin (NOT flex gap) and the track has
   NO horizontal padding, so the track width is an exact multiple of
   "card + gap". Translating the 2× track by -50% lands the duplicate set
   precisely where the original began — a mathematically seamless wrap with
   no half-gap drift. The mask fade hides the flush left/right edges. */
.video-marquee__track {
    --video-gap: clamp(1rem, 2.4vw, 1.9rem);
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
}

/* card — 16:9 film still styled to echo the concert cards (gold hairline,
   soft shadow, hover lift). Fixed width so the loop math is stable. */
.video-card {
    flex: 0 0 auto;
    width: clamp(248px, 30vw, 384px);
    margin-right: var(--video-gap);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.video-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--omni-radius-sm);
    border: 1px solid rgba(185, 139, 69, 0.32);
    background: var(--omni-black-brown);
    box-shadow: var(--omni-shadow-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.video-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, filter 0.3s ease;
    filter: saturate(1.02) brightness(0.92);
}

/* play-button overlay — gold ring + terracotta triangle, brand-consistent */
.video-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(46px, 6vw, 60px);
    height: clamp(46px, 6vw, 60px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(21, 17, 13, 0.55);
    border: 1px solid rgba(185, 139, 69, 0.85);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
    pointer-events: none;
}

.video-card__play svg {
    width: 42%;
    height: 42%;
    fill: var(--omni-terracotta);
    margin-left: 6%;   /* optically centre the triangle */
}

.video-card__caption {
    margin-top: 0.85rem;
    font-family: var(--omni-display);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: var(--omni-track-sm);
    line-height: 1.45;
    text-transform: uppercase;
    color: var(--omni-muted-ivory);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
    overflow-wrap: anywhere;
}

/* hover / focus affordances on a single card */
.video-card:hover .video-card__thumb,
.video-card:focus-visible .video-card__thumb {
    transform: translateY(-5px);
    border-color: var(--omni-antique-gold);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
}

.video-card:hover .video-card__img {
    transform: scale(1.05);
    filter: saturate(1.08) brightness(1);
}

.video-card:hover .video-card__play,
.video-card:focus-visible .video-card__play {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(21, 17, 13, 0.4);
    border-color: var(--omni-terracotta);
}

.video-card:focus-visible {
    outline: none;   /* ring rendered on the thumb instead, see below */
}

.video-card:focus-visible .video-card__thumb {
    outline: 2px solid var(--omni-antique-gold);
    outline-offset: 3px;
}

/* Reduced-motion / no-JS fallback: a static, horizontally scrollable row.
   buildVideos() renders a single (non-duplicated) set and adds this class. */
.video-marquee__track--static {
    width: auto;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.5rem;
}

.video-marquee__track--static .video-card {
    scroll-snap-align: center;
}

/* The marquee animation only exists under no-preference, so reduced-motion
   users never get an auto-running keyframe even on the duplicated layout. */
@media (prefers-reduced-motion: no-preference) {
    .video-marquee {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
                mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    }

    .video-marquee__track:not(.video-marquee__track--static) {
        animation: videoMarquee var(--marquee-duration, 28s) linear infinite;
    }

    /* pause on hover or keyboard focus anywhere inside the strip */
    .video-marquee:hover .video-marquee__track,
    .video-marquee:focus-within .video-marquee__track {
        animation-play-state: paused;
    }

    @keyframes videoMarquee {
        from { transform: translate3d(0, 0, 0); }
        to   { transform: translate3d(-50%, 0, 0); }
    }
}

/* ─── MEMBERSHIP TIERS (Support) ─────────────────────────────────── */
.support {
    background: var(--omni-cream-outer);
    color: var(--omni-umber);
}

.tiers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: clamp(1rem, 2.5vw, 1.6rem);
}

.tier {
    display: flex;
    flex-direction: column;
    background: var(--omni-cream-card);
    border: 1px solid var(--omni-edge);
    border-radius: var(--omni-radius-md);
    border-top: 3px solid var(--omni-antique-gold);
    padding: clamp(1.4rem, 2.5vw, 1.9rem);
    box-shadow: 0 1px 2px rgba(60, 38, 24, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.tier:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(60, 38, 24, 0.14);
    border-top-color: var(--omni-terracotta);
}

.tier__name {
    font-family: var(--omni-display);
    font-weight: 600;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    letter-spacing: var(--omni-track-xs);
    text-transform: uppercase;
    color: var(--omni-espresso);
}

.tier__range {
    font-family: var(--omni-display);
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: var(--omni-track-sm);
    color: var(--omni-gold-on-light);
    margin-top: 0.45rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--omni-edge);
}

.tier__benefits {
    list-style: none;
    margin-top: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tier__benefits li {
    position: relative;
    padding-left: 1.4rem;
    font-family: var(--omni-editorial);
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--omni-umber);
}

.tier__benefits li::before {
    content: "◇";
    position: absolute;
    left: 0;
    top: 0.05em;
    color: var(--omni-antique-gold);
    font-size: 0.7em;
}

.tax-note {
    max-width: 44rem;
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    text-align: center;
    font-family: var(--omni-editorial);
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--omni-umber);
}

/* ─── SPONSOR WALL ────────────────────────────────────────────────── */
.sponsors-block {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
    border-top: 1px solid var(--omni-edge);
    text-align: center;
}

.sponsors-title {
    font-family: var(--omni-display);
    font-weight: 500;
    font-size: clamp(0.78rem, 1.6vw, 0.92rem);
    letter-spacing: var(--omni-track-lg);
    text-transform: uppercase;
    color: var(--omni-gold-on-light);
    margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
}

.sponsors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.2rem, 3vw, 2.6rem);
}

.sponsor {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    padding: 0.6rem;
    max-width: 12rem;
    transition: transform 0.25s ease;
}

.sponsor:hover {
    transform: translateY(-3px);
}

.sponsor__logo {
    max-height: 64px;
    max-width: 160px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1) opacity(0.78);
    transition: filter 0.3s ease;
}

.sponsor:hover .sponsor__logo {
    filter: grayscale(0) opacity(1);
}

.sponsor__name {
    font-family: var(--omni-display);
    font-size: 0.66rem;
    letter-spacing: var(--omni-track-md);
    text-transform: uppercase;
    color: var(--omni-umber);
    text-align: center;
    line-height: 1.4;
}

/* When logo 404s, show a bordered name plate instead */
.sponsor--noimg {
    padding: 0.9rem 1.2rem;
    border: 1px solid var(--omni-edge);
    border-radius: var(--omni-radius-sm);
    background: var(--omni-cream-card);
}

.sponsor--noimg .sponsor__name {
    font-size: 0.78rem;
    color: var(--omni-espresso);
}

/* ─── RAFFLE ──────────────────────────────────────────────────────── */
.raffle {
    background: var(--omni-rosemary-gold);
    color: var(--omni-umber);
}

.raffle .eyebrow {
    color: var(--omni-gold-on-light);
}

.raffle__pricing {
    font-family: var(--omni-display);
    font-weight: 600;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    letter-spacing: var(--omni-track-sm);
    text-transform: uppercase;
    color: var(--omni-espresso);
    margin-top: 1.3rem;
}

.raffle__drawing {
    font-family: var(--omni-editorial);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--omni-gold-on-light);
    margin-top: 0.5rem;
}

/* Prize gallery — photo-topped cards. Featured headliners span the full grid
   width at the top (a two-column media+body layout on wider viewports); the
   rest follow as an auto-fitting responsive grid. */
.prizes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
    gap: clamp(0.85rem, 1.8vw, 1.2rem);
    align-items: stretch;
}

.prize {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 132px;
    background: var(--omni-cream-card);
    border: 1px solid rgba(185, 139, 69, 0.4);
    border-radius: var(--omni-radius-md);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(60, 38, 24, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Gold hover-glow + lift — same treatment as .video-card / .slider__card:
   gold ring, soft gold glow, and a translateY lift. */
.prize:hover,
.prize:focus-within {
    transform: translateY(-5px);
    border-color: var(--omni-antique-gold);
    box-shadow:
        0 0 0 1.5px var(--omni-antique-gold),
        0 0 18px rgba(185, 139, 69, 0.30),
        0 18px 40px rgba(60, 38, 24, 0.20);
}

/* Photo block (top of card). Photos fill via cover; logo art uses contain on a
   light bg via .prize__media--contain. */
.prize__media {
    position: relative;
    flex: 0 0 40%;
    max-width: 188px;
    overflow: hidden;
    background: var(--omni-black-brown);
    border-right: 1px solid rgba(185, 139, 69, 0.32);
}

.prize__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
}

.prize:hover .prize__img {
    transform: scale(1.04);
}

/* Logo art: contain (never stretched/cropped) on a soft cream field. */
.prize__media--contain {
    background:
        radial-gradient(120% 130% at 50% 0%, rgba(185, 139, 69, 0.08), transparent 70%),
        var(--omni-cream-warm);
}

.prize__media--contain .prize__img {
    object-fit: contain;
    padding: clamp(1.1rem, 3vw, 1.8rem);
}

.prize__media--contain .prize__img,
.prize:hover .prize__media--contain .prize__img {
    transform: none;   /* logos should not zoom on hover */
}

.prize__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    flex: 1 1 auto;
    padding: clamp(0.85rem, 2vw, 1.2rem);
}

.prize__tag {
    align-self: flex-start;
    font-family: var(--omni-display);
    font-weight: 600;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--omni-gold-on-light);
}

.prize__name {
    font-family: var(--omni-display);
    font-weight: 600;
    font-size: 1.06rem;
    letter-spacing: var(--omni-track-xs);
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--omni-espresso);
}

.prize__maker {
    font-family: var(--omni-editorial);
    font-style: italic;
    font-size: 0.98rem;
    /* burnished gold fails AA on the cream card; the deep bronze-gold token
       (#785218) clears 4.5:1 while staying on-brand. */
    color: var(--omni-gold-on-light);
}

/* Value as a gold "pill" badge. Self-starting so it hugs its content. Deep
   bronze-gold text token (#785218) on a soft gold tint with a gold hairline —
   AA-readable on the cream card. */
.prize__value {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    font-family: var(--omni-display);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: var(--omni-track-sm);
    text-transform: uppercase;
    color: var(--omni-gold-on-light);
    background: rgba(185, 139, 69, 0.16);
    border: 1px solid rgba(185, 139, 69, 0.5);
    border-radius: 999px;
    padding: 0.32rem 0.85rem;
    margin: 0.1rem 0;
}

.prize__desc {
    font-family: var(--omni-editorial);
    font-size: 0.92rem;
    line-height: 1.38;
    color: var(--omni-umber);
}

/* Headliners: same compact horizontal card, ordered first, with a gold tag
   and a slightly stronger gold border. */
.prize--featured {
    border-color: rgba(185, 139, 69, 0.62);
}

/* Graceful no-image state: collapse the empty media block. */
.prize--noimg .prize__media {
    display: none;
}

.raffle__provisional {
    max-width: 40rem;
    margin: clamp(1.8rem, 3.5vw, 2.5rem) auto 0;
    text-align: center;
    font-family: var(--omni-editorial);
    font-style: italic;
    font-size: 0.96rem;
    color: var(--omni-gold-on-light);
}

/* ─── VENUES ──────────────────────────────────────────────────────── */
.venues {
    background: var(--omni-page-body);
    color: var(--omni-ivory);
}

.venues-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: clamp(1.25rem, 3vw, 2.2rem);
}

.venue {
    display: flex;
    flex-direction: column;
    background: rgba(47, 26, 20, 0.55);
    border: 1px solid rgba(185, 139, 69, 0.34);
    border-radius: var(--omni-radius-md);
    overflow: hidden;
}

.venue__photo {
    position: relative;
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(185, 139, 69, 0.12), transparent 70%),
        var(--omni-black-brown);
    border-bottom: 1px solid rgba(185, 139, 69, 0.3);
    color: var(--omni-muted-ivory);
    text-align: center;
    padding: 1.5rem;
}

.venue__photo-frame {
    position: absolute;
    inset: 0.85rem;
    border: 1px solid rgba(185, 139, 69, 0.32);
    pointer-events: none;
}

.venue__photo-name {
    font-family: var(--omni-display);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: var(--omni-track-md);
    text-transform: uppercase;
    color: var(--omni-ivory);
}

.venue__photo-orn {
    font-family: var(--omni-display);
    color: var(--omni-antique-gold);
    letter-spacing: 0.4em;
    text-indent: 0.4em;
    font-size: 0.8rem;
}

/* Real venue photo: fills the 16/9 frame edge-to-edge, keeping the same gold
   hairline the placeholder uses (via .venue__photo-frame) and adding a soft
   inset shadow so the image reads as framed, elegant venue imagery. */
.venue__photo--image {
    padding: 0;
    gap: 0;
    background: var(--omni-black-brown);
}

.venue__photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Soft inner vignette hugging the photo edges. */
.venue__photo--image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    box-shadow: inset 0 2px 22px rgba(16, 11, 7, 0.5);
}

/* Lift the gold hairline above the photo + vignette. */
.venue__photo--image .venue__photo-frame {
    z-index: 2;
}

.venue__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: clamp(1.4rem, 2.6vw, 1.9rem);
    flex: 1 1 auto;
}

.venue__name {
    font-family: var(--omni-display);
    font-weight: 600;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
    letter-spacing: var(--omni-track-xs);
    text-transform: uppercase;
    color: var(--omni-ivory);
}

.venue__count {
    align-self: flex-start;
    font-family: var(--omni-display);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: var(--omni-track-md);
    text-transform: uppercase;
    color: var(--omni-antique-gold);
    border: 1px solid rgba(185, 139, 69, 0.5);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    margin: 0.2rem 0 0.4rem;
}

.venue__address {
    font-family: var(--omni-editorial);
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--omni-muted-ivory);
}

.venue__neighborhood {
    font-family: var(--omni-display);
    font-size: 0.66rem;
    letter-spacing: var(--omni-track-md);
    text-transform: uppercase;
    color: var(--omni-antique-gold);
}

.venue__transit {
    font-family: var(--omni-editorial);
    font-size: 0.98rem;
    line-height: 1.45;
    color: rgba(226, 214, 194, 0.78);
}

.venue__tickets {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 1.1rem;
}

.venue__tickets .btn {
    margin-top: 0.4rem;
}

/* ─── ABOUT ───────────────────────────────────────────────────────── */
.about {
    background: var(--omni-cream-outer);
    color: var(--omni-umber);
}

.about__lead {
    max-width: 50rem;
    margin: 0 auto;
    text-align: center;
}

.about__mission {
    font-family: var(--omni-editorial);
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    line-height: 1.4;
    color: var(--omni-espresso);
}

.about__blurb {
    font-family: var(--omni-editorial);
    font-size: 1.12rem;
    line-height: 1.55;
    color: var(--omni-umber);
    margin-top: 1.2rem;
}

.founder {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1.4rem, 3vw, 2.4rem);
    align-items: center;
    max-width: 52rem;
    margin: clamp(2.8rem, 5vw, 4rem) auto 0;
    padding: clamp(1.5rem, 3vw, 2.2rem);
    background: var(--omni-cream-card);
    border: 1px solid var(--omni-edge);
    border-radius: var(--omni-radius-md);
}

.founder__portrait {
    width: clamp(96px, 14vw, 128px);
    height: clamp(96px, 14vw, 128px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--omni-espresso), var(--omni-umber));
    border: 2px solid var(--omni-antique-gold);
    overflow: hidden;
}

.founder__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 150x225 portrait — bias the cover-crop toward the upper third so the
       face stays centred in the circular frame, not the chest. */
    object-position: center 28%;
    display: block;
}

.founder__monogram {
    font-family: var(--omni-display);
    font-weight: 600;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: 0.08em;
    color: var(--omni-antique-gold);
}

.founder__name {
    font-family: var(--omni-display);
    font-weight: 600;
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    letter-spacing: var(--omni-track-xs);
    text-transform: uppercase;
    color: var(--omni-espresso);
}

.founder__title {
    font-family: var(--omni-display);
    font-size: 0.74rem;
    letter-spacing: var(--omni-track-md);
    text-transform: uppercase;
    color: var(--omni-burnished-gold);
    margin-top: 0.3rem;
}

.founder__bio {
    font-family: var(--omni-editorial);
    font-size: 1.06rem;
    line-height: 1.5;
    color: var(--omni-umber);
    margin-top: 0.9rem;
}

/* ─── STAT BAND ───────────────────────────────────────────────────── */
.stats {
    display: grid;
    /* Five stats now. At a 12rem minimum inside a 60rem band the fifth wrapped
       onto its own row as an orphan, so the column floor and the band both
       widen just enough to hold five across on a desktop. auto-fit still
       reflows to two rows and then one as the screen narrows. */
    /* Two deliberate rows: the audience figure leads on its own full-width row
       (.stat--lead), the remaining four sit beneath it. Fixed four columns
       rather than auto-fit, because auto-fit would reflow the second row to
       three-plus-one at some widths and break the pairing. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.2rem, 3vw, 2rem);
    max-width: 60rem;
    margin: clamp(2.8rem, 5vw, 4rem) auto 0;
    padding: clamp(2rem, 4vw, 2.8rem) clamp(1.5rem, 3vw, 2.5rem);
    background:
        linear-gradient(180deg, rgba(185, 139, 69, 0.08), rgba(185, 139, 69, 0.03)),
        var(--omni-cream-card);
    border-block: 1px solid var(--omni-edge);
    border-radius: var(--omni-radius-md);
    text-align: center;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.stat__num {
    font-family: var(--omni-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--omni-burnished-gold);
}

.stat__label {
    font-family: var(--omni-display);
    font-size: 0.7rem;
    letter-spacing: var(--omni-track-md);
    text-transform: uppercase;
    color: var(--omni-umber);
    line-height: 1.4;
    max-width: 13rem;
}

/* ─── CONTACT ─────────────────────────────────────────────────────── */
.contact {
    text-align: center;
    margin-top: clamp(2.6rem, 5vw, 3.6rem);
}

.contact__title {
    font-family: var(--omni-display);
    font-weight: 500;
    font-size: clamp(0.82rem, 1.7vw, 0.95rem);
    letter-spacing: var(--omni-track-lg);
    text-transform: uppercase;
    color: var(--omni-burnished-gold);
    margin-bottom: 1.1rem;
}

.contact__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.6rem;
}

.contact__list a {
    font-family: var(--omni-display);
    font-size: 0.92rem;
    letter-spacing: var(--omni-track-xs);
    color: var(--omni-espresso);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.contact__list a:hover {
    color: var(--omni-burnished-gold);
    border-bottom-color: var(--omni-antique-gold);
}

.contact__address {
    font-family: var(--omni-editorial);
    font-size: 1rem;
    color: var(--omni-umber);
}

/* ─── FOOTER ──────────────────────────────────────────────────────── */
.site-footer {
    background: var(--omni-espresso);
    color: rgba(226, 214, 194, 0.78);
    padding-top: clamp(2.8rem, 5vw, 4rem);
    border-top: 1px solid rgba(185, 139, 69, 0.42);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: clamp(1.6rem, 4vw, 3rem);
    padding-bottom: clamp(2.2rem, 4vw, 3rem);
}

.site-footer__series {
    margin-top: 0.9rem;
    font-family: var(--omni-display);
    font-size: 0.68rem;
    letter-spacing: var(--omni-track-md);
    text-transform: uppercase;
    color: var(--omni-antique-gold);
}

.site-footer__heading {
    font-family: var(--omni-display);
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: var(--omni-track-md);
    text-transform: uppercase;
    color: var(--omni-ivory);
    margin-bottom: 1rem;
}

.site-footer__links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.site-footer__links a {
    font-family: var(--omni-editorial);
    font-size: 1.02rem;
    color: rgba(226, 214, 194, 0.8);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer__links a:hover {
    color: var(--omni-antique-gold);
}

.site-footer__address {
    font-family: var(--omni-editorial);
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(226, 214, 194, 0.7);
}

.site-footer__base {
    border-top: 1px solid rgba(185, 139, 69, 0.25);
    padding: clamp(1.2rem, 2.5vw, 1.6rem) 0;
    padding-bottom: max(clamp(1.2rem, 2.5vw, 1.6rem), calc(var(--safe-b) + 0.5rem));
    text-align: center;
}

.site-footer__inner,
.site-footer__base {
    max-width: var(--content-max);
    margin-inline: auto;
}

.site-footer__taxline {
    font-family: var(--omni-editorial);
    font-style: italic;
    font-size: 0.92rem;
    color: rgba(226, 214, 194, 0.62);
    margin-bottom: 0.5rem;
}

.site-footer__copy {
    font-family: var(--omni-display);
    font-size: 0.64rem;
    letter-spacing: var(--omni-track-md);
    line-height: 1.55;
    text-transform: uppercase;
    color: rgba(226, 214, 194, 0.7);
}

/* ─── OMNI BRANDING (logo lockup) ─────────────────────────────────── */
/* Base lockup is light/gold (used as-is in the dark footer). The header logo
   is re-colored per nav state below. */
.site-logo {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    font-family: var(--omni-display);
    line-height: 0.98;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--omni-ivory);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.site-logo small {
    margin-top: 0.24rem;
    color: var(--omni-antique-gold);
    font-family: var(--omni-display);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: var(--omni-track-md);
    line-height: 1.55;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.site-logo--footer {
    text-shadow: none;
}

.logo-bold {
    color: var(--omni-antique-gold);
}

/* HEADER LOGO — TOP state: espresso wordmark + on-light gold for "Omni" and
   the tagline, no shadow, so it reads on the cream hero. The footer logo
   (.site-logo--footer) is unaffected and stays light on the dark footer. */
#siteHeader .site-logo {
    color: var(--omni-espresso);
    text-shadow: none;
}

#siteHeader .site-logo small {
    color: var(--omni-gold-on-light);
}

#siteHeader .site-logo .logo-bold {
    color: var(--omni-gold-on-light);
}

/* HEADER LOGO — CONDENSED state: restore the original light wordmark, gold
   accents, and dark text-shadow over the dark bar. */
#siteHeader.is-condensed .site-logo {
    color: var(--omni-ivory);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
}

#siteHeader.is-condensed .site-logo small,
#siteHeader.is-condensed .site-logo .logo-bold {
    color: var(--omni-antique-gold);
}

/* ════════════════════════════════════════════════════════════════════
   LIGHTBOX (UNCHANGED — load-bearing per Flag 7)
   ════════════════════════════════════════════════════════════════════ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    visibility: hidden;
}

.lightbox.is-open {
    pointer-events: all;
    visibility: visible;
}

/* full-viewport panel — clip-path animates from card rect → inset(0) on open */
.lightbox__content {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(1.25rem, 3vw, 3rem);
    overflow: hidden;
    /* clip-path and transition set entirely by JS */
}

/* blurred image fills the background; softens edges where image doesn't fill */
.lightbox__blur {
    position: absolute;
    inset: -10%;          /* overshoot so blur never shows hard edges */
    background-size: cover;
    background-position: center;
    filter: blur(55px) brightness(0.28) saturate(1.4);
    z-index: 0;
}

.lightbox__stage {
    position: relative;
    z-index: 1;
    width: min(1120px, 92vw);
    max-height: 88vh;
    display: grid;
    grid-template-columns: minmax(280px, 0.86fr) minmax(300px, 0.7fr);
    gap: clamp(1.4rem, 4vw, 4rem);
    align-items: center;
}

.lightbox__poster {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

.lightbox__img {
    width: auto;
    max-width: 100%;
    max-height: 84vh;
    object-fit: contain;
    display: block;
    border-radius: 3px;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.42);
}

.lightbox__info {
    position: relative;
    color: var(--omni-ivory);
    text-align: left;
    padding: clamp(1.2rem, 2.5vw, 2.4rem) 0;
    opacity: 0;
    transition: opacity 0.3s ease 0.45s;
}

.lightbox.is-open .lightbox__info {
    opacity: 1;
}

.lightbox__eyebrow {
    color: var(--omni-antique-gold);
    font-family: var(--omni-display);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    line-height: 1.55;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.lightbox__title {
    color: var(--omni-ivory);
    font-family: var(--omni-display);
    font-size: clamp(2rem, 4vw, 4.4rem);
    font-weight: 400;
    letter-spacing: 0.13em;
    line-height: 0.98;
    margin-bottom: 0.95rem;
    text-transform: uppercase;
    text-wrap: balance;
}

.lightbox__meta {
    color: var(--omni-muted-ivory);
    font-family: var(--omni-editorial);
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    font-style: italic;
    letter-spacing: 0.01em;
    line-height: 1.25;
    margin-bottom: clamp(1.3rem, 2vw, 2rem);
    max-width: 34rem;
}

.lightbox__details {
    border-block: 1px solid rgba(185, 139, 69, 0.42);
    display: grid;
    gap: 0;
    margin: 0 0 clamp(1.25rem, 2vw, 1.8rem);
    max-width: 33rem;
    padding: 0.4rem 0;
}

.lightbox__detail {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 1rem;
    padding: 0.7rem 0;
}

.lightbox__detail + .lightbox__detail {
    border-top: 1px solid rgba(226, 214, 194, 0.12);
}

.lightbox__detail dt {
    color: var(--omni-antique-gold);
    font-family: var(--omni-display);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    line-height: 1.55;
    text-transform: uppercase;
}

.lightbox__detail dd {
    color: var(--omni-ivory);
    font-family: var(--omni-display);
    font-size: 0.86rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.55;
    text-transform: uppercase;
}

.lightbox__bio {
    color: rgba(226, 214, 194, 0.82);
    font-family: var(--omni-editorial);
    font-size: 1.02rem;
    letter-spacing: 0;
    line-height: 1.44;
    max-width: 34rem;
}

.lightbox__tickets {
    align-items: center;
    background: linear-gradient(180deg, var(--omni-antique-gold), var(--omni-burnished-gold));
    border: 1px solid rgba(226, 214, 194, 0.28);
    color: var(--omni-espresso);
    display: inline-flex;
    font-family: var(--omni-display);
    font-size: 0.76rem;
    font-weight: 400;
    justify-content: center;
    letter-spacing: 0.2em;
    line-height: 1;
    margin-top: clamp(1.4rem, 2vw, 2rem);
    min-height: 3.05rem;
    min-width: 13.5rem;
    padding: 0.95rem 1.35rem;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.lightbox__tickets::after {
    content: "";
    position: absolute;
    inset: 0.32rem;
    border: 1px solid rgba(47, 26, 20, 0.34);
    pointer-events: none;
}

.lightbox__tickets:hover {
    filter: brightness(1.04);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

.lightbox__close {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 1001;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: rotate(-90deg);
    transition: opacity 0.35s ease 0.35s,
                transform 0.35s ease 0.35s;
}

.lightbox.is-open .lightbox__close {
    opacity: 1;
    transform: rotate(0deg);
}

/* ─── LIGHTBOX NAV ARROWS ─────────────────────────────── */
.lightbox__nav {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18%;          /* large hitbox */
    z-index: 3;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 1.8rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lightbox__nav--prev { left: 0;  justify-content: flex-start; }
.lightbox__nav--next { right: 0; justify-content: flex-end; }

.lightbox.is-open .lightbox__nav {
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.3s ease 0.5s; /* appear after expand finishes */
}

.lightbox__nav-arrow {
    font-size: 1.6rem;
    color: #fff;
    opacity: 0.55;
    transition: opacity 0.2s ease;
    line-height: 1;
}

.lightbox__nav:hover .lightbox__nav-arrow { opacity: 1; }

@media (max-width: 820px), (max-height: 640px) {
    .lightbox__content {
        padding: 4.25rem 0.8rem 1.2rem;
        overflow: hidden;
    }

    .lightbox__stage {
        align-items: start;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 0.9rem;
        max-height: 82vh;
        width: 94vw;
    }

    .lightbox__poster {
        justify-content: flex-end;
    }

    /* dvh so a tall image is not sized against a viewport height that iOS
       Safari only reports when its toolbars are hidden. vh stays first as the
       fallback for anything that does not know dvh. */
    .lightbox__img {
        max-height: 76vh;
        max-height: 76dvh;
    }

    .lightbox__info {
        max-height: 76vh;
        max-height: 76dvh;
        overflow-y: auto;
        /* keep momentum inside the panel, not on the page behind */
        overscroll-behavior: contain;
        padding: 0.2rem 0 0.5rem;
        text-align: left;
    }

    .lightbox__eyebrow {
        font-size: 0.58rem;
        letter-spacing: 0.2em;
        margin-bottom: 0.65rem;
    }

    .lightbox__title {
        font-size: clamp(1.24rem, 5vw, 2rem);
        letter-spacing: 0.1em;
        line-height: 1.02;
        margin-bottom: 0.65rem;
    }

    .lightbox__meta {
        font-size: 0.88rem;
        margin-bottom: 0.85rem;
    }

    .lightbox__details {
        margin-bottom: 0.85rem;
    }

    .lightbox__detail {
        grid-template-columns: 1fr;
        gap: 0.1rem;
        padding: 0.42rem 0;
    }

    .lightbox__detail dt {
        font-size: 0.54rem;
    }

    .lightbox__detail dd {
        font-size: 0.66rem;
        letter-spacing: 0.08em;
    }

    .lightbox__bio {
        font-size: 0.9rem;
    }

    .lightbox__tickets {
        font-size: 0.62rem;
        letter-spacing: 0.14em;
        min-height: 2.65rem;
        min-width: 100%;
        padding: 0.8rem 1rem;
    }

    .lightbox__nav {
        width: 4.5rem;
        padding: 0 0.9rem;
    }
}

/* ─── CLOSE / CLOSING STATE ───────────────────────────── */
.lightbox.is-closing .lightbox__content {
    opacity: 0;
    transition: opacity 0.3s ease !important;
}

.lightbox.is-closing .lightbox__close,
.lightbox.is-closing .lightbox__nav {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease !important;
}

/* ════════════════════════════════════════════════════════════════════
   VIDEO MODAL (separate overlay; not the concert lightbox)
   ════════════════════════════════════════════════════════════════════ */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;            /* above header (900) and lightbox (1000) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    padding-top: max(clamp(1rem, 4vw, 3rem), calc(var(--safe-t) + 3.5rem));
    padding-bottom: max(clamp(1rem, 4vw, 3rem), var(--safe-b));
    background: rgba(13, 9, 6, 0.86);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.video-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

.video-modal__frame {
    position: relative;
    width: min(1100px, 100%);
    aspect-ratio: 16 / 9;
    max-height: 100%;
    background: #000;
    border: 1px solid rgba(185, 139, 69, 0.4);
    border-radius: var(--omni-radius-sm);
    box-shadow: var(--omni-shadow-lightbox);
    overflow: hidden;
    transform: scale(0.96);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.video-modal.is-open .video-modal__frame {
    transform: scale(1);
}

.video-modal__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.video-modal__close {
    position: fixed;
    top: max(1.25rem, calc(var(--safe-t) + 0.75rem));
    right: max(1.25rem, calc(var(--safe-r) + 0.75rem));
    z-index: 1101;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(21, 17, 13, 0.6);
    border: 1px solid rgba(226, 214, 194, 0.45);
    border-radius: 50%;
    color: var(--omni-ivory);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.video-modal__close:hover {
    background: rgba(185, 139, 69, 0.3);
    border-color: var(--omni-antique-gold);
    transform: rotate(90deg);
}

/* ════════════════════════════════════════════════════════════════════
   REVEAL (data-reveal) — staggered entrance.
   Hidden start-state ONLY under no-preference, so JS-off / reduced-motion
   leaves content fully visible (G6).
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: calc(var(--reveal-i, 0) * 70ms);
    }

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

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE / iOS
   ════════════════════════════════════════════════════════════════════ */

/* Tablet + down: collapse nav into hamburger drawer */
@media (max-width: 1024px) {
    :root {
        --header-h: 68px;
    }

    .nav {
        height: var(--header-h);
    }

    #siteHeader.is-condensed .nav {
        height: 60px;
    }

    .nav__toggle {
        display: flex;
    }

    .nav__menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        background: rgba(33, 23, 18, 0.99);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(185, 139, 69, 0.32);
        padding: 0.5rem max(1.25rem, var(--safe-l)) max(1rem, var(--safe-b)) max(1.25rem, var(--safe-r));
        max-height: calc(100svh - var(--header-h));
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
    }

    #siteHeader.is-open .nav__menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .nav__menu li {
        border-bottom: 1px solid rgba(185, 139, 69, 0.16);
    }

    .nav__menu li:last-child {
        border-bottom: none;
    }

    /* The drawer panel is dark in BOTH nav states, so its links are always
       light here — this overrides the dark top-state link color used for the
       inline desktop nav over the cream hero. Active/hover stays gold. */
    .nav__menu a:not(.nav__cta) {
        display: block;
        padding: 0.95rem 0.4rem;
        font-size: 0.82rem;
        color: rgba(226, 214, 194, 0.86);
        text-shadow: none;
    }

    #siteHeader.is-condensed .nav__menu a:not(.nav__cta) {
        color: rgba(226, 214, 194, 0.86);
        text-shadow: none;
    }

    .nav__menu a:not(.nav__cta):hover,
    .nav__menu a.is-active:not(.nav__cta),
    #siteHeader.is-condensed .nav__menu a:not(.nav__cta):hover,
    #siteHeader.is-condensed .nav__menu a.is-active:not(.nav__cta) {
        color: var(--omni-antique-gold);
    }

    .nav__menu a:not(.nav__cta)::after {
        display: none;
    }

    .nav__cta-item {
        margin-left: 0;
        margin-top: 0.8rem;
        margin-bottom: 0.4rem;
    }

    .nav__cta {
        width: 100%;
        min-height: 48px;
    }

}

/* Phone: single column grids, tighter type */
@media (max-width: 600px) {
    body {
        font-size: 17px;
    }

    .section {
        padding: clamp(3rem, 12vw, 4rem) 0;
    }

    /* Single column on phones: two 18rem columns will not fit, and stacked
       full-width buttons are the easier tap target anyway. */
    .hero__cta {
        grid-template-columns: minmax(0, 22rem);
    }

    .hero__cta .btn {
        width: 100%;
        max-width: 22rem;
    }

    .founder {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .site-footer__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .site-footer__links {
        align-items: center;
    }

    .contact__list {
        flex-direction: column;
        gap: 0.6rem;
    }
}

/* Collapse all multi-column card grids below ~480px (contract G7) */
@media (max-width: 480px) {
    .tiers,
    .prizes,
    .venues-grid,
    .stats {
        grid-template-columns: 1fr;
    }

    .sponsors {
        gap: 1.4rem 1.2rem;
    }

    /* smaller video cards on phones; tap target on the thumb stays well >44px */
    .video-card {
        width: clamp(208px, 72vw, 264px);
    }

    .video-card__caption {
        font-size: 0.72rem;
    }

    .video-marquee__track {
        gap: 0.9rem;
        padding-inline: 0.9rem;
    }

    /* on phones a softer, narrower edge fade keeps the first card readable */
    .video-marquee {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
                mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    }
}

/* Very small (320px) — guard against overflow */
@media (max-width: 360px) {
    .section__inner {
        padding-inline: max(1rem, var(--safe-l));
    }

    .hero__title {
        font-size: clamp(2.4rem, 13vw, 3rem);
    }
}

/* ─── REDUCED MOTION — global gate ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .hero__backdrop {
        transform: none !important;
    }

    .hero__scroll-line {
        animation: none;
    }

    .reveal-inner {
        transform: none !important;
        transition: none !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   FIRST-TIME VISITOR DISCOUNT  (popup + floating badge)
   ══════════════════════════════════════════════════════════════════ */

.promo-modal[hidden],
.promo-badge[hidden] { display: none !important; }

.promo-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    /* NOT align-items:center — flex centring clips the top of a child taller than
       the viewport (landscape phones), making the headline unreachable. margin:auto
       on the card centres when there is room and scrolls when there isn't. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.25rem;
    /* keep momentum inside this panel, not on the page behind */
    overscroll-behavior: contain;
}
.promo-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(35, 22, 16, 0.55);
    backdrop-filter: blur(3px);
    animation: promoFade .35s ease both;
}
.promo-card {
    position: relative;
    width: 100%;
    max-width: 27rem;
    background: var(--omni-cream-card);
    border: 1px solid var(--omni-edge);
    border-radius: 6px;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .38);
    padding: 2.4rem 2.1rem 2rem;
    margin: auto;
    text-align: center;
    animation: promoRise .45s cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes promoFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes promoRise { from { opacity: 0; transform: translateY(14px) scale(.98) } to { opacity: 1; transform: none } }

.promo-card__close {
    position: absolute;
    top: .5rem; right: .7rem;
    background: none; border: 0;
    font-size: 1.6rem; line-height: 1;
    color: var(--omni-parchment-deep);
    cursor: pointer;
    padding: .25rem .4rem;
}
.promo-card__close:hover { color: var(--omni-espresso); }

.promo-card__eyebrow {
    font-family: var(--omni-font-display);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--omni-gold-on-light);
    margin: 0 0 .55rem;
}
.promo-card__title {
    font-family: var(--omni-font-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 5vw, 1.95rem);
    line-height: 1.1;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--omni-espresso);
    margin: 0;
}
.promo-card__orn {
    color: var(--omni-antique-gold);
    letter-spacing: .4em;
    font-size: .8rem;
    margin: .75rem 0 .6rem;
}
.promo-card__lede {
    font-family: var(--omni-font-editorial);
    font-size: 1.06rem;
    line-height: 1.5;
    color: var(--omni-umber);
    margin: 0 0 1.3rem;
}

.promo-form__label {
    display: block;
    font-family: var(--omni-font-display);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--omni-umber);
    text-align: left;
    margin-bottom: .4rem;
}
.promo-form__input {
    width: 100%;
    font-family: var(--omni-font-editorial);
    font-size: 1.02rem;
    color: var(--omni-espresso);
    background: #FCFAF5;
    border: 1px solid var(--omni-edge);
    border-radius: 4px;
    padding: .75rem .85rem;
}
.promo-form__input:focus {
    outline: none;
    border-color: var(--omni-antique-gold);
    box-shadow: 0 0 0 3px rgba(185, 139, 69, .2);
}
.promo-form__btn { width: 100%; margin-top: .8rem; }
.promo-form__msg {
    min-height: 1em;
    margin: .6rem 0 0;
    font-family: var(--omni-font-editorial);
    font-size: .92rem;
    color: #9A3B2A;
}
.promo-form__fine {
    font-family: var(--omni-font-editorial);
    font-size: .82rem;
    line-height: 1.45;
    color: var(--omni-parchment-deep);
    margin: .85rem 0 0;
}
.promo-done__txt {
    font-family: var(--omni-font-editorial);
    font-size: 1.08rem;
    line-height: 1.55;
    color: var(--omni-umber);
    margin: 0;
}

/* Floating badge (after dismiss) */
/* Rides in the header bar rather than floating under it. Being in the bar
   means it no longer needs the measured-header offset the floating version
   depended on, and it can never land on top of the nav on a narrow screen. */
.promo-badge {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: .3rem;
    padding: .38rem .68rem;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1;
    background: var(--omni-burnished-gold);
    color: #FCFAF5;
    border: 2px solid var(--omni-cream-card);
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .28);
    cursor: pointer;
    /* Gentler breathe than the floating badge used: at 1.11 it knocked into
       the nav links beside it. */
    animation: promoBreathe 2.2s ease-in-out infinite;
    transition: background .18s ease;
}
/* Pause the breathing on hover so it holds still while being clicked */
.promo-badge:hover { background: var(--omni-espresso); animation-play-state: paused; }
.promo-badge:focus-visible { outline: 2px solid var(--omni-antique-gold); outline-offset: 2px; }

/* The badge is only ~25px tall, which is comfortable to click and fiddly to
   tap. Grow the touch area on touch devices without changing the pill itself,
   so the bar's layout is untouched. */
@media (hover: none) {
    .promo-badge { position: relative; }
    .promo-badge::before {
        content: "";
        position: absolute;
        inset: -10px -6px;
    }
}

@keyframes promoBreathe {
    0%, 100% { transform: scale(1);    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .28); }
    50%      { transform: scale(1.05); box-shadow: 0 .5rem 1.4rem rgba(169, 121, 61, .5); }
}
.promo-badge__pct {
    font-family: var(--omni-font-display);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}
/* "at check out!!" is not rendered in the bar at any width. Measured: with the
   logo, seven links and Buy Tickets already on the row, the full wording needs
   about 165px and even at 1440px the bar has none to give, so including it
   pushed Buy Tickets onto a second line. The badge therefore reads "15% off"
   and the modal carries the rest the moment it is clicked. The markup is kept
   so restoring it is one line if the nav ever loses an item. */
.promo-badge__txt {
    display: none;
    font-family: var(--omni-font-display);
    font-weight: 600;
    font-size: .55rem;
    letter-spacing: .07em;
    text-transform: uppercase;
}
/* Turnstile's iframe renders here. Empty and zero-height until a site key is
   configured, so the form spacing is unchanged while it is unset. */
.promo-form__turnstile:not(:empty) {
    display: flex;
    justify-content: center;
    margin: 0 0 .9rem;
}

/* Exclusion notice. Was --omni-parchment-deep on the cream card, about 2:1
   contrast, which is fine print you cannot actually read. An exclusion the
   reader misses is worse than none: they buy the season deal expecting 15% off
   and we have to explain why the code failed. Same muted brown the discount
   email uses for its caveat, so both surfaces agree. */
.promo-card__excl {
    font-family: var(--omni-font-editorial);
    font-style: italic;
    font-size: .92rem;
    color: #6A584A;
    margin: -.75rem 0 1.25rem;
}

/* Between the hamburger breakpoint and roughly 1300px the bar is at its most
   crowded: the full menu is showing but the nav has not yet reached its
   max-width, so there is little slack for the badge. Measured at 1100px the
   bar has about 45px to spare, so the menu tightens here to make the rest of
   the room. Note the hamburger breakpoint moved from 860px to 1024px for this:
   below 1025px the badge pushed the menu onto a second row, and the bar was in
   fact already wrapping on its own under about 900px even before the badge. */
@media (min-width: 1025px) and (max-width: 1300px) {
    .nav { gap: .8rem; }
    .nav__menu { gap: .5rem .78rem; }
    .nav__menu a { letter-spacing: .08em; }
    #siteHeader .site-logo { font-size: 1.42rem; letter-spacing: .11em; }
}

/* At and below the hamburger breakpoint the menu collapses, so the bar holds
   the logo, the badge and the toggle. Order puts the badge between them rather
   than past the hamburger, which is where DOM order would leave it. */
@media (max-width: 1024px) {
    .promo-badge { order: 1; margin-left: auto; margin-right: .6rem; }
    .nav__toggle { order: 2; }
}
/* Small phones: the bar has to hold the logo, the badge and the hamburger in
   about 375px, and the full wording does not fit beside them. Drop to "15% off"
   alone; the aria-label still says what it opens, and the modal carries the
   detail the moment it is tapped. */
@media (max-width: 560px) {
    .promo-badge { padding: .34rem .68rem; }
    .promo-badge__pct { font-size: .76rem; }
    /* The bar now carries three things instead of two. On a 375px phone the
       logo at its full size leaves no room for the badge beside the hamburger,
       so it steps down here. This is the only reason it shrinks. */
    .nav { gap: .6rem; }
    #siteHeader .site-logo { font-size: 1.24rem; letter-spacing: .1em; }
    #siteHeader .site-logo small { font-size: .52rem; letter-spacing: .12em; }
}
@media (max-width: 480px) {
    .promo-card { padding: 2rem 1.35rem 1.6rem; }
    .promo-badge { padding: .3rem .58rem; margin-right: .45rem; }
    .promo-badge__pct { font-size: .7rem; letter-spacing: .02em; }
}
@media (prefers-reduced-motion: reduce) {
    .promo-card, .promo-modal__backdrop { animation: none !important; }
    .promo-badge { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   BUY TICKETS  (side tab + Humanitix collection widget drawer)
   ══════════════════════════════════════════════════════════════════ */

.tickets-drawer[hidden] { display: none !important; }

/* Page scroll lock while the ticket drawer is open.
   overflow:hidden alone does not hold on iOS Safari, so the page scrolls away
   behind the checkout. position:fixed does hold, and --drawer-top preserves
   where the reader was so releasing it does not snap them to the top.
   Set as a class, not inline styles: the lightbox clears body.style.position,
   .top and .width when it closes behind a handover, and would otherwise
   release this lock on its way out. */
body.drawer-locked {
    position: fixed;
    top: var(--drawer-top, 0);
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

/* ── Buy Tickets rail ────────────────────────────────────────────────
   At rest this is the vertical tab it has always been, with the arrow
   nudging toward it. Hovering morphs it: the tab folds away while the panel
   folds open and the rail widens, so it reads as one shape changing rather
   than one element being swapped for another.

   Nothing here scales. An earlier version grew the group with
   transform: scale() on hover, which pushed its right edge off screen. The
   rail is also anchored to right: 0 and widens leftward, so overflowing the
   right edge is structurally impossible rather than merely unlikely.
   ─────────────────────────────────────────────────────────────────── */
.tickets-rail {
    position: fixed;
    right: 0;                  /* widens leftward; cannot overflow the right */
    top: 50%;
    transform: translateY(-50%);
    z-index: 8800;
    width: 3.05rem;            /* just the vertical tab */
    max-width: calc(100vw - 1rem);
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    overflow: hidden;          /* clips whichever half is folded away */
    border-radius: 8px 0 0 8px;
    transition: width .3s ease, background .3s ease, box-shadow .3s ease;
    background: var(--omni-terracotta, #F5956A);
    box-shadow: -.25rem .25rem 1rem rgba(0, 0, 0, .22);
}
.tickets-rail[hidden] { display: none; }

/* Both halves fold with grid-template-rows 0fr -> 1fr, which animates to the
   content's own height without anyone measuring it. Where that is unsupported
   both stay open, which is untidy but not broken. */
.tickets-rail__spineWrap,
.tickets-rail__body {
    display: grid;
    transition: grid-template-rows .3s ease, opacity .22s ease;
}
.tickets-rail__fold { overflow: hidden; min-height: 0; }

/* At rest: tab open, panel folded. */
.tickets-rail__spineWrap { grid-template-rows: 1fr; opacity: 1; }
.tickets-rail__body      { grid-template-rows: 0fr; opacity: 0; }

/* The vertical tab. */
.tickets-rail__spine {
    margin: 0;
    padding: 1.9rem .85rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: center;
    font-family: var(--omni-font-display, 'Cinzel', serif);
    font-weight: 600;
    font-size: .95rem;
    /* In vertical-rl the line box sets the tab's WIDTH, and the rail clips its
       own overflow, so `line-height: normal` was quietly shaving the letters:
       it resolved to ~21.9px inside ~18.4px of space. `normal` is font-defined,
       so the amount lost differed per platform -- the stack starts with Trajan
       Pro, which Macs often have and Windows does not, so each picked a
       different face and clipped by a different amount. An explicit value makes
       the width deterministic everywhere; the trimmed side padding buys the
       slack to make it fit. */
    line-height: 1.15;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--omni-espresso, #2F1A14);
    cursor: pointer;
}

/* Opened: the rail becomes a pale panel and the tab is gone. */
.tickets-rail--open {
    width: 17.6rem;
    overflow-y: auto;
    scrollbar-width: thin;
    background: rgba(251, 247, 240, .97);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--omni-edge, #D6C5A8);
    border-right: 0;
    box-shadow: -.3rem .3rem 1.5rem rgba(16, 11, 7, .22);
    /* keep momentum inside this panel, not on the page behind */
    overscroll-behavior: contain;
}
.tickets-rail--open .tickets-rail__spineWrap { grid-template-rows: 0fr; opacity: 0; }
.tickets-rail--open .tickets-rail__body      { grid-template-rows: 1fr; opacity: 1; }
/* The arrow is a sibling, so it is dimmed by a class on the body instead. */
body.tickets-open .tickets-arrow { opacity: 0 !important; animation: none; }

/* The heading that replaces the vertical tab once open. */
.tickets-rail__head {
    margin: 0;
    padding: .85rem .8rem .65rem;
    text-align: center;
    white-space: nowrap;
    font-family: var(--omni-font-display, 'Cinzel', serif);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--omni-espresso, #2F1A14);
    border-bottom: 1px solid rgba(185, 139, 69, .35);
}

.tickets-rail__body .tickets-group      { margin: .7rem .8rem 0; }
.tickets-rail__body .tickets-list--solo { margin: .6rem .8rem .8rem; }

/* Every Humanitix concert opens the same season drawer, so these rows are one
   control: one hover highlights them all and one click buys. Highlight only,
   no growth, so nothing can push past the window edge. */
.tickets-group {
    display: block;
    padding: .5rem .4rem;
    border: 1px solid rgba(185, 139, 69, .45);
    border-radius: 7px;
    background: rgba(245, 149, 106, .1);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tickets-group:hover,
.tickets-group:focus-visible {
    background: rgba(245, 149, 106, .24);
    border-color: var(--omni-terracotta, #F5956A);
    box-shadow: inset 0 0 0 1px rgba(245, 149, 106, .45);
}
.tickets-group:focus-visible { outline: 2px solid var(--omni-antique-gold); outline-offset: 2px; }

.tickets-list { list-style: none; margin: 0; padding: 0; }

/* Ana Vidovic: sold by City Box Office, so it leaves the site instead of
   opening the drawer. Separated by a rule rather than mixed in. */
.tickets-list--solo {
    padding-top: .55rem;
    border-top: 1px solid rgba(185, 139, 69, .4);
}

.tickets-row { margin: 0; }

.tickets-row__inner {
    display: flex;
    align-items: center;
    gap: .68rem;
    padding: .3rem .35rem;
    border-radius: 5px;
    text-decoration: none;
    color: inherit;
}
a.tickets-row__inner { cursor: pointer; transition: background .18s ease; }
a.tickets-row__inner:hover,
a.tickets-row__inner:focus-visible { background: rgba(185, 139, 69, .2); }
a.tickets-row__inner:focus-visible { outline: 2px solid var(--omni-antique-gold); outline-offset: 1px; }
/* Marks the one row that leaves the site. */
a.tickets-row__inner .tickets-row__name::after { content: " \2197"; opacity: .7; }

.tickets-row__icon {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 25%;
    border: 1px solid var(--omni-edge, #D6C5A8);
    background: var(--omni-cream-outer, #F0EAE0);
}

.tickets-row__text { min-width: 0; line-height: 1.2; }

.tickets-row__name {
    display: block;
    font-family: var(--omni-font-display, 'Cinzel', serif);
    font-size: .92rem;
    letter-spacing: .03em;
    color: var(--omni-espresso, #2F1A14);
    white-space: nowrap;
}
.tickets-row__date {
    display: block;
    font-family: var(--omni-font-body, 'Cormorant Garamond', serif);
    font-size: .88rem;
    color: rgba(54, 35, 27, .72);
}

/* Half-transparent arrow that periodically nudges toward the tab. Fixed rather
   than absolute: it sits outside the rail so the rail's overflow cannot clip
   it, which means it has no positioned ancestor to hang off. */
.tickets-arrow {
    position: fixed;
    right: 3.35rem;
    top: 50%;
    z-index: 8790;
    pointer-events: none;
    opacity: 0;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--omni-terracotta);
    transition: opacity .2s ease;
    animation: ticketsArrow 6s ease-in-out infinite;
}
@keyframes ticketsArrow {
    0%, 62%   { opacity: 0; transform: translate(-1.1rem, -50%); }
    70%       { opacity: .55; transform: translate(0, -50%); }
    78%       { opacity: .3;  transform: translate(-.55rem, -50%); }
    86%       { opacity: .55; transform: translate(0, -50%); }
    100%      { opacity: 0; transform: translate(-1.1rem, -50%); }
}
.tickets-drawer {
    position: fixed;
    inset: 0;
    z-index: 9100;
    display: flex;
    justify-content: flex-end;
}
.tickets-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(35, 22, 16, .5);
    backdrop-filter: blur(2px);
    animation: promoFade .3s ease both;
}
.tickets-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(31rem, 100%);
    height: 100%;
    background: var(--omni-cream-card);
    box-shadow: -1rem 0 3rem rgba(0, 0, 0, .32);
    animation: ticketsSlide .35s cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes ticketsSlide { from { transform: translateX(100%) } to { transform: none } }

.tickets-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.1rem;
    border-bottom: 1px solid var(--omni-edge);
    background: var(--omni-cream-outer);
}
.tickets-panel__title {
    font-family: var(--omni-font-display);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--omni-gold-on-light);
    margin: 0;
}
.tickets-panel__close {
    background: none;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--omni-parchment-deep);
    cursor: pointer;
    padding: .1rem .35rem;
}
.tickets-panel__close:hover { color: var(--omni-espresso); }

/* iOS Safari does NOT scroll iframes internally. So the DRAWER scrolls and the
   iframe is left at its natural (widget-set) height. Forcing the iframe to
   height:100% and scrolling it internally breaks iPad: Humanitix's sticky
   "Continue" bar loses its viewport and floats into the middle of the panel. */
.tickets-panel__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--omni-cream-card);
    /* keep momentum inside this panel, not on the page behind */
    overscroll-behavior: contain;
}
.tickets-panel__body iframe {
    display: block;
    width: 100%;
    border: 0;
}
.tickets-panel__loading {
    padding: 2.5rem 1.5rem;
    text-align: center;
    font-family: var(--omni-font-editorial);
    font-size: 1rem;
    color: var(--omni-parchment-deep);
}

/* Narrow screens. The tab is all that shows until it is tapped, so only the
   open panel needs trimming, and it takes a little less width. */
@media (max-width: 600px) {
    .tickets-rail--open { width: 13.6rem; }
    .tickets-rail__spine { padding: 1.6rem .82rem; font-size: .84rem; }
    .tickets-rail__head { font-size: .72rem; letter-spacing: .12em; padding: .65rem .7rem .55rem; }
    .tickets-row__icon { width: 2.15rem; height: 2.15rem; }
    .tickets-row__name { font-size: .74rem; }
    .tickets-row__date { font-size: .74rem; }
    .tickets-arrow { display: none; }
    .tickets-panel { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .tickets-panel, .tickets-drawer__backdrop { animation: none !important; }
    .tickets-arrow { animation: none !important; display: none; }
    /* Morph instantly rather than gliding. */
    .tickets-rail,
    .tickets-rail__spineWrap,
    .tickets-rail__body { transition: none; }
}



/* Short viewports (landscape phones). Nine rows at full size do not fit, so
   the open panel tightens up; past that its own max-height and internal
   scroll take over rather than letting it run off the screen. */
@media (max-height: 620px) {
    .tickets-rail__spine { padding: 1.3rem .8rem; font-size: .8rem; letter-spacing: .18em; }
    .tickets-rail__head { padding: .55rem .7rem .5rem; font-size: .7rem; }
    .tickets-rail__body .tickets-group { margin: .5rem .55rem 0; }
    .tickets-rail__body .tickets-list--solo { margin: .45rem .55rem .55rem; }
    /* Trimmed until the whole season plus Ana Vidovic fit without scrolling.
       Measured on a 844x390 landscape phone the panel was 25px over, which put
       the one City Box Office concert below the fold of a panel most people
       would not think to scroll. */
    .tickets-row__inner { padding: .12rem .25rem; gap: .4rem; }
    .tickets-row__icon { width: 1.55rem; height: 1.55rem; }
    .tickets-row__name, .tickets-row__date { font-size: .64rem; }
    .tickets-row__text { line-height: 1.1; }
    .tickets-list--solo { margin-top: .35rem; padding-top: .35rem; }
    .tickets-arrow { display: none; }
    .promo-card { padding: 1.6rem 1.5rem 1.4rem; }
}

/* ── Concert cards: whole-poster mode ────────────────────────────────
   Toggled by CARDS_SHOW_WHOLE_POSTER in main.js, which adds this class.
   The default card crops each poster to 3:4 and zooms into a tuned focal
   point, which cuts off artwork and text. Here the poster is fitted whole
   instead, and the blurred copy already sitting behind it fills the
   leftover space so nothing reads as a letterbox bar.
   ─────────────────────────────────────────────────────────────────── */
.slider--whole-poster .slider__card:not(.slider__card--zoomed) .slider__img-wrap img {
    object-fit: contain;
    /* The per-card focal point only makes sense when cropping. */
    object-position: center center !important;
    transform: none !important;
}

/* Lift the backdrop slightly: it is now visible around the poster edges
   rather than just bleeding past them. */
.slider--whole-poster .slider__card:not(.slider__card--zoomed) .slider__img-wrap::before {
    opacity: 0.85;
}

/* Cards listed in CARDS_KEEP_ZOOM keep the original cropped-and-zoomed framing,
   so they deliberately inherit the default .slider__img-wrap img rules above:
   object-fit: cover, the tuned focal point, and the JS parallax transform. */


/* ── Archive insight panel ───────────────────────────────────────────
   A rotating note, bottom-left, drawn from data/insights.js. Every line
   is a documented concert from Omni's own archive.

   Each insight runs one full cycle: fades in from below, holds, then
   drifts upward and disappears. JS swaps the text during the gap and
   restarts the animation, so cards rise and vanish one after another.

   The gold underglow matches the 15% OFF badge (see .promo-badge /
   promoBreathe): same burnished gold, same slow breathe.
   Hidden below 900px so it never covers content on a phone.
   ─────────────────────────────────────────────────────────────────── */
.insight {
    position: fixed;
    left: 1.75rem;
    bottom: 2.25rem;
    z-index: 60;
    width: min(20rem, calc(100vw - 3.5rem));
    padding: 1.05rem 2.1rem 1rem 1.15rem;
    background: rgba(251, 247, 240, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--omni-edge);
    border-left: 3px solid var(--omni-antique-gold);
    border-radius: 3px;
    opacity: 0;
    /* Underglow only; the cycle animation owns opacity + transform. */
    box-shadow: 0 .55rem 1.5rem rgba(0, 0, 0, .26);
    animation: insightGlow 2.6s ease-in-out infinite;
    pointer-events: none;
    /* Eases the hover growth. Only `scale` is transitioned: the glow animation
       owns box-shadow and the cycle owns transform, so anything else declared
       here would be overridden without warning. */
    transition: scale .28s ease;
}

/* One pass: in from below, hold, then rise away. */
.insight.is-cycling {
    /* linear, so the rise is one constant drift rather than easing to a stop */
    animation: insightCycle 11s linear forwards,
               insightGlow 2.6s ease-in-out infinite;
    pointer-events: auto;
}

/* The card drifts upward for its whole life: it fades in near the bottom,
   keeps rising the entire time it is readable, then fades out as it clears
   the top of its travel. translateY moves a constant 90px across the run
   (+30 to -60), so with linear timing the motion never stalls. */
@keyframes insightCycle {
      0% { opacity: 0; transform: translateY(30px); }
     10% { opacity: 1; transform: translateY(21px); }
     85% { opacity: 1; transform: translateY(-46px); }
    100% { opacity: 0; transform: translateY(-60px); }
}

/* Same warm gold pulse as the promo badge, minus the scale. */
@keyframes insightGlow {
    0%, 100% { box-shadow: 0 .55rem 1.5rem rgba(0, 0, 0, .26); }
    50%      { box-shadow: 0 .7rem 2rem rgba(169, 121, 61, .45); }
}

/* Hovering grows the card without stopping it: the drift upward continues, so
   the card still rises and retires on schedule and the reader is never left
   holding a card that will not move on.

   The growth uses the standalone `scale` property, not `transform: scale()`.
   The cycle animation owns `transform` outright and would override any
   transform declared here (same trap as the tickets tab further down), but
   `scale` is its own property and composes with the animated transform
   instead of competing with it. */
.insight:hover,
.insight:focus-within { scale: 1.075; }

/* Grow from the anchored corner, otherwise scaling walks the card diagonally
   away from the bottom-left position it is pinned to. */
.insight { transform-origin: left bottom; }

.insight__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    cursor: pointer;
}
.insight__link:focus-visible {
    outline: 2px solid var(--omni-antique-gold);
    outline-offset: 3px;
}
/* Above the stretched link, so dismissing the card still works. */
.insight__close { z-index: 2; }

.insight__eyebrow {
    margin: 0 0 .18rem;
    font-family: var(--omni-font-display, 'Cinzel', serif);
    font-size: .625rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--omni-gold-on-light);
}
/* Artist icon sits beside the name. When Omni has no licensed photo for an
   artist the img stays hidden and the row collapses to just the name, which
   is exactly how the card looked before icons existed. */
.insight__row {
    display: flex;
    /* Top-aligned, not centred: the photo is a column beside the note, so its
       top edge should line up with the season line rather than float against
       the middle of a block of text. */
    align-items: flex-start;
    gap: .75rem;
}
.insight__text {
    min-width: 0;          /* lets long venue names wrap instead of pushing wide */
    flex: 1 1 auto;
}
.insight__icon {
    flex: 0 0 auto;
    width: 3.6rem;
    /* Square, and tall enough to span the season line plus the artist name. */
    height: 3.6rem;
    border-radius: 50%;
    object-fit: cover;
    /* Press shots frame the face above centre, so bias the crop upward. */
    object-position: center 25%;
    border: 1px solid var(--omni-antique-gold);
    box-shadow: 0 1px 5px rgba(16, 11, 7, .18);
    background: var(--omni-cream-outer);
}
.insight__icon[hidden] { display: none; }

.insight__headline {
    margin: 0;
    font-family: var(--omni-font-display, 'Cinzel', serif);
    font-size: 1.02rem;
    line-height: 1.25;
    color: var(--omni-espresso);
}
.insight__detail {
    margin: 0;
    font-family: var(--omni-font-body, 'Cormorant Garamond', serif);
    font-size: .9rem;
    line-height: 1.42;
    color: var(--omni-umber);
}
.insight__tagline {
    margin: .5rem 0 0;
    padding-top: .5rem;
    border-top: 1px solid rgba(185, 139, 69, .28);
    font-family: var(--omni-font-body, 'Cormorant Garamond', serif);
    font-style: italic;
    font-size: .88rem;
    line-height: 1.4;
    color: var(--omni-gold-on-light);
}
.insight__close {
    position: absolute;
    top: .3rem;
    right: .45rem;
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
    color: #9a8878;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color .2s ease;
}
.insight__close:hover { color: var(--omni-espresso); }
.insight__close:focus-visible {
    outline: 2px solid var(--omni-antique-gold);
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .insight { display: none; }
}
/* No drifting or pulsing for readers who ask for reduced motion: the card
   simply appears, holds, and is replaced. */
@media (prefers-reduced-motion: reduce) {
    .insight { animation: none; }
    .insight.is-cycling {
        animation: none;
        opacity: 1;
        transform: none;
    }
    /* The hover growth needs no special case here: `scale` is its own property,
       so it still applies with the animation switched off. */
}

/* The fixed "Buy Tickets" side tab sits at right/middle with a very high
   z-index, which is exactly where the lightbox's right-hand next arrow lives:
   the two overlapped and the tab swallowed the arrow's clicks. While a concert
   card is expanded the tab is redundant anyway, since the card carries its own
   Reserve Tickets CTA, so slide it out of the way. */
body.lightbox-open .tickets-rail {
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
/* Stop the group pulsing behind the overlay too: it is invisible at opacity 0
   but would otherwise keep compositing for nothing. */
body.lightbox-open .tickets-group { animation-play-state: paused; }

/* ── Hero season banner ──────────────────────────────────────────────
   The 26-27 banner replaces the "Dynamite Guitars" wordmark. It stays
   inside the h1, so the type rules above have to be neutralised: they
   are for text, and would otherwise add a text-shadow and letter
   spacing around an image. The source art is 600x240, so the width is
   capped there rather than stretched, which would only blur it.
   ─────────────────────────────────────────────────────────────────── */
.hero__title--banner {
    font-size: 0;            /* no stray line-box under the image */
    line-height: 0;
    letter-spacing: 0;
    text-shadow: none;
    margin-top: 0.9rem;      /* the logo mark that used to sit above is gone */
    /* Break out of .hero__inner (864px cap, 56px padding = a 752px column) so
       the banner can run wider than the body copy. .hero__inner is a centring
       flex column, so an over-wide child is centred for us and overflows both
       sides evenly: no margin/transform trick needed, and flex-shrink:0 is what
       stops it being squeezed back to the text measure. */
    width: min(900px, calc(100vw - 2.5rem));
    flex-shrink: 0;
    max-width: none;
}
.hero__banner-link {
    display: inline-block;
    /* An explicit width is required, not just max-width: this is an
       inline-block, so it shrink-wraps to the img's intrinsic 600px and a
       max-width alone never engages.
       Source art is only 600x240, so anything past that is an upscale and the
       script lettering softens. 900px is the practical ceiling before it looks
       obviously soft; a higher-resolution export would let this go wider. */
    width: min(900px, 100%);
    border-radius: 4px;
    outline-offset: 4px;
    transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .3s ease;
}
.hero__banner {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}
/* It scrolls to the concerts, so give it the same "this is clickable" hint
   the cards use rather than leaving it looking like decoration. */
.hero__banner-link:hover,
.hero__banner-link:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 .75rem 2rem rgba(169, 121, 61, .38);
}
.hero__banner-link:focus-visible {
    outline: 2px solid var(--omni-antique-gold);
}
@media (prefers-reduced-motion: reduce) {
    .hero__banner-link { transition: none; }
    .hero__banner-link:hover,
    .hero__banner-link:focus-visible { transform: none; }
}

/* ── Lightbox: artist headshot beside the name ──────────────────────
   Omni holds the right to use these photos under its artist contracts.
   The avatar hides itself when no photo exists, so the title keeps its
   position and a missing file never leaves a hole.
   ─────────────────────────────────────────────────────────────────── */
.lightbox__artist {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lightbox__avatar {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--gold, #B98B45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    background: #EFE6D5;
}

.lightbox__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Press shots are framed for print, so the face sits above centre. */
    object-position: center 28%;
    display: block;
}

.lightbox__artist .lightbox__title { margin: 0; }

@media (max-width: 700px) {
    .lightbox__artist { gap: 12px; }
    .lightbox__avatar { flex-basis: 54px; width: 54px; height: 54px; }
}

/* ════════════════════════════════════════════════════════════════════
   CONCERT ARCHIVE PAGE (archive.html)
   A standalone page, deliberately outside the home page's single-scroll
   flow. Newest concert first, with a year rail that tracks the scroll.
   ════════════════════════════════════════════════════════════════════ */

.archive-page {
    background: var(--omni-cream-outer, #F0EAE0);
    /* The global rule is body { overflow-x: hidden }, which makes the body its
       own scroll container: window.scrollY then stays at 0 and the year rail has
       nothing to track. `clip` contains horizontal overflow the same way without
       creating a scroll container, so the document scrolls normally again. */
    overflow-x: clip;
}
@supports not (overflow-x: clip) {
    .archive-page { overflow-x: visible; }
}

.archive {
    max-width: 72rem;
    margin: 0 auto;
    padding: 8.5rem 1.5rem 5rem;   /* clears the fixed site header */
}

.archive__head { text-align: center; margin-bottom: 3rem; }

.archive__title {
    font-family: var(--omni-font-display, 'Cinzel', serif);
    font-weight: 500;
    font-size: clamp(2rem, 5vw, 3.25rem);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--omni-espresso, #2F1A14);
    margin: .4rem 0 .6rem;
}

.archive__intro {
    max-width: 34em;
    margin: 0 auto;
    font-family: var(--omni-font-body, 'Cormorant Garamond', serif);
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--omni-umber, #36231B);
}

.archive__stats {
    margin: .9rem 0 0;
    font-family: var(--omni-font-display, 'Cinzel', serif);
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--omni-gold-on-light, #785218);
}

/* Rail beside the list. */
.archive__body {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 2rem;
    align-items: start;
}

.timeline {
    position: sticky;
    top: 7.5rem;
    max-height: calc(100vh - 10rem);
    max-height: calc(100dvh - 10rem);
    overflow-y: auto;
    scrollbar-width: none;
    padding-left: .75rem;
    /* keep momentum inside this panel, not on the page behind */
    overscroll-behavior: contain;
}
.timeline::-webkit-scrollbar { display: none; }

.timeline__line {
    position: absolute;
    left: 0;
    top: .4rem;
    bottom: .4rem;
    width: 1px;
    background: linear-gradient(to bottom,
        transparent, rgba(185, 139, 69, .55) 12%, rgba(185, 139, 69, .55) 88%, transparent);
}

.timeline__years { list-style: none; margin: 0; padding: 0; }

.timeline__year {
    display: block;
    position: relative;
    padding: .3rem 0 .3rem .85rem;
    font-family: var(--omni-font-display, 'Cinzel', serif);
    font-size: .74rem;
    letter-spacing: .1em;
    color: rgba(54, 35, 27, .45);
    text-decoration: none;
    transition: color .22s ease, transform .22s ease;
}

/* The dot on the rail. It fills and grows for the year in view. */
.timeline__year::before {
    content: "";
    position: absolute;
    left: -.28rem;
    top: 50%;
    width: .38rem;
    height: .38rem;
    margin-top: -.19rem;
    border-radius: 50%;
    background: var(--omni-cream-outer, #F0EAE0);
    border: 1px solid rgba(185, 139, 69, .6);
    transition: transform .22s ease, background .22s ease;
}

.timeline__year:hover { color: var(--omni-gold-on-light, #785218); }

.timeline__year.is-active {
    color: var(--omni-espresso, #2F1A14);
    font-weight: 600;
    transform: translateX(2px);
}
.timeline__year.is-active::before {
    background: var(--omni-antique-gold, #B98B45);
    transform: scale(1.75);
}

/* Concert list. */
.archive__list { list-style: none; margin: 0; padding: 0; }

.archive__year {
    scroll-margin-top: 7.5rem;
    margin: 2.4rem 0 .85rem;
    border-bottom: 1px solid rgba(185, 139, 69, .3);
}
.archive__list > .archive__year:first-child { margin-top: 0; }

.archive__year-num {
    font-family: var(--omni-font-display, 'Cinzel', serif);
    font-size: 1.45rem;
    letter-spacing: .12em;
    color: var(--omni-gold-on-light, #785218);
}

.concert {
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: .6rem .7rem;
    border-radius: 4px;
    transition: background .2s ease;
}
.concert:hover { background: rgba(251, 247, 240, .8); }

.concert__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 25%;   /* press shots frame the face high */
    border: 1px solid var(--omni-edge, #D6C5A8);
    background: var(--omni-cream-card, #FBF7F0);
}
/* The drawn guitar stands in for a missing photograph. It is a flat graphic
   rather than a portrait, so it gets `contain` and no upward crop bias: the
   face-framing rules above would clip the headstock off. */
.concert__icon--fallback {
    object-fit: contain;
    object-position: center;
    opacity: .75;
}

.concert__body { min-width: 0; }

.concert__artist {
    margin: 0;
    font-family: var(--omni-font-display, 'Cinzel', serif);
    font-size: .95rem;
    line-height: 1.3;
    color: var(--omni-espresso, #2F1A14);
}


.concert__meta {
    margin: .12rem 0 0;
    font-family: var(--omni-font-body, 'Cormorant Garamond', serif);
    font-size: .92rem;
    color: rgba(54, 35, 27, .78);
}
.concert__venue::before { content: " · "; opacity: .6; }

.concert__season {
    font-family: var(--omni-font-display, 'Cinzel', serif);
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(120, 82, 24, .9);
    white-space: nowrap;
}

/* Phones: the rail moves to the top and runs across, and the season tag
   drops away so the artist and date keep the full width. */
@media (max-width: 760px) {
    .archive { padding-top: 7rem; }
    .archive__body { grid-template-columns: 1fr; gap: 1rem; }

    .timeline {
        position: sticky;
        top: 4.6rem;
        z-index: 5;
        max-height: none;
        overflow-x: auto;
        padding: .5rem 0;
        background: rgba(240, 234, 224, .95);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        border-bottom: 1px solid rgba(185, 139, 69, .3);
    }
    .timeline__line { display: none; }
    .timeline__years { display: flex; gap: .35rem; }
    .timeline__year { padding: .25rem .5rem; }
    .timeline__year::before { display: none; }
    .timeline__year.is-active {
        background: var(--omni-antique-gold, #B98B45);
        color: #FCFAF5;
        border-radius: 3px;
        transform: none;
    }

    .concert { grid-template-columns: 2.5rem 1fr; gap: .75rem; }
    .concert__icon { width: 2.5rem; height: 2.5rem; }
    .concert__season { display: none; }
}

/* ── Nav dropdown (the Concerts tab, on both pages) ───────────────── */
.nav__has-sub { position: relative; }

.nav__sub {
    list-style: none;
    margin: 0;
    padding: .4rem 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 11rem;
    background: rgba(251, 247, 240, .98);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--omni-edge, #D6C5A8);
    border-radius: 4px;
    box-shadow: 0 10px 26px rgba(16, 11, 7, .18);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 80;
}

.nav__has-sub:hover > .nav__sub,
.nav__has-sub:focus-within > .nav__sub,
.nav__has-sub.is-open > .nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav__sub a {
    display: block;
    padding: .5rem 1.1rem;
    font-family: var(--omni-font-display, 'Cinzel', serif);
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--omni-umber, #36231B);
    text-decoration: none;
    white-space: nowrap;
}
.nav__sub a:hover,
.nav__sub a[aria-current="page"] {
    background: rgba(185, 139, 69, .14);
    color: var(--omni-gold-on-light, #785218);
}

/* Caret. On a phone this becomes the tap target that opens the submenu. */
.nav__sub-toggle {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0 .1rem;
    margin-left: .28rem;
    cursor: pointer;
    line-height: 1;
    color: inherit;
    /* The caret is a 13x10px glyph. That is fine to click and far too small to
       tap: Apple asks for 44x44 and Android for 48x48. The invisible overlay
       below gives it a real tap target without changing how it looks or
       pushing the nav around. */
    position: relative;
}
.nav__sub-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}
/* Only where a finger is doing the tapping. On a mouse this would sit over the
   neighbouring link and steal its clicks for no benefit. */
@media (hover: hover) and (pointer: fine) {
    .nav__sub-toggle::before { display: none; }
}
.nav__sub-toggle::after {
    content: "";
    display: inline-block;
    width: .34rem;
    height: .34rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    opacity: .7;
}

@media (max-width: 900px) {
    /* Stacked nav: the submenu becomes an indented block rather than a popover,
       since there is nowhere for a floating panel to sit. */
    .nav__sub {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        display: none;
        min-width: 0;
        background: none;
        border: 0;
        box-shadow: none;
        padding: .1rem 0 .3rem;
    }
    .nav__has-sub.is-open > .nav__sub { display: block; transform: none; }
    .nav__sub a { padding: .4rem 0 .4rem 1rem; opacity: .9; }
}

.site-footer {
    padding: 2.5rem 1.5rem 3rem;
    text-align: center;
    border-top: 1px solid rgba(185, 139, 69, .3);
}
.site-footer__line {
    margin: 0 0 .35rem;
    font-family: var(--omni-font-display, 'Cinzel', serif);
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--omni-gold-on-light, #785218);
}
.site-footer__meta {
    margin: .2rem 0;
    font-family: var(--omni-font-body, 'Cormorant Garamond', serif);
    font-size: .92rem;
    color: rgba(54, 35, 27, .8);
}
.site-footer__meta a { color: var(--omni-gold-on-light, #785218); }

/* ── Condensed-header contrast fixes ─────────────────────────────────
   `#siteHeader.is-condensed .nav__menu a` repaints every nav link pale
   ivory so it stays legible over the dark sections. That rule carries an
   id, so it outranks both `.nav__sub a` and `.nav__cta` and dragged two
   things down with it:
     - the Concerts submenu, which sits on its own cream popover, so pale
       ivory text on cream was effectively invisible;
     - the Buy Tickets button, whose terracotta fill wants dark text.
   Both are restored below at matching specificity.
   ─────────────────────────────────────────────────────────────────── */

/* Desktop only. Below 900px the submenu drops its background and sits
   inside the dark mobile drawer, where the pale ivory is correct. */
@media (min-width: 901px) {
    #siteHeader.is-condensed .nav__menu .nav__sub a {
        color: var(--omni-umber, #36231B);
        text-shadow: none;
    }
    #siteHeader.is-condensed .nav__menu .nav__sub a:hover,
    #siteHeader.is-condensed .nav__menu .nav__sub a[aria-current="page"] {
        color: var(--omni-gold-on-light, #785218);
    }
}

/* The button is terracotta at every width, so its label stays dark
   (espresso is the brand's black, and matches the uncondensed state). */
#siteHeader.is-condensed .nav__menu a.nav__cta,
#siteHeader.is-condensed .nav__menu a.nav__cta:hover {
    color: var(--omni-espresso);
    text-shadow: none;
}


/* ── Ticket panel scrim ──────────────────────────────────────────────
   Blurs and dims everything behind the expanded ticket panel so the
   season list is the only thing in play.

   z-index 8780 puts it under the nudging arrow (8790) and the rail
   itself (8800), so both stay crisp above it. The discount badge sits
   at 8900, above that layer, so it has to be dimmed explicitly or it
   would hang over the darkened page untouched.
   ─────────────────────────────────────────────────────────────────── */
.tickets-scrim {
    position: fixed;
    inset: 0;
    z-index: 8780;
    background: rgba(35, 22, 16, .42);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}
body.tickets-focus .tickets-scrim {
    opacity: 1;
    pointer-events: auto;   /* clicking the scrim falls through to the close handler */
}
body.tickets-focus .promo-badge {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .tickets-scrim { transition: none; }
}

/* Photographer credits in the archive footer. Creative Commons and GFDL licences
   require attribution; that duty is the photographer's, not the artist's, so it
   is not covered by Omni's artist contracts. Folded into a <details> so the
   obligation is met without a wall of names dominating the footer. */
.site-footer__credits {
    margin-top: .9rem;
    text-align: left;
}
.site-footer__credits > summary {
    cursor: pointer;
    font-family: var(--omni-font-display, 'Cinzel', serif);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--omni-gold-on-light, #785218);
}
.site-footer__credits .site-footer__meta {
    margin-top: .5rem;
    font-size: .72rem;
    line-height: 1.65;
    opacity: .85;
}
.site-footer__credits a { color: inherit; }


/* ── Stats band: lead figure ─────────────────────────────────────────
   The audience number is the headline, so it takes the whole first row
   and is set larger than the four supporting stats below it.
   ─────────────────────────────────────────────────────────────────── */
.stat--lead {
    grid-column: 1 / -1;
    padding-bottom: clamp(1rem, 2.5vw, 1.5rem);
    border-bottom: 1px solid var(--omni-edge);
}
.stat--lead .stat__num {
    /* Clearly larger than the supporting four, not marginally: the base size is
       already 3.6rem, so the earlier 3.9rem cap read as a rounding error rather
       than a headline. */
    font-size: clamp(3.2rem, 8vw, 5.2rem);
}
.stat--lead .stat__label {
    font-size: .78rem;
    letter-spacing: .2em;
}

/* Below the four-across breakpoint the supporting stats pair up, and the
   lead keeps its own row. */
@media (max-width: 760px) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
    .stats { grid-template-columns: 1fr; }
    .stat--lead { padding-bottom: .9rem; }
}