/* foundation.css — design system for The Foundation for Local Needy
 *
 * Written 14 Sep 2026 to replace the mirrored Squarespace theme. The visual
 * language follows mcmcnj.org, which the Foundation asked the site to resemble:
 * a dark navy ground with a gold accent, cream and white section bands between
 * the dark ones, a fixed navigation bar carrying the logo in a white badge,
 * fully-rounded pill buttons, and soft rounded cards.
 *
 * The nav bar was a rounded pill floating over the page until the Foundation
 * asked that the page not be visible around it; it is a solid full-bleed band
 * now. See section 5.
 *
 * The navy and the band colours were sampled from mcmcnj.org's own computed
 * styles rather than eyeballed. Two things are deliberately NOT theirs:
 *
 *   --gold   theirs is an orange-amber (#F2AD42); this is a deeper brass, so
 *            the Foundation's site is its own rather than a copy. See the token.
 *   --green  the Foundation's own mark colour, taken from logo4.jpg (the palm
 *            is a solid #0D3B38). MCMC has no equivalent. Used where a second
 *            dark is wanted next to the navy.
 *
 * There are no webfonts. mcmcnj.org itself ships none and renders in the system
 * sans stack; matching that keeps the two sites looking alike and costs the
 * Foundation nothing in load time.
 */

/* ========================================================================
   1. Tokens
   ======================================================================== */

:root {
  /* Dark ground. OLIVE since 18 Sep 2026 (scheme "Olive and Date"); the token
     names stay navy-* because they are used in ~900 places and the scale's ROLE
     is unchanged: -900 is the body ground, -800/-700 its panels, -600 the
     lightest step and the button fill. */
  --navy-900: #17200e;
  --navy-800: #1c2713;
  --navy-700: #26331b;
  --navy-600: #3a4a26;

  /* The Foundation's own logo green. */
  --green: #0d3b38;

  /* Date-brown accent (was brass gold #d9a62e). Warmer and browner, to sit on
     the olive ground rather than the old navy. Kept as TWO families for the
     same reason as before — 8.4:1 on --navy-900, so it still carries text and
     buttons on dark bands. */
  --gold: #dcb068;
  /* Hover step for accent surfaces on DARK bands only — 6.1:1 there, 2.0:1 on
     white, which is not enough for text on a light band. */
  --gold-dark: #c29348;
  /* --gold on white is 2.0:1, so the accent NEVER carries body text on a light
     band. These two are its text colours for light bands:
     --gold-ink 7.0:1 on cream, --gold-ink-dark 9.9:1 for its hover. */
  --gold-ink: #6b4a18;
  --gold-ink-dark: #4f360f;

  /* Light bands. */
  --cream: #f0f1e5;
  --cream-soft: #fafaf4;
  --white: #ffffff;
  --off-white: #f7f8f0;

  /* Text. */
  --ink: #2e3a1e;          /* headings on light bands — 10.6:1 on cream     */
  --ink-body: #3f4a2e;     /* body copy on light bands — 8.3:1 on cream     */
  --on-dark: #fbfaf0;      /* headings on dark bands — 16.0:1 on --navy-900 */
  --on-dark-body: #d3dac3; /* body copy on dark — 11.7:1 on --navy-900      */

  --line: rgba(46, 58, 30, 0.14);
  --line-dark: rgba(255, 255, 255, 0.12);

  --shadow-sm: 0 2px 8px rgba(23, 32, 14, 0.07);
  --shadow: 0 10px 30px rgba(23, 32, 14, 0.12);
  --shadow-lg: 0 22px 55px rgba(23, 32, 14, 0.18);

  --radius: 16px;
  --radius-lg: 24px;

  /* One content width for every page. The mirrored site had five different
     ones; local-overrides.css already had to force them to a single 873px.
     1120px is MCMC's. */
  --measure: 1120px;
  /* Long-form prose (mission, stories, team bios) is capped narrower than the
     band so lines stay readable — 70-ish characters rather than 140. */
  --measure-prose: 760px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-arabic: "Amiri Quran", "Traditional Arabic", "Segoe UI", serif;
}

/* ========================================================================
   2. Base
   ======================================================================== */

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

html {
  scroll-behavior: smooth;
  /* The nav is fixed; without this an in-page anchor lands under it.
     The band is ~70px tall and starts at the top of the viewport. */
  scroll-padding-top: 84px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--ink-body);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* --gold-dark would be 3.2:1 here, below AA for body-size text. */
a:hover { color: var(--gold-ink-dark); }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.15;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.3rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -0.01em; }
h4 { font-size: 1.1rem; letter-spacing: 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gold);
  color: var(--navy-900);
  padding: 0.8rem 1.4rem;
  font-weight: 700;
  border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ========================================================================
   3. Layout primitives
   ======================================================================== */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  /* Side padding lives here and nowhere else, so every band keeps the same
     gutter and nothing can reach the screen edge on a phone. */
  padding-inline: 24px;
}

.prose { max-width: var(--measure-prose); }
.prose.centered { margin-inline: auto; }

/* Bands. Each one paints its own background AND its own text colours, so a
   section is self-contained and can be reordered without carrying the wrong
   colours with it. */
.band { padding-block: clamp(40px, 5vw, 64px); }

.band--navy   { background: var(--navy-900); color: var(--on-dark-body); }
.band--navy-2 { background: var(--navy-800); color: var(--on-dark-body); }
.band--green  { background: var(--green);    color: var(--on-dark-body); }
.band--cream  { background: var(--cream);    color: var(--ink-body); }
.band--soft   { background: var(--cream-soft); color: var(--ink-body); }
.band--white  { background: var(--white);    color: var(--ink-body); }

.band--navy h1, .band--navy h2, .band--navy h3, .band--navy h4,
.band--navy-2 h1, .band--navy-2 h2, .band--navy-2 h3, .band--navy-2 h4,
.band--green h1, .band--green h2, .band--green h3, .band--green h4 {
  color: var(--on-dark);
}
/* :where() so these contribute NOTHING to specificity — the selector counts as
   a bare `a` (0,0,1). Written as `.band--navy a` it would be 0,1,1 and beat
   every single-class component rule below, including `.btn--outline`. That is
   not hypothetical: it painted the outline button's label gold on the gold
   .cta-strip — gold on gold — on five pages. Any component that sets its own
   colour must be able to win here. */
:where(.band--navy, .band--navy-2, .band--green) a { color: var(--gold); }
:where(.band--navy, .band--navy-2, .band--green) a:hover { color: #dfbc7f; }

.band--tight { padding-block: clamp(28px, 3.5vw, 44px); }

/* ========================================================================
   4. Eyebrow + section headings
   ======================================================================== */

/* The small gold uppercase label MCMC sets above every section heading. */
.eyebrow {
  display: block;
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.band--navy .eyebrow,
.band--navy-2 .eyebrow,
.band--green .eyebrow,
.hero .eyebrow { color: var(--gold); }

.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.centered { text-align: center; margin-inline: auto; max-width: 720px; }

/* The "Read our full mission →" line that closes a section. */
.section-more { margin: clamp(2rem, 3.5vw, 2.8rem) 0 0; text-align: center; }
.section-head p {
  font-size: 1.08rem;
  margin-bottom: 0;
  color: inherit;
  opacity: 0.9;
}

/* ========================================================================
   5. Header — solid full-bleed bar
   ======================================================================== */

/* The header used to be a rounded pill floating in a transparent 18px strip,
   with the page visible above it and down both gutters. Scrolling text ran
   through those gaps, which read as a rendering fault rather than a design.
   The header is now one opaque full-width band that stops immediately below
   the bar: the page scrolls under it and is simply gone. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--navy-900);
  /* The band is the same navy as the hero, so on the home page it would other-
     wise dissolve into it. These two give it an edge without a hard seam. */
  border-bottom: 1px solid var(--line-dark);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30);
}

.nav-shell {
  max-width: var(--measure);
  margin-inline: auto;
  /* The gutter that used to sit on .site-header. It has to be here now, or the
     band's background would stop at the content width instead of bleeding to
     both screen edges. */
  padding-inline: 24px;
}

.nav-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* The bar sits on navy but inherits <body>'s light-band body colour, which is
     1.85:1 here. Every child that paints text sets its own colour, so nothing
     is unreadable today — this just stops the next thing added to the bar from
     inheriting an invisible one. */
  color: var(--on-dark);
  /* No background, border, rounding or shadow of its own any more — .site-header
     is the painted surface, and a pill outline drawn navy-on-navy inside it
     would only be a ghost of the old design. Deliberately no backdrop-filter
     either: a blurred backdrop on a fixed full-width bar makes Chrome
     re-rasterise everything behind it on every scroll frame, which was enough
     to hang the renderer outright. The band is opaque, so there is nothing
     behind it to frost. */
  padding: 0.7rem 0;
}

/* The badge. MCMC hangs a white shield holding its logo off its nav bar's left
   end; this one sits INSIDE the bar instead, as an ordinary flex item, so the
   bar reads as one solid pill with nothing breaking its outline.
   Still a white disc rather than the bare mark: the palm is #0D3B38, which on
   the olive ground #17200E is about 1.4:1 — effectively invisible, and the
   olive is if anything closer to the logo's green than the old navy was. The
   disc is what makes it legible, not decoration. */
.brand-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 5px;
  background: var(--white);
  border-radius: 50%;
  /* The logo is a JPEG on a white square. The largest square that fits inside a
     46px circle is ~32px, so at any useful image size its corners cross the
     curve and notch the disc. Clipping to the border-radius keeps the disc a
     disc no matter what size the mark is set to. */
  overflow: hidden;
}
.brand-badge img { width: 100%; }

.brand-name {
  margin-right: auto;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--on-dark);
  text-decoration: none;
  max-width: 15ch;
}
.brand-name:hover { color: var(--gold); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links a {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--on-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s, color 0.18s;
}
.nav-links a:hover { background: rgba(217, 166, 46, 0.16); color: var(--gold); }
/* The current page, so a visitor can tell where they are without guessing. */
.nav-links a[aria-current="page"] { color: var(--gold); background: rgba(217, 166, 46, 0.13); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #eacb8c, var(--gold));
  color: var(--navy-900) !important;
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(217, 166, 46, 0.34);
  transition: transform 0.18s, box-shadow 0.18s;
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(217, 166, 46, 0.45);
  color: var(--navy-900) !important;
}

/* Mobile menu toggle — a real <button> with a real checkbox-free toggle so it
   works without JavaScript being required for navigation. */
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--on-dark);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 1040px) {
  .nav-links a { padding: 0.5rem 0.6rem; font-size: 0.9rem; }
  .brand-name { font-size: 0.95rem; }
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-bar { padding: 0.6rem 0; flex-wrap: wrap; }
  .brand-badge { width: 42px; height: 42px; padding: 4px; }
  .nav-links {
    display: none;
    order: 3;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--line-dark);
  }
  .nav-bar.open .nav-links { display: flex; }
  .nav-links a { padding: 0.75rem 0.6rem; font-size: 1rem; }
  .nav-cta { padding: 0.6rem 1.1rem; font-size: 0.9rem; }
}

/* Keep the bar's top row on ONE line here. Badge + name + toggle + Donate came
   to about 388px of a 390px phone, so it wrapped and the bar grew to 125px —
   tall enough to sit over the hero text. Trimming the gap and the two controls
   brings the row to ~330px, with room to spare. */
@media (max-width: 560px) {
  .nav-bar { gap: 0.5rem; }
  .brand-name { max-width: none; font-size: 0.82rem; }
  .nav-cta { padding: 0.5rem 0.8rem; font-size: 0.82rem; }
  .nav-toggle { width: 40px; height: 40px; font-size: 1.15rem; }
}

/* Every page starts below the fixed header. The hero overrides this with its
   own padding; pages without a hero use this. */
.page-top { padding-top: 98px; }
@media (max-width: 900px) { .page-top { padding-top: 90px; } }

/* ========================================================================
   6. Hero
   ======================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(108px, 13vw, 158px) clamp(28px, 3vw, 44px);
  background:
    radial-gradient(1100px 620px at 18% -10%, rgba(217, 166, 46, 0.16), transparent 62%),
    radial-gradient(900px 560px at 88% 8%, rgba(13, 59, 56, 0.85), transparent 60%),
    linear-gradient(165deg, #071a30 0%, var(--navy-900) 52%, #030d1c 100%);
  color: var(--on-dark-body);
}

/* The calligraphy motif. It is a decorative background, not content, so it is
   a ::before rather than an <img>: no alt text to write, nothing for a screen
   reader to announce, and it cannot be mistaken for the verse itself (the
   verse appears as real text further down the page).
   The source scans are JPEGs with a white paper ground and no alpha. Rather
   than drop that ground at runtime with mix-blend-mode — which made Chrome
   re-rasterise this whole layer over the gradient stack on every scroll frame,
   badly enough to hang the renderer — the white is removed ahead of time. The
   assets/img/calligraphy-*.png files are white-ink-on-transparent versions
   generated from these same scans, so this is now an ordinary image layer. */
.hero::before {
  content: "";
  position: absolute;
  inset: auto 0 -4% 0;
  height: 58%;
  background-image: var(--hero-motif, none);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: min(1180px, 118%) auto;
  opacity: 0.15;
  pointer-events: none;
  z-index: -1;
}

/* A soft gold halo behind the headline, which is what gives MCMC's hero its
   depth once the photograph is taken away. */
.hero::after {
  content: "";
  position: absolute;
  top: -18%;
  right: -12%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 166, 46, 0.20), transparent 68%);
  pointer-events: none;
  z-index: -1;
}

.hero h1 {
  max-width: 16ch;
  color: var(--on-dark);
  margin-bottom: 0.45em;
}
/* The gold-highlighted word or phrase in the headline, as MCMC does with "&". */
.hero h1 .accent { color: var(--gold); }

.hero-lead {
  max-width: 52ch;
  font-size: clamp(1.08rem, 1.6vw, 1.25rem);
  color: var(--on-dark-body);
  margin-bottom: 2.2rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Page heroes for the inner pages — same treatment, less height. */
.hero--page { padding-block: clamp(108px, 13vw, 158px) clamp(28px, 3vw, 44px); }
.hero--page h1 { max-width: 20ch; }

/* Belt and braces. If the bar's top row wraps anyway — a longer org name, a
   larger default font size, a 320px phone — it grows to ~125px and the header
   bottom reaches ~125px. These minimums clear that case; when the row does not
   wrap they cost only a little extra air at the top of a hero, which a hero can
   afford. Cheaper than making the heroes depend on a measured header height. */
@media (max-width: 900px) {
  .hero { padding-block: 138px clamp(24px, 4vw, 36px); }
  .hero--page { padding-block: 138px clamp(24px, 4vw, 36px); }
}

/* ========================================================================
   7. Buttons
   ======================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.92rem 1.9rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, background-color 0.18s,
    border-color 0.18s, color 0.18s;
}
.btn:hover { transform: translateY(-2px); }

.btn--gold {
  background: linear-gradient(180deg, #eacb8c, var(--gold));
  color: var(--navy-900);
  box-shadow: 0 10px 26px rgba(217, 166, 46, 0.32);
}
.btn--gold:hover {
  color: var(--navy-900);
  box-shadow: 0 16px 34px rgba(217, 166, 46, 0.44);
}

/* Ghost button for dark bands — MCMC's "Donate" / "Become a Member" pair. */
.btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--on-dark);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--gold);
  color: var(--gold);
}

/* Ghost button for light bands. */
.btn--outline {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--outline:hover { background: var(--ink); color: var(--on-dark); }

.btn--navy { background: var(--navy-600); color: var(--on-dark); box-shadow: var(--shadow); }
.btn--navy:hover { background: var(--navy-700); color: var(--gold); }

/* The gold "View All →" text link. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--gold-ink);
}
.link-arrow::after { content: "→"; transition: transform 0.18s; }
.link-arrow:hover::after { transform: translateX(4px); }
.band--navy .link-arrow, .band--navy-2 .link-arrow, .band--green .link-arrow { color: var(--gold); }

/* ========================================================================
   8. Cards + grids
   ======================================================================== */

.grid {
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.75rem);
  /* auto-fit so a row of three becomes two then one without a media query per
     breakpoint, and never leaves a card stretched across a whole row alone. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }

.card {
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card h3 { margin-bottom: 0.5rem; }
.card p:last-child { margin-bottom: 0; }

/* Card on a dark band. */
.card--dark {
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--line-dark);
  color: var(--on-dark-body);
  box-shadow: none;
}
.card--dark:hover { background: rgba(255, 255, 255, 0.075); box-shadow: none; }

/* The small round gold icon MCMC puts at the top of a card. */
.card-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: rgba(217, 166, 46, 0.16);
  color: var(--gold-ink);
  font-size: 1.5rem;
  line-height: 1;
}
.card--dark .card-icon { color: var(--gold); }

/* ========================================================================
   9. Stat badge — MCMC's gold "40+ YEARS" tile
   ======================================================================== */

.stats {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

.stat {
  padding: 1.9rem 1.4rem;
  border-radius: var(--radius-lg);
  text-align: center;
  background: linear-gradient(180deg, #eacb8c, var(--gold));
  color: var(--navy-900);
  box-shadow: 0 16px 38px rgba(217, 166, 46, 0.24);
}
.stat b {
  display: block;
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.stat span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  /* Not pure navy: at this size a slightly lifted ink reads less heavy while
     still holding 7:1 on the gold. */
  color: rgba(4, 17, 34, 0.82);
}

/* The quieter variant, for a dark band where a wall of gold would shout. */
.stat--quiet {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-dark);
  color: var(--on-dark);
  box-shadow: none;
}
.stat--quiet b { color: var(--gold); }
.stat--quiet span { color: var(--on-dark-body); }

/* ========================================================================
   10. Verse block — the Qur'an / hadith quotations
   ======================================================================== */

/* These are the site's recurring motif: every page opens with one. Treated as
   a real <blockquote> with a gold rule, so it reads as a quotation rather than
   as the page's own voice. */
.verse {
  margin: 0 0 2.4rem;
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.4rem, 2.6vw, 2.2rem);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(217, 166, 46, 0.09);
}
.verse p {
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  line-height: 1.65;
  font-style: italic;
  color: var(--ink);
}
.band--navy .verse, .band--navy-2 .verse, .band--green .verse, .hero .verse {
  background: rgba(217, 166, 46, 0.10);
}
.band--navy .verse p, .band--navy-2 .verse p, .band--green .verse p { color: var(--on-dark); }

.verse cite {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.band--navy .verse cite, .band--navy-2 .verse cite, .band--green .verse cite { color: var(--gold); }

/* The calligraphy scans, shown under the verse they carry. Every verse block
   sits on a light band, so these are the original JPEGs and their white paper
   ground is simply the band's own colour. A verse moved onto a dark band needs
   the transparent calligraphy-*.png instead — swapping the src, not blending
   at runtime. See the note on .hero::before. */
/* min(), not a bare 560px: these scans are 825-1380px wide natively, and a
   plain max-width:560px overrides the max-width:100% on `img` — which pushed
   the page 220px wider than a 390px phone. */
.calligraphy { margin: 1.6rem auto 0; max-width: min(560px, 100%); }

/* Arabic runs at a larger size: the fallback Arabic face renders optically
   smaller than the Latin around it at the same point size. (This is the same
   correction the old stories.html carried as .arabic-greeting.) */
.arabic {
  font-family: var(--font-arabic);
  font-size: 1.5em;
  line-height: 1.9;
  direction: rtl;
  text-align: right;
}

/* ========================================================================
   11. Long-form prose
   ======================================================================== */

.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 2rem; }
.prose > :first-child { margin-top: 0; }

.prose ol, .prose ul { margin: 0 0 1.4em; padding-left: 1.3em; }
.prose li { margin-bottom: 0.7em; line-height: 1.7; }
.prose li::marker { color: var(--gold-ink); font-weight: 700; }
.band--navy .prose li::marker,
.band--navy-2 .prose li::marker,
.band--green .prose li::marker { color: var(--gold); }

/* A numbered list whose items are cases/notes rather than steps — each one
   gets its own card so nine of them in a row stay scannable. */
.case-list { margin: 0; padding: 0; list-style: none; counter-reset: caseno; }
.case-list li {
  position: relative;
  margin-bottom: 1rem;
  padding: 1.15rem 1.35rem 1.15rem 3.9rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.case-list li::before {
  counter-increment: caseno;
  content: counter(caseno);
  position: absolute;
  top: 1.15rem;
  left: 1.2rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(217, 166, 46, 0.2);
  color: var(--gold-ink);
  font-size: 0.9rem;
  font-weight: 800;
}

/* The sign-off at the foot of the Success Stories letter. Set apart from the
   body above it by a gold rule rather than by italics, which at this length
   would read as another quotation. */
.signature {
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 2px solid var(--gold);
}
.signature p { margin-bottom: 0.4rem; }

/* ========================================================================
   12. Team
   ======================================================================== */

.person { display: flex; flex-direction: column; }
.person-name { margin-bottom: 0.15rem; }
.person-role {
  margin-bottom: 1rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.band--navy .person-role, .band--navy-2 .person-role, .band--green .person-role { color: var(--gold); }
.person-body p { font-size: 0.97rem; }

/* The initials disc that stands in for a portrait. The Foundation has no
   photographs of the board; an initials disc is honest about that, where a
   stock silhouette would not be. */
.person-avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--green), var(--navy-600));
  color: var(--gold);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ========================================================================
   13. Donate page pieces
   ======================================================================== */

.pay-card { display: flex; flex-direction: column; height: 100%; }
.pay-card .pay-label {
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.band--navy .pay-card .pay-label { color: var(--gold); }

/* The instruction under a payment address: how to tell us where the receipt goes.
   Quieter than the address itself -- it is read after the donor has found the one
   thing they came for -- and separated by a rule so it cannot be mistaken for part
   of the address. Added 20 Sep 2026, because 156 of this year's donors gave with no
   contact details at all and the one who did typed it into his Zelle memo. */
.pay-tip {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-body);
}
.pay-tip + .pay-tip { margin-top: 0.55rem; padding-top: 0.55rem; }
.pay-tip strong { color: var(--ink); }
.pay-tip em { font-style: normal; font-weight: 600; color: var(--gold-ink); }
.pay-tip a { color: var(--gold-ink); }
.pay-tip a:hover { color: var(--gold-ink-dark); }

/* An address or e-mail that a visitor is expected to copy. Monospaced and
   boxed so the characters are unambiguous — an address typed wrong is a
   donation that never arrives. */
.copyable {
  display: block;
  margin: 0.55rem 0 0;
  padding: 0.75rem 0.95rem;
  background: rgba(15, 32, 64, 0.05);
  border: 1px dashed var(--line);
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.94rem;
  word-break: break-word;
  color: var(--ink);
}
.band--navy .copyable, .band--navy-2 .copyable, .band--green .copyable {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line-dark);
  color: var(--on-dark);
}

.address-block {
  margin: 0;
  font-style: normal;
  font-size: 1.02rem;
  line-height: 1.8;
}

/* The full-width gold call to action that closes most pages. */
.cta-strip {
  padding: clamp(2.2rem, 4vw, 3.4rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #eacb8c, var(--gold));
  color: var(--navy-900);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.cta-strip h2 { color: var(--navy-900); }
.cta-strip p {
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: 1.9rem;
  color: rgba(4, 17, 34, 0.85);
  font-size: 1.06rem;
}
.cta-strip .btn--navy { box-shadow: 0 12px 30px rgba(4, 17, 34, 0.26); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }

/* A note/callout inside a band. */
.note {
  padding: 1.1rem 1.35rem;
  background: rgba(217, 166, 46, 0.12);
  border-left: 4px solid var(--gold);
  border-radius: 0 12px 12px 0;
  font-size: 0.97rem;
}
.note strong { color: var(--ink); }
.band--navy .note strong, .band--navy-2 .note strong, .band--green .note strong { color: var(--on-dark); }

/* ========================================================================
   14. Footer
   ======================================================================== */

.site-footer {
  background: var(--navy-800);
  color: var(--on-dark-body);
  padding-block: clamp(48px, 6vw, 72px) 0;
  border-top: 1px solid var(--line-dark);
}

.footer-grid {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
  grid-template-columns: 1.4fr 1fr 1fr;
  padding-bottom: 2.6rem;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand { display: flex; align-items: flex-start; gap: 1rem; }
.footer-brand .footer-logo {
  flex: none;
  width: 72px;
  padding: 9px;
  background: var(--white);
  border-radius: 50%;
}
.footer-brand h3 { margin-bottom: 0.4rem; font-size: 1.12rem; color: var(--on-dark); }
.footer-brand p { font-size: 0.92rem; margin-bottom: 0; }

.site-footer h4 {
  margin-bottom: 1rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.footer-list { margin: 0; padding: 0; list-style: none; }
.footer-list li { margin-bottom: 0.55rem; }
.footer-list a { color: var(--on-dark-body); text-decoration: none; font-size: 0.96rem; }
.footer-list a:hover { color: var(--gold); }

.footer-bottom {
  padding-block: 1.4rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.87rem;
  color: #94a3b8;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  justify-content: space-between;
}
.footer-bottom p { margin: 0; }

/* ========================================================================
   15. Print
   ======================================================================== */

@media print {
  .site-header, .hero::before, .hero::after, .cta-strip, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band, .hero { background: #fff !important; color: #000 !important; padding-block: 1rem; }
  .band h1, .band h2, .band h3, .hero h1 { color: #000 !important; }
  .card, .case-list li { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  a { color: #000; }
}

/* ========================================================================
   16. Paper mode — the site on a light ground (18 Sep 2026)
   ========================================================================
   The bands, hero and footer were built dark (MCMC's structure). This section
   turns those same surfaces light, keeping ONLY the nav bar dark, which is the
   look the palette mock showed: olive nav, paper page, olive headings, a date
   rule under them.

   Written as overrides at the END of the file rather than edits to sections
   4-14, so the dark version is still there to go back to: delete this section
   and the site is dark again. Same selectors as the originals, so they win on
   source order rather than on specificity.
   ======================================================================== */

/* The page ground itself — behind the bands, and what shows past the last one. */
body { background: var(--cream-soft); }

/* The nav band. #4A5D32 is the scheme's primary olive — one step lighter than
   --navy-600 (#3A4A26), and lighter still than the --navy-900 ground the bar
   used to sit on, which is what now separates it from the paper hero beneath.
   Text on it: --on-dark 6.9:1, the accent 3.6:1. Kept as its own token
   rather than a literal, so the bar can be retuned without touching buttons,
   which use --navy-600. */
:root { --nav-band: #4a5d32; }
.site-header { background: var(--nav-band); }
/* The bar's accent states. --gold (#DCB068) is only 3.6:1 on this lighter band,
   so the hover and current-page link use the pale step instead — 5.2:1 — while
   the tinted pill behind them stays gold. The Donate button is unaffected: it
   is a filled gold surface with dark text, not gold text. */
.nav-links a:hover,
.nav-links a[aria-current="page"],
.brand-name:hover { color: #f0d9a8; }

/* ---- bands ------------------------------------------------------------- */
.band--navy   { background: var(--cream);      color: var(--ink-body); }
.band--navy-2 { background: var(--white);      color: var(--ink-body); }
.band--green  { background: var(--cream-soft); color: var(--ink-body); }

.band--navy h1, .band--navy h2, .band--navy h3, .band--navy h4,
.band--navy-2 h1, .band--navy-2 h2, .band--navy-2 h3, .band--navy-2 h4,
.band--green h1, .band--green h2, .band--green h3, .band--green h4 {
  color: var(--ink);
}
/* :where() keeps these at specificity (0,0,1), matching the rules they replace. */
:where(.band--navy, .band--navy-2, .band--green) a { color: var(--gold-ink); }
:where(.band--navy, .band--navy-2, .band--green) a:hover { color: var(--gold-ink-dark); }

.band--navy .eyebrow,
.band--navy-2 .eyebrow,
.band--green .eyebrow,
.hero .eyebrow { color: var(--gold-ink); }

.band--navy .verse p, .band--navy-2 .verse p, .band--green .verse p { color: var(--ink); }
.band--navy .note strong, .band--navy-2 .note strong, .band--green .note strong { color: var(--ink); }

.band--navy .copyable, .band--navy-2 .copyable, .band--green .copyable {
  background: rgba(46, 58, 30, 0.05);
  border-color: var(--line);
  color: var(--ink);
}

/* ---- hero -------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(1100px 620px at 18% -10%, rgba(176, 124, 46, 0.12), transparent 62%),
    radial-gradient(900px 560px at 88% 8%, rgba(74, 93, 50, 0.10), transparent 60%),
    linear-gradient(165deg, var(--cream-soft) 0%, var(--cream) 56%, #e8ead8 100%);
  color: var(--ink-body);
}
/* The motif PNGs are white ink on transparent, drawn for a dark ground.
   invert(1) turns that ink dark while leaving the transparency alone, so the
   same asset works on paper — no second set of images to generate. */
.hero::before { filter: invert(1); opacity: 0.09; }
.hero::after {
  background: radial-gradient(circle, rgba(176, 124, 46, 0.18), transparent 68%);
}
.hero h1 { color: var(--ink); }
.hero h1 .accent { color: var(--gold-ink); }
.hero-lead { color: var(--ink-body); }

/* ---- pieces that assumed a dark ground --------------------------------- */
.card--dark {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink-body);
  box-shadow: var(--shadow-sm);
}
.card--dark:hover { background: var(--white); box-shadow: var(--shadow); }

.stat--quiet {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.stat--quiet b { color: var(--gold-ink); }
.stat--quiet span { color: var(--ink-body); }

/* The ghost button was white-on-dark; on paper it is the outline button. */
.btn--ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--cream-soft); border-color: var(--ink); }

/* ---- footer ------------------------------------------------------------ */
.site-footer {
  background: var(--cream);
  color: var(--ink-body);
  border-top: 1px solid var(--line);
}
.footer-brand h3 { color: var(--ink); }
.site-footer h4 { color: var(--gold-ink); }
.footer-list a { color: var(--ink-body); }
.footer-list a:hover { color: var(--gold-ink-dark); }
.footer-bottom { border-top: 1px solid var(--line); color: var(--ink-body); }