/* ════════════════════════════════════════════════════════════════════
   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;

    /* 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;
}

.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);
}

/* ─── HEADER ──────────────────────────────────────────────────────── */
#siteHeader {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(47, 26, 20, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--omni-ivory);
    border-bottom: 1px solid rgba(185, 139, 69, 0.32);
    padding-top: var(--safe-t);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

#siteHeader.is-condensed {
    background: rgba(33, 23, 18, 0.97);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    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;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem 1.5rem;
}

.nav__menu a {
    position: relative;
    color: rgba(226, 214, 194, 0.86);
    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: 0 2px 8px rgba(0, 0, 0, 0.42);
    transition: color 0.2s ease;
}

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

.nav__menu a:not(.nav__cta):hover,
.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 */
.nav__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0;
    background: none;
    border: 1px solid rgba(185, 139, 69, 0.4);
    border-radius: var(--omni-radius-sm);
    cursor: pointer;
}

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

#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 ────────────────────────────────────────────────────────── */
.hero {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background: var(--omni-page-night);
    color: var(--omni-ivory);
    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;
    }
}

.hero__backdrop {
    position: absolute;
    inset: -8%;
    background-image:
        radial-gradient(120% 90% at 50% 0%, rgba(47, 26, 20, 0.15), rgba(21, 17, 13, 0.92) 72%),
        url("/assets/images/26 -27 Posters/Xuefei.png");
    background-size: cover;
    background-position: center 18%;
    filter: blur(22px) brightness(0.42) saturate(1.05);
    transform: scale(1.12);
    z-index: 0;
    will-change: transform;
}

.hero__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(21, 17, 13, 0.55) 0%, rgba(21, 17, 13, 0.35) 45%, rgba(21, 17, 13, 0.82) 100%);
    z-index: 1;
}

.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));
}

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

.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-ivory);
    text-shadow: var(--omni-text-shadow-dark);
    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-muted-ivory);
    margin-top: 1.15rem;
    text-wrap: balance;
}

.hero__divider {
    margin-block: clamp(1.5rem, 3vw, 2.25rem) 0;
}

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

.hero__earlybird {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem 0.9rem;
    margin-top: clamp(1.5rem, 3vw, 2.2rem);
    padding: 0.6rem 1.4rem;
    border: 1px solid rgba(185, 139, 69, 0.5);
    border-radius: var(--omni-radius-sm);
    background: rgba(185, 139, 69, 0.08);
}

.hero__earlybird-tag {
    font-family: var(--omni-display);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: var(--omni-track-md);
    text-transform: uppercase;
    color: var(--omni-muted-ivory);
}

.hero__earlybird-deadline {
    font-family: var(--omni-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: var(--omni-track-sm);
    text-transform: uppercase;
    color: var(--omni-terracotta);
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.85rem 1rem;
    margin-top: clamp(2rem, 4vw, 2.9rem);
}

.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(185, 139, 69, 0.5);
    border-radius: 14px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

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

.hero__scroll-line {
    width: 2px;
    height: 8px;
    border-radius: 2px;
    background: var(--omni-antique-gold);
    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 {
    flex: 0 0 14.96vw;
    min-width: 122px;
    cursor: pointer;
}

.slider__img-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    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;
}

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

.prize {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--omni-cream-card);
    border: 1px solid rgba(185, 139, 69, 0.4);
    border-radius: var(--omni-radius-md);
    padding: clamp(1.3rem, 2.5vw, 1.7rem);
    box-shadow: 0 1px 2px rgba(60, 38, 24, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.prize:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(60, 38, 24, 0.16);
}

.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;
    color: var(--omni-burnished-gold);
}

.prize__value {
    font-family: var(--omni-display);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: var(--omni-track-sm);
    color: var(--omni-sage);
}

.prize__desc {
    font-family: var(--omni-editorial);
    font-size: 1.02rem;
    line-height: 1.4;
    color: var(--omni-umber);
    margin-top: auto;
    padding-top: 0.3rem;
}

.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;
}

.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;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 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) ─────────────────────────────────── */
.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);
}

.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;
}

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

.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;
    }

    .lightbox__img {
        max-height: 76vh;
    }

    .lightbox__info {
        max-height: 76vh;
        overflow-y: auto;
        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: 860px) {
    :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;
    }

    .nav__menu a:not(.nav__cta) {
        display: block;
        padding: 0.95rem 0.4rem;
        font-size: 0.82rem;
    }

    .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;
    }

    .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;
    }
}