/* =========================================================
   Carry Good Forward Foundation — site styles
   Palette and type taken from the approved homepage mockup.
   ========================================================= */

:root {
  /* Palette sampled from the logo: lavender / periwinkle / deep plum */
  --mauve:        #8b78b5;   /* buttons, icons */
  --mauve-deep:   #6f5d9b;
  --mauve-soft:   #cfc4e6;
  --mauve-tint:   #ece7f5;
  --ink:          #3f3a5c;   /* headings: deep plum instead of navy */
  --ink-soft:     #55506e;
  --ink-muted:    #7d789a;
  --cream:        #f7f5fb;   /* lavender-white section backgrounds */
  --cream-deep:   #efecf7;
  --paper:        #fcfbfe;   /* page background */
  --line:         #e3dff0;

  --serif:  "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:   "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --script: "Allura", "Brush Script MT", cursive;

  --container: 1280px;
  --gutter: clamp(16px, 4vw, 56px);
  --radius-pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--paper);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; color: var(--ink); }
p { margin: 0; }
.hidden { display: none !important; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- shared type ---------- */
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
.rule {
  display: block;
  width: 96px;
  height: 1px;
  background: var(--ink-soft);
  opacity: 0.6;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 40px;
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-solid { background: var(--mauve); color: #fff; }
.btn-solid:hover { background: var(--mauve-deep); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.text-link {
  display: inline-block;
  margin-top: 24px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mauve-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}

/* =========================================================
   HEADER  (overlaid on the hero photo)
   All hero measurements are % / vw so they track the photo.
   ========================================================= */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
}
.header-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.4vw 2.3vw 0 4.2vw;
}
.brand { display: block; }
.brand-logo {
  height: clamp(120px, 15vw, 230px);
  width: auto;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 40px);
  margin-top: 2.3vw;
}
.primary-nav a:not(.btn) {
  font-size: clamp(11px, 0.82vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.primary-nav a:not(.btn):hover { border-bottom-color: var(--mauve); }
.nav-cta {
  margin-top: 2.3vw;
  margin-left: clamp(8px, 1vw, 20px);
  min-height: clamp(44px, 4.2vw, 66px);
  padding: 0 clamp(20px, 2.2vw, 36px) 0 clamp(22px, 2.4vw, 38px);
  font-size: clamp(11px, 0.9vw, 14px);
  gap: clamp(12px, 1.6vw, 26px);
}
.btn-heart { width: clamp(16px, 1.6vw, 26px); height: auto; flex-shrink: 0; }
/* little script "donate today" perched over the heart */
.btn-heart-wrap { display: inline-flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.btn-heart-note {
  margin-bottom: -4px;
  transform: rotate(-6deg);
  font-family: var(--script);
  font-size: clamp(16px, 1.45vw, 22px);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  pointer-events: none;
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-top: 14px;
  background: none; border: 0; padding: 8px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.nav-toggle span { display: block; height: 1.5px; background: var(--ink); }

/* =========================================================
   HERO  (full-bleed photo, 3:2 canvas from the mockup)
   ========================================================= */
.hero {
  /* The photo is a 3:2 canvas. On wider/shorter screens (16:9 laptops) the
     hero is capped at the viewport height and the photo keeps its bottom edge
     (the children's shoulders, where the headline sits) and gives up sky at
     the top. The heart shrinks to fit the sky that is still visible. */
  --hero-h: min(66.6667vw, 100vh);
  --top-crop: 0px;
  --head-line: calc(31.9vw - var(--top-crop));          /* top of the heads under the heart */
  --heart-h-max: calc(var(--head-line) + 4.6vw - 0.125 * var(--hero-h));
  position: relative;
  width: 100%;
  height: var(--hero-h);
  min-height: 560px;
  overflow: hidden;
  background: #f5f1ec;
}
.hero-photo {
  position: absolute;
  inset: 0;
  background: url("../images/hero-full.jpg") center top / cover no-repeat;
  transform-origin: 55% 72%;
  animation: photo-settle 2.8s cubic-bezier(.16,.72,.2,1) both;
  will-change: transform;
}
@keyframes photo-settle {
  0%   { transform: scale(1.18) translate(-1.6%, 3%); }
  70%  { transform: scale(1.03) translate(-0.3%, 0.6%); }
  100% { transform: scale(1) translate(0, 0); }
}
.hero-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  animation: shutter-flash .55s ease-out 2.75s both;
}
@keyframes shutter-flash {
  0%   { opacity: 0; }
  20%  { opacity: .92; }
  100% { opacity: 0; }
}
/* Headline: exactly where the approved mockup puts it (top-left, in the sky),
   slightly translucent, and it rises in after the shutter flash. */
.hero-copy {
  position: absolute;
  left: 4.9vw;
  top: 25%;
  opacity: 0;
  animation: rise-in 1.1s cubic-bezier(.2,.7,.2,1) 3.15s forwards;
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 0.9; transform: none; }
}
.hero h1 {
  font-family: var(--serif);
  font-size: 4.95vw;
  line-height: 0.96;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.accent {
  font-style: italic;
  font-weight: 400;
  color: #8f7fb3;
}
.hero-copy .rule {
  width: 5.3vw;
  margin-top: 2.2vw;
  background: #8f7fb3;
  opacity: 0.8;
}
.site-header, .hero-heart {
  animation: fade-in 1.2s ease-out .3s both;
}
@keyframes fade-in { from { opacity: 0; } }
.hero-heart { animation-name: fade-in-heart; }
@keyframes fade-in-heart { from { opacity: 0; } to { opacity: .72; } }
@media (prefers-reduced-motion: reduce) {
  .hero-photo, .hero-flash, .hero-copy, .site-header, .hero-heart { animation: none; }
  .hero-copy { opacity: 1; }
  .hero-flash { display: none; }
}
.accent {
  font-style: italic;
  font-weight: 400;
  color: #8f7fb3;
}

.hero-heart {
  position: absolute;
  right: 2.4%;
  top: 12.5%;
  height: min(28.7vw, var(--heart-h-max));
  aspect-ratio: 500 / 440;
  color: #b9addb;
  opacity: 0.72;
  container-type: size;
}
.heart-outline { position: absolute; inset: 0; width: 100%; height: 100%; }
.heart-script {
  position: absolute;
  left: 15%;
  top: 23%;
  width: 70%;
  transform: rotate(-8deg);
  font-family: var(--script);
  font-size: 9.6cqw;
  line-height: 0.95;
  color: #9a8bc0;
  text-align: center;
}
.heart-script span { display: block; }
.heart-script span:nth-child(1) { margin-left: -4%; }
.heart-script span:nth-child(2) { margin-left: 0; }
.heart-script span:nth-child(3) { margin-left: 4%; }

/* =========================================================
   PILLARS STRIP
   ========================================================= */
.pillars {
  position: relative;
  background: var(--cream);
  padding: 44px 0 40px;
  overflow: hidden;
}
.petal {
  position: absolute;
  right: -120px;
  bottom: -140px;
  width: 420px;
  height: 420px;
  background: var(--mauve-tint);
  border-radius: 100% 0 100% 0;
  transform: rotate(18deg);
  opacity: 0.9;
  pointer-events: none;
}
.petal::before {
  content: "";
  position: absolute;
  left: -160px; top: 40px;
  width: 260px; height: 260px;
  background: var(--mauve-tint);
  border-radius: 100% 0 100% 0;
  transform: rotate(-30deg);
}
.pillar-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.pillar-grid li {
  padding: 8px 20px 12px;
  border-left: 1px solid var(--line);
}
.pillar-grid li:first-child { border-left: 0; }
.pillar-grid svg {
  width: 56px; height: 56px;
  margin: 0 auto 20px;
  color: var(--mauve);
}
.pillar-grid h3 {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.pillar-grid p {
  margin-top: 8px;
  font-size: 15px;
  color: var(--ink-muted);
}
.wordmark-divider {
  position: relative;
  margin-top: 48px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.wordmark-divider span { position: relative; padding: 0 24px; background: var(--cream); }
.wordmark-divider::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 460px; max-width: 80%;
  height: 1px;
  background: var(--ink-soft);
  opacity: 0.5;
  transform: translate(-50%, -50%);
}

/* =========================================================
   CONTENT SECTIONS
   ========================================================= */
.section { padding: 112px 0; }
.section h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-top: 18px;
}
.section-head { max-width: 680px; margin-bottom: 56px; }
.section-sub { margin-top: 20px; font-size: 18px; color: var(--ink-muted); max-width: 560px; }
.split {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 64px;
  align-items: start;
}
.prose p { font-size: 18px; line-height: 1.7; }
.prose p + p { margin-top: 20px; }

/* Our Work */
.work { background: var(--cream); }
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 36px 28px 40px;
  border-radius: 6px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(31,37,54,0.07); }
.card-num {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--mauve-deep);
  display: block;
  margin-bottom: 20px;
}
.card h3 {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
}
.card p { margin-top: 14px; font-size: 16px; color: var(--ink-muted); }

/* Impact */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.stat {
  padding: 32px 0 28px;
  border-top: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stat-value {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
  color: var(--ink);
}
.stat-label { font-size: 15px; color: var(--ink-muted); max-width: 260px; }
.pull-quote {
  margin: 96px auto 0;
  max-width: 900px;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.25;
  color: var(--ink);
}

/* Get Involved */
.involved { background: var(--cream-deep); }
.involve-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.involve {
  background: #fff;
  padding: 44px 36px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.involve h3 { font-family: var(--serif); font-size: 30px; }
.involve p { color: var(--ink-muted); flex: 1; }
.involve .btn { align-self: flex-start; margin-top: 8px; }

/* Contact */
.contact-line { margin-top: 28px; }
.contact-line a {
  font-size: 18px;
  color: var(--mauve-deep);
  border-bottom: 1px solid currentColor;
}
.contact-form { display: grid; gap: 20px; }
.contact-form label {
  display: grid;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.contact-form input,
.contact-form textarea {
  font: inherit;
  font-family: var(--sans);
  font-size: 15px;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  width: 100%;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--mauve-soft); border-color: var(--mauve); }
.contact-form .btn { justify-self: start; }

/* Live giving */
.live { background: var(--paper); }
.live-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 420px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(63, 58, 92, 0.10);
  background: #fff;
}
/* The Givebutter live display insists on a 900x600+ viewport, so it is
   rendered at 1200x675 and scaled to fit the frame (JS sets --live-scale). */
.live-frame iframe {
  position: absolute; left: 0; top: 0;
  width: 1200px; height: 675px;
  border: 0;
  transform: scale(var(--live-scale, 1));
  transform-origin: 0 0;
}
.live-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 36px;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--cream);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 72px 0 40px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  gap: 48px;
  align-items: start;
}
.footer-donate {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}
.footer-donate img {
  width: 112px; height: 112px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.footer-donate-label {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.footer-donate-url { font-size: 12px; color: var(--ink-muted); }
.footer-donate:hover .footer-donate-label { color: var(--mauve-deep); }
/* Brand block mirrors the logo lockup: mark, tagline, ruled parent line, Amlea */
.footer-brand {
  display: grid;
  justify-items: center;
  justify-self: start;
  text-align: center;
  width: 360px;
  max-width: 100%;
}
.footer-brand img { width: 150px; height: auto; }
.footer-tagline {
  margin-bottom: 10px;
  font-family: var(--serif);
  font-size: 15px;
  white-space: nowrap;
  color: var(--ink);
}
.footer-tagline em { font-style: italic; color: #8f7fb3; }
.footer-parent {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-muted);
}
.footer-parent::before,
.footer-parent::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.footer-parent-link { display: block; margin-top: 10px; transition: opacity .2s ease; }
.footer-parent-link:hover { opacity: 0.75; }
.footer-brand .footer-parent-logo {
  width: 96px;
  mix-blend-mode: multiply; /* drops the white box so it sits on the cream */
}
.footer-label {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 18px;
}
.footer-line { display: grid; gap: 4px; }
.footer-line + .footer-line { margin-top: 18px; }
.footer-line span { font-size: 13px; color: var(--ink-muted); }
.footer-line a {
  font-size: 17px;
  color: var(--ink);
  border-bottom: 1px solid rgba(31,37,54,0.25);
  padding-bottom: 2px;
  justify-self: start;
  word-break: break-all;
}
.footer-line a:hover { border-bottom-color: var(--mauve); color: var(--mauve-deep); }
.footer-legal {
  grid-column: 1 / -1;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-muted);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .primary-nav { gap: 18px; }
}

@media (max-width: 900px) {
  .header-inner { padding: 8px 16px 0 16px; align-items: center; }
  .brand-logo { height: 104px; width: auto; }
  .primary-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    margin-top: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 28px 16px 32px;
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  body.nav-open .primary-nav { display: flex; }
  .primary-nav a:not(.btn) { font-size: 13px; }
  .nav-cta { margin: 0; min-height: 44px; padding: 0 18px; font-size: 11px; gap: 10px; letter-spacing: 0.14em; }
  .btn-heart { width: 20px; }

  /* portrait: photo fills the viewport, faces centered, headline over the sky */
  .hero {
    height: 100svh;
    min-height: 640px;
    max-height: 960px;
  }
  .hero-photo { background-position: 52% bottom; }
  .hero-photo::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.35) 34%, rgba(255,255,255,0) 52%);
  }
  .hero-copy { left: 16px; right: 16px; top: 150px; }
  .hero h1 { font-size: clamp(34px, 9.6vw, 56px); line-height: 1.0; }
  .hero-copy .rule { width: 72px; margin-top: 18px; }
  .hero-heart { display: none; }

  .pillar-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .pillar-grid li:nth-child(3) { border-left: 0; }

  .section { padding: 80px 0; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .live-frame { min-height: 0; }
  .live-actions .btn { width: 100%; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: 1fr; gap: 0; }
  .involve-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-donate { justify-items: start; text-align: left; }
}

@media (min-width: 600px) and (max-width: 900px) {
  .hero h1 { font-size: 6.4vw; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .brand-logo { height: 120px; width: auto; }
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar-grid li { border-left: 0; padding: 0 0 8px; }
  .card-grid { grid-template-columns: 1fr; }
  .wordmark-divider::before { display: none; }
}

/* =========================================================
   SITE NAVIGATION  (header links restored Sep 2026 so every
   page is reachable through crawlable <a> links)
   ========================================================= */
.header-nav-group { display: flex; align-items: flex-start; }
.nav-toggle { order: 2; }
.skip-link {
  position: absolute; left: 16px; top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink); color: #fff;
  border-radius: 4px;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
}
.skip-link:focus { top: 12px; }
.primary-nav a[aria-current="page"]:not(.btn) { border-bottom-color: var(--mauve); }

/* Inner pages: the header sits in normal flow on a light bar */
body.inner .site-header {
  position: relative;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  animation: none;
}
body.inner .header-inner { align-items: center; padding: 10px 2.3vw 10px 4.2vw; }
body.inner .brand-logo { height: clamp(88px, 8vw, 118px); }
body.inner .primary-nav, body.inner .nav-cta { margin-top: 0; }
body.inner .nav-cta { min-height: 50px; padding: 0 22px 0 26px; font-size: 12px; gap: 12px; }
body.inner .btn-heart-note { font-size: 17px; }

/* ---------- breadcrumb ---------- */
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  padding-top: 28px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.breadcrumb ol { display: contents; }
.breadcrumb li { display: inline-flex; gap: 10px; }
.breadcrumb li + li::before { content: "/"; opacity: .5; }
.breadcrumb a:hover { color: var(--mauve-deep); }
.breadcrumb [aria-current="page"] { color: var(--ink-soft); }

/* ---------- page hero (inner pages) ---------- */
.page-hero { padding: 40px 0 64px; background: var(--paper); }
.page-hero .container { max-width: 900px; }
.page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-top: 18px;
}
.page-hero .lede {
  margin-top: 26px;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 680px;
}
.page-hero .rule { margin-top: 32px; }

/* ---------- article / prose body ---------- */
.article { padding: 0 0 96px; }
.article .container { max-width: 900px; }
.prose h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.2;
  margin: 56px 0 18px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 36px 0 12px;
}
.prose ul, .prose ol { margin: 18px 0 0 0; padding-left: 22px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { font-size: 17px; line-height: 1.65; padding-left: 6px; }
.prose li + li { margin-top: 10px; }
.prose li::marker { color: var(--mauve); }
.prose a { color: var(--mauve-deep); border-bottom: 1px solid rgba(111,93,155,.35); }
.prose a:hover { border-bottom-color: currentColor; }
.prose .note {
  margin-top: 28px;
  padding: 22px 26px;
  border-left: 2px solid var(--mauve);
  background: var(--cream);
  font-size: 16px;
  color: var(--ink-soft);
}
.prose .note p + p { margin-top: 12px; }
.prose .note strong { color: var(--ink); font-weight: 500; }
.prose .crisis {
  border-left-color: var(--ink);
  background: var(--cream-deep);
}
.prose .crisis strong { font-weight: 600; }

/* ---------- link grids (hubs, pathways) ---------- */
.link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.link-grid.two { grid-template-columns: repeat(2, 1fr); }
.link-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 32px 28px 34px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.link-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(31,37,54,0.07); border-color: var(--mauve-soft); }
.link-card h3, .link-card .card-title {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
}
.link-card p { font-size: 16px; color: var(--ink-muted); flex: 1; }
.link-card .more {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mauve-deep); font-weight: 500;
}
.pathways { background: var(--cream); padding: 88px 0; }
.pathways .section-head { margin-bottom: 8px; }

/* ---------- homepage positioning statement ---------- */
.positioning { padding: 104px 0 96px; }
.positioning .container { max-width: 980px; text-align: center; }
.positioning h2 {
  font-family: var(--script);
  font-size: clamp(46px, 6.4vw, 84px);
  line-height: 1;
  color: #8f7fb3;
  margin-top: 8px;
}
.positioning .statement {
  margin: 30px auto 0;
  max-width: 720px;
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.5;
  color: var(--ink);
}
.pathway-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin-top: 40px;
}
.pathway-links a { min-height: 48px; padding: 0 28px; font-size: 12px; }

/* ---------- definition rows (program facts) ---------- */
.facts { margin-top: 32px; border-top: 1px solid var(--line); }
.facts > div {
  display: grid; grid-template-columns: 220px 1fr; gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.facts dt { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; padding-top: 4px; }
.facts dd { margin: 0; font-size: 17px; line-height: 1.65; }
.facts dd p + p { margin-top: 10px; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--cream-deep); padding: 80px 0; }
.cta-band .container { max-width: 900px; text-align: center; }
.cta-band h2 { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15; }
.cta-band p { margin: 18px auto 0; max-width: 600px; color: var(--ink-muted); font-size: 17px; }
.cta-band .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 36px; }

/* ---------- footer nav ---------- */
.footer-nav-cols {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 24px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.footer-nav-cols ul { display: grid; gap: 10px; }
.footer-nav-cols a { font-size: 15px; color: var(--ink-soft); }
.footer-nav-cols a:hover { color: var(--mauve-deep); }
.footer-note { grid-column: 1 / -1; margin-top: 28px; font-size: 13px; line-height: 1.6; color: var(--ink-muted); max-width: 820px; }

/* ---------- 404 ---------- */
.not-found { padding: 120px 0 140px; text-align: center; }
.not-found h1 { font-family: var(--serif); font-size: clamp(40px, 6vw, 80px); }
.not-found p { margin: 20px auto 0; max-width: 520px; color: var(--ink-muted); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .header-nav-group { align-items: center; gap: 8px; }
  body.inner .header-inner { padding: 8px 16px; }
  body.inner .brand-logo { height: 84px; }
  .link-grid, .link-grid.two { grid-template-columns: 1fr; }
  .facts > div { grid-template-columns: 1fr; gap: 8px; }
  .footer-nav-cols { grid-template-columns: 1fr 1fr; }
  .page-hero { padding: 24px 0 48px; }
  .article { padding-bottom: 72px; }
  .pathways { padding: 64px 0; }
  .positioning { padding: 72px 0 64px; }
  .cta-band .actions .btn { width: 100%; }
}
@media (max-width: 560px) {
  .footer-nav-cols { grid-template-columns: 1fr; }
}
.inline-link { color: var(--mauve-deep); border-bottom: 1px solid currentColor; }
.inline-link:hover { color: var(--ink); }

/* =========================================================
   GROWTH ARCHITECTURE COMPONENTS (Sep 2026)
   Get Help selector, give/partner hubs, spotlight, campaign
   pages, share row, quiet pathway links, focus states.
   ========================================================= */

/* ---------- keyboard focus (visible everywhere) ---------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--mauve-deep);
  outline-offset: 3px;
  border-radius: 3px;
}
.btn:focus-visible { outline-offset: 4px; border-radius: var(--radius-pill); }

/* ---------- homepage: quiet secondary pathways ---------- */
.pathway-quiet {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  margin-top: 26px;
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.pathway-quiet a { border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color .2s, border-color .2s; }
.pathway-quiet a:hover { color: var(--mauve-deep); border-bottom-color: var(--mauve); }

/* ---------- homepage: program spotlight ---------- */
.spotlight { background: var(--paper); }
.spotlight .section-sub { margin-bottom: 26px; }
.spotlight-list {
  margin: 0; padding: 0;
  counter-reset: step;
  list-style: none;
  border-top: 1px solid var(--line);
}
.spotlight-list li {
  counter-increment: step;
  position: relative;
  padding: 24px 0 24px 64px;
  border-bottom: 1px solid var(--line);
  font-size: 17px; line-height: 1.6;
}
.spotlight-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 26px;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--mauve);
}
.spotlight-list strong { color: var(--ink); font-weight: 500; }

/* ---------- homepage: partner band ---------- */
.partner-band { background: var(--cream-deep); }
.partner-band .link-grid { margin-top: 0; }

/* ---------- Get Help selector ---------- */
.help-selector {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin: 28px 0 8px;
}
.help-choice {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  border-bottom: 1px solid var(--line) !important; /* override .prose a underline */
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.help-choice strong { font-family: var(--serif); font-size: 21px; line-height: 1.2; color: var(--ink); font-weight: 400; }
.help-choice span { font-size: 15px; color: var(--ink-muted); line-height: 1.5; }
.help-choice:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(31,37,54,0.07); border-color: var(--mauve-soft); }
.help-choice[aria-pressed="true"] { border-color: var(--mauve); box-shadow: inset 0 0 0 1px var(--mauve); background: var(--cream); }
.help-panel { margin-top: 8px; outline: none; }
.help-panel[hidden] { display: none; }

/* ---------- case for support / campaign actions ---------- */
.case-actions, .share-row {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 36px;
}
.share-row { margin-top: 20px; }
.share-row .btn, .case-actions .btn { border-bottom: 0 !important; }
button.btn { font-family: var(--sans); cursor: pointer; }
.campaign-image { width: 100%; height: auto; border-radius: 6px; margin-bottom: 32px; }
.campaign-goal { margin-top: 20px; font-size: 17px; }
.primary-nav.is-minimal { gap: 0; }
body.campaign .page-hero .container, body.campaign .article .container { max-width: 820px; }

@media (max-width: 900px) {
  .help-selector { grid-template-columns: 1fr; }
  .spotlight-list li { padding-left: 52px; }
}