:root {
    /* BRAND PALETTE — derived from actual JitB + WJF logo colors */
    --purple: #603090;            /* Primary brand purple — JitB note & WJF JAZZ wordmark */
    --purple-bright: #7848a8;     /* Lifted purple for hover/highlight */
    --purple-deep: #3d1f5c;       /* Deep background purple */
    --purple-ink: #261338;        /* Near-black purple for darkest backgrounds */
    --mauve: #b07090;             /* WJF right-hill mauve, secondary accent */
    --mauve-soft: #c89aab;        /* Softer mauve for subtle accents */
    --coral: #b07090;             /* Legacy var — maps to brand mauve; was the warm accent */
    --coral-soft: #c89aab;
    --cream: #f5ede0;             /* Warm off-white, primary text on dark */
    --cream-muted: #e8dfd0;       /* Slightly darker cream */
    --paper: #faf6ee;             /* Lightest cream for light-mode sections */
    --shadow-warm: 0 30px 80px -20px rgba(96, 48, 144, 0.45);

    /* Re-map of legacy --coral usage. Most --coral usages in the existing
       CSS are accent/highlight roles; on the real brand palette these read
       best as mauve (#b07090) which echoes the right hill of the WJF logo.
       True sun-coral is available as --sun for special placements. */
    --sun: #dc7070;

    /* Backwards-compat aliases so the existing site-wide CSS keeps working
       without 200 individual replacements. Old names now resolve to brand colors.
       Note: legacy --coral becomes mauve, because most uses of "coral" in the
       previous palette were filling the warm-accent role that --mauve plays in
       the real brand. True sun-coral (#dc7070) is reserved for special moments. */
    --navy-deep: var(--purple-ink);
    --navy: var(--purple-deep);
    --navy-mid: #4a2870;
    --coral-bright: var(--mauve-soft);
    --pink-soft: var(--mauve-soft);
    --pink-pale: #f0d5dc;
    --ink: var(--purple-ink);
    --white: #ffffff;

    /* TYPOGRAPHY — loaded via Adobe Typekit kit ieh4vwi
       Fallbacks are system defaults; the kit is the source of truth. */
    --font-display: 'ivypresto-display', 'Georgia', serif;
    --font-body: 'degular', system-ui, -apple-system, sans-serif;
    --font-display-hard: 'bebas-neue-pro', 'Impact', sans-serif;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-body);
    background: var(--navy-deep);
    color: var(--cream);
    overflow-x: hidden;
    line-height: 1.5;
    padding-top: 110px; /* clears the fixed nav bar (104px nav + breathing room) */
  }

  /* ====== BRAND MARKS ====== */
  /* Two distinct brands using the real logo files:
     1. JitB logo — used in the global nav and footer (umbrella nonprofit)
     2. WJF logo — used prominently on festival/sponsor pages (the event)

     Both logos arrive as purple-on-white PNGs. On the site's dark purple
     backgrounds the natural purple-on-purple won't read, so we use a CSS
     filter to convert the purple ink to cream for dark contexts. On light
     backgrounds (the .thesis, .mc-block, .sponsor-contact, .donate-impact,
     .mission-pillars sections) we render them at full color via .on-light. */

  /* JitB nav logo — small horizontal mark */
  .jitb-mark {
    cursor: pointer;
    display: flex; align-items: center;
    text-decoration: none;
  }
  .jitb-logo-img {
    height: 76px; width: auto;
    transition: opacity 0.3s;
  }
  .jitb-mark:hover .jitb-logo-img { opacity: 0.85; }
  /* Two variants of the JitB mark exist:
       - assets/jitb-logo.png       (original purple — for light backgrounds)
       - assets/jitb-logo-cream.png (cream pre-rendered — for dark backgrounds)
     The cream variant is the default in nav/footer since the site is mostly dark. */

  /* WJF festival logo — vertical lockup, used at multiple sizes */
  .wjf-logo-img {
    /* WJF logo is multicolor (purple + mauve + coral sun) so we cannot simply
       filter it. Instead the logo is designed to read against dark backgrounds
       already — purple deepens, mauve pops, coral sun glows. We let it sit
       on the dark purple background naturally with no filter. */
    width: auto;
    display: block;
  }
  .wjf-logo-img.size-hero { height: 280px; }
  .wjf-logo-img.size-large { height: 220px; }
  .wjf-logo-img.size-medium { height: 140px; }
  .wjf-logo-img.size-small { height: 80px; }
  .wjf-logo-img.size-tiny { height: 48px; }

  /* For dark backgrounds where the WJF purple is too close to background,
     we add a soft cream backdrop behind the logo. */
  .wjf-logo-wrap {
    display: inline-flex;
    padding: 24px 28px;
    background: rgba(245, 237, 224, 0.96);
    border-radius: 4px;
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.5);
  }
  .wjf-logo-wrap.tight {
    padding: 16px 20px;
  }
  .wjf-logo-wrap.minimal {
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  /* "Presented by JitB" attribution badge for WJF contexts */
  .presented-by {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    border: 1px solid rgba(245, 237, 224, 0.2);
    border-radius: 2px;
    background: rgba(245, 237, 224, 0.04);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(245, 237, 224, 0.75);
    margin-bottom: 24px;
  }
  .presented-by .by-label {
    color: var(--mauve);
    font-family: var(--font-display-hard);
    font-size: 9px;
    letter-spacing: 0.2em;
  }
  .presented-by .by-name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 13px;
    color: var(--cream);
    text-transform: none;
    letter-spacing: 0;
  }

  /* ====== NAV ====== */
  nav.topnav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 14px 48px;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(15, 19, 64, 0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .logo-mark {
    display: flex; align-items: center; gap: 12px;
    cursor: pointer;
    font-family: var(--font-display-hard);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 13px;
    color: var(--cream);
  }
  .logo-mark .mountain {
    width: 32px; height: 24px; position: relative;
  }
  .logo-mark svg { display: block; }
  nav ul { list-style: none; display: flex; gap: 28px; flex-wrap: nowrap; }
  nav ul a {
    color: var(--cream);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 0;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, color 0.2s;
    cursor: pointer;
    white-space: nowrap;
  }
  nav ul a:hover, nav ul a.active {
    border-color: var(--coral);
    color: var(--coral-bright);
  }
  .nav-cta {
    background: var(--coral);
    color: var(--navy-deep);
    padding: 10px 20px;
    border: none;
    border-radius: 2px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
  }
  .nav-cta:hover { background: var(--coral-bright); transform: translateY(-2px); }

  /* ====== PAGE ====== */
  .page { display: none; padding-top: 0; }
  .page.active { display: block; animation: fade 0.4s ease; }
  @keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

  /* ====== HOME HERO ====== */
  .hero {
    min-height: calc(100vh - 72px);
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 0;
    overflow: hidden;
    background:
      radial-gradient(ellipse at 80% 30%, rgba(255, 112, 104, 0.18), transparent 60%),
      radial-gradient(ellipse at 20% 80%, rgba(248, 197, 192, 0.12), transparent 50%),
      linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
  }
  .hero-content {
    padding: 80px 48px 80px 80px;
    display: flex; flex-direction: column; justify-content: center;
    position: relative; z-index: 2;
  }
  .hero-content-top {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 40px;
    align-items: center;
  }
  .hero-logo-col {
    flex-shrink: 0;
  }
  .hero-logo-col .wjf-logo-img.size-medium {
    height: 180px;
  }
  .hero-headline-col {
    min-width: 0;
  }
  .hero-headline-col .presented-by {
    margin-bottom: 16px;
  }
  .hero-eyebrow {
    color: var(--coral);
    font-family: var(--font-display-hard);
    font-weight: 400;
    letter-spacing: 0.32em;
    font-size: 15px;
    text-transform: uppercase;
    margin-bottom: 24px;
    display: flex; align-items: center; gap: 16px;
  }
  .hero-eyebrow::before {
    content: ''; width: 48px; height: 2px; background: var(--coral);
  }
  .hero h1 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(56px, 7vw, 104px);
    line-height: 0.92;
    letter-spacing: -0.025em;
    color: var(--cream);
    margin-bottom: 32px;
  }
  .hero h1 em {
    font-style: italic;
    font-weight: 300;
    color: var(--pink-soft);
  }
  .hero-dates {
    font-family: var(--font-display-hard);
    font-size: 15px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cream);
    margin-bottom: 12px;
  }
  .hero-venue {
    font-size: 16px;
    color: rgba(244, 237, 228, 0.65);
    margin-bottom: 48px;
  }
  .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
  .btn-primary, .btn-ghost {
    padding: 18px 32px;
    border: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 12px;
  }
  .btn-primary {
    background: var(--purple);
    color: var(--cream);
    box-shadow: var(--shadow-warm);
  }
  .btn-primary:hover { background: var(--purple-bright); transform: translateY(-3px); }
  .btn-ghost {
    background: transparent; color: var(--cream);
    border: 1px solid rgba(244, 237, 228, 0.3);
  }
  .btn-ghost:hover { border-color: var(--coral); color: var(--coral-bright); }
  .btn-primary .arrow, .btn-ghost .arrow {
    transition: transform 0.25s;
  }
  .btn-primary:hover .arrow, .btn-ghost:hover .arrow { transform: translateX(4px); }

  .hero-visual {
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .hero-visual::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(15, 19, 64, 0.6) 100%);
    z-index: 2;
  }
  .hero-img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(0.85) contrast(1.1) brightness(0.9);
    transition: filter 0.6s;
  }
  .hero-overlay-tag {
    position: absolute;
    bottom: 32px; right: 32px;
    z-index: 3;
    background: rgba(15, 19, 64, 0.85);
    backdrop-filter: blur(10px);
    border-left: 3px solid var(--coral);
    padding: 16px 20px;
    max-width: 240px;
  }
  .hero-overlay-tag .pill {
    font-family: var(--font-display-hard);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--coral);
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .hero-overlay-tag .name {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--cream);
    line-height: 1.1;
  }
  .hero-overlay-tag .role {
    font-size: 12px;
    color: rgba(244, 237, 228, 0.6);
    margin-top: 4px;
  }

  /* ====== MARQUEE ====== */
  .marquee-band {
    background: var(--purple);
    color: var(--cream);
    padding: 20px 0;
    overflow: hidden;
    white-space: nowrap;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
  }
  .marquee-track {
    display: inline-block;
    animation: marquee 38s linear infinite;
    font-family: var(--font-display-hard);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .marquee-track span {
    margin: 0 32px;
    display: inline-block;
  }
  .marquee-track .star { color: var(--mauve); opacity: 0.9; }
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* ====== SECTIONS ====== */
  section { padding: 120px 80px; position: relative; }
  .section-head {
    margin-bottom: 80px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    align-items: end;
  }
  .section-eyebrow {
    color: var(--coral);
    font-family: var(--font-display-hard);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .section-head h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--cream);
  }
  .section-head h2 em {
    font-style: italic; color: var(--pink-soft);
  }
  .section-head p {
    font-size: 18px;
    line-height: 1.55;
    color: rgba(244, 237, 228, 0.7);
    max-width: 560px;
  }

  /* ====== ARTIST GRID ====== */
  .artist-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: rgba(244, 237, 228, 0.08);
    margin: 0 -80px;
  }
  .artist-card {
    background: var(--navy);
    padding: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 3 / 4;
    transition: transform 0.4s;
  }
  .artist-card:hover { transform: translateY(-4px); }
  .artist-card.featured {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
  }
  .artist-card .photo {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(1) contrast(1.05);
    transition: filter 0.5s, transform 0.6s;
  }
  .artist-card:hover .photo { filter: grayscale(0.3) contrast(1.1); transform: scale(1.04); }
  .artist-card .overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(15, 19, 64, 0.98) 100%);
    z-index: 2;
  }
  .artist-card .info {
    position: absolute;
    bottom: 16px; left: 16px; right: 16px;
    z-index: 3;
    background: rgba(15, 19, 64, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 3px solid var(--coral);
    padding: 16px 20px;
  }
  .artist-card .info .tag {
    font-family: var(--font-display-hard);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--coral);
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .artist-card .info h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.05;
    color: var(--cream);
    margin-bottom: 6px;
  }
  .artist-card.featured .info h3 { font-size: 44px; }
  .artist-card .info p {
    font-size: 13px;
    color: rgba(244, 237, 228, 0.7);
    line-height: 1.4;
  }

  /* ====== THESIS SECTION ====== */
  .thesis {
    background: var(--cream);
    color: var(--navy-deep);
  }
  .thesis .section-head h2 { color: var(--navy-deep); }
  .thesis .section-head h2 em { color: var(--coral); }
  .thesis .section-eyebrow { color: var(--coral); }
  .thesis .section-head p { color: rgba(15, 19, 64, 0.7); }
  .thesis-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .thesis-body p {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 26px;
    line-height: 1.45;
    color: var(--navy-deep);
    margin-bottom: 32px;
    letter-spacing: -0.01em;
  }
  .thesis-body p em {
    font-style: italic; color: var(--coral);
  }
  .thesis-body p strong {
    font-weight: 500; color: var(--navy-deep);
  }
  .thesis-pull {
    border-left: 2px solid var(--coral);
    padding: 12px 0 12px 32px;
    margin-top: 48px;
  }
  .thesis-pull .quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 22px;
    line-height: 1.4;
    color: var(--navy-deep);
    margin-bottom: 16px;
  }
  .thesis-pull .attr {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(15, 19, 64, 0.6);
    font-weight: 600;
  }

  /* ====== STATS ====== */
  .stats-band {
    background: var(--navy-deep);
    padding: 100px 80px;
    border-top: 1px solid rgba(255, 112, 104, 0.2);
    border-bottom: 1px solid rgba(255, 112, 104, 0.2);
  }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px;
  }
  .stat .number {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(56px, 6vw, 88px);
    line-height: 1;
    color: var(--coral);
    letter-spacing: -0.03em;
    margin-bottom: 16px;
  }
  .stat .label {
    font-size: 14px;
    color: rgba(244, 237, 228, 0.75);
    line-height: 1.4;
    max-width: 220px;
  }
  .stats-caption {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 60px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 22px;
    color: rgba(244, 237, 228, 0.7);
    max-width: 800px;
    margin-left: auto; margin-right: auto;
  }

  /* ====== VENUES ====== */
  .venues {
    background: linear-gradient(180deg, var(--navy-deep), var(--navy));
  }
  .venue-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .venue-card {
    background: rgba(244, 237, 228, 0.03);
    border: 1px solid rgba(244, 237, 228, 0.08);
    padding: 40px;
    transition: border-color 0.3s, transform 0.3s;
  }
  .venue-card:hover {
    border-color: var(--coral);
    transform: translateY(-4px);
  }
  .venue-card .num {
    font-family: var(--font-display-hard);
    font-size: 14px;
    color: var(--coral);
    letter-spacing: 0.2em;
    margin-bottom: 24px;
  }
  .venue-card h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 28px;
    color: var(--cream);
    margin-bottom: 16px;
    line-height: 1.1;
  }
  .venue-card p {
    color: rgba(244, 237, 228, 0.65);
    font-size: 14px;
    line-height: 1.55;
  }

  /* ====== LOCAL PARTNER GUIDE CARDS ====== */
  .guide-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .guide-card {
    background: rgba(244, 237, 228, 0.03);
    border: 1px solid rgba(244, 237, 228, 0.08);
    padding: 32px;
    transition: border-color 0.3s, transform 0.3s;
  }
  .guide-card:hover {
    border-color: var(--coral);
    transform: translateY(-4px);
  }
  .guide-card .kind {
    font-family: var(--font-display-hard);
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 12px;
  }
  .guide-card h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 24px;
    color: var(--cream);
    margin-bottom: 8px;
    line-height: 1.15;
  }
  .guide-card .meta {
    font-size: 13px;
    color: rgba(244, 237, 228, 0.55);
    margin-bottom: 12px;
  }
  .guide-card p {
    color: rgba(244, 237, 228, 0.65);
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 12px;
  }
  .guide-card .address {
    font-size: 13px;
    color: rgba(244, 237, 228, 0.75);
  }

  /* ====== FOUNDING SPONSOR CTA ====== */
  .founding-cta {
    background:
      radial-gradient(ellipse at top right, rgba(255, 112, 104, 0.2), transparent 60%),
      var(--navy);
    padding: 140px 80px;
    position: relative;
    overflow: hidden;
  }
  .founding-cta::before {
    content: 'BE PART';
    position: absolute;
    top: 40px; right: -60px;
    font-family: var(--font-display-hard);
    font-size: 300px;
    color: rgba(255, 112, 104, 0.04);
    line-height: 0.8;
    pointer-events: none;
    z-index: 0;
  }
  .founding-cta-content {
    max-width: 900px;
    position: relative; z-index: 1;
  }
  .founding-cta h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(48px, 6vw, 84px);
    line-height: 1;
    color: var(--cream);
    margin-bottom: 32px;
    letter-spacing: -0.02em;
  }
  .founding-cta h2 em { font-style: italic; color: var(--coral); }
  .founding-cta p {
    font-size: 19px;
    line-height: 1.6;
    color: rgba(244, 237, 228, 0.75);
    max-width: 680px;
    margin-bottom: 40px;
  }

  /* ====== FOOTER ====== */
  footer {
    background: var(--ink);
    padding: 80px 80px 40px;
    border-top: 1px solid rgba(244, 237, 228, 0.08);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
  }
  .footer-brand {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--cream);
    line-height: 1.4;
    margin-bottom: 20px;
  }
  .footer-tagline {
    color: rgba(244, 237, 228, 0.5);
    font-size: 14px;
    line-height: 1.6;
  }
  .footer-col h4 {
    font-family: var(--font-display-hard);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--coral);
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .footer-col ul { list-style: none; }
  .footer-col li { margin-bottom: 12px; }
  .footer-col a {
    color: rgba(244, 237, 228, 0.65);
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.2s;
  }
  .footer-col a:hover { color: var(--coral); }
  .footer-bottom {
    border-top: 1px solid rgba(244, 237, 228, 0.08);
    padding-top: 30px;
    display: flex; justify-content: space-between; align-items: center;
    color: rgba(244, 237, 228, 0.4);
    font-size: 12px;
  }
  .footer-credit {
    padding-top: 20px;
    text-align: center;
    font-size: 12px;
    color: rgba(244, 237, 228, 0.4);
  }
  .footer-credit a {
    color: rgba(244, 237, 228, 0.4);
    text-decoration: underline;
    transition: color 0.2s;
  }
  .footer-credit a:hover {
    color: rgba(244, 237, 228, 0.7);
  }
  .sponsors-row {
    display: flex; align-items: stretch; gap: 24px;
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(244, 237, 228, 0.08);
    flex-wrap: wrap;
  }
  .sponsors-row .label {
    flex: 0 0 100%;
    font-family: var(--font-display-hard);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: rgba(244, 237, 228, 0.5);
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  /* Each logo box is a fixed, equal-size tile (~1/3 of the row width) —
     whatever logo a sponsor provides is scaled to fit and centered inside,
     rather than rendering at its own natural (wildly inconsistent) size. */
  .sponsor-logo {
    flex: 0 0 calc((100% - 48px) / 3);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    padding: 16px;
    background: rgba(244, 237, 228, 0.03);
    border: 1px solid rgba(244, 237, 228, 0.08);
  }
  .sponsor-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }
  .sponsor-chip {
    flex: 0 0 calc((100% - 48px) / 3);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 220px;
    background: rgba(244, 237, 228, 0.05);
    color: rgba(244, 237, 228, 0.7);
    font-size: 13px;
    border: 1px solid rgba(244, 237, 228, 0.08);
  }

  /* ====== FESTIVAL PAGE ====== */
  .festival-hero {
    padding: 120px 80px 80px;
    background:
      radial-gradient(ellipse at 70% 50%, rgba(255, 112, 104, 0.15), transparent 60%),
      var(--navy-deep);
    position: relative;
  }
  .festival-hero h1 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(64px, 8vw, 120px);
    line-height: 0.92;
    letter-spacing: -0.03em;
    color: var(--cream);
    margin-bottom: 32px;
    max-width: 1100px;
  }
  .festival-hero h1 em { font-style: italic; color: var(--pink-soft); }
  .festival-meta {
    display: flex; gap: 48px; flex-wrap: wrap;
    margin-bottom: 48px;
  }
  .festival-meta .item .lbl {
    font-family: var(--font-display-hard);
    font-size: 11px;
    color: var(--coral);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .festival-meta .item .val {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--cream);
  }

  /* Passes */
  .passes-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 24px;
  }
  .pass-card {
    background: rgba(244, 237, 228, 0.04);
    border: 1px solid rgba(244, 237, 228, 0.1);
    padding: 32px;
    position: relative;
    transition: all 0.3s;
  }
  .pass-card:hover {
    border-color: var(--coral);
    background: rgba(255, 112, 104, 0.05);
  }
  .pass-card.featured {
    border-color: var(--coral);
    background: linear-gradient(180deg, rgba(255, 112, 104, 0.08), transparent);
  }
  .pass-card .ribbon {
    position: absolute; top: -1px; right: -1px;
    background: var(--coral); color: var(--navy-deep);
    font-family: var(--font-display-hard);
    font-size: 10px; letter-spacing: 0.15em;
    padding: 6px 12px;
    text-transform: uppercase;
  }
  .pass-card h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 26px;
    color: var(--cream);
    margin-bottom: 8px;
  }
  .pass-card .when {
    font-size: 13px;
    color: rgba(244, 237, 228, 0.55);
    margin-bottom: 24px;
  }
  .pass-card .price {
    font-family: var(--font-display);
    font-size: 48px;
    color: var(--coral);
    line-height: 1;
    margin-bottom: 4px;
  }
  .pass-card .price-base { font-size: 11px; color: rgba(244, 237, 228, 0.5); margin-bottom: 24px; letter-spacing: 0.1em; text-transform: uppercase; }
  .pass-card .vip {
    background: rgba(244, 237, 228, 0.04);
    padding: 16px;
    margin-bottom: 24px;
    border-left: 2px solid var(--coral);
  }
  .pass-card .vip-head {
    font-family: var(--font-display-hard);
    font-size: 11px;
    color: var(--coral);
    letter-spacing: 0.15em;
    margin-bottom: 6px;
  }
  .pass-card .vip-price { font-family: var(--font-display); font-size: 24px; color: var(--cream); margin-bottom: 12px; }
  .pass-card .vip ul { list-style: none; }
  .pass-card .vip li {
    font-size: 12px;
    color: rgba(244, 237, 228, 0.65);
    padding: 3px 0;
  }
  .pass-card .vip li::before { content: '+ '; color: var(--coral); font-weight: 700; }
  .pass-card .pass-btn {
    width: 100%;
    display: inline-block;
    background: transparent;
    border: 1px solid var(--coral);
    color: var(--coral);
    padding: 14px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
  }
  .pass-card .pass-btn:hover {
    background: var(--coral); color: var(--navy-deep);
  }

  /* Schedule */
  .schedule-day {
    border-top: 1px solid rgba(244, 237, 228, 0.1);
    padding: 40px 0;
  }
  .schedule-day-head {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 60px;
    margin-bottom: 32px;
    align-items: baseline;
  }
  .schedule-day-head .date {
    font-family: var(--font-display-hard);
    font-size: 14px;
    letter-spacing: 0.2em;
    color: var(--coral);
    text-transform: uppercase;
  }
  .schedule-day-head .day-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 48px;
    color: var(--cream);
    line-height: 1;
  }
  .schedule-item {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: 60px;
    padding: 24px 0;
    border-top: 1px dashed rgba(244, 237, 228, 0.08);
    align-items: center;
    transition: background 0.2s;
  }
  .schedule-item:hover { background: rgba(255, 112, 104, 0.04); }
  .schedule-item .time {
    font-family: var(--font-display-hard);
    font-size: 14px;
    color: var(--coral);
    letter-spacing: 0.1em;
  }
  .schedule-item .item-main h4 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 26px;
    color: var(--cream);
    margin-bottom: 4px;
  }
  .schedule-item .item-main .venue {
    font-size: 13px;
    color: rgba(244, 237, 228, 0.55);
  }
  .schedule-item .ticket-btn {
    background: transparent;
    border: 1px solid rgba(244, 237, 228, 0.2);
    color: var(--cream);
    padding: 10px 18px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
  }
  .schedule-item .ticket-btn:hover { border-color: var(--coral); color: var(--coral); }

  /* Artist profiles on festival page */
  .artist-profiles {
    padding: 120px 80px;
    background: linear-gradient(180deg, var(--navy-deep), var(--navy));
  }
  .profile-list { display: flex; flex-direction: column; gap: 8px; }
  .profile-row {
    display: grid;
    grid-template-columns: 320px 1fr auto;
    gap: 48px;
    padding: 32px;
    background: rgba(244, 237, 228, 0.03);
    border: 1px solid rgba(244, 237, 228, 0.06);
    transition: all 0.4s;
    align-items: center;
  }
  .profile-row:hover {
    background: rgba(255, 112, 104, 0.05);
    border-color: rgba(255, 112, 104, 0.3);
    transform: translateX(8px);
  }
  .profile-photo {
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    filter: grayscale(1) contrast(1.05);
    transition: filter 0.4s;
  }
  .profile-row:hover .profile-photo { filter: grayscale(0.3) contrast(1.1); }
  .profile-info .tag {
    font-family: var(--font-display-hard);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--coral);
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .profile-info h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 36px;
    color: var(--cream);
    line-height: 1.05;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
  }
  .profile-info .credit {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    color: var(--pink-soft);
    margin-bottom: 16px;
  }
  .profile-info .bio {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(244, 237, 228, 0.7);
    max-width: 620px;
  }
  .profile-when {
    text-align: right;
    border-left: 1px solid rgba(244, 237, 228, 0.1);
    padding-left: 32px;
    min-width: 140px;
  }
  .profile-when .day {
    font-family: var(--font-display-hard);
    font-size: 11px;
    color: var(--coral);
    letter-spacing: 0.2em;
    margin-bottom: 6px;
  }
  .profile-when .time {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--cream);
    margin-bottom: 8px;
  }
  .profile-when .venue {
    font-size: 11px;
    color: rgba(244, 237, 228, 0.5);
    line-height: 1.4;
  }
  @media (max-width: 1024px) {
    .profile-row { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
    .profile-when { border-left: none; border-top: 1px solid rgba(244, 237, 228, 0.1); padding-left: 0; padding-top: 16px; text-align: left; }
  }

  .about-ed-letter {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
  }
  @media (max-width: 900px) {
    .about-ed-letter {
      grid-template-columns: 1fr;
      gap: 40px;
    }
  }

  /* Legacy page two-column grids — collapse to single column on mobile */
  .tier-grid-two-col {
    grid-template-columns: 1fr 1fr !important;
  }
  @media (max-width: 900px) {
    .tier-grid-two-col {
      grid-template-columns: 1fr !important;
    }
  }
  .board-featured-card {
    grid-column: 1 / span 3;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 48px;
    align-items: center;
    padding: 48px;
  }
  @media (max-width: 900px) {
    .board-featured-card {
      grid-column: 1;
      grid-template-columns: 1fr;
      gap: 32px;
      padding: 32px;
    }
  }
  .legacy-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
  .legacy-gennari-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    align-items: center;
  }
  @media (max-width: 900px) {
    .legacy-two-col, .legacy-gennari-grid {
      grid-template-columns: 1fr;
      gap: 40px;
    }
  }

  /* MC block */
  .mc-section {
    padding: 100px 80px;
    background: var(--purple-deep);
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .mc-section-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 80px;
    align-items: center;
  }
  @media (max-width: 900px) {
    .mc-section-inner { grid-template-columns: 1fr; gap: 40px; }
    .mc-section { padding: 60px 24px; }
  }

  .mc-block {
    background: var(--cream);
    padding: 120px 80px;
    color: var(--navy-deep);
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    align-items: center;
  }
  .mc-block .photo-block {
    aspect-ratio: 4/5;
    background: var(--navy-deep);
    background-size: cover;
    background-position: center;
    filter: grayscale(1);
  }
  .mc-block .mc-eyebrow {
    font-family: var(--font-display-hard);
    color: var(--coral);
    font-size: 12px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .mc-block h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 56px;
    line-height: 1;
    color: var(--navy-deep);
    margin-bottom: 24px;
  }
  .mc-block .mc-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 22px;
    color: var(--coral);
    margin-bottom: 32px;
    line-height: 1.4;
  }
  .mc-block .mc-bio {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(15, 19, 64, 0.75);
    margin-bottom: 16px;
  }

  /* ====== SPONSORSHIP PAGE ====== */
  .sponsor-hero {
    padding: 120px 80px 80px;
    background:
      radial-gradient(ellipse at 30% 30%, rgba(255, 112, 104, 0.18), transparent 60%),
      var(--navy-deep);
  }
  .sponsor-hero .lead {
    font-family: var(--font-display-hard);
    color: var(--coral);
    font-size: 13px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 24px;
  }
  .sponsor-hero h1 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(48px, 6vw, 88px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--cream);
    margin-bottom: 32px;
    max-width: 1100px;
  }
  .sponsor-hero h1 em { font-style: italic; color: var(--pink-soft); }
  .sponsor-hero .deck {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 24px;
    color: rgba(244, 237, 228, 0.8);
    max-width: 760px;
    line-height: 1.5;
    margin-bottom: 40px;
  }

  /* Founding match card */
  .match-card {
    background: var(--purple);
    color: var(--cream);
    padding: 60px 80px;
    margin: 80px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 60px;
    align-items: center;
  }
  .match-card .big-num {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 120px;
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--cream);
  }
  .match-card h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.1;
    margin-bottom: 12px;
    color: var(--cream);
  }
  .match-card p {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(245, 237, 224, 0.85);
    max-width: 560px;
  }
  .match-card .btn-dark {
    background: var(--purple-ink);
    color: var(--cream);
    padding: 20px 32px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
  }
  .match-card .btn-dark:hover { background: #000; }

  /* Tier ladder */
  .tier-section {
    padding: 80px;
  }
  .tier-grid-premier {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
  }
  .tier-grid-event {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 60px;
  }
  .tier-card {
    background: rgba(244, 237, 228, 0.04);
    border: 1px solid rgba(244, 237, 228, 0.08);
    padding: 40px;
    position: relative;
    transition: all 0.3s;
  }
  .tier-card:hover {
    border-color: var(--coral);
    transform: translateY(-4px);
  }
  .tier-card.premier {
    background: linear-gradient(135deg, rgba(255, 112, 104, 0.12), rgba(248, 197, 192, 0.04));
    border-color: rgba(255, 112, 104, 0.3);
  }
  .tier-card .tier-tag {
    font-family: var(--font-display-hard);
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--coral);
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .tier-card h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 32px;
    color: var(--cream);
    margin-bottom: 8px;
    line-height: 1.05;
  }
  .tier-card .availability {
    font-size: 12px;
    color: rgba(244, 237, 228, 0.5);
    margin-bottom: 24px;
    font-style: italic;
  }
  .tier-card .tier-price {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 56px;
    color: var(--coral);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
  }
  .tier-card.premier .tier-price { font-size: 72px; }
  .tier-card ul {
    list-style: none;
    margin-bottom: 32px;
  }
  .tier-card li {
    padding: 8px 0;
    font-size: 14px;
    color: rgba(244, 237, 228, 0.75);
    border-bottom: 1px solid rgba(244, 237, 228, 0.05);
    display: flex; gap: 12px; align-items: flex-start;
  }
  .tier-card li::before {
    content: '→';
    color: var(--coral);
    font-weight: 700;
    flex-shrink: 0;
  }
  .tier-card .tier-btn {
    width: 100%;
    background: transparent;
    border: 1px solid var(--coral);
    color: var(--coral);
    padding: 14px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
  }
  .tier-card .tier-btn:hover { background: var(--coral); color: var(--navy-deep); }

  .addons-section {
    background: rgba(244, 237, 228, 0.02);
    padding: 80px;
    border-top: 1px solid rgba(244, 237, 228, 0.06);
  }
  .addons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
  }
  .addon-col h4 {
    font-family: var(--font-display-hard);
    font-size: 13px;
    color: var(--coral);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 112, 104, 0.3);
  }
  .addon-col .addon-row {
    display: flex; justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid rgba(244, 237, 228, 0.05);
    font-size: 14px;
  }
  .addon-col .addon-row .name { color: rgba(244, 237, 228, 0.8); }
  .addon-col .addon-row .price {
    font-family: var(--font-display);
    color: var(--coral);
    font-size: 17px;
  }

  /* Contact form block */
  .sponsor-contact {
    background: var(--cream);
    color: var(--navy-deep);
    padding: 120px 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
  .sponsor-contact h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1;
    color: var(--navy-deep);
    margin-bottom: 24px;
  }
  .sponsor-contact h2 em { color: var(--coral); font-style: italic; }
  .sponsor-contact p {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(15, 19, 64, 0.7);
    margin-bottom: 32px;
  }
  .contact-info {
    background: var(--navy-deep);
    color: var(--cream);
    padding: 48px;
  }
  .contact-info .name {
    font-family: var(--font-display);
    font-size: 28px;
    margin-bottom: 8px;
  }
  .contact-info .title {
    font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 32px;
  }
  .contact-info .row {
    padding: 14px 0;
    border-top: 1px solid rgba(244, 237, 228, 0.1);
    font-size: 15px;
  }
  .contact-info .row .lbl {
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(244, 237, 228, 0.5);
    margin-bottom: 4px;
  }
  .contact-info .row .val { color: var(--cream); }
  .contact-info a { color: var(--coral); text-decoration: none; }

  /* ====== ABOUT PAGE ====== */
  .about-hero {
    padding: 140px 80px 80px;
    background: var(--navy-deep);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .about-hero h1 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(48px, 6vw, 88px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--cream);
    margin-bottom: 32px;
  }
  .about-hero h1 em { font-style: italic; color: var(--pink-soft); }
  .about-hero p {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 22px;
    line-height: 1.55;
    color: rgba(244, 237, 228, 0.8);
    margin-bottom: 24px;
  }
  .about-image {
    aspect-ratio: 4/5;
    background:
      linear-gradient(135deg, rgba(255, 112, 104, 0.1), transparent),
      var(--navy);
    background-size: cover;
    background-position: center;
    filter: grayscale(0.6);
  }
  .mission-pillars {
    padding: 120px 80px;
    background: var(--cream);
    color: var(--navy-deep);
  }
  .pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }
  .pillar {
    border-top: 2px solid var(--coral);
    padding-top: 32px;
  }
  .pillar .num {
    font-family: var(--font-display);
    font-size: 48px;
    color: var(--coral);
    line-height: 1;
    margin-bottom: 16px;
  }
  .pillar h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 28px;
    color: var(--navy-deep);
    margin-bottom: 16px;
    line-height: 1.1;
  }
  .pillar p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(15, 19, 64, 0.7);
  }

  /* ====== BOARD PAGE ====== */
  .board-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    padding: 0 80px 80px;
  }
  .board-card {
    background: rgba(244, 237, 228, 0.04);
    border: 1px solid rgba(244, 237, 228, 0.08);
    padding: 32px;
    transition: all 0.3s;
  }
  .board-card:hover {
    border-color: var(--coral);
    transform: translateY(-4px);
  }
  .board-card .photo {
    aspect-ratio: 1/1;
    background:
      linear-gradient(135deg, var(--navy-mid), var(--navy));
    margin-bottom: 24px;
    filter: grayscale(1);
    background-size: cover;
    background-position: center;
  }
  .board-card h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 24px;
    color: var(--cream);
    margin-bottom: 6px;
  }
  .board-card .role {
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 16px;
  }
  .board-card p {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(244, 237, 228, 0.7);
  }

  /* ====== DONATE PAGE ====== */
  .donate-hero {
    padding: 140px 80px 80px;
    background:
      radial-gradient(ellipse at 70% 30%, rgba(255, 112, 104, 0.2), transparent 60%),
      var(--navy-deep);
    text-align: center;
  }
  .donate-hero h1 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(56px, 7vw, 104px);
    line-height: 0.95;
    color: var(--cream);
    max-width: 1000px;
    margin: 0 auto 32px;
    letter-spacing: -0.02em;
  }
  .donate-hero h1 em { font-style: italic; color: var(--coral); }
  .donate-hero p {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 22px;
    color: rgba(244, 237, 228, 0.75);
    max-width: 720px;
    margin: 0 auto 48px;
    line-height: 1.5;
  }
  .donate-amounts {
    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
    margin-bottom: 32px;
  }
  .donate-amount {
    background: transparent;
    border: 1px solid rgba(244, 237, 228, 0.2);
    color: var(--cream);
    padding: 24px 36px;
    font-family: var(--font-display);
    font-size: 28px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .donate-amount:hover, .donate-amount.active {
    border-color: var(--coral);
    background: rgba(255, 112, 104, 0.1);
    color: var(--coral);
  }
  .donate-impact {
    padding: 120px 80px;
    background: var(--cream);
    color: var(--navy-deep);
  }
  .impact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
  }
  .impact-item {
    text-align: left;
  }
  .impact-item .amt {
    font-family: var(--font-display);
    font-size: 56px;
    color: var(--coral);
    line-height: 1;
    margin-bottom: 16px;
  }
  .impact-item h4 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 22px;
    color: var(--navy-deep);
    margin-bottom: 12px;
  }
  .impact-item p {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(15, 19, 64, 0.65);
  }

  /* Hamburger button — hidden on desktop, visible on mobile */
  .nav-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
  }
  .nav-toggle span {
    display: block;
    height: 2px;
    background: var(--cream);
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
  }

  /* ====== UTILITIES & MOBILE ====== */
  @media (max-width: 1024px) {
    nav.topnav { padding: 10px 20px; }
    .jitb-logo-img { height: 56px; }
    body { padding-top: 80px; }

    /* Get Tickets stays visible on mobile but more compact */
    nav.topnav > .nav-cta {
      padding: 10px 16px;
      font-size: 11px;
    }

    /* Show hamburger */
    .nav-toggle { display: flex !important; }

    /* Mobile slide-down menu */
    nav.topnav ul {
      display: flex !important;
      flex-direction: column !important;
      position: absolute !important;
      top: 100% !important;
      left: 0;
      right: 0;
      background: rgba(15, 19, 64, 0.97);
      backdrop-filter: blur(20px);
      gap: 0 !important;
      padding: 0 24px !important;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease, padding 0.35s ease;
      box-shadow: 0 8px 24px -8px rgba(0,0,0,0.4);
    }
    nav.topnav.menu-open ul {
      max-height: 600px;
      padding: 20px 24px 32px !important;
    }
    nav.topnav ul li {
      list-style: none;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    nav.topnav ul li:last-child { border-bottom: none; }
    nav.topnav ul li a {
      display: block;
      padding: 18px 4px;
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 400;
      color: var(--cream);
      text-decoration: none;
      letter-spacing: -0.01em;
    }
    nav.topnav ul li a.active {
      color: var(--mauve-soft);
    }

    section, .stats-band, .founding-cta, .tier-section, .addons-section, .sponsor-contact, .mission-pillars, .donate-impact, .festival-hero, .sponsor-hero, .about-hero, .donate-hero { padding: 60px 24px; }
    .hero { grid-template-columns: 1fr; }
    .hero-content { padding: 60px 24px; }
    .hero-content-top { grid-template-columns: 1fr; gap: 24px; }
    .hero-logo-col .wjf-logo-img.size-medium { height: 120px; }
    .hero-visual { min-height: 380px; }
    .section-head, .thesis-grid, .stats-grid, .venue-grid, .guide-grid, .pillar-grid, .impact-grid, .board-grid, .footer-grid, .mc-block, .about-hero, .sponsor-contact { grid-template-columns: 1fr; gap: 32px; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .artist-grid { grid-template-columns: 1fr 1fr; margin: 0 -24px; }
    .artist-card.featured { grid-column: span 2; grid-row: span 1; aspect-ratio: 3/4; }
    /* Long names + bio blurbs were wrapping onto many lines and pushing the
       info overlay up over most of the photo. Drop the blurb and shrink the
       name on mobile so the card stays mostly photo. */
    .artist-card .info p { display: none; }
    .artist-card .info h3 { font-size: 19px; }
    .artist-card.featured .info h3 { font-size: 26px; }
    .tier-grid-premier, .tier-grid-event, .passes-grid, .addons-grid, .board-grid { grid-template-columns: 1fr; }
    .schedule-day-head, .schedule-item { grid-template-columns: 1fr; gap: 12px; }
    .match-card { grid-template-columns: 1fr; padding: 40px 24px; margin: 24px; gap: 24px; }
    .match-card .big-num { font-size: 80px; }
    .footer-bottom { flex-direction: column; gap: 12px; }
    .sponsor-logo, .sponsor-chip { flex: 0 0 calc(50% - 12px); height: 180px; }
  }
  /* ====== ARTIST NAME LINKS ======
     Artist names in headings are wrapped in <a class="artist-link">. Without
     this rule they render in default browser link blue/visited-purple, which
     is illegible on the dark sections. Inherit the heading's cream instead. */
  a.artist-link {
    color: inherit;
    text-decoration: none;
  }
  .artist-card .info h3,
  .profile-info h3,
  .hero-overlay-tag .name {
    color: #ffffff;
    text-shadow: 0 0 1px rgba(20, 8, 35, 0.95), 0 1px 2px rgba(20, 8, 35, 0.9), 0 6px 24px rgba(20, 8, 35, 0.55);
  }
  a.artist-link:hover {
    color: var(--mauve-soft);
    text-decoration: underline;
    text-underline-offset: 4px;
  }