/* ============================================================
   index.css — rules specific to index.html.
   Loaded after css/styles.css, which holds the shared base.
   ============================================================ */

:root {
    /* Vivid vermillion red - flamboyant blooms */
    --c-red: #d72e1f;
    --c-red-deep: #a81910;
    --c-red-bright: #ee4631;
    --c-coral: #ec5237;
    /* Bright leaf green - alive, not shadow */
    --c-green: #1f8f3e;
    --c-green-deep: #136a2b;
    --c-green-soft: #57b870;
    --c-green-pale: #e6f1e3;
    /* (gold removed per brand direction - mapped to green so no yellow appears) */
    --c-gold: #2c8f47;
    --c-gold-deep: #136a2b;
    /* Earthtone third color (from Design 2) */
    --c-paper: #f7f3ec;
    --c-paper-deep: #ede2c7;
    --c-cream: #faf4e8;
    --c-cream-warm: #f1e7d1;
    /* Dark anchors */
    --c-ink: #1a1410;
    --c-ink-soft: #3d342a;
    --c-muted: #7a6a5a;
    --c-line: #e3d8c1;

    --shadow-sm: 0 2px 8px rgba(26, 20, 16, 0.06);
    --shadow-md: 0 16px 36px rgba(26, 20, 16, 0.12);
    --shadow-lg: 0 30px 60px rgba(26, 20, 16, 0.20);

    --radius-sm: 6px;
    --radius-md: 14px;
    --radius-lg: 26px;
    --radius-pill: 999px;

    --container: 1280px;
    --gutter: clamp(20px, 4vw, 56px);

    --t-fast: 0.2s cubic-bezier(.4,0,.2,1);
    --t-med: 0.45s cubic-bezier(.4,0,.2,1);
  }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--c-ink);
    background: var(--c-cream);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

a:hover { color: var(--c-red-deep); }

h1 { font-size: clamp(2.5rem, 6.5vw, 5.4rem); font-weight: 800; letter-spacing: -0.025em; }

h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 700; }

h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 600; }

h4 { font-size: 1.1rem; font-weight: 600; }

section { padding: clamp(54px, 7vw, 95px) 0; position: relative; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-green);
    margin-bottom: 20px;
  }

.lead { font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--c-ink-soft); max-width: 64ch; }

/* ---------- Buttons ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    transition: all var(--t-med);
    border: 2px solid transparent;
    white-space: nowrap;
    cursor: pointer;
  }

.btn-primary {
    background: var(--c-red);
    color: #fff;
    box-shadow: 0 10px 26px rgba(192,57,43,0.30);
  }

.btn-primary:hover { background: var(--c-red-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(192,57,43,0.40); }

.btn-dark {
    background: var(--c-ink);
    color: #fff;
  }

.btn-dark:hover { background: var(--c-green-deep); color: #fff; transform: translateY(-2px); }

.btn-outline:hover { background: var(--c-ink); color: #fff; transform: translateY(-2px); }

.btn-light {
    background: rgba(255,255,255,0.14);
    color: #fff;
    border-color: rgba(255,255,255,0.5);
    backdrop-filter: blur(8px);
  }

.btn-light:hover { background: #fff; color: var(--c-green-deep); border-color: #fff; }

.btn-ghost {
    background: transparent;
    color: var(--c-ink);
    padding: 0;
    font-weight: 600;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

.btn-ghost:hover { color: var(--c-red); gap: 12px; }

/* ---------- Header ---------- */
  .site-header {
    position: fixed;
    top: 14px;
    left: clamp(14px, 2vw, 28px);
    right: clamp(14px, 2vw, 28px);
    z-index: 100;
    padding: 8px clamp(18px, 2vw, 28px);
    transition: all var(--t-med);
    background: transparent;
    border-radius: var(--radius-pill);
  }

.site-header > .container { padding: 0; max-width: none; }

.site-header.scrolled { padding: 6px clamp(18px, 2vw, 28px); top: 10px; }

/* Solid blurred strip behind the menu only - does not darken the hero photo below */
  .site-header.on-dark:not(.scrolled) {
    background: rgba(19,61,39,0.55);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: none;
    /* Lightweight 3D ribbon: light highlight + green + soft red */
    box-shadow:
      0 1px 0 rgba(255,255,255,0.85),
      0 3px 0 rgba(31,143,62,0.90),
      0 5px 0 rgba(215,46,31,0.55),
      0 8px 14px rgba(0,0,0,0.14);
  }

.site-header.scrolled {
    background: rgba(250, 244, 232, 0.96);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: none;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.95),
      0 3px 0 rgba(31,143,62,0.85),
      0 5px 0 rgba(215,46,31,0.45),
      0 8px 14px rgba(26,20,16,0.06);
  }

.site-header.on-dark:not(.scrolled) { color: #fff; }

.site-header.on-dark:not(.scrolled) .brand-text strong { color: #fff; }

.site-header.on-dark:not(.scrolled) .brand-text span { color: var(--c-green-soft); }

.site-header.on-dark:not(.scrolled) .nav-links a {
    color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,0.45);
  }

.site-header.on-dark:not(.scrolled) .btn-outline { color: #fff; border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); }

.site-header.on-dark:not(.scrolled) .btn-outline:hover { background: #fff; color: var(--c-ink); border-color: #fff; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--c-ink); }

.brand img { width: 54px; height: 54px; object-fit: contain; }

.brand-text strong { font-family: 'Fraunces', serif; font-size: 1.2rem; font-weight: 800; letter-spacing: 0.04em; color: var(--c-red-deep); }

.brand-text span { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-green); font-weight: 700; }

/* ---- 3D pill nav items ---- */
  .nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; white-space: nowrap; }

.nav-links a {
    display: inline-block;
    color: var(--c-ink);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    background: linear-gradient(180deg, #ffffff 0%, #f3e8d0 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.95),
      inset 0 -1px 0 rgba(26,20,16,0.06),
      0 2px 0 rgba(166,115,29,0.18),
      0 4px 10px rgba(26,20,16,0.10),
      0 10px 22px rgba(26,20,16,0.06);
    transition: transform 0.18s cubic-bezier(.4,0,.2,1), box-shadow 0.18s cubic-bezier(.4,0,.2,1), color 0.18s ease;
  }

.nav-links a:hover {
    color: var(--c-red);
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -1px 0 rgba(26,20,16,0.08),
      0 4px 0 rgba(166,115,29,0.22),
      0 8px 18px rgba(26,20,16,0.14),
      0 18px 32px rgba(26,20,16,0.08);
  }

.nav-links a:active {
    transform: translateY(1px);
    box-shadow:
      inset 0 1px 2px rgba(26,20,16,0.18),
      0 1px 0 rgba(166,115,29,0.10),
      0 1px 3px rgba(26,20,16,0.05);
  }

/* On dark hero: chips become glass with light highlight + drop shadow */
  .site-header.on-dark:not(.scrolled) .nav-links a {
    color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.35),
      inset 0 -1px 0 rgba(0,0,0,0.18),
      0 2px 0 rgba(0,0,0,0.28),
      0 6px 14px rgba(0,0,0,0.22),
      0 14px 30px rgba(0,0,0,0.18);
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  }

.site-header.on-dark:not(.scrolled) .nav-links a:hover {
    color: var(--c-red-bright);
    background: linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.10) 100%);
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.50),
      inset 0 -1px 0 rgba(0,0,0,0.20),
      0 4px 0 rgba(0,0,0,0.32),
      0 10px 22px rgba(0,0,0,0.28);
  }

.nav-actions { display: flex; align-items: center; gap: 14px; }

.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--c-ink);
    color: #fff;
    align-items: center;
    justify-content: center;
  }

.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 980px) {
    .nav-links, .nav-actions .btn-outline { display: none; }
    .nav-toggle { display: inline-flex; }
    .mobile-open .nav-links {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 100%; left: 0; right: 0;
      background: var(--c-cream);
      padding: 30px var(--gutter);
      gap: 20px;
      box-shadow: var(--shadow-md);
      border-top: 1px solid var(--c-line);
    }
    .mobile-open .nav-links a { font-size: 1.1rem; color: var(--c-ink); }
  }

/* Laptop widths: the podcast + Donate buttons leave less room for the nav,
   so tighten the row before it can run into the wordmark. */
@media (max-width: 1400px) {
    .site-header .nav { gap: 16px; }
    .site-header .brand { flex-shrink: 0; }
    .site-header .nav-links { gap: 4px; }
    .site-header .nav-links a { padding: 9px 12px; font-size: 0.85rem; }
    .site-header .nav-actions { gap: 10px; }
    .site-header .nav-actions .btn { padding: 11px 16px; font-size: 0.8rem; }
  }

/* Small laptops / tablets: six nav links plus two buttons no longer fit, so the
   podcast button steps aside and Donate stays. */
@media (max-width: 1180px) {
    .site-header .nav-actions .btn-outline { display: none; }
    .site-header .nav-links a { padding: 8px 10px; font-size: 0.82rem; }
  }

@media (max-width: 1040px) {
    .site-header .nav { gap: 10px; }
    .site-header .nav-links a { padding: 8px 9px; font-size: 0.8rem; }
  }

/* Phone-sized header (brand + Donate + menu button) is tightened in
   css/styles.css so every page gets the same treatment. */

/* ---------- Hero - full-bleed editorial ---------- */
  .hero {
    position: relative;
    min-height: 100vh;
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 0 0 80px;
  }

.hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('../img/Cover%20Photo%20Web.png');
    background-size: cover;
    background-position: center 30%;
    z-index: 0;
  }

@media (max-width: 900px) {
    .hero-bg { background-position: center 30%; }
  }

.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.4;
  }

.hero .container { position: relative; z-index: 1; width: 100%; }

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: end;
  }

/* Centred across the top of the hero photo: the band above the students'
   faces is open (trees/building), so the line reads large without covering
   anyone. `top` clears the fixed header pill. */
.hero-tag {
    position: absolute;
    top: clamp(96px, 12vh, 150px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: block;
    width: min(92%, 36ch);
    text-align: center;
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(1.15rem, 2.4vw, 2.1rem);
    font-weight: 800;
    /* Each line paints its own green box, so the leading has to exceed the
       box height, otherwise line two's background overlaps line one's. */
    line-height: 1.70;
    letter-spacing: -0.01em;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,0.65);
  }

/* Green highlight bar behind the tagline, one box per line */
.hero-tag .txt {
    display: inline;
    background: linear-gradient(180deg, var(--c-green) 0%, var(--c-green-deep) 100%);
    padding: 0.08em 0.28em 0.16em;
    border-radius: 10px;
    text-shadow: none;
    box-shadow: 0 8px 20px rgba(19,106,43,0.32);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

/* Keep the age range from splitting across the line break */
.hero-tag .nb { white-space: nowrap; }

/* Inline so it stays attached to the first word instead of floating out
   to the edge of the centred block. The gap scales with the type so the
   pulse ring always clears the green highlight instead of bleeding onto it. */
.hero-tag .dot {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.9em;
    position: relative;
    top: -0.12em;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--c-red);
    box-shadow: 0 0 0 5px rgba(215,46,31,0.25);
    animation: pulse 2.4s ease-in-out infinite;
  }

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 5px rgba(215,46,31,0.25); }
    50% { box-shadow: 0 0 0 9px rgba(215,46,31,0.04); }
  }

.hero h1 {
    color: #fff;
    margin: 0 0 30px;
    max-width: 14ch;
    text-shadow: 0 2px 12px rgba(0,0,0,0.45);
    text-align: left;
  }

.hero-copy { text-align: left; justify-self: start; }

.hero h1 .accent {
    display: inline;
    color: #fff;
    font-style: italic;
    font-weight: 800;
  }

.hero p.lead { font-size: clamp(1.1rem, 1.5vw, 1.32rem); color: rgba(255,255,255,0.92); max-width: 54ch; margin-bottom: 40px; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-side {
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-lg);
    padding: 38px 32px;
    color: #fff;
  }

.hero-side .label {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-green-soft);
    font-weight: 600;
    margin-bottom: 12px;
  }

.hero-side p.callout {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 1.15rem;
    color: rgba(255,255,255,0.96);
    margin: 0 0 20px;
    line-height: 1.4;
  }

.hero-side .by { font-size: 0.85rem; color: rgba(255,255,255,0.7); margin-bottom: 24px; }

.hero-side .meta { display: flex; gap: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.14); }

.hero-side .meta div span:first-child { font-family: 'Fraunces', serif; font-size: 1.8rem; font-weight: 800; color: var(--c-green-soft); line-height: 1; display: block; }

.hero-side .meta div span:last-child { font-size: 0.78rem; color: rgba(255,255,255,0.7); letter-spacing: 0.05em; margin-top: 4px; display: block; }

.hero-scroll {
    position: absolute;
    bottom: 30px; left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    opacity: 0.7;
    z-index: 1;
    text-align: center;
  }

.hero-scroll::after {
    content: "";
    display: block;
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.4);
    margin: 12px auto 0;
    animation: drop 2s ease-in-out infinite;
  }

@keyframes drop {
    0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.3; }
    50% { transform: scaleY(1); opacity: 1; }
  }

@media (max-width: 900px) {
    .hero { padding-bottom: 60px; }
    .hero-grid { grid-template-columns: 1fr; gap: 30px; }
    .hero-scroll { display: none; }
  }

.photo-credit {
    position: absolute;
    bottom: 18px;
    right: clamp(18px, 3vw, 32px);
    z-index: 2;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.78);
    text-shadow: 0 1px 6px rgba(0,0,0,0.55);
    font-weight: 500;
    font-style: italic;
  }

/* ---------- Mission band ---------- */
  .mission {
    background: var(--c-cream);
    padding: clamp(80px, 9vw, 120px) 0;
  }

/* Photo collage on the left, statement on the right */
.mission-inner {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
  }

.mission-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

.mission-photos .pic {
    border-radius: var(--radius-md);
    background-size: cover;
    background-position: center;
    box-shadow: 0 16px 36px rgba(26,20,16,0.12);
    /* Size each photo from its column width, never from the row height:
       without this, a stretched pic derives its width from aspect-ratio and
       spills past the collage onto the statement below it. */
    width: 100%;
    min-width: 0;
    align-self: start;
  }

/* Even 2x2 grid so the 20-years mark lines up with the three photos */
.mission-photos .pic { aspect-ratio: 1/1; }

.mission-photos .pic-a { background-image: url('../img/Leadership.jpg'); }

.mission-photos .pic-b { background-image: url('../img/Community.JPG'); }

.mission-photos .pic-c { background-image: url('../img/Advocacy.jpg'); }

/* The anniversary mark is artwork, not a photo: show it whole on its own
   card rather than cropping it to fill. */
.mission-photos .pic-d {
    background-image: url('../img/20-years.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #fff;
  }

.mission-text { text-align: left; }

@media (max-width: 860px) {
    .mission-inner { grid-template-columns: 1fr; gap: 34px; }
    .mission-text { text-align: center; }
  }

.mission .quote-mark {
    font-family: 'Fraunces', serif;
    font-size: 5rem;
    line-height: 0.6;
    color: var(--c-red);
    display: inline-block;
    margin-bottom: 12px;
  }

.mission h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
  }

.mission h2 em { color: var(--c-red); font-style: italic; }

.mission .sig {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    font-size: 0.92rem;
    color: var(--c-muted);
  }

.mission .sig::before, .mission .sig::after {
    content: "";
    width: 30px; height: 1px; background: var(--c-line);
  }

/* ---------- About ---------- */
  .about { background: var(--c-green-pale); }

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
  }

.about-visual {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
  }

.about-visual .pic {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 3/4;
    background-size: cover;
    background-position: center;
  }

.about-visual .pic:nth-child(1) {
    background-image: url('../img/who-we-are1.jpg');
    margin-top: 50px;
  }

.about-visual .pic:nth-child(2) {
    background-image: url('../img/who-we-are2.jpg');
  }

.about-visual .pic:nth-child(3) {
    aspect-ratio: 4/3;
    background-image: url('../img/who-we-are3.jpg');
  }

/* Members drawing out the "Your School, Your Choice!" guide, shot during the
   workshops with the Center for Urban Pedagogy. */
.about-visual .pic:nth-child(4) {
    aspect-ratio: 4/3;
    background-image: url('../img/cup/workshop-drawing.jpg');
  }

.about h2 { margin-bottom: 24px; }

.about h2 em { color: var(--c-red); font-style: italic; }

.about-body p { font-size: 1.05rem; }

.pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 40px;
  }

.pillar {
    padding: 26px 24px;
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid var(--c-line);
    transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  }

.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--c-green); }

.pillar .ico {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--c-green), var(--c-green-soft));
    color: #fff;
    display: grid; place-items: center;
    margin-bottom: 16px;
  }

.pillar.red .ico { background: linear-gradient(135deg, var(--c-red), var(--c-coral)); }

.pillar h3 { font-size: 1.05rem; margin-bottom: 6px; }

.pillar p { font-size: 0.92rem; margin: 0; }

@media (max-width: 860px) {
    .about-grid { grid-template-columns: 1fr; }
    .about-visual { max-width: 540px; }
    .pillars { grid-template-columns: 1fr; }
  }

/* ---------- Issues / The Reality ---------- */
  .issues {
    background: var(--c-green);
    color: #fff;
    overflow: hidden;
    position: relative;
  }

.issues::before {
    content: "";
    position: absolute;
    top: -120px; right: -120px;
    width: 460px; height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(87,184,112,0.45), transparent 65%);
    pointer-events: none;
  }

.issues::after { content: none; }

.issues .container { position: relative; z-index: 1; }

.issues h2, .issues h3 { color: #fff; }

.issues p { color: rgba(255,255,255,0.88); }

.issues .eyebrow { color: #ffffff; }

.issues .eyebrow::before { background: #ffffff; }

.issues-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 70px;
  }

.issues-head h2 { max-width: 14ch; }

.issues-head > p { font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.55; color: rgba(255,255,255,0.95); }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

.stat-card {
    background: var(--c-paper);
    color: var(--c-ink);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-md);
    padding: 44px 30px;
    transition: all var(--t-med);
    position: relative;
    box-shadow: 0 12px 28px rgba(0,0,0,0.10);
  }

.stat-card:hover {
    background: #fff;
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.18);
  }

.stat-card h3 { color: var(--c-ink); }

.stat-card p { color: var(--c-ink-soft); }

.stat-card .num {
    font-family: 'Fraunces', serif;
    font-size: clamp(3rem, 5vw, 4.2rem);
    font-weight: 800;
    color: var(--c-red);
    line-height: 1;
    display: block;
    margin-bottom: 22px;
    letter-spacing: -0.02em;
  }

.stat-card h3 { font-size: 1.18rem; margin-bottom: 12px; }

.stat-card p { font-size: 0.92rem; margin: 0; line-height: 1.6; }

.stat-card .source {
    margin-top: 18px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-muted);
    font-weight: 600;
  }

@media (max-width: 900px) {
    .issues-head { grid-template-columns: 1fr; gap: 24px; }
    .stat-grid { grid-template-columns: 1fr; }
  }

/* ---------- Programs ---------- */
  .programs { background: var(--c-cream); }

.programs-head {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 60px;
  }

.programs-head h2 { margin-bottom: 0; }

/* Featured first program */
  .program-feature {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(28px, 4vw, 56px);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--c-line);
    margin-bottom: 28px;
  }

.program-feature .img {
    aspect-ratio: 5/4;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
  }

.program-feature .num {
    font-family: 'Fraunces', serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--c-red);
    letter-spacing: 0.22em;
    margin-bottom: 14px;
  }

.program-feature h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 16px; }

.program-feature p { font-size: 1.04rem; }

.program-feature .tags {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 24px 0 28px;
  }

.program-feature .tag {
    font-size: 0.78rem;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--c-green-pale);
    color: var(--c-green-deep);
    font-weight: 600;
    letter-spacing: 0.02em;
  }

.program-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

.program-card {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--c-line);
    transition: all var(--t-med);
    display: flex;
    flex-direction: column;
  }

.program-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--c-green); }

.program-card .img {
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
  }

.program-card .body { padding: 28px 26px 30px; }

.program-card .num {
    font-family: 'Fraunces', serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--c-red);
    letter-spacing: 0.22em;
    margin-bottom: 10px;
  }

.program-card h3 { font-size: 1.2rem; margin-bottom: 10px; }

.program-card p { font-size: 0.93rem; margin: 0 0 16px; }

@media (max-width: 900px) {
    .programs-head { grid-template-columns: 1fr; }
    .program-feature { grid-template-columns: 1fr; }
    .program-grid { grid-template-columns: 1fr; }
  }

/* ---------- Founder voice ---------- */
  .voice {
    background: var(--c-cream-warm);
    color: var(--c-ink);
    overflow: hidden;
    position: relative;
  }

.voice::before { content: none; }

.voice .container { position: relative; }

/* The player is 16:9 against a tall column of text, so it needs the wider
   half of the row to hold its own beside the statement. */
.voice-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(36px, 4.5vw, 64px);
    align-items: center;
  }

/* Video column: the caption sits directly under the player and shares its
   width, so it never spills toward the text column beside it. */
.voice-media {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

.voice-video {
    position: relative;
    aspect-ratio: 16/9;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
    box-shadow: var(--shadow-lg);
  }

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

.voice-caption {
    margin: 0;
    max-width: 100%;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--c-ink-soft);
  }

.voice-caption em { font-style: italic; }

/* Sized to the column it sits in: at the global h2 scale this statement
   towered over the 16:9 player next to it. */
.voice h2 { color: var(--c-ink); font-size: clamp(1.6rem, 2.5vw, 2.3rem); }

.voice h2 em { color: var(--c-red); font-style: italic; }

.voice p { color: var(--c-ink-soft); }

.voice-quote {
    font-family: 'Fraunces', serif;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-style: italic;
    font-weight: 500;
    color: var(--c-ink);
    line-height: 1.35;
    margin: 28px 0;
    padding-left: 26px;
    border-left: 4px solid var(--c-red);
  }

.voice-author { display: flex; align-items: center; gap: 16px; margin-top: 30px; }

.voice-author .avatar {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-red), var(--c-green));
    display: grid; place-items: center;
    color: #fff;
    font-weight: 800;
    font-family: 'Fraunces', serif;
    font-size: 1.4rem;
  }

.voice-author strong { display: block; font-size: 1.05rem; color: var(--c-ink); font-family: 'Fraunces', serif; }

.voice-author span { font-size: 0.85rem; color: var(--c-muted); }

@media (max-width: 860px) {
    .voice-grid { grid-template-columns: 1fr; }
  }

/* ---------- Partners ---------- */
  .partners { background: var(--c-cream-warm); padding: clamp(60px, 8vw, 100px) 0; }

.partners-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 50px;
    align-items: center;
  }

.partners-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 14px; }

.partner-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

.partner {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-md);
    padding: 26px 22px;
    transition: all var(--t-med);
  }

.partner:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--c-green); }

.partner .num {
    font-family: 'Fraunces', serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--c-red);
    line-height: 1;
    margin-bottom: 12px;
  }

.partner strong {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 1.02rem;
    color: var(--c-ink);
    line-height: 1.3;
  }

.partner span { font-size: 0.82rem; color: var(--c-muted); margin-top: 6px; display: block; }

@media (max-width: 900px) {
    .partners-grid { grid-template-columns: 1fr; }
    .partner-list { grid-template-columns: 1fr; }
  }

/* ---------- Why Support / Campaign ---------- */
  .campaign { background: var(--c-cream); }

.campaign-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
  }

.campaign-visual {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background:
      linear-gradient(180deg, rgba(26,20,16,0) 35%, rgba(26,20,16,0.65) 100%),
      url('../img/The%20Campaign.jpg') center/cover;
  }

.campaign-visual-caption {
    position: absolute;
    bottom: 32px; left: 32px; right: 32px;
    color: #fff;
  }

.campaign-visual-caption p {
    font-family: 'Fraunces', serif;
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 500;
    color: #fff;
    margin: 0;
    line-height: 1.4;
  }

.campaign-visual-caption span { font-size: 0.82rem; opacity: 0.85; margin-top: 10px; display: block; letter-spacing: 0.08em; }

.campaign-content h2 em { color: var(--c-red); font-style: italic; }

.tier-list { display: grid; gap: 14px; margin-top: 36px; }

.tier {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 22px 26px;
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid var(--c-line);
    transition: all var(--t-med);
    text-decoration: none;
    color: inherit;
  }

.tier:hover {
    border-color: var(--c-red);
    transform: translateX(6px);
    box-shadow: var(--shadow-md);
  }

.tier .amount {
    font-family: 'Fraunces', serif;
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--c-red-deep);
    flex-shrink: 0;
    min-width: 82px;
  }

.tier .impact-text {
    font-size: 0.96rem;
    color: var(--c-ink-soft);
    margin: 0;
  }

.tier .arrow {
    margin-left: auto;
    color: var(--c-red);
    transition: transform var(--t-med);
  }

.tier:hover .arrow { transform: translateX(6px); }

@media (max-width: 860px) {
    .campaign-grid { grid-template-columns: 1fr; }
  }

/* ---------- Get Involved ---------- */
  .involve { background: var(--c-green-pale); }

.involve-head { text-align: center; max-width: 760px; margin: 0 auto 70px; }

.involve-head .eyebrow { justify-content: center; }

.involve-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }

.way {
    background: #fff;
    padding: 36px 28px;
    border-radius: var(--radius-md);
    border: 1px solid var(--c-line);
    transition: all var(--t-med);
    text-align: left;
    display: flex;
    flex-direction: column;
    color: var(--c-ink);
  }

.way:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--c-red);
    color: var(--c-ink);
  }

.way .ico {
    width: 54px; height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--c-red), var(--c-coral));
    color: #fff;
    display: grid; place-items: center;
    margin-bottom: 22px;
    transition: transform var(--t-med);
  }

.way:nth-child(2) .ico { background: linear-gradient(135deg, var(--c-green), var(--c-green-soft)); }

.way:nth-child(3) .ico { background: linear-gradient(135deg, var(--c-red-deep), var(--c-red)); }

.way:nth-child(4) .ico { background: linear-gradient(135deg, var(--c-green-deep), var(--c-green-soft)); }

.way:hover .ico { transform: rotate(-6deg) scale(1.05); }

.way h3 { font-size: 1.18rem; margin-bottom: 8px; }

.way p { font-size: 0.92rem; margin: 0 0 20px; }

.way .link {
    margin-top: auto;
    font-weight: 600;
    color: var(--c-red);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
  }

.way:hover .link { gap: 10px; }

@media (max-width: 900px) { .involve-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 540px) { .involve-grid { grid-template-columns: 1fr; } }

/* ---------- Gallery ---------- */
  .gallery { background: var(--c-cream); padding: clamp(60px, 7vw, 90px) 0 clamp(80px, 10vw, 130px); }

.gallery-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 50px;
  }

.gallery-head h2 { margin: 0; }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 200px;
    gap: 14px;
  }

.gallery-grid .tile {
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    transition: transform var(--t-med);
  }

.gallery-grid .tile:hover { transform: scale(1.02); }

.gallery-grid .tile::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(26,20,16,0.4));
    opacity: 0;
    transition: opacity var(--t-med);
  }

.gallery-grid .tile:hover::after { opacity: 1; }

.gallery-grid .tile.t1 { grid-column: span 2; grid-row: span 2; }

.gallery-grid .tile.t2 { grid-column: span 2; grid-row: span 1; }

.gallery-grid .tile.t3 { grid-column: span 1; grid-row: span 1; }

.gallery-grid .tile.t4 { grid-column: span 1; grid-row: span 1; }

.gallery-grid .tile.t5 { grid-column: span 1; grid-row: span 1; }

.gallery-grid .tile.t6 { grid-column: span 1; grid-row: span 1; }

.gallery-grid .tile.t7 { grid-column: span 2; grid-row: span 1; }

.gallery-grid .tile.t8 { grid-column: span 2; grid-row: span 1; }

.gallery-grid .tile.t9 { grid-column: span 2; grid-row: span 1; }

.gallery-grid .tile.t10 { grid-column: span 2; grid-row: span 1; }

.gallery-grid .tile.t11 { grid-column: span 3; grid-row: span 1; }

.gallery-grid .tile.t12 { grid-column: span 3; grid-row: span 1; }

@media (max-width: 900px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
    .gallery-grid .tile.t1 { grid-column: span 2; grid-row: span 2; }
    .gallery-grid .tile { grid-column: span 1 !important; grid-row: span 1 !important; }
    .gallery-head { flex-direction: column; align-items: start; }
  }

/* ---------- CTA banner ---------- */
  .cta-banner {
    background: linear-gradient(135deg, var(--c-red-deep) 0%, var(--c-red) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
  }

.cta-banner::before { content: none; }

.cta-banner::after { content: none; }

.cta-banner .container { position: relative; }

.cta-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.35fr auto;
    gap: clamp(28px, 3.5vw, 52px);
    align-items: center;
  }

/* Photo anchors the left of the banner; 4:3 keeps it the same height as the
   headline block beside it so the red band reads as one row. */
.cta-photo {
    aspect-ratio: 4/3;
    border-radius: var(--radius-md);
    background-image: url('../img/cta-dancers.jpg');
    background-size: cover;
    background-position: center 30%;
    box-shadow: 0 18px 40px rgba(0,0,0,0.28);
  }

.cta-banner h2 { color: #fff; margin-bottom: 18px; max-width: 18ch; }

.cta-banner p { color: rgba(255,255,255,0.92); font-size: 1.1rem; }

.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }

@media (max-width: 980px) {
    .cta-grid { grid-template-columns: 0.9fr 1.1fr; }
    .cta-actions { grid-column: 1 / -1; justify-content: flex-start; }
  }

@media (max-width: 860px) {
    .cta-grid { grid-template-columns: 1fr; gap: 30px; }
    .cta-photo { aspect-ratio: 16/9; }
    .cta-actions { justify-content: flex-start; }
  }

/* ---------- Footer ---------- */
  .site-footer {
    background: var(--c-paper-deep);
    color: var(--c-ink-soft);
    padding: 80px 0 26px;
    border-top: 6px solid var(--c-green);
  }

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 50px;
    margin-bottom: 50px;
  }

.site-footer h4 {
    color: var(--c-ink);
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 22px;
    position: relative;
    padding-bottom: 10px;
  }

.site-footer ul { list-style: none; padding: 0; margin: 0; }

.site-footer ul li { margin-bottom: 10px; }

.site-footer ul a, .site-footer ul li { color: var(--c-ink-soft); font-size: 0.94rem; }

.site-footer ul a { transition: color var(--t-fast); }

.footer-brand p { color: var(--c-ink-soft); font-size: 0.94rem; margin-top: 18px; }

.footer-brand .brand-text strong { color: var(--c-red-deep); }

.footer-brand .brand-text span { color: var(--c-green); }

.newsletter {
    margin-top: 22px;
    display: flex;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: #fff;
    border: 1.5px solid var(--c-line);
  }

.newsletter input {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 14px 20px;
    color: var(--c-ink);
    font: inherit;
    font-size: 0.92rem;
    outline: none;
    min-width: 0;
  }

.newsletter input::placeholder { color: var(--c-muted); }

.newsletter button {
    background: var(--c-red);
    color: #fff;
    padding: 0 22px;
    font-weight: 600;
    font-size: 0.86rem;
    transition: background var(--t-fast);
  }

.newsletter button:hover { background: var(--c-red-deep); }

.socials { display: flex; gap: 12px; margin-top: 22px; }

.socials a {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--c-green);
    color: #fff;
    display: grid; place-items: center;
    transition: all var(--t-fast);
  }

.socials a:hover { background: var(--c-red); transform: translateY(-3px); }

.footer-bottom {
    padding-top: 26px;
    border-top: 1px solid rgba(26,20,16,0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.85rem;
    color: var(--c-muted);
  }

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }

/* Single column on phones — two columns overflowed the screen here. */
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; gap: 34px; } }

/* ---------- Reveal animation ---------- */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(.22,1,.36,1), transform 0.9s cubic-bezier(.22,1,.36,1);
  }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
    .issues { background-attachment: scroll; }
  }

/* Skip link */
  .skip-link {
    position: absolute;
    left: -9999px; top: 12px;
    background: var(--c-ink);
    color: #fff;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    z-index: 200;
    font-weight: 600;
  }

.skip-link:focus { left: 12px; }