/* ============================================================
   Changing Humanity — Shared Stylesheet
   Derived from design-system.html (v1.0). Source of truth for
   brand tokens, typography, buttons, components, header & footer.
   ============================================================ */

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

:root {
  /* Brand blues */
  --blue:      #4a8fd4;
  --blue-dark: #2d6aad;
  --blue-deep: #1a3f6f;
  --blue-pill: #5b9bd5;
  --blue-soft: #93c5fd;
  --blue-tint: #bcd7f2;
  /* Secondary accent */
  --green:     #6fd39a;
  /* Neutrals */
  --white:     #ffffff;
  --off:       #f8f9fb;
  --text:      #1a1a2e;
  --text-mid:  #4a4a6a;
  --text-light:#8888aa;
  --border:    #e4e8ef;
  /* Layout */
  --maxw:      1120px;
  --nav-h:     72px;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--off);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* Serif italic accent — emphasis words only */
.accent {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  color: var(--blue);
  font-weight: 600;
}

/* ── LAYOUT ── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 48px; }

section { padding: 96px 0; }
section.alt { background: var(--white); }
section.tint { background: var(--off); }

.sec-eyebrow {
  display: block; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 14px;
}
.sec-title {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1; color: var(--text);
  margin-bottom: 18px;
}
.sec-lead { font-size: 1.05rem; color: var(--text-mid); line-height: 1.8; max-width: 640px; }
.sec-head { max-width: 720px; margin-bottom: 44px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .sec-lead { margin-left: auto; margin-right: auto; }

p.body { font-size: 1rem; color: var(--text-mid); line-height: 1.8; max-width: 640px; margin-bottom: 16px; }

/* ── BUTTONS ── */
.btn-pill {
  display: inline-block; background: var(--blue); color: var(--white);
  font-weight: 600; font-size: 0.95rem; padding: 13px 30px;
  border-radius: 40px; text-decoration: none; transition: all 0.2s;
  cursor: pointer; border: none; font-family: inherit;
}
.btn-pill:hover { background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(74,143,212,0.35); }

.btn-ghost {
  display: inline-block; background: transparent; color: var(--blue);
  font-weight: 600; font-size: 0.9rem; padding: 12px 26px;
  border-radius: 40px; text-decoration: none; border: 1.5px solid var(--blue);
  transition: all 0.2s; cursor: pointer; font-family: inherit;
}
.btn-ghost:hover { background: rgba(74,143,212,0.06); }

.btn-white {
  display: inline-block; background: var(--white); color: var(--blue-dark);
  font-weight: 700; font-size: 1rem; padding: 15px 40px;
  border-radius: 40px; text-decoration: none; transition: all 0.2s;
  cursor: pointer; border: none; font-family: inherit;
}
.btn-white:hover { background: var(--off); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.18); }

.btn-outline-w {
  display: inline-block; background: rgba(255,255,255,0.12); color: var(--white);
  font-weight: 600; font-size: 0.95rem; padding: 13px 30px;
  border-radius: 40px; text-decoration: none; border: 1.5px solid rgba(255,255,255,0.4);
  transition: all 0.2s; cursor: pointer; font-family: inherit; backdrop-filter: blur(4px);
}
.btn-outline-w:hover { background: rgba(255,255,255,0.2); }

/* ── HEADER / NAV ── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav {
  max-width: var(--maxw); margin: 0 auto; padding: 0 48px;
  height: var(--nav-h); display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.nav-logo img { height: 38px; width: auto; }
.nav-logo span { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
.nav-links a {
  font-size: 0.9rem; font-weight: 600; color: var(--text-mid);
  text-decoration: none; transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--blue); }
.nav-cta { display: flex; align-items: center; gap: 16px; }
/* Donate stays available but is not the loudest thing on screen. Jacqueline
   2026-09-09: "I would not make Donate the dominant visual action at the very
   top. A first-time visitor hasn't fallen in love with Changing Humanity yet."
   MOVED HERE FROM index.html's scoped block on 2026-09-17. It had been defined
   only on the homepage, so program.html silently fell back to the filled
   .btn-pill and rendered Donate as the loudest element on the page, which is
   the opposite of the decision. Shared chrome belongs in shared CSS. */
.nav-donate-quiet {
  background: transparent; color: var(--blue-dark);
  border: 1.5px solid var(--blue-tint); font-weight: 600;
}
.nav-donate-quiet:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: var(--white); }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text); margin: 5px 0; transition: all 0.3s; border-radius: 2px; }

/* Donate stays available in the nav but is not the loudest thing on screen.
   Jacqueline 2026-09-09: "I would not make Donate the dominant visual action at the very top."

   MOVED HERE FROM index.html's inline <style> on 2026-09-17. It had only ever existed on the
   homepage, so program.html asked for the class and got nothing, rendering Donate as the filled
   .btn-pill — the dominant action her note rules out — on one page but not the other. Must stay
   below .btn-pill in this file: both are single-class selectors, so the later one wins. */
.nav-donate-quiet {
  background: transparent; color: var(--blue-dark);
  border: 1.5px solid var(--blue-tint); font-weight: 600;
}
.nav-donate-quiet:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: var(--white); }

/* The drawer's own Donate, hidden at desktop widths. The header pill is the desktop Donate and
   this is the mobile one; the 720px block swaps which of the two is displayed, so exactly one is
   ever visible and neither is a duplicate the other has to be reconciled with. */
.nav-drawer-donate { display: none; }

/* ── HERO (immersive dark) ── */
.hero {
  position: relative; overflow: hidden; color: var(--white);
  background: linear-gradient(150deg, var(--blue-deep) 0%, #0f2547 100%);
  padding: 120px 0 108px;
}
.hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.62; }
/* Directional overlay: heavy behind the text on the left, light on the right so the
   photograph is actually visible. The old flat 0.82 to 0.9 wash at 0.28 image opacity
   made any hero photo invisible, which is why the image looked like it wasn't loading. */
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(15,37,71,0.92) 0%, rgba(19,48,88,0.78) 38%, rgba(26,63,111,0.5) 72%, rgba(26,63,111,0.34) 100%);
}
/* Narrow screens: text spans the full width, so it needs the full wash back. */
@media (max-width: 900px) {
  .hero-overlay { background: linear-gradient(150deg, rgba(15,37,71,0.9) 0%, rgba(19,48,88,0.86) 100%); }
  .hero-img { opacity: 0.5; }
}
.hero .wrap { position: relative; z-index: 2; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-size: clamp(1rem, 2vw, 1.3rem); color: #cfe1f5; margin-bottom: 22px;
}
.hero-kicker::before { content: ""; height: 1px; width: 40px; background: rgba(188,215,242,0.55); }
.hero h1 {
  font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 800;
  line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 24px; max-width: 900px;
}
.hero h1 .accent { color: var(--blue-soft); }
.hero-sub { font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: rgba(255,255,255,0.9); max-width: 640px; line-height: 1.6; margin-bottom: 18px; font-weight: 500; }
.hero-body { font-size: 1.05rem; color: rgba(255,255,255,0.72); max-width: 620px; line-height: 1.8; margin-bottom: 38px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* Compact hero for interior pages */
.hero.compact { padding: 96px 0 88px; }
.hero.compact h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }

/* ── STAT CARDS (dark) ── */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stat-card { background: var(--blue-deep); border-radius: 16px; padding: 34px 28px; }
.stat-card .num { font-size: 3rem; font-weight: 900; color: var(--blue-soft); line-height: 1; letter-spacing: -0.03em; margin-bottom: 12px; }
.stat-card p { font-size: 0.9rem; color: rgba(255,255,255,0.8); line-height: 1.6; }
.stat-card .src { font-size: 0.68rem; color: rgba(255,255,255,0.35); font-style: italic; margin-top: 12px; }

/* Dark section wrapper (for stat blocks / immersive) */
.section-dark { background: linear-gradient(150deg, var(--blue-deep) 0%, #12305a 100%); color: var(--white); }
.section-dark .sec-eyebrow { color: var(--blue-soft); }
.section-dark .sec-title { color: var(--white); }
.section-dark .sec-lead { color: rgba(255,255,255,0.78); }
.section-dark .accent { color: var(--blue-soft); }
.section-close { margin-top: 40px; font-size: 1.25rem; font-weight: 600; color: var(--white); max-width: 720px; line-height: 1.5; }
.section-close .accent { color: var(--blue-soft); }

/* ── PILLAR CARDS ── */
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pillar {
  background: var(--white); border-radius: 16px; padding: 34px 28px;
  border: 1px solid var(--border); position: relative; overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pillar:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(74,143,212,0.1); }
.pillar-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--blue-soft)); }
.pillar .ico { font-size: 1.8rem; margin-bottom: 16px; display: block; }
.pillar .num { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.pillar h3 { font-size: 1.2rem; font-weight: 800; color: var(--text); letter-spacing: -0.02em; margin-bottom: 12px; }
.pillar p { font-size: 0.92rem; color: var(--text-mid); line-height: 1.75; }
.pillar p strong { color: var(--text); font-weight: 700; }

/* ── FEATURE / SPLIT BLOCK ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split .media { border-radius: 20px; overflow: hidden; background: var(--blue-tint); aspect-ratio: 4/3; }

/* ── GENERIC CARD (Join the Movement, gains, partnership) ── */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card-grid.four { grid-template-columns: repeat(4, 1fr); }
.icard {
  background: var(--white); border: 1px solid var(--border); border-radius: 16px;
  padding: 32px 28px; transition: transform 0.2s, box-shadow 0.2s;
  display: flex; flex-direction: column;
}
.icard:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(74,143,212,0.1); }
.icard .ico { font-size: 1.8rem; margin-bottom: 14px; }
.icard h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
.icard p { font-size: 0.92rem; color: var(--text-mid); line-height: 1.7; margin-bottom: 18px; flex-grow: 1; }
.icard a.card-link { font-size: 0.9rem; font-weight: 700; color: var(--blue); text-decoration: none; margin-top: auto; }
.icard a.card-link:hover { color: var(--blue-dark); }

/* ── LOGO BAR (sponsors / partners) ── */
.logo-bar { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: center; }
.logo-chip {
  background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  height: 96px; min-width: 180px; flex: 1 1 180px; max-width: 220px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-light); font-weight: 700; font-size: 0.9rem; text-align: center;
  padding: 16px; transition: box-shadow 0.2s;
}
.logo-chip:hover { box-shadow: 0 10px 28px rgba(74,143,212,0.08); }
.placeholder-note { font-size: 0.78rem; color: var(--text-light); font-style: italic; text-align: center; margin-top: 20px; }

/* ── TESTIMONIALS ── */
.quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.quote-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 34px 32px; }
.quote-card blockquote { font-size: 1.1rem; font-style: italic; color: var(--text); line-height: 1.6; margin-bottom: 18px; font-family: 'Playfair Display', Georgia, serif; }
.quote-card cite { font-size: 0.82rem; font-weight: 700; color: var(--blue); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }
.quote-empty { border-style: dashed; color: var(--text-light); }
.quote-empty blockquote { color: var(--text-light); font-family: 'Playfair Display', Georgia, serif; }

/* ── PULL QUOTE (immersive) ── */
.pullquote { background: var(--blue-deep); border-radius: 20px; padding: 64px 48px; text-align: center; }
.pullquote blockquote { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 300; font-style: italic; color: var(--white); line-height: 1.6; max-width: 800px; margin: 0 auto 20px; }
.pullquote blockquote .accent { color: var(--blue-soft); }
.pullquote cite { font-size: 0.8rem; color: var(--blue-soft); font-style: normal; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

/* ── CALLOUT BAND ── */
.callout { text-align: center; }
.callout h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 12px; color: var(--white); max-width: 760px; margin-left: auto; margin-right: auto; }
.callout p { font-size: 1.15rem; color: rgba(255,255,255,0.82); margin-bottom: 30px; }
.callout .accent { color: var(--blue-soft); }

/* ── IMPACT TIERS (dark callout) ── */
.tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 920px; margin: 40px auto 34px; }
.tier { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 24px 20px; text-align: left; }
.tier .amt { font-size: 1.9rem; font-weight: 900; color: var(--blue-soft); letter-spacing: -0.02em; line-height: 1; margin-bottom: 10px; }
.tier p { font-size: 0.84rem; color: rgba(255,255,255,0.72); line-height: 1.55; margin: 0; }

/* ── VOLUNTEER / EMAIL CAPTURE ── */
.capture { display: flex; gap: 12px; flex-wrap: wrap; max-width: 480px; }
.capture input {
  flex: 1 1 240px; padding: 14px 22px; border: 1.5px solid var(--border);
  border-radius: 40px; font-size: 0.95rem; outline: none; font-family: inherit; color: var(--text);
  background: var(--white); transition: border-color 0.2s;
}
.capture input:focus { border-color: var(--blue); }

/* ── FORMS ── */
.form-card { background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: 44px; max-width: 720px; }
.form-row { margin-bottom: 22px; }
.form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-row label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--text); margin-bottom: 8px; letter-spacing: 0.01em; }
.form-row .opt { color: var(--text-light); font-weight: 500; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 13px 18px; border: 1.5px solid var(--border); border-radius: 12px;
  font-size: 0.95rem; font-family: inherit; color: var(--text); background: var(--off); outline: none;
  transition: border-color 0.2s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--blue); background: var(--white); }
.form-row textarea { min-height: 120px; resize: vertical; }
.form-note { font-size: 0.82rem; color: var(--text-light); margin-top: 18px; line-height: 1.6; }

/* ── FOOTER ── */
.site-footer { background: var(--text); color: rgba(255,255,255,0.55); padding: 64px 0 40px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 44px; }
.footer-brand img { height: 40px; margin-bottom: 16px; }
.footer-brand p { font-size: 0.9rem; line-height: 1.7; max-width: 320px; }
/* h3 not h4: the footer columns follow the page's h2 sections, and jumping
   straight to h4 skipped a level for anyone navigating by heading. */
.footer-col h3 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 16px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 0.9rem; color: rgba(255,255,255,0.75); text-decoration: none; transition: color 0.2s; }
.footer-col a:hover { color: var(--blue-soft); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.8rem; }
.footer-bottom a { color: var(--blue-soft); text-decoration: none; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .stat-grid, .pillar-grid, .card-grid, .card-grid.four, .tier-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .quote-grid, .footer-top { grid-template-columns: 1fr; }
  .footer-top { gap: 32px; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 24px; }
  .nav { padding: 0 24px; }
  section { padding: 64px 0; }
  .stat-grid, .pillar-grid, .card-grid, .card-grid.four, .quote-grid, .form-row.two, .tier-grid { grid-template-columns: 1fr; }
  .nav-links {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--border);
    padding: 8px 24px 20px; display: none;
  }
  .nav-links.open { display: flex; }

  /* ── Mobile header, fixed 2026-09-17 ──
     At 390px the "Changing Humanity" wordmark ran straight into the Donate
     pill and disappeared behind it. Cause: .nav-logo is flex-shrink:0 and
     .nav-cta has a 16px gap, so on a narrow screen the two blocks together
     demanded more than the available width and neither gave way.
     The logo may now shrink and truncate, the pill may not shrink at all, and
     the gaps tighten. Nothing changes above 700px. */
  .nav { gap: 12px; }
  .nav-logo { flex-shrink: 1; min-width: 0; gap: 8px; }
  .nav-logo img { height: 32px; }
  .nav-logo span {
    font-size: 0.98rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nav-cta { gap: 8px; flex-shrink: 0; }
  .nav-cta .btn-pill { flex-shrink: 0; padding: 9px 18px; font-size: 0.85rem; }
  .nav-toggle { padding: 8px 0 8px 4px; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 12px 0; width: 100%; border-bottom: 1px solid var(--border); }
  .nav-toggle { display: block; }
  /* Donate moves into the drawer on mobile (2026-09-17, Matthew). On a phone the header was
     logo + Donate + hamburger, which crowded the only two things that matter up there and put a
     donation ask in front of a visitor who has not read a word yet. Same reasoning as her note
     about the desktop pill, only more so, because there is less room to recover from it. */
  .nav-donate { display: none; }
  .nav-drawer-donate { display: block; margin-top: 18px; }
  .nav-drawer-donate a {
    border-bottom: none;
    text-align: center;
    padding: 13px 24px;
    font-size: 0.95rem;
    border: 1.5px solid var(--blue-tint);
    border-radius: 40px;
    color: var(--blue-dark);
  }
  .form-card { padding: 28px; }
}