/* =============================================
   GLOBAL STYLES — Stars Community Theater
   Tokens live in style.css (:root)
   ============================================= */

/* =============================================
   RESET
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { font-size: 16px; scroll-behavior: smooth }
body { background: var(--bg); color: var(--text); font-family: var(--font-sans); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden }
img { display: block; max-width: 100% }
a { color: var(--gold); text-decoration: none; transition: color var(--ease) }
a:hover { color: var(--gold-dk) }
ul, ol { list-style: none }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit }

/* =============================================
   LAYOUT
   ============================================= */
.wrap { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter) }

/* =============================================
   BUTTONS
   ============================================= */
.btn {
    display: inline-block; padding: .72em 2em; font-size: .85rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; border-radius: var(--r);
    transition: background var(--ease), color var(--ease), transform .15s ease;
}
.btn:hover { transform: translateY(-1px) }
.btn-gold { background: var(--gold-lt); color: #1c1814 }
.btn-gold:hover { background: var(--gold); color: #fff }
.btn-outline { border: 2px solid var(--gold); color: var(--gold); background: transparent }
.btn-outline:hover { background: var(--gold); color: #fff }
.btn-red { background: var(--red); color: #fff }
.btn-red:hover { background: #a02828; color: #fff }
.btn-sm { font-size: .78rem; padding: .6em 1.4em }

/* =============================================
   ANNOUNCEMENT BANNER
   ============================================= */
.announcement-bar {
    background: var(--red); color: #fff; text-align: center;
    padding: .55rem var(--gutter); font-size: .75rem;
    letter-spacing: .07em; text-transform: uppercase; font-weight: 700;
}
.announcement-bar a { color: #fff; text-decoration: underline }
.announcement-bar a:hover { color: rgba(255,255,255,.8) }

/* =============================================
   HEADER
   ============================================= */
.hdr {
    position: sticky; top: 0; z-index: 900;
    background: rgba(250,247,242,.96); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
}
body.has-banner .hdr { top: var(--banner-h) }

/* Wrap inside header is the positioning context for the logo tag */
.hdr .wrap { position: relative }

.hdr-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding-block: 1.1rem; gap: 1.5rem;
}
.logo { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; text-decoration: none }
.logo img { height: 64px; width: auto; display: block }
/* WP custom-logo outputs an <a> wrapping the image — reset its default styles */
.logo .custom-logo-link { display: contents }
.logo .custom-logo { height: 64px; width: auto }
.logo-txt { line-height: 1.18 }
.logo-name { display: block; font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; color: var(--text) }
.logo-sub { display: block; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold) }

/* ── Logo compact: hidden on front page until scroll ── */
.logo--compact { transition: opacity .25s ease }
.is-front-page .logo--compact { opacity: 0; pointer-events: none }
.hdr.hdr--scrolled .logo--compact { opacity: 1 !important; pointer-events: auto !important }

/* ── Logo tag: hangs from header bar into the hero ── */
.logo-tag {
    position: absolute; top: 0; left: 0; z-index: 10;
    background: var(--bg);
    border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 12px 36px rgba(0,0,0,.14), inset 0 -2px 0 rgba(201,168,76,.18);
    padding: .5rem 1.1rem 1.25rem;
    display: block; text-decoration: none;
    transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
    will-change: transform;
}
.logo-tag-img { height: 150px; width: auto; display: block }
.hdr.hdr--scrolled .logo-tag {
    transform: translateY(-115%); opacity: 0; pointer-events: none;
}

/* Desktop nav — WP outputs <ul class="pnav-list"><li><a> */
.pnav { display: flex; align-items: center }
.pnav-list { display: flex; align-items: center; gap: .15rem }
.pnav-list li { list-style: none }
.pnav-list li a {
    color: var(--muted); font-size: .8rem; letter-spacing: .05em; text-transform: uppercase;
    padding: .4em .85em; border-radius: var(--r); white-space: nowrap; display: block;
    transition: color var(--ease), background var(--ease);
}
.pnav-list li a:hover,
.pnav-list li.current-menu-item > a { color: var(--text); background: rgba(0,0,0,.05) }
.pnav-list > li.nav-donate { margin-left: .4rem }
.pnav-list > li.nav-donate > a {
    background: var(--red); color: #fff; font-weight: 700; padding: .4em 1.1em;
}
.pnav-list > li.nav-donate > a:hover { background: #a02828; color: #fff }
.pnav-list > li.current-menu-item.nav-donate > a { background: #a02828 }

/* Desktop nav — dropdowns */
.pnav-list li { position: relative }
.pnav-list li ul {
    position: absolute; top: 100%; left: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); box-shadow: 0 6px 24px rgba(0,0,0,.12);
    min-width: 180px; padding: .35rem 0;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(6px);
    transition: opacity var(--ease), transform var(--ease), visibility 0s linear 150ms;
    z-index: 200;
}
/* Bridge gap between parent and submenu so mouse doesn't escape */
.pnav-list li ul::before {
    content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px;
}
.pnav-list li:hover > ul,
.pnav-list li:focus-within > ul {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
    transition: opacity var(--ease), transform var(--ease), visibility 0s linear 0s;
}
.pnav-list li ul li { display: block }
.pnav-list li ul li a {
    font-size: .78rem; letter-spacing: .04em; padding: .5em 1.1em;
    border-radius: 0; white-space: nowrap;
}
.pnav-list li.menu-item-has-children > a::after {
    content: '▾'; margin-left: .3em; font-size: .7em; opacity: .55; vertical-align: middle;
}

/* Mobile toggle */
.ntoggle { display: none; flex-direction: column; gap: 5px; padding: .35rem }
.ntoggle span { display: block; width: 22px; height: 2px; background: var(--text); transition: transform var(--ease), opacity var(--ease) }
.ntoggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.ntoggle.open span:nth-child(2) { opacity: 0 }
.ntoggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

/* Mobile nav */
.mnav { display: none; background: var(--surface); border-top: 1px solid var(--border); padding: 1.5rem var(--gutter) }
.mnav.open { display: block }
.mnav-list li { list-style: none }
.mnav-list li a { display: block; color: var(--muted); padding: .65rem 0; border-bottom: 1px solid var(--border); font-size: .95rem }
.mnav-list li:last-child a { border-bottom: none }
.mnav-list li a:hover { color: var(--gold) }
.mnav-list > li.nav-donate > a {
    display: inline-block; margin-top: 1rem; background: var(--red); color: #fff;
    padding: .6em 1.4em; border-radius: var(--r); font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; border: none;
}

/* Mobile sub-menus */
.mnav-list li.menu-item-has-children { position: relative }
.mnav-list li.menu-item-has-children > a { padding-right: 2.5rem }
.mnav-list li ul { display: none; padding-left: 1rem; margin: 0 }
.mnav-list li ul.open { display: block }
.mnav-list li ul li a { font-size: .87rem; padding: .5rem 0; border-bottom: 1px solid var(--border) }
.sub-toggle {
    position: absolute; right: 0; top: 0;
    background: none; border: none; padding: .65rem .75rem; cursor: pointer;
    color: var(--muted); font-size: .75rem; line-height: 1;
    transition: transform var(--ease);
}
.sub-toggle[aria-expanded="true"] { transform: rotate(180deg) }

/* =============================================
   SECTION SHARED
   ============================================= */
.section { padding-block: var(--section) }
.section-alt { background: var(--surface) }
.section-lite { background: var(--surface-2) }

.eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .68rem; letter-spacing: .17em; text-transform: uppercase; color: var(--gold);
    margin-bottom: .7rem;
}
.eyebrow::before { content: ''; display: block; width: 1.4rem; height: 1px; background: var(--gold) }
.eyebrow-center { justify-content: center }
.eyebrow-center::before { display: none }

.section-title { font-family: var(--font-serif); font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.15; margin-bottom: .9rem }
.section-lead { color: var(--muted); font-size: clamp(.95rem, 1.5vw, 1.05rem); line-height: 1.7; max-width: 58ch }
.section-hdr { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.75rem }

/* =============================================
   PAGE HEADER (inner pages) — dark with gold
   ============================================= */
.page-hdr {
    background: linear-gradient(160deg, #1a1200 0%, #0d0d0d 100%);
    border-bottom: 1px solid #2a2820;
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
    position: relative; overflow: hidden; color: #f0ece4;
}
.page-hdr::before {
    content: ''; position: absolute; top: -100px; right: 5%;
    width: 420px; height: 420px; pointer-events: none;
    background: radial-gradient(ellipse at top, rgba(201,168,76,.08) 0%, transparent 65%);
}
.page-hdr .section-title { color: #f0ece4 }
.page-hdr .section-lead { color: #a09880 }
.page-hdr .eyebrow { color: #c9a84c }
.page-hdr .eyebrow::before { background: #c9a84c }

/* =============================================
   HOMEPAGE — HERO
   ============================================= */
.hero {
    position: relative; min-height: min(38vh, 420px); display: flex; align-items: center;
    overflow: hidden; background: #0d0d0d;
}
.hero-bg {
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(13,13,13,.97) 38%, rgba(13,13,13,.55) 100%),
                linear-gradient(150deg, #1a1200 0%, #0d0d0d 65%);
}
.hero-spotlight {
    position: absolute; top: -150px; right: 8%; width: 550px; height: 680px;
    background: radial-gradient(ellipse at top, rgba(201,168,76,.09) 0%, transparent 65%);
    pointer-events: none;
}
.hero-curtain-l, .hero-curtain-r {
    position: absolute; top: 0; bottom: 0; width: 6vw; pointer-events: none;
}
.hero-curtain-l { left: 0; background: linear-gradient(to right, rgba(40,10,0,.7), transparent) }
.hero-curtain-r { right: 0; background: linear-gradient(to left, rgba(40,10,0,.7), transparent) }
.hero-inner { position: relative; z-index: 2; padding-block: clamp(3rem, 5vw, 4.5rem); max-width: 680px }
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: .6rem; font-size: .7rem;
    letter-spacing: .18em; text-transform: uppercase; color: #c9a84c; margin-bottom: 1.5rem;
}
.hero-eyebrow::before { content: ''; display: block; width: 2rem; height: 1px; background: #c9a84c }
.hero-title {
    font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.07; margin-bottom: .85rem; color: #f0ece4;
}
.hero-title em { font-style: italic; color: #e0c37a }
.hero-sub { font-size: clamp(.95rem, 1.6vw, 1.1rem); color: #a09880; max-width: 46ch; margin-bottom: 2rem }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center }
.hero .btn-gold { background: #c9a84c; color: #0d0d0d }
.hero .btn-gold:hover { background: #e0c37a; color: #0d0d0d }
.hero .btn-outline { border-color: #c9a84c; color: #c9a84c }
.hero .btn-outline:hover { background: #c9a84c; color: #0d0d0d }

/* Front page: offset hero content right to clear the logo tag; hide eyebrow (tag replaces it) */
.is-front-page .hero-inner { padding-left: calc(170px - var(--gutter) + 2.75rem) }
.is-front-page .hero-eyebrow { display: none }

/* =============================================
   HOMEPAGE — NOW PLAYING BAR
   ============================================= */
.npbar {
    background: var(--gold-lt); color: #1c1814; text-align: center;
    padding: .65rem var(--gutter); font-size: .78rem; font-weight: 700; letter-spacing: .08em;
}
.npbar a { color: #1c1814; text-decoration: underline }

/* =============================================
   HOMEPAGE — SHOW PREVIEW STRIP
   ============================================= */
.show-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem }
.sp-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    padding: 1.4rem; display: flex; flex-direction: column; gap: .65rem;
    transition: border-color var(--ease), transform .2s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.sp-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08) }
.sp-card--current { border-color: var(--gold) }
.sp-badge {
    display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; padding: .28em .75em; border-radius: 2px; align-self: flex-start;
}
.badge-now      { background: var(--gold); color: #1c1814 }
.badge-register { background: #9e4a1e; color: #fde8d8 }
.badge-soldout  { background: #6b2737; color: #f6dfe6 }
.badge-next     { background: #1c2b3a; color: #e8d9b0; border: 1px solid transparent }
.badge-camp     { background: #1a5c38; color: #d4f0e0 }
.badge-event    { background: #2a5a8a; color: #ddeaf8 }
.badge-past     { background: #6b6560; color: #ede8e2 }
.sp-genre { font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold) }
.sp-title { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.2; color: var(--text) }
.sp-dates { font-size: .75rem; color: var(--muted); margin-top: .25rem }
.sp-meta { font-size: .8rem; color: var(--muted); line-height: 1.5; flex: 1 }
.sp-link {
    font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--gold); display: inline-flex; align-items: center; gap: .3rem; margin-top: .25rem;
    transition: gap var(--ease), color var(--ease);
}
.sp-link:hover { color: var(--gold-dk); gap: .55rem }
.shows-see-all { text-align: center; margin-top: 2rem }

/* =============================================
   HOMEPAGE — HYBRID SHOW PREVIEW (Upcoming)
   ============================================= */
.hp-show-cards { display: flex; flex-direction: column; gap: 1.25rem }
.hp-show-card {
    position: relative; display: flex; flex-direction: row;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    transition: box-shadow .2s ease;
}
.hp-show-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.12) }
.hp-show-card__poster {
    flex: 0 0 clamp(140px, 20vw, 220px);
    background: var(--surface-2); overflow: hidden; align-self: stretch;
}
.hp-show-card__poster img { width: 100%; height: 100%; object-fit: cover; display: block }
.hp-show-card__poster-ph {
    width: 100%; height: 100%; min-height: 180px;
    display: flex; align-items: center; justify-content: center; font-size: 3rem;
}
.hp-show-card__badge { position: absolute; top: 1rem; right: 1rem }
.hp-show-card__body {
    flex: 1; padding: 1.4rem 1.6rem 1.4rem 1.5rem;
    display: flex; flex-direction: column; gap: .6rem;
}
.hp-show-card__title {
    font-family: var(--font-serif); font-size: 1.55rem; line-height: 1.15;
    color: var(--text); margin: 0; padding-right: 5rem;
}
.hp-show-card__title a { color: inherit; text-decoration: none }
.hp-show-card__title a:hover { color: var(--gold) }
.hp-show-card__excerpt {
    font-size: .875rem; color: var(--muted); line-height: 1.6; margin: 0;
}
.hp-show-card__meta {
    display: flex; flex-wrap: wrap; gap: .3rem 1.5rem;
    font-size: .8rem; color: var(--text-2); margin-top: .1rem;
}
.hp-show-card__meta-item {
    display: inline-flex; align-items: center; gap: .35rem;
}
.hp-show-card__meta-item svg { flex-shrink: 0; opacity: .7 }
.hp-show-card__actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: auto; padding-top: .5rem }
@media (max-width: 560px) {
    .hp-show-card { flex-direction: column }
    .hp-show-card__poster { height: 200px; flex: none }
    .hp-show-card__poster img { height: 100%; object-position: top }
    .hp-show-card__title { font-size: 1.25rem; padding-right: 0 }
    .hp-show-card__badge { top: .75rem; right: .75rem }
}
.hp-show-card--camp {
    background: linear-gradient(135deg, #eef8f2, #e4f3eb);
    border-color: #c0dfd0;
}
.hp-show-card--camp:hover { border-color: #a8d4be; box-shadow: 0 6px 20px rgba(26,92,56,.1) }

/* =============================================
   SUPPORT STRIP
   ============================================= */
.support-strip { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border) }
.support-strip__inner { text-align: center }
.support-strip__inner .section-lead { margin-inline: auto; margin-top: .75rem }
.support-strip__actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 2rem }

/* =============================================
   GET INVOLVED PAGE
   ============================================= */
.gi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.gi-card {
    display: flex; flex-direction: column; align-items: flex-start;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 2rem 1.75rem;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.gi-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.08) }
.gi-card__icon { font-size: 2rem; margin-bottom: 1rem; line-height: 1 }
.gi-card__title { font-family: var(--font-serif); font-size: 1.5rem; color: var(--text); margin-bottom: .75rem }
.gi-card__body { font-size: .9rem; color: var(--muted); line-height: 1.65; flex: 1; margin-bottom: 1.5rem }
@media (max-width: 768px) {
    .gi-grid { grid-template-columns: 1fr }
}

/* =============================================
   VOLUNTEER PAGE
   ============================================= */
.vol-steps { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-direction: column; gap: 1.5rem; max-width: 640px }
.vol-step { display: flex; align-items: flex-start; gap: 1.25rem }
.vol-step__num {
    flex-shrink: 0; width: 2.25rem; height: 2.25rem;
    background: var(--gold); color: #0d0d0d;
    border-radius: 50%; display: grid; place-items: center;
    font-weight: 700; font-size: .95rem;
}
.vol-step strong { display: block; color: #f0ece4; margin-bottom: .3rem }
.vol-step p { font-size: .88rem; color: #a09880; line-height: 1.6; margin: 0 }

/* =============================================
   TESTIMONIALS
   ============================================= */
.t-track { overflow: hidden }
.t-slide { display: none; animation: fadeUp .4s ease }
.t-slide.active { display: block }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: translateY(0) } }
.t-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: clamp(2rem, 5vw, 3.5rem); max-width: 760px; margin-inline: auto;
    text-align: center; position: relative;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.t-card::before {
    content: '\201C'; font-family: var(--font-serif); font-size: 5rem;
    color: var(--gold-lt); opacity: .3; position: absolute; top: .25rem; left: 1.75rem;
    line-height: 1; pointer-events: none;
}
.t-text {
    font-family: var(--font-serif); font-size: clamp(1.05rem, 2vw, 1.2rem);
    line-height: 1.72; color: var(--text); margin-bottom: 1.75rem; position: relative; z-index: 1;
}
.t-name { font-weight: 700; font-size: .9rem; color: var(--gold) }
.t-role { font-size: .78rem; color: var(--muted); letter-spacing: .03em; margin-top: .2rem }
.t-controls { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2.25rem }
.t-btn {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--surface); color: var(--muted); font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    transition: border-color var(--ease), color var(--ease);
}
.t-btn:hover { border-color: var(--gold); color: var(--gold) }
.t-dots { display: flex; gap: .5rem }
.t-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--border);
    cursor: pointer; transition: background var(--ease), transform var(--ease); border: none;
}
.t-dot.active { background: var(--gold-lt); transform: scale(1.3) }

/* =============================================
   DONATE CTA — DARK variant (used on home)
   ============================================= */
.donate-cta-dark {
    background: linear-gradient(135deg, #1a0808 0%, #0d0d0d 100%);
    border-top: 1px solid #2a1010; border-bottom: 1px solid #2a1010;
    padding-block: var(--section); text-align: center;
    --gold: #c9a84c; --gold-lt: #e0c37a; --muted: #a09880; --text: #f0ece4; --border: #2a1010;
}
.donate-cta-dark .section-title { color: #f0ece4 }
.donate-cta-dark .section-lead { color: #a09880; margin-inline: auto }
.donate-cta-dark .eyebrow { color: #c9a84c }
.donate-cta-dark .eyebrow::before { background: #c9a84c }
.donate-cta-dark .btn-outline { border-color: #c9a84c; color: #c9a84c }
.donate-cta-dark .btn-outline:hover { background: #c9a84c; color: #0d0d0d }
.donate-cta-dark a { color: #c9a84c }
.donate-acts { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 2.25rem }
.donate-impact {
    display: flex; justify-content: center; gap: clamp(2rem, 6vw, 5rem); flex-wrap: wrap;
    margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid #2a1010;
}
.di-num { font-family: var(--font-serif); font-size: 2.4rem; color: #e0c37a; line-height: 1; display: block }
.di-lbl { font-size: .78rem; color: #a09880; letter-spacing: .04em; margin-top: .3rem; display: block }

/* =============================================
   SHOWS PAGE — CARDS
   ============================================= */
.show-grid { display: flex; flex-direction: column; gap: 2rem }
.show-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden; display: flex; flex-direction: row;
    transition: border-color var(--ease), box-shadow .2s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.show-card:hover { border-color: var(--gold); box-shadow: 0 6px 24px rgba(0,0,0,.1) }
.show-card--ft { border-color: var(--gold) }
.sc-thumb {
    flex: 0 0 clamp(160px, 22vw, 280px); background: var(--surface-2);
    position: relative; align-self: stretch; overflow: hidden;
}
.sc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block }
.sc-ph {
    width: 100%; height: 100%; min-height: 260px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; color: var(--muted);
}
.sc-ph-icon { font-size: 2.75rem; line-height: 1; margin-bottom: .4rem }
.sc-ph-lbl { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase }
.sc-badge-wrap { position: absolute; top: clamp(.85rem, 2vw, 1.1rem); right: clamp(.85rem, 2vw, 1.1rem) }
.sc-body {
    padding: clamp(1.4rem, 3vw, 2.2rem); display: flex; flex-direction: column;
    gap: .75rem; flex: 1; justify-content: center; position: relative;
}
.sc-genre { font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold) }
.sc-title { font-family: var(--font-serif); font-size: clamp(1.4rem, 2.5vw, 1.9rem); line-height: 1.2; color: var(--text) }
.sc-title a { color: inherit; text-decoration: none }
.sc-title a:hover { color: var(--gold) }
.sc-desc { font-size: .925rem; color: var(--muted); line-height: 1.7; max-width: 65ch }
.sc-meta {
    display: flex; flex-wrap: wrap; column-gap: 1.4rem; row-gap: .35rem; padding-top: .85rem;
    border-top: 1px solid var(--border); font-size: .8rem; color: var(--muted);
}
.sc-meta span { display: flex; align-items: baseline; gap: .4rem }
.sc-acts { display: flex; gap: .65rem; flex-wrap: wrap; padding-top: .85rem }
@media (max-width: 540px) {
    .show-card { flex-direction: column }
    .sc-thumb { flex: none; width: 100% }
    .sc-thumb img { height: auto }
}
.show-card--camp {
    background: linear-gradient(135deg, #eef8f2, #e4f3eb);
    border-color: #c0dfd0;
}
.show-card--camp:hover { border-color: #a8d4be; box-shadow: 0 6px 24px rgba(26,92,56,.1) }

/* Auditions strip */
.aud-strip {
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    padding: clamp(1.5rem, 4vw, 2.4rem); display: flex; align-items: center;
    justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-top: 2.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.aud-strip-txt { flex: 1; min-width: 200px }
.aud-eyebrow { font-size: .67rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: .45rem }
.aud-title { font-family: var(--font-serif); font-size: 1.35rem; margin-bottom: .3rem; color: var(--text) }
.aud-detail { font-size: .86rem; color: var(--muted) }
.aud-acts { display: flex; gap: .65rem; flex-wrap: wrap }

/* =============================================
   CAMP PAGE
   ============================================= */
.camp-banner {
    background: linear-gradient(135deg, #eef8f2, #e4f3eb); border: 1px solid #c0dfd0;
    border-radius: 8px; padding: clamp(2rem, 5vw, 3rem);
    display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
}
.camp-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem }
.camp-badge {
    display: inline-block; font-size: .65rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; padding: .3em .85em; border-radius: 2px;
    background: var(--green-lt); color: #fff; margin-bottom: .65rem;
}
.camp-eyebrow { font-size: .67rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green-lt); margin-bottom: .65rem }
.camp-title { font-family: var(--font-serif); font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin-bottom: .7rem; color: var(--text) }
.camp-desc { color: var(--muted); font-size: .92rem; line-height: 1.65; max-width: 55ch; margin-bottom: 1.25rem }
.camp-desc p { margin: 0 0 .65rem }
.camp-desc p:last-child { margin-bottom: 0 }
.camp-locations { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1.5rem }
.camp-loc { display: flex; flex-direction: column; gap: .15rem; padding-left: .9rem; border-left: 3px solid var(--gold) }
.camp-loc-lbl { font-size: .85rem; font-weight: 700; color: var(--text) }
.camp-loc-addr { font-size: .8rem; color: var(--muted) }
.camp-soldout { font-size: .9rem; color: var(--text); background: rgba(158,74,30,.08); border-left: 3px solid #9e4a1e; padding: .85rem 1.1rem; border-radius: 4px; margin-bottom: 1.25rem; max-width: 55ch }
.camp-soldout strong { color: #9e4a1e }
.camp-details { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1.5rem }
.cd { display: flex; flex-direction: column; gap: .2rem }
.cd-lbl { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green-lt) }
.cd-val { font-size: .9rem; color: var(--text) }
.camp-visual { flex-shrink: 0; width: clamp(180px, 22vw, 260px) }
.camp-visual img { width: 100%; border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,.18); display: block }

.next-season { text-align: center; max-width: 620px; margin-inline: auto; padding-block: clamp(2.5rem, 6vw, 4.5rem) }
.next-season-icon { font-size: 3rem; line-height: 1; margin-bottom: 1rem; opacity: .85 }

.workshops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.2rem; margin-top: 2rem }
.wkp { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 1.6rem; box-shadow: 0 1px 4px rgba(0,0,0,.04) }
.wkp-cost {
    display: inline-block; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--green-lt); background: rgba(42,122,80,.09); padding: .25em .7em; border-radius: 2px; margin-bottom: .7rem;
}
.wkp-title { font-family: var(--font-serif); font-size: 1.15rem; margin-bottom: .35rem; color: var(--text) }
.wkp-instructor { font-size: .78rem; color: var(--gold); margin-bottom: .6rem }
.wkp-desc { font-size: .86rem; color: var(--muted); line-height: 1.6 }

.camp-note {
    margin-top: 1.5rem; padding: 1.25rem 1.4rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: 6px; font-size: .88rem; color: var(--muted);
    align-self: start;
}
.camp-note strong { color: var(--text) }

/* =============================================
   ABOUT PAGE
   ============================================= */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center }
.about-quote {
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    padding: 2.5rem 2.5rem 2.5rem 3.5rem; position: relative; overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.about-quote::before {
    content: '"'; font-family: var(--font-serif); font-size: 5rem; color: var(--gold-lt);
    opacity: .35; line-height: 1; position: absolute; top: 2.5rem; left: 1.5rem; pointer-events: none;
}
.aq-text { font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.65; color: var(--text); position: relative; z-index: 1; margin-bottom: 1.1rem; padding-left: 2.25rem }
.aq-cite { font-size: .78rem; color: var(--gold); letter-spacing: .04em; padding-left: 2.25rem }

.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2rem }
.stat { border-left: 2px solid var(--gold-lt); padding-left: 1rem }
.stat-num { font-family: var(--font-serif); font-size: 2.1rem; color: var(--gold); line-height: 1; display: block }
.stat-lbl { font-size: .75rem; color: var(--muted); margin-top: .2rem; display: block }

.about-body p { color: var(--muted); font-size: .97rem; line-height: 1.75; margin-bottom: 1.15rem }
.about-body p:last-child { margin-bottom: 0 }

.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1.2rem; margin-top: 2.5rem }
.val { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 1.4rem; box-shadow: 0 1px 4px rgba(0,0,0,.04) }
.val-icon { font-size: 1.7rem; margin-bottom: .65rem; line-height: 1 }
.val-title { font-family: var(--font-serif); font-size: 1rem; margin-bottom: .4rem; color: var(--text) }
.val-text { font-size: .84rem; color: var(--muted); line-height: 1.6 }

.mission-box {
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    padding: clamp(1.75rem, 4vw, 2.5rem); margin-top: 2rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.mission-box p { color: var(--muted); font-size: .95rem; line-height: 1.75; margin-bottom: 1rem }
.mission-box p:last-child { margin-bottom: 0 }

.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; margin-top: 1.75rem }
.bc {
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    padding: 1.25rem 1rem; text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.bc-av {
    width: 52px; height: 52px; border-radius: 50%; background: var(--surface-2);
    border: 1px solid var(--border); margin-inline: auto; margin-bottom: .65rem;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--gold);
    overflow: hidden;
}
.bc-av img { width: 100%; height: 100%; object-fit: cover }
.bc-name { font-weight: 700; font-size: .88rem; margin-bottom: .2rem; color: var(--text) }
.bc-role { font-size: .73rem; color: var(--gold); letter-spacing: .03em }

/* =============================================
   DONATE PAGE
   ============================================= */
.donate-page {
    padding-block: var(--section); text-align: center;
}
.donate-page .section-lead { margin-inline: auto; margin-bottom: 2rem }
.donate-ways {
    margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border);
}
.donate-ways p { font-size: .88rem; color: var(--muted); margin-bottom: 1.25rem }
.donate-other-acts { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center }

/* =============================================
   DARK BAND — reusable dark section
   ============================================= */
.dark-band {
    --bg:        #0d0d0d;
    --surface:   #161616;
    --surface-2: #1f1e1b;
    --gold:      #c9a84c;
    --gold-lt:   #e0c37a;
    --gold-dk:   #a07830;
    --text:      #f0ece4;
    --muted:     #a09880;
    --border:    #2a2820;
    background:  #161616;
    color:       #f0ece4;
}
.dark-band .t-card { background: #1f1e1b; border-color: #2a2820; box-shadow: 0 2px 16px rgba(0,0,0,.5) }
.dark-band .t-btn { background: #1f1e1b; border-color: #2a2820 }
.dark-band .t-dot { background: #2a2820 }
.dark-band .t-dot.active { background: #c9a84c }
.dark-band .val { box-shadow: none }
.dark-band .mission-box { box-shadow: none }
.dark-band a { color: var(--gold) }
.dark-band a:hover { color: var(--gold-lt) }
.dark-band .btn-outline { border-color: #c9a84c; color: #c9a84c }
.dark-band .btn-outline:hover { background: #c9a84c; color: #0d0d0d }
.dark-band .btn-gold { background: #c9a84c; color: #0d0d0d }
.dark-band .btn-gold:hover { background: #e0c37a; color: #0d0d0d }

/* =============================================
   FOOTER — DARK
   ============================================= */
.ftr {
    background: #0d0d0d; border-top: 1px solid #2a2820; padding-top: 3.5rem;
    --bg: #0d0d0d; --surface: #161616; --surface-2: #1f1e1b;
    --gold: #c9a84c; --gold-lt: #e0c37a; --gold-dk: #a07830;
    --text: #f0ece4; --muted: #a09880; --border: #2a2820;
    color: #f0ece4;
}
.ftr-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.5fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid #2a2820 }
.ftr-tagline { font-size: .84rem; color: #a09880; margin-top: .65rem; margin-bottom: 1.1rem; line-height: 1.6 }
.socials { display: flex; gap: .65rem }
.soc {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid #4a4840;
    background: #2a2820; display: flex; align-items: center; justify-content: center;
    color: #f0ece4; transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.soc:hover { border-color: #c9a84c; color: #c9a84c; background: #1a1814 }
.ftr-hd { font-size: .67rem; letter-spacing: .14em; text-transform: uppercase; color: #c9a84c; margin-bottom: 1.1rem }
.ftr-links { display: flex; flex-direction: column; gap: .55rem }
.ftr-links a { font-size: .86rem; color: #a09880; transition: color var(--ease) }
.ftr-links a:hover { color: #f0ece4 }
.ftr-contact { display: flex; flex-direction: column; gap: .55rem }
.ftr-ci { display: flex; gap: .5rem; align-items: flex-start; font-size: .85rem; color: #a09880 }
.ftr-ci a { color: #a09880 }
.ftr-ci a:hover { color: #c9a84c }
.nl p { font-size: .84rem; color: #a09880; line-height: 1.6; margin-bottom: .9rem }
.nl-form { display: flex; gap: .45rem; flex-wrap: wrap }
.nl-input {
    flex: 1; min-width: 140px; background: #1f1e1b; border: 1px solid #2a2820;
    border-radius: var(--r); padding: .62em 1em; font-size: .85rem; color: #f0ece4; font-family: inherit;
    transition: border-color var(--ease);
}
.nl-input::placeholder { color: #a09880 }
.nl-input:focus { outline: none; border-color: #c9a84c }
.nl-btn {
    background: #c9a84c; color: #0d0d0d; border-radius: var(--r);
    padding: .62em 1.1em; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    transition: background var(--ease);
}
.nl-btn:hover { background: #e0c37a }
.ftr-btm { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-block: 1.4rem }
.ftr-copy { font-size: .78rem; color: #a09880 }
.ftr-btm-links { display: flex; gap: 1.4rem }
.ftr-btm-links a { font-size: .78rem; color: #a09880 }
.ftr-btm-links a:hover { color: #f0ece4 }
.ftr .logo-name { color: #f0ece4 }
.ftr .logo-sub { color: #c9a84c }

/* =============================================
   SCHOLARSHIP FORM
   ============================================= */
.scholarship-intro {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    font-size: .95rem;
    line-height: 1.7;
}
.scholarship-form-wrap h3 {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: var(--gold-dk);
    margin: 2rem 0 1rem;
}
.scholarship-form-wrap hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
}
.scholarship-due {
    font-size: .95rem;
    color: var(--muted);
    margin-bottom: 1.5rem;
}
.cf7-inline-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.cf7-inline-row p { margin: 0 }
.scholarship-form-wrap .wpcf7-form p > label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .25rem;
}
.scholarship-form-wrap .wpcf7-form input[type="text"],
.scholarship-form-wrap .wpcf7-form input[type="email"],
.scholarship-form-wrap .wpcf7-form input[type="tel"],
.scholarship-form-wrap .wpcf7-form textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: .55rem .75rem;
    font-size: .9rem;
    font-family: var(--font-sans);
    background: #fff;
    transition: border-color var(--ease);
}
.scholarship-form-wrap .wpcf7-form input:focus,
.scholarship-form-wrap .wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,168,76,.12);
}
.scholarship-form-wrap .wpcf7-form textarea { min-height: 110px; resize: vertical }
.scholarship-form-wrap .wpcf7-submit {
    background: var(--gold);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: .8em 2.5em;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--ease);
    margin-top: .5rem;
}
.scholarship-form-wrap .wpcf7-submit:hover { background: var(--gold-dk) }
.scholarship-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: .8rem;
    color: var(--muted);
    line-height: 1.6;
}
@media (max-width: 640px) {
    .cf7-inline-row { grid-template-columns: 1fr 1fr }
}

/* =============================================
   SINGLE SHOW PAGE
   ============================================= */
.show-single-title {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 6vw, 4.25rem);
    line-height: 1.1;
    color: #f0ece4;
    margin-bottom: .5rem;
}
.show-single-byline {
    font-size: .95rem;
    color: #c9a84c;
    margin-top: .4rem;
}

/* Top section: artwork left, dates/info right */
.show-top-section { padding-block: 0 }
.show-top-grid {
    display: grid;
    grid-template-columns: minmax(260px, 420px) 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
    padding-block: var(--section);
}
.show-top-grid--no-img {
    grid-template-columns: 1fr;
    max-width: 680px;
}
.show-top-img img {
    width: 100%;
    border-radius: 8px;
    display: block;
    box-shadow: 0 6px 28px rgba(0,0,0,.14);
}
.show-top-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.show-info-heading {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 2.5vw, 1.6rem);
    color: var(--text);
    margin-bottom: .75rem;
}

/* Individual performance date rows */
.perf-dates-list { display: flex; flex-direction: column; gap: .5rem }
.pd-row {
    display: flex; align-items: center; gap: 1rem;
    padding: .75rem 1rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px;
}
.pd-date { font-weight: 700; font-size: .96rem; color: var(--text); flex: 1; min-width: 140px }
.pd-meta { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center }
.pd-time { font-size: .9rem; color: var(--gold); font-weight: 600 }
.pd-loc { font-size: .85rem; color: var(--muted) }

/* Fallback dates text */
.perf-dates-text { padding: .75rem 0 }
.pdt-dates { font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: .3rem }
.pdt-time { font-size: 1rem; color: var(--muted) }

/* Venue card */
.show-venue-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 1.25rem 1.5rem;
}
.show-venue-label {
    font-size: .65rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--gold); font-weight: 700; margin-bottom: .5rem;
}
.show-venue-name { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .25rem }
.show-venue-addr { font-size: .875rem; line-height: 1.6; white-space: pre-line; color: var(--muted); margin: 0 }

/* Ticket banner */
.show-ticket-banner {
    background: var(--gold);
    text-align: center;
    padding: 2rem 1rem;
}
.show-ticket-banner-btn {
    display: inline-block;
    background: #0d0d0d;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 1.1rem 4rem;
    border-radius: 3px;
    text-decoration: none;
}
.show-ticket-banner-btn:hover { background: #2a2a2a; color: #fff }
.show-ticket-info { font-size: .82rem; color: var(--muted); margin-top: .35rem }

/* Performance date cards (6-across grid) */
.perf-cards-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .75rem;
}
.perf-cards-grid--single { grid-template-columns: minmax(180px, 260px) }
.perf-card {
    border-radius: 8px;
    overflow: hidden;
    border-top: 3px solid #3a6ea8;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.pc-hdr {
    background: #1b3a5c;
    padding: .7rem .85rem;
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}
.pc-body {
    padding: .75rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.pc-row { display: flex; flex-direction: column; gap: .1rem }
.pc-lbl { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; color: #3a6ea8; font-weight: 700 }
.pc-val { font-size: .9rem; font-weight: 600; color: var(--text) }
.pc-tickets {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--gold);
    text-decoration: none;
    margin-top: .2rem;
}
.pc-tickets:hover { text-decoration: underline }

/* Document PDF links */
.show-docs { display: flex; flex-wrap: wrap; gap: 1rem }

/* Credits (description section) */
.show-credits {
    margin-top: 2rem;
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.show-credit {
    display: flex;
    gap: .75rem;
    font-size: .9rem;
}
.show-credit-role {
    color: var(--muted);
    min-width: 160px;
    flex-shrink: 0;
}
.show-credit-name {
    color: var(--text);
    font-weight: 500;
}

/* Legacy grids (kept for any other usage) */
.show-single-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 3.5rem;
    align-items: start;
}
.show-single-grid--no-img {
    grid-template-columns: 1fr;
    max-width: 780px;
    margin-inline: auto;
}
.show-single-img img {
    width: 100%;
    border-radius: 8px;
    display: block;
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
}

/* =============================================
   ACCESSIBILITY
   ============================================= */
.screen-reader-text {
    position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
    .show-preview { grid-template-columns: 1fr 1fr }
    .about-grid { grid-template-columns: 1fr }
    .camp-banner { grid-template-columns: 1fr }
    .camp-visual { width: clamp(140px, 50vw, 220px); margin: 0 auto }
    .ftr-grid { grid-template-columns: 1fr 1fr }
    .show-single-grid { grid-template-columns: 1fr }
    .show-single-img { order: -1 }
    .show-top-grid { grid-template-columns: 1fr }
    .show-top-img { max-width: 480px }
    .perf-cards-grid { grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 640px) {
    .pnav { display: none }
    .ntoggle { display: flex }
    .show-preview { grid-template-columns: 1fr }
    .ftr-grid { grid-template-columns: 1fr; gap: 2rem }
    .hero-title { font-size: 2.4rem }
    .donate-impact { gap: 1.75rem }
    .perf-cards-grid { grid-template-columns: repeat(2, 1fr) }
    /* Logo tag hidden on mobile — compact logo always visible instead */
    .logo-tag { display: none }
    .is-front-page .logo--compact { opacity: 1; pointer-events: auto }
    .is-front-page .hero-inner { padding-left: 0 }
    .is-front-page .hero-eyebrow { display: inline-flex }
}