/* ════════════════════════════════════════════════════════════════════
   MARIO TO · single-page
   Palette: ink / parchment / brass (warm editorial) on the reused engine.
   Fonts: Fraunces (display) · Inter (body).
   ════════════════════════════════════════════════════════════════════ */

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

/* ─── DESIGN TOKENS ───────────────────────────────────────────────── */
:root {
    /* Darks */
    --ink-night:   #14161b;   /* hero, dark sections */
    --ink-body:    #1b1e24;   /* alternate dark */
    --ink-footer:  #0f1115;
    --ink-card:    #22262e;   /* raised card on dark */

    /* Lights */
    --paper-outer: #f4efe4;   /* cream section bg */
    --paper-card:  #fbf8f1;   /* raised card on cream */
    --paper-edge:  #e4dccb;

    /* Text */
    --text-dark:   #23262d;   /* on cream */
    --text-muted:  #6f6a5d;   /* on cream, secondary */
    --text-light:  #ece6d8;   /* on dark */
    --text-dim:    #aaa491;   /* on dark, secondary */

    /* Accent — brass/gold (two tones for contrast on dark vs light) */
    --brass:        #b0894a;  /* accent on dark */
    --brass-deep:   #8a6a2f;  /* accent text on light (AA) */
    --brass-bright: #cda968;  /* hover / highlights on dark */

    /* Fonts */
    --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Tracking */
    --track-sm: 0.12em;
    --track-md: 0.2em;
    --track-lg: 0.3em;

    /* Spacing */
    --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
    --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

    /* Radii / shadow */
    --radius: 6px;
    --shadow-card: 0 18px 40px rgba(20, 18, 12, 0.14);
    --shadow-dark: 0 22px 60px rgba(0, 0, 0, 0.45);

    /* Layout */
    --header-h: 80px;
    --content-max: 1140px;
    --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(--font-body);
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-dark);
    background: var(--paper-outer);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.skip-link {
    position: absolute; left: -999px; top: 0;
    background: var(--ink-night); color: var(--text-light);
    padding: 10px 16px; z-index: 200; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

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

/* ─── SHARED PRIMITIVES ───────────────────────────────────────────── */
.section { position: relative; padding: var(--sp-20) 0; scroll-margin-top: var(--header-h); }
.section--cream { background: var(--paper-outer); color: var(--text-dark); }
.section--dark  { background: var(--ink-body);   color: var(--text-light); }

.section__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 48px);
    padding-left: max(clamp(20px,5vw,48px), var(--safe-l));
    padding-right: max(clamp(20px,5vw,48px), var(--safe-r));
}
.section__inner--center { text-align: center; }

.eyebrow {
    font-family: var(--font-body);
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: var(--track-lg); text-transform: uppercase;
    color: var(--brass-deep);
    margin-bottom: var(--sp-4);
}
.section--dark .eyebrow { color: var(--brass-bright); }

.section-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
}

.section-intro {
    max-width: 60ch;
    margin-top: var(--sp-6);
    color: var(--text-muted);
    font-size: 1.05rem;
}
.section--dark .section-intro { color: var(--text-dim); }
.section__inner--center .section-intro { margin-left: auto; margin-right: auto; }

.divider {
    font-size: 0.8rem; letter-spacing: 0.5em;
    color: var(--brass); opacity: 0.7;
    margin: var(--sp-6) 0 var(--sp-10);
}
.section__inner--center .divider { text-align: center; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-body); font-weight: 600;
    font-size: 0.82rem; letter-spacing: var(--track-sm); text-transform: uppercase;
    padding: 14px 26px; border-radius: 100px;
    min-height: 44px; cursor: pointer;
    border: 1.5px solid transparent;
    transition: transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary   { background: var(--brass); color: #1a140a; }
.btn--primary:hover { background: var(--brass-bright); }
.btn--secondary { background: transparent; color: var(--brass-deep); border-color: var(--brass); }
.section--dark .btn--secondary { color: var(--brass-bright); }
.btn--secondary:hover { background: var(--brass); color: #1a140a; }
.btn--ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn--ghost:hover { background: rgba(176,137,74,0.14); }

/* ─── HEADER / NAV ────────────────────────────────────────────────── */
#siteHeader {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    height: var(--header-h);
    padding-top: var(--safe-t);
    display: flex; align-items: center;
    background: rgba(20, 22, 27, 0);
    transition: background .3s ease, height .3s ease, box-shadow .3s ease;
}
#siteHeader.is-condensed {
    background: rgba(16, 18, 22, 0.92);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    height: calc(64px + var(--safe-t));
    box-shadow: 0 1px 0 rgba(176,137,74,0.18);
}
.nav {
    width: 100%; max-width: var(--content-max);
    margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px);
    padding-left: max(clamp(20px,5vw,48px), var(--safe-l));
    padding-right: max(clamp(20px,5vw,48px), var(--safe-r));
    display: flex; align-items: center; justify-content: space-between;
}
.site-logo { display: flex; flex-direction: column; line-height: 1.1; color: var(--text-light); }
.logo-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.01em; }
.logo-role { font-family: var(--font-body); font-size: 0.6rem; font-weight: 500; letter-spacing: var(--track-md); text-transform: uppercase; color: var(--brass-bright); }

.nav__menu { list-style: none; display: flex; align-items: center; gap: var(--sp-6); }
.nav__menu a[data-nav]:not(.nav__cta) {
    color: var(--text-light); font-size: 0.8rem; font-weight: 500;
    letter-spacing: var(--track-sm); text-transform: uppercase;
    padding: 6px 0; position: relative;
}
.nav__menu a[data-nav]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
    background: var(--brass-bright); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav__menu a[data-nav]:hover::after,
.nav__menu a.is-active::after { transform: scaleX(1); }
.nav__menu a.is-active { color: var(--brass-bright); }
.nav__cta-item .nav__cta { color: #1a140a; }
.nav__cta-item .nav__cta::after { display: none; }

.nav__toggle {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 10px; z-index: 110;
}
.nav__toggle-bar { width: 24px; height: 2px; background: var(--text-light); transition: transform .3s ease, opacity .3s ease; }

@media (max-width: 1024px) {
    .nav__toggle { display: flex; }
    /* Always-solid header bar so the logo + menu button read over any section. */
    #siteHeader.is-condensed { background: #101216; -webkit-backdrop-filter: none; backdrop-filter: none; }
    #siteHeader.is-open { background: #0c0e12; }
    .nav__menu {
        position: fixed; inset: 0; top: 0; z-index: 95;
        flex-direction: column; justify-content: center; gap: var(--sp-8);
        background: #0c0e12;                       /* fully opaque — a clear panel, not a tint */
        transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1);
        padding: var(--safe-t) 24px 0;
    }
    #siteHeader.is-open .nav__menu { transform: translateX(0); }
    #siteHeader.is-open .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    #siteHeader.is-open .nav__toggle-bar:nth-child(2) { opacity: 0; }
    #siteHeader.is-open .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    /* Bigger, comfortably-tappable menu rows. */
    .nav__menu a[data-nav] { font-size: 1.16rem; padding: 12px 8px; min-height: 44px; display: inline-flex; align-items: center; }
    .nav__menu .nav__cta-item { margin-top: var(--sp-4); }
    .nav__menu .nav__cta { padding: 14px 30px; }
}

/* ─── HERO ────────────────────────────────────────────────────────── */
.hero {
    min-height: 100svh;
    display: flex; align-items: center;
    background: var(--ink-night); color: var(--text-light);
    padding-top: calc(var(--header-h) + var(--sp-10));
    padding-bottom: var(--sp-16);
    overflow: hidden;
}
.hero__backdrop {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transform: scale(1.08);
    filter: brightness(0.34) saturate(0.95);
    will-change: transform;
}
.hero__backdrop--gradient,
.hero__backdrop:not([style*="url"]) {
    background:
      radial-gradient(120% 90% at 78% 8%, rgba(176,137,74,0.20), transparent 60%),
      radial-gradient(100% 80% at 12% 92%, rgba(176,137,74,0.10), transparent 55%),
      linear-gradient(180deg, #181b21 0%, #111319 100%);
    filter: none; transform: none;
}
.hero__veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20,22,27,0.2) 0%, rgba(20,22,27,0.55) 100%);
}
.hero__inner { position: relative; z-index: 2; text-align: center; max-width: 820px; }
.hero__eyebrow { color: var(--brass-bright); }
.hero__title {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(2.8rem, 9vw, 5.6rem); line-height: 0.98; letter-spacing: -0.02em;
}
.hero__divider { color: var(--brass); margin: var(--sp-6) auto; }
.hero__subhead { font-size: clamp(1rem, 2.4vw, 1.3rem); color: var(--text-light); font-weight: 400; letter-spacing: var(--track-sm); }
.hero__intro { max-width: 56ch; margin: var(--sp-6) auto 0; color: var(--text-dim); font-size: 1.08rem; line-height: 1.6; }
.hero__intro strong { color: var(--text-light); font-weight: 600; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; margin-top: var(--sp-10); }
/* Coherent brass set: the fill fades from solid (left) to outline (right), so
   the four buttons read as one graded family instead of four unrelated styles. */
.hero__ctas .btn { background: transparent; color: var(--brass-bright); border-color: rgba(205,169,104,0.85); }
.hero__ctas .btn:nth-child(1) { background: var(--brass); color: #1a140a; border-color: var(--brass); }
.hero__ctas .btn:nth-child(2) { background: rgba(176,137,74,0.34); border-color: rgba(205,169,104,0.85); }
.hero__ctas .btn:nth-child(3) { background: rgba(176,137,74,0.17); border-color: rgba(205,169,104,0.65); }
.hero__ctas .btn:nth-child(4) { background: transparent; border-color: rgba(205,169,104,0.45); }
.hero__ctas .btn:hover { background: var(--brass); color: #1a140a; border-color: var(--brass); }

/* ─── ABOUT ───────────────────────────────────────────────────────── */
/* Default: two columns — biography | credentials sidebar. */
#about .section__inner { max-width: 1080px; }
/* With a press panel present, go three columns and widen the container. */
#about.about--3col .section__inner { max-width: 1260px; }
.about__layout {
    display: grid; align-items: start; margin-top: var(--sp-8);
    grid-template-columns: minmax(0, 1fr) minmax(210px, 290px);
    gap: clamp(24px, 2.6vw, 50px);
}
.about--3col .about__layout {
    grid-template-columns: minmax(165px, 0.7fr) minmax(0, 2fr) minmax(180px, 0.8fr);
}
.about__main { min-width: 0; }
.about__aside { display: flex; flex-direction: column; gap: var(--sp-8); padding-top: 4px; }
.about__aside[hidden] { display: none; }
.about__aside--right { border-left: 1px solid rgba(176,137,74,0.20); padding-left: clamp(15px, 1.6vw, 28px); }
.about__aside--left { display: none; }                              /* shown only in 3-col (press present) */
.about--3col .about__aside--left { display: flex; border-right: 1px solid rgba(176,137,74,0.20); padding-right: clamp(15px, 1.6vw, 28px); }
@media (max-width: 1040px) {
    .about__layout, .about--3col .about__layout { grid-template-columns: 1fr; gap: var(--sp-10); }
    #about.about--3col .section__inner { max-width: 1080px; }
    .about__main { order: 1; }
    .about--3col .about__aside--left { order: 2; }
    .about__aside--right { order: 3; }
    .about__aside { border: none !important; padding: var(--sp-8) 0 0 !important; border-top: 1px solid rgba(176,137,74,0.20) !important; }
}
/* Press panel (left of bio) */
.biopress__quote { font-family: var(--font-display); font-size: 1.06rem; font-style: italic; line-height: 1.45; color: var(--text-dark); margin: 0; }
.biopress__cite { display: block; margin-top: 10px; font-family: var(--font-body); font-style: normal; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--brass-deep); }
.biopress__sub { margin-top: var(--sp-6); font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; letter-spacing: var(--track-sm); text-transform: uppercase; color: var(--brass-deep); }
.biopress__list { list-style: none; margin-top: 10px; display: flex; flex-direction: column; gap: 9px; }
.biopress__link { font-size: 0.88rem; line-height: 1.3; color: var(--text-dark); border-bottom: 1px solid rgba(176,137,74,0.4); transition: color .2s ease, border-color .2s ease; }
.biopress__link:hover { color: var(--brass-deep); border-color: var(--brass-deep); }
/* Block layout + a floated portrait so the bio text wraps around it. */
.about__grid { display: block; }
.about__portrait {
    position: relative; float: left;
    width: clamp(240px, 46%, 440px); aspect-ratio: 4 / 5;
    margin: 6px var(--sp-8) var(--sp-6) 0;
    shape-outside: margin-box;
}
/* Full portrait with a soft halo + shadow so it lifts off the cream. */
.about__portrait img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 14%;
    border-radius: 4px;
    box-shadow:
      0 0 0 1px rgba(176,137,74,0.18),
      0 30px 55px -18px rgba(28, 20, 10, 0.5),
      0 0 64px 8px rgba(176,137,74,0.12);
}
.about__portrait:has(.about__monogram) {
    background: linear-gradient(160deg, #2a2d34, #16181d);
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card);
}
.about__monogram {
    font-family: var(--font-display); font-size: clamp(3rem, 8vw, 5rem); font-weight: 600;
    color: var(--brass); letter-spacing: 0.05em;
}
/* Second portrait — floated right, the closing paragraph wraps around it. */
.about__figure {
    float: right; margin: 8px 0 var(--sp-6) var(--sp-8);
    width: clamp(260px, 52%, 480px); shape-outside: margin-box;
}
.about__figure img {
    width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 30%;
    border-radius: 4px; display: block;
    box-shadow:
      0 0 0 1px rgba(176,137,74,0.18),
      0 30px 55px -18px rgba(28, 20, 10, 0.5),
      0 0 64px 8px rgba(176,137,74,0.12);
}
.about__figure figcaption {
    margin-top: 10px; text-align: center; font-family: var(--font-body);
    font-size: 0.8rem; font-style: italic; letter-spacing: 0.03em; color: var(--brass-deep);
}
/* Bio body — editorial emphasis, generous rhythm */
.about__body { font-size: 1.08rem; line-height: 1.78; }
.about__body::after { content: ""; display: block; clear: both; }
.about__para { margin-bottom: var(--sp-8); color: var(--text-dark); line-height: 1.78; }
.about__para:last-child { margin-bottom: 0; }
.about__body strong { font-weight: 600; color: #20242b; }
.about__body em { font-style: italic; color: var(--brass-deep); }
.about__body .hl { color: var(--brass-deep); font-weight: 600; }
/* Editorial lead: larger, airier, with a hairline brass rule beneath it. */
.about__lead {
    font-size: 1.3rem; line-height: 1.62; color: #20242b;
    padding-bottom: var(--sp-6); margin-bottom: var(--sp-8);
    border-bottom: 1px solid rgba(176,137,74,0.28);
}
.about__lead::first-letter {
    float: left; font-family: var(--font-display); font-weight: 600;
    font-size: 4rem; line-height: 0.78; padding: 6px 12px 0 0; color: var(--brass-deep);
}

/* Stat band */
.stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6);
    margin-top: var(--sp-16); padding-top: var(--sp-12);
    border-top: 1px solid var(--paper-edge); text-align: center;
}
.stat__num { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.2rem); color: var(--brass-deep); line-height: 1; }
.stat__label { display: block; margin-top: 10px; font-size: 0.74rem; font-weight: 600; letter-spacing: var(--track-sm); text-transform: uppercase; color: var(--text-muted); }

/* Faculty & Education block (About section, cream) — from display:"cv" records.
   Laid out as three horizontal columns (a compact "credentials" band) so it
   reads across rather than stacking tall. */
.cv { margin-top: var(--sp-10); padding-top: var(--sp-10); border-top: 1px solid rgba(176,137,74,0.22); }
.cv__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6) var(--sp-8); }
.cv__grid .cv__col + .cv__col { border-left: 1px solid rgba(176,137,74,0.18); padding-left: var(--sp-8); }
.cv__heading { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--text-dark); margin-bottom: var(--sp-4); padding-bottom: 7px; border-bottom: 2px solid var(--brass); display: inline-block; }
.cv__list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); }
.cv__item { display: flex; flex-direction: column; gap: 2px; }
.cv__title { font-weight: 600; font-size: 0.9rem; color: var(--text-dark); line-height: 1.32; }
.cv__role { font-size: 0.8rem; color: var(--text-muted); font-style: italic; }
.cv__meta { font-size: 0.76rem; color: var(--brass-deep); font-weight: 600; letter-spacing: 0.02em; }
/* Narrow screens: two columns, then one — drop the vertical dividers. */
@media (max-width: 860px) { .cv__grid { grid-template-columns: 1fr 1fr; }
    .cv__col:nth-child(odd) + .cv__col, .cv__col + .cv__col { border-left: none; padding-left: 0; } }
@media (max-width: 540px) { .cv__grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ─── PERFORMANCES (photo cards) ──────────────────────────────────── */
.perf-grid { margin-top: var(--sp-10); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-8); }
.events__empty { color: var(--text-dim); font-style: italic; margin-top: var(--sp-8); }
.section--cream .events__empty { color: var(--text-muted); }
/* Upcoming-concert card: content-sized (not the fixed portrait tile), with room
   for a Tickets button. */
.up-card { aspect-ratio: auto; }
.up-card .perf__media { flex: none; aspect-ratio: 16 / 10; }
.up-card .up-card__body { flex: none; justify-content: flex-start; padding: var(--sp-5) var(--sp-5) var(--sp-6); gap: 6px; }
.up-card .perf__title { -webkit-line-clamp: 3; }
.up-card__time { font-size: 0.85rem; font-weight: 600; color: var(--brass-bright); }
.up-card__cta { margin-top: var(--sp-4); align-self: flex-start; }
.perf {
    background: var(--ink-card); border: 0.5px solid rgba(205,169,104,0.20); border-radius: var(--radius);
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.perf:hover { transform: translateY(-4px); border-color: rgba(205,169,104,0.5); box-shadow: var(--shadow-dark); }
.perf__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(150deg, #3a3026, #1a1510); }
.perf__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.perf:hover .perf__img { transform: scale(1.05); }
.perf__media--noimg { display: flex; align-items: center; justify-content: center; }
.perf__media--noimg::before { content: "◆ ∞ ◆"; color: var(--brass-bright); opacity: 0.5; letter-spacing: 0.3em; }
.perf__year {
    position: absolute; top: 12px; left: 12px;
    background: rgba(15,17,21,0.8); color: var(--brass-bright);
    font-family: var(--font-body); font-size: 0.72rem; font-weight: 600;
    letter-spacing: var(--track-sm); text-transform: uppercase;
    padding: 5px 12px; border-radius: 100px;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.perf__upcoming { position: absolute; top: 12px; right: 12px; background: var(--brass); color: #1a140a; font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; letter-spacing: var(--track-sm); text-transform: uppercase; padding: 5px 11px; border-radius: 100px; }
.perf--upcoming { border-color: rgba(205,169,104,0.55); }
.perf__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.perf__title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.15; color: var(--text-light); }
.perf__venue { color: var(--text-light); font-size: 0.9rem; opacity: 0.9; }
.perf__detail { color: var(--text-dim); font-size: 0.88rem; font-style: italic; }
.perf__cta { margin-top: var(--sp-4); align-self: flex-start; }

/* Honors list (photo-less achievements) */
.honors { margin-top: var(--sp-12); padding-top: var(--sp-10); border-top: 1px solid rgba(205,169,104,0.25); }
.honors__title { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--text-light); margin-bottom: var(--sp-6); }
.honors__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px var(--sp-8); }
.honors__list li { position: relative; padding-left: 22px; color: var(--text-dim); font-size: 0.92rem; }
.honors__list li::before { content: "◆"; position: absolute; left: 0; top: 2px; color: var(--brass-bright); font-size: 0.7rem; }
.honors__year { color: var(--brass-bright); opacity: 0.85; white-space: nowrap; }
.honors__link { color: var(--text-light); border-bottom: 1px solid var(--brass); transition: color .2s; }
.honors__link:hover { color: var(--brass-bright); }

/* ─── PERFORMANCE SLIDER (horizontal, arrow-paged) ────────────────── */
.perf-slider { position: relative; margin-top: var(--sp-10); --slide-gap: 18px; --cards: 1.35; padding: 0 56px; }
@media (min-width: 620px)   { .perf-slider { --cards: 2.4; } }
@media (min-width: 1024px)  { .perf-slider { --cards: 3.4; } }
@media (min-width: 1440px)  { .perf-slider { --cards: 4.3; } }
/* Highlights & Upcoming: a wide scroll area (well past the text column) so more
   cards are in view on desktop. */
#performances .perf-slider,
#upcoming .perf-slider {
    width: min(95vw, 1600px);
    margin-left: 50%; transform: translateX(-50%);
}
.perf-track {
    display: flex; gap: var(--slide-gap); overflow-x: auto; overscroll-behavior-x: contain;
    padding: 6px 2px var(--sp-4);
    -ms-overflow-style: none; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5%, #000 98.5%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 1.5%, #000 98.5%, transparent);
}
.perf-track::-webkit-scrollbar { display: none; }
.perf-slider.no-overflow .perf-track { justify-content: center; -webkit-mask-image: none; mask-image: none; }
.perf-slider.no-overflow .slider-arrow { display: none; }
/* Larger cards: each is a portrait tile with the photo filling the top ~2/3. */
.perf--slide { flex: 0 0 calc((100% - (var(--cards) - 1) * var(--slide-gap)) / var(--cards)); min-width: 0;
    aspect-ratio: 4 / 5; }
.perf-track { align-items: flex-start; }
.perf--slide .perf__media { aspect-ratio: auto; flex: 0 0 66.667%; min-height: 0; }   /* top 2/3 */
.perf--slide .perf__body  { flex: 1 1 0; min-height: 0; overflow: hidden; justify-content: center; }
/* The video reel keeps fixed-width cards (not the responsive count) */
.video-slider { padding: 0; }
.video-track { gap: var(--sp-6); }
.video-track .video-card { scroll-snap-align: none; }
/* Compact the cards so 3-up reads cleanly (full story lives in the pop-out) */
.perf--slide .perf__body { padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + 2px); gap: 3px; }
.perf--slide .perf__title { font-size: clamp(0.82rem, 2vw, 1.02rem); line-height: 1.14;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.perf--slide .perf__venue { font-size: clamp(0.66rem, 1.5vw, 0.8rem);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
/* Role/detail line lives in the pop-out — hide on the card so the photo keeps
   the top two-thirds and the caption stays to title + venue + "View details". */
.perf--slide .perf__detail { display: none; }
.perf--slide .perf__more { margin-top: 4px; font-size: 0.66rem; }
.perf--slide .perf__year { font-size: 0.6rem; padding: 3px 8px; top: 8px; left: 8px; }
@media (max-width: 560px) {
    .perf--slide .perf__detail, .perf--slide .perf__more { display: none; }
    .perf--slide .perf__body { padding: 10px 10px 12px; }
}

/* Cards are buttons (open the detail pop-out) */
.perf { cursor: pointer; }
.perf:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.perf__more {
    margin-top: var(--sp-4); display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
    font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: var(--track-sm);
    text-transform: uppercase; color: var(--brass-bright);
}
.perf__more svg { width: 14px; height: 14px; transition: transform .2s ease; }
.perf:hover .perf__more svg { transform: translateX(3px); }

/* Arrows — sit in the slider gutters, well clear of the cards, big hit target */
.slider-arrow {
    position: absolute; top: 42%; transform: translateY(-50%); z-index: 3;
    width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
    background: rgba(15,17,21,0.82); color: var(--brass-bright);
    border: 1px solid rgba(205,169,104,0.4); display: grid; place-items: center;
    transition: background .2s ease, transform .15s ease;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.slider-arrow svg { width: 24px; height: 24px; }
.slider-arrow:hover { background: var(--brass); color: #1a140a; }
.slider-arrow:active { transform: translateY(-50%) scale(0.94); }
.slider-arrow--prev { left: 0; }
.slider-arrow--next { right: 0; }
@media (max-width: 760px) { .perf-slider { padding: 0; } .slider-arrow { display: none; } }

/* ─── EVENT DETAIL POP-OUT ────────────────────────────────────────── */
.event-modal {
    position: fixed; inset: 0; z-index: 320;
    display: none; align-items: center; justify-content: center;
    background: rgba(8,9,12,0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    padding: clamp(16px, 5vw, 48px);
}
.event-modal.is-open { display: flex; }
.event-modal__box {
    position: relative; width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
    background: var(--ink-card); border: 0.5px solid rgba(205,169,104,0.3); border-radius: 10px;
    box-shadow: var(--shadow-dark);
}
.event-modal__media { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.event-modal__media img { width: 100%; height: 100%; object-fit: cover; }
.event-modal__body { padding: var(--sp-8); }
.event-modal__date { font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; letter-spacing: var(--track-sm); text-transform: uppercase; color: var(--brass-bright); }
.event-modal__title { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; line-height: 1.12; color: var(--text-light); margin: 6px 0 var(--sp-6); }
.event-modal__meta { display: grid; gap: 10px; margin-bottom: var(--sp-6); }
.event-modal__meta > div { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: baseline; }
.event-modal__meta dt { font-size: 0.7rem; font-weight: 600; letter-spacing: var(--track-sm); text-transform: uppercase; color: var(--brass-bright); }
.event-modal__meta dd { color: var(--text-light); font-size: 0.95rem; }
.event-modal__desc { color: var(--text-dim); font-size: 1rem; line-height: 1.6; }
.event-modal__cta { margin-top: var(--sp-6); }
.event-modal__close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(15,17,21,0.7); color: #fff; font-size: 1rem; display: grid; place-items: center;
    transition: background .2s;
}
.event-modal__close:hover { background: rgba(176,137,74,0.85); color: #1a140a; }

/* ─── CONTACT — action buttons + floating FAB ─────────────────────── */
.contact__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; margin-top: var(--sp-8); }
.contact-fab {
    position: fixed; right: max(20px, var(--safe-r)); bottom: calc(20px + var(--safe-b)); z-index: 90;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 20px; border-radius: 100px;
    background: var(--brass); color: #1a140a; text-decoration: none;
    font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: var(--track-sm); text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    opacity: 0; transform: translateY(16px) scale(0.96); pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, background .2s ease;
}
.contact-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.contact-fab:hover { background: var(--brass-bright); }
.contact-fab svg { width: 18px; height: 18px; }
@media (max-width: 520px) { .contact-fab span { display: none; } .contact-fab { padding: 14px; } }

/* ─── MEDIA / VIDEO MARQUEE ───────────────────────────────────────── */
.video-marquee { position: relative; z-index: 1; margin-top: var(--sp-10); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.video-marquee__track { display: flex; gap: var(--sp-6); width: max-content; padding: var(--sp-4) clamp(20px,5vw,48px); animation: marquee var(--marquee-duration, 35s) linear infinite; }
.video-marquee:hover .video-marquee__track { animation-play-state: paused; }
.video-marquee__track--static { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.video-card { width: 300px; flex: 0 0 auto; cursor: pointer; }
.video-card__thumb { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: #0c0d10; box-shadow: var(--shadow-card); }
.video-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, filter .3s ease; filter: brightness(0.85); }
.video-card:hover .video-card__img { transform: scale(1.05); filter: brightness(1); }
.video-card__play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgba(176,137,74,0.92); display: grid; place-items: center; transition: transform .25s ease; }
.video-card:hover .video-card__play { transform: scale(1.12); }
.video-card__play svg { width: 24px; height: 24px; fill: #14120b; margin-left: 2px; }
.video-card__caption { margin-top: 12px; font-size: 0.9rem; color: var(--text-dark); }
.section--dark .video-card__caption { color: var(--text-light); }
#mediaChannel { margin-top: var(--sp-10); }

/* ─── GALLERY — interactive 3D room: a bright white gallery that surrounds you ─ */
.gallery3d {
    position: relative; margin-top: var(--sp-10);
    height: clamp(540px, 82vh, 900px);
    perspective: 1050px; perspective-origin: 50% 50%;
    overflow: hidden; border-radius: var(--radius);
    /* Dim ambient surround so the bright white exhibition reads as a lit room
       floating in a darker space — clear separation from the backdrop. */
    background:
      radial-gradient(120% 120% at 50% 38%, rgba(0,0,0,0) 38%, rgba(18,14,10,0.55) 78%, rgba(12,9,6,0.85) 100%),
      radial-gradient(120% 100% at 50% 32%, #4a443c 0%, #322e28 48%, #1d1a15 100%);
    border: 1px solid rgba(176,137,74,0.28);
    box-shadow: inset 0 0 90px rgba(0,0,0,0.45), 0 24px 60px -28px rgba(0,0,0,0.7);
    cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.gallery3d.is-grabbing { cursor: grabbing; }
.g-room { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(0deg); will-change: transform; transition: filter .3s ease; }
.gallery3d.is-focused .g-room { filter: saturate(1.02); }

/* Four white walls forming a room around the viewer (square room: D = W/2) */
.g-wall {
    position: absolute; top: 50%; left: 50%;
    width: 1000px; height: 540px; margin: -270px 0 0 -500px;
    transform-style: preserve-3d; backface-visibility: hidden;
    display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 30px);
    padding: 0 30px;
    background: linear-gradient(180deg, #fdfcfa 0%, #f5f2ec 60%, #ebe6da 100%);
    box-shadow: inset 0 0 80px rgba(120,100,70,0.10);
}
.g-wall::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 2px; background: rgba(70,55,35,0.10); pointer-events: none; }
.g-wall::after  { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; pointer-events: none;
    background: linear-gradient(180deg, #efe9dd, #e1d9c8); border-top: 1px solid rgba(70,55,35,0.14); }
.g-wall--front { transform: rotateY(0deg)   translateZ(-500px); }
.g-wall--right { transform: rotateY(-90deg) translateZ(-500px); }
.g-wall--left  { transform: rotateY(90deg)  translateZ(-500px); }
.g-wall--back  { transform: rotateY(180deg) translateZ(-500px); }

/* Framed art — bigger, glowing, casting a soft shadow on the white wall */
.g-room .photo {
    position: relative; flex: 0 0 auto; width: clamp(200px, 26vw, 300px); aspect-ratio: auto;
    background: #faf6ee; padding: 13px; border: 9px solid #9c7536; border-radius: 2px;
    overflow: visible; cursor: pointer; backface-visibility: hidden;
    box-shadow: 0 18px 30px rgba(60,45,20,0.30), 0 2px 6px rgba(0,0,0,0.2), 0 0 30px rgba(176,137,74,0.30);
    transform: translateZ(6px); transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease;
}
.g-room .photo::after { content: ""; position: absolute; inset: 12px; box-shadow: inset 0 2px 10px rgba(0,0,0,0.30); pointer-events: none; }
.g-room .photo:hover, .g-room .photo:focus-visible {
    transform: translateZ(30px); outline: none;
    box-shadow: 0 30px 48px rgba(60,45,20,0.36), 0 0 0 1px rgba(176,137,74,0.55), 0 0 46px rgba(176,137,74,0.5);
}
.g-room .photo__img { width: 100%; height: clamp(240px, 29vw, 360px); object-fit: cover; display: block; }
/* Footnote caption — overlaid on the bottom of the image so it's never clipped */
.g-cap {
    position: absolute; left: 13px; right: 13px; bottom: 13px;
    text-align: center; line-height: 1.28;
    font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
    color: #f7f1e6; background: rgba(20,14,8,0.82); padding: 7px 9px;
    opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
.g-room .photo:hover .g-cap, .g-room .photo:focus-visible .g-cap, .g-room .photo.is-focus .g-cap { opacity: 1; transform: none; }
/* Focus mode: dim the rest, lift the chosen piece */
.gallery3d.is-focused .g-room .photo:not(.is-focus) { opacity: 0.35; }
.g-room .photo.is-focus {
    transform: translateZ(46px);
    box-shadow: 0 40px 64px rgba(40,30,12,0.45), 0 0 0 2px rgba(176,137,74,0.6), 0 0 60px rgba(176,137,74,0.6);
}

.gallery3d__hint {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
    z-index: 4; pointer-events: none;
    font-family: var(--font-body); font-size: 0.7rem; font-weight: 600;
    letter-spacing: var(--track-md); text-transform: uppercase; color: #f3ece0;
    background: rgba(28,20,12,0.78); padding: 8px 16px; border-radius: 100px;
    border: 1px solid rgba(176,137,74,0.4); transition: opacity .5s ease; opacity: 0.92;
}
.gallery3d__hint.is-hidden { opacity: 0; }
.gallery3d__exit {
    position: absolute; top: 14px; right: 14px; z-index: 6;
    width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(28,20,12,0.8); color: #fff; font-size: 1rem; display: grid; place-items: center;
    transition: background .2s ease;
}
.gallery3d__exit:hover { background: var(--brass); color: #1a140a; }
@media (prefers-reduced-motion: no-preference) {
    .gallery3d__hint:not(.is-hidden) { animation: hintPulse 2.4s ease-in-out infinite; }
    @keyframes hintPulse { 0%,100% { opacity: .58 } 50% { opacity: .95 } }
}

/* Phone gallery: a swipeable photo slider in place of the 3D room (≤820px). */
.gallery-slider { display: none; }
.g-slide {
    flex: 0 0 78%; max-width: 340px; min-width: 0; position: relative; cursor: pointer;
    background: var(--ink-card); border: 1px solid rgba(205,169,104,0.26); border-radius: 12px; overflow: hidden;
    box-shadow: 0 10px 26px rgba(0,0,0,0.32);
}
.g-slide__media { aspect-ratio: 4 / 5; overflow: hidden; }
.g-slide__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-slide__cap {
    padding: 11px 13px; text-align: center; line-height: 1.32;
    font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; color: var(--text-light);
}
.g-slide::after {   /* little hint that the photo is tappable */
    content: "⤢"; position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
    display: grid; place-items: center; border-radius: 50%; font-size: 0.9rem;
    background: rgba(15,17,21,0.7); color: var(--brass-bright); pointer-events: none;
}
@media (min-width: 560px) { .g-slide { flex: 0 0 300px; } }
@media (max-width: 820px) {
    #gallery3d { display: none; }
    .gallery-slider { display: block; margin-top: var(--sp-8); }
}

/* ─── PRESS ───────────────────────────────────────────────────────── */
.quotes { margin-top: var(--sp-10); display: grid; gap: var(--sp-8); max-width: 760px; }
.quote { padding-left: var(--sp-6); border-left: 3px solid var(--brass); }
.quote__text { font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 1.7rem); font-style: italic; line-height: 1.35; color: var(--text-dark); }
.quote__source { display: block; margin-top: 12px; font-size: 0.78rem; font-weight: 600; letter-spacing: var(--track-sm); text-transform: uppercase; color: var(--brass-deep); font-style: normal; }

/* ─── CONTACT ─────────────────────────────────────────────────────── */
.contact__details { display: flex; flex-wrap: wrap; gap: var(--sp-6); justify-content: center; margin-top: var(--sp-8); }
.contact__link { font-family: var(--font-display); font-size: 1.3rem; color: var(--brass-bright); border-bottom: 1px solid transparent; transition: border-color .2s; }
.contact__link:hover { border-color: var(--brass-bright); }
.contact__loc { font-size: 1.05rem; color: var(--text-dim); align-self: center; }
/* Contact can render on cream (when there's no Upcoming section above it). */
.section--cream .contact__link { color: var(--brass-deep); }
.section--cream .contact__loc { color: var(--text-muted); }
.section--cream .social { color: var(--text-dark); }
.socials { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-6); justify-content: center; margin-top: var(--sp-10); }
.social { font-size: 0.8rem; font-weight: 600; letter-spacing: var(--track-sm); text-transform: uppercase; color: var(--text-light); padding-bottom: 4px; border-bottom: 1.5px solid var(--brass); transition: color .2s; }
.social:hover { color: var(--brass-bright); }

/* ─── "MESSAGE ME" SMART FORM ─────────────────────────────────────── */
.msgme {
    max-width: 640px; margin: var(--sp-10) auto 0; text-align: left;
    background: var(--ink-card); border: 0.5px solid rgba(205,169,104,0.22);
    border-radius: var(--radius); padding: clamp(var(--sp-6), 4vw, var(--sp-10));
    box-shadow: var(--shadow-dark);
}
.msgme__title { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--text-light); }
.msgme__sub { color: var(--text-dim); font-size: 0.92rem; margin: 4px 0 var(--sp-4); }
.msgme__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 520px) { .msgme__row { grid-template-columns: 1fr; } }
.msgme__field { display: block; margin-top: 20px; }
.msgme__lab {
    display: block; font-family: var(--font-body); font-size: 0.76rem; font-weight: 600;
    letter-spacing: var(--track-sm); text-transform: uppercase; color: var(--brass-bright); margin-bottom: 7px;
}
.msgme__lab i { text-transform: none; letter-spacing: 0; font-style: italic; font-weight: 400; color: var(--text-dim); opacity: 0.85; }
.msgme__input {
    width: 100%; background: rgba(0,0,0,0.25); color: var(--text-light);
    border: 1px solid rgba(205,169,104,0.25); border-radius: 10px; padding: 11px 13px;
    font-family: var(--font-body); font-size: 0.95rem; transition: border-color .2s ease, box-shadow .2s ease;
}
.msgme__input::placeholder { color: rgba(230,225,215,0.4); }
.msgme__input:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(176,137,74,0.18); }
.msgme__input:disabled { opacity: 0.4; }
.msgme__area { resize: vertical; min-height: 64px; }
/* Split email kept on ONE line: [ user ] @ [ provider ▾ ]; the custom-domain
   box (only when "Other…") drops to its own line. */
.msgme__email { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.msgme__email > .msgme__input { flex: 1 1 0; min-width: 0; }            /* user box fills, shrinks — never wraps the select */
.msgme__at { flex: 0 0 auto; color: var(--text-dim); font-size: 1rem; padding: 0 1px; }
.msgme__email > .msgme__select { flex: 0 0 auto; width: auto; min-width: 124px; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--brass-bright) 50%), linear-gradient(135deg, var(--brass-bright) 50%, transparent 50%);
    background-position: calc(100% - 18px) 1.1em, calc(100% - 13px) 1.1em;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.msgme__select option { color: #1a140a; }
.msgme__email > .msgme__emailother { flex: 1 1 100%; }                  /* own line when shown */
.msgme__prompt { margin-top: var(--sp-8); }
.msgme__prompt:first-child { margin-top: var(--sp-4); }
.msgme__promptctl { display: flex; gap: 8px; align-items: center; }
/* Honeypot — hidden from people, tempting to bots */
.msgme__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.msgme__promptctl .msgme__input { flex: 1; }
/* Chips (inquiry type + option groups + "Not sure yet") */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    font-family: var(--font-body); font-size: 0.84rem; font-weight: 500; color: var(--text-light);
    background: rgba(205,169,104,0.08); border: 1px solid rgba(205,169,104,0.3);
    border-radius: 100px; padding: 8px 14px; cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.chip:hover { border-color: var(--brass); }
.chip.is-on { background: var(--brass); border-color: var(--brass); color: #1a140a; font-weight: 600; }
.chip--tbd { white-space: nowrap; font-size: 0.78rem; opacity: 0.92; }
.chips--type { gap: 10px; }
.chips--type .chip { padding: 10px 18px; font-size: 0.9rem; }
.msgme__panel { margin-top: var(--sp-6); padding-top: 8px; border-top: 1px dashed rgba(205,169,104,0.18); }
.msgme__send { margin-top: var(--sp-8); width: 100%; }
.msgme__note { color: var(--text-dim); font-size: 0.78rem; margin-top: 12px; text-align: center; }
.msgme__note.is-error { color: #e9b08a; }

/* ─── FOOTER ──────────────────────────────────────────────────────── */
footer { background: var(--ink-footer); color: var(--text-dim); padding: var(--sp-12) 0 calc(var(--sp-12) + var(--safe-b)); }
.footer__inner { text-align: center; }
.footer__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--text-light); }
.footer__copy { margin-top: 8px; font-size: 0.82rem; }

/* ─── MODALS (video + image) ──────────────────────────────────────── */
.video-modal, .img-modal {
    position: fixed; inset: 0; z-index: 300;
    display: none; align-items: center; justify-content: center;
    background: rgba(8, 9, 12, 0.92);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    padding: clamp(16px, 5vw, 48px);
}
.video-modal.is-open, .img-modal.is-open { display: flex; }
.video-modal__frame { position: relative; width: min(960px, 100%); aspect-ratio: 16/9; }
.video-modal__iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-dark); }
.img-modal__img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: var(--radius); box-shadow: var(--shadow-dark); }
.video-modal__close, .img-modal__close {
    position: absolute; top: max(16px, var(--safe-t)); right: 20px;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.1); color: #fff; border: none; cursor: pointer;
    font-size: 1.1rem; display: grid; place-items: center; transition: background .2s;
}
.video-modal__close:hover, .img-modal__close:hover { background: rgba(176,137,74,0.8); }

/* ─── REVEAL — hidden start-states ONLY under no-preference ────────── */
@media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1);
        transition-delay: calc(var(--reveal-i, 0) * 70ms);
    }
    [data-reveal].is-revealed { opacity: 1; transform: none; }
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 620px) {
    /* On phones the portrait stops floating and sits centered above the bio */
    .about__portrait { float: none; width: min(360px, 86%); margin: 0 auto var(--sp-8); }
    .about__figure { float: none; width: min(420px, 92%); margin: var(--sp-6) auto var(--sp-2); }
    .about__lead { font-size: 1.12rem; }
    .about__lead::first-letter { font-size: 2.9rem; }
}
@media (max-width: 760px) {
    .stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-10) var(--sp-6); }
}
@media (max-width: 440px) {
    .section { padding: var(--sp-16) 0; }
    .gallery-grid { grid-template-columns: 1fr; }
    .hero__ctas .btn { width: 100%; }
    .contact__details { flex-direction: column; gap: var(--sp-4); }
}