/* ============================================================
   NEURO HEALTH ALLIANCE — Design System
   Editorial • calm • human. Evolves the real olive/cream/ink brand.
   No gradients-for-drama, no floating icons, no template tells.
   ============================================================ */

/* ---------- Fonts (self-contained, privacy: Google Fonts only) ---------- */
/* Space Grotesk = display/UI · Space Mono = spec labels · Newsreader = long-form reading */

/* ---------- Design tokens ---------- */
:root {
  /* Palette — warm, comforting, gently colorful. Greens from Scoreless/NHA + soft accents. */
  --ink:        #26332b;   /* soft dark pine — primary text (warmer than black) */
  --ink-2:      #33443a;
  --olive:      #244a3a;   /* forest green — dark sections */
  --olive-2:    #2f5d47;   /* medium forest */
  --moss:       #536358;   /* muted green-gray text (AA on cream + all tinted sections) */
  --sage:       #8fb89e;   /* fresh sage (from Scoreless) */
  --sage-2:     #c3ddca;   /* soft mint for lines/chips on dark */
  --bone:       #f4efe4;   /* warm cream — page base (brighter, less drab) */
  --bone-2:     #ece4d4;   /* slightly deeper cream */
  --paper:      #fbf8f1;   /* lightest surface (cards) */
  --paper-2:    #ffffff;

  /* Warm accent family (primary CTA warmth) — kept under the old --clay names so pages inherit it */
  --clay:       #e0805e;   /* soft coral — decorative highlights, dots, underlines */
  --clay-deep:  #9c4525;   /* deep coral — small text & hover (WCAG AA on cream + all tints) */
  --clay-btn:   #b4542f;   /* coral for filled buttons — AA with white text */
  --clay-soft:  #f6d8c6;   /* peach tint */
  --coral: var(--clay); --coral-deep: var(--clay-deep); --coral-soft: var(--clay-soft);

  /* The colorful accent set — used to tint sections + color-code cards/chips */
  --lavender:      #9d8fca;
  --lavender-soft: #e8e2f4;
  --gold:          #eab863;
  --gold-soft:     #f8e7c2;
  --sky:           #7fb0d4;
  --sky-soft:      #dbecf5;
  --rose:          #e0a0a0;
  --rose-soft:     #f6dede;
  --mint:          #a9cbb4;
  --mint-soft:     #dcecdf;

  --line:       #e2d9c8;   /* soft hairline on cream */
  --line-2:     #d6cdbb;
  --line-ink:   rgba(255,255,255,.18); /* hairline on dark */
  --focus:      #3b6fe0;   /* accessible focus ring */
  --good:       #4f8a5e;
  --danger:     #c85a52;

  /* Typography — comforting: soft serif headings + rounded friendly sans + a human hand */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui:      "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-read:    "Fraunces", Georgia, serif;
  --font-hand:    "Caveat", "Segoe Script", cursive;  /* handwritten accents / annotations */
  --font-mono:    var(--font-ui);  /* legacy alias: former mono labels now use the warm sans */

  /* Radius scale — crisp & editorial (soft-rounded "boxes" read as generic/AI).
     Boxes stay near-square; only true pills (buttons/chips) use --r-pill. */
  --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px; --r-pill: 999px;

  /* Space scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  /* Layout */
  --maxw: 1180px;
  --maxw-narrow: 760px;
  --nav-h: 68px;
  --crisis-h: 40px;

  /* Soft, comforting shadows (no more hard printed offsets) */
  --shadow-sm: 0 2px 8px rgba(38,51,43,.06);
  --shadow-card: 0 10px 30px -12px rgba(38,51,43,.18);
  --shadow-soft: 0 6px 20px -8px rgba(38,51,43,.14);
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--font-ui);
  background: var(--bone);
  color: var(--ink);
  line-height: 1.62;
  font-size: 1.0625rem; /* 17px at default root; scales when [data-large-text] raises root size */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip (not hidden): contains horizontal overflow WITHOUT turning <body> into a
     scroll container, so the sticky header keeps sticking instead of scrolling away. */
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--clay); color: #fff; }
hr { border: none; border-top: 1px solid var(--line); }

/* ---------- Typography ---------- */
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -.01em; font-optical-sizing: auto; color: var(--ink); text-wrap: balance; }
.display {
  font-size: clamp(2.5rem, 6.4vw, 5rem);
  line-height: 1.03;
  letter-spacing: -.015em;
  font-weight: 600;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
p { text-wrap: pretty; }

/* Soft label (was mono) — warm rounded uppercase */
.spec {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clay-deep);
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.spec::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--clay);
  display: inline-block;
}
.spec--plain::before { display: none; }
.on-dark .spec, .section--dark .spec, .section--ink .spec { color: var(--sage-2); }

.lead { font-size: clamp(1.02rem, 1.3vw, 1.18rem); color: var(--moss); line-height: 1.55; }
.section--dark .lead, .on-dark .lead, .section--ink .lead { color: var(--sage-2); }

/* Long-form reading (articles) — lighter, less chunky */
.prose { font-family: var(--font-read); font-size: 1.08rem; line-height: 1.62; color: #33402f; max-width: 66ch; font-weight: 400; }
.prose p { margin: 0 0 .95em; }
.prose h2 { font-family: var(--font-display); margin: 1.6em 0 .4em; }
.prose h3 { font-family: var(--font-display); margin: 1.4em 0 .3em; }
.prose a { color: var(--clay-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { border-inline-start: 3px solid var(--clay); padding-inline-start: 1em; font-style: italic; color: var(--moss); margin: 1.2em 0; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
.wrap--narrow { max-width: var(--maxw-narrow); }
.section { padding-block: clamp(46px, 6.5vw, 84px); position: relative; }
.section--tight { padding-block: clamp(34px, 4.5vw, 58px); }
.section--cta { padding-block: clamp(40px, 5vw, 68px); }
.section--dark { background: var(--olive); color: var(--paper); }
.section--dark h1,.section--dark h2,.section--dark h3 { color: var(--paper); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink h1,.section--ink h2,.section--ink h3 { color: var(--paper); }
/* Photo background under a green wash — set --bg:url(...) inline. Text stays readable. */
.section--photo { position: relative; isolation: isolate; overflow: hidden; background: var(--olive); color: var(--paper); }
.section--photo::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to bottom, rgba(36,74,58,.62), rgba(23,33,28,.78)), var(--bg) center/cover no-repeat; }
.section--photo > .wrap { position: relative; z-index: 1; }
.section--photo h1, .section--photo h2, .section--photo h3 { color: var(--paper); }
.section--photo .spec, .section--photo .lead, .section--photo .form-note { color: var(--sage-2); }
.section--paper { background: var(--paper); }
/* Soft color-tinted sections — variety without noise */
.section--mint { background: var(--mint-soft); }
.section--peach { background: var(--clay-soft); }
.section--sky { background: var(--sky-soft); }
.section--lavender { background: var(--lavender-soft); }
.section--gold { background: var(--gold-soft); }
.grid { display: grid; gap: clamp(20px, 3vw, 40px); }
/* Fluid grids — for the multi-item card walls, the column COUNT reflows continuously
   with the viewport (no hard breakpoint jumps); min(100%, …) guarantees a single
   column with zero horizontal overflow on the narrowest screens. */
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 208px), 1fr)); }
/* cols-2 pairs content (text+media, 2×2 blocks) so it stays a firm 2-up, then stacks */
.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .cols-2 { grid-template-columns: 1fr; } }

.section-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 52px); }
.section-head h2 { margin-top: .4rem; }
.section-head .lead { margin-top: .8rem; }
.eyebrow-row { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* ---------- Buttons ---------- */
.btn {
  --_bg: var(--ink); --_fg: var(--paper); --_bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .82em 1.5em;
  font-family: var(--font-ui); font-weight: 700; font-size: 1rem;
  background: var(--_bg); color: var(--_fg);
  border: 2px solid var(--_bd);
  border-radius: var(--r-pill);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform .15s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn--clay { --_bg: var(--clay-btn); --_fg: #fff; --_bd: var(--clay-btn); }
.btn--clay:hover { --_bg: var(--clay-deep); --_bd: var(--clay-deep); }
.btn--ghost { --_bg: transparent; --_fg: var(--ink); --_bd: var(--ink); }
.btn--ghost:hover { --_bg: var(--ink); --_fg: var(--paper); }
.on-dark .btn--ghost, .section--dark .btn--ghost, .section--ink .btn--ghost { --_fg: var(--paper); --_bd: var(--sage-2); }
.on-dark .btn--ghost:hover, .section--dark .btn--ghost:hover, .section--ink .btn--ghost:hover { --_bg: var(--paper); --_fg: var(--ink); }
.btn--light { --_bg: var(--paper); --_fg: var(--ink); --_bd: var(--paper); }
.btn--sm { padding: .55em 1em; font-size: .86rem; }
.btn--lg { padding: .95em 1.7em; font-size: 1.05rem; }
.btn--block { display: flex; width: 100%; }
.link-underline { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; text-decoration-color: var(--clay); }
.link-arrow { font-weight: 500; display: inline-flex; align-items: center; gap: .4em; }
.link-arrow:hover { color: var(--clay-deep); }

/* ---------- Cards ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 32px);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  position: relative;
}
.card--link { cursor: pointer; }
.card--link:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: var(--sage); }
.card__num { font-family: var(--font-ui); font-weight: 800; font-size: .76rem; color: var(--clay-deep); letter-spacing: .06em; text-transform: uppercase; }
.card h3 { margin: .5rem 0 .4rem; }
.card p { color: var(--moss); font-size: .98rem; }
.card--dark { background: var(--olive-2); border-color: var(--olive-2); color: var(--paper); box-shadow: var(--shadow-card); }
.card--dark p { color: var(--sage-2); }
.card--dark h1, .card--dark h2, .card--dark h3, .card--dark h4 { color: var(--paper); }
.card--dark .card__num { color: #f0c886; } /* lighter gold: AA on olive cards */
.card--flat { border-color: var(--line); box-shadow: none; }
.card--flat:hover { box-shadow: var(--shadow-soft); border-color: var(--sage); }
/* Colored top-accent cards for variety */
.card--accent { border-top: 4px solid var(--clay); }
.card--accent-mint { border-top: 4px solid var(--mint); }
.card--accent-sky { border-top: 4px solid var(--sky); }
.card--accent-lav { border-top: 4px solid var(--lavender); }
.card--accent-gold { border-top: 4px solid var(--gold); }
.card--accent-rose { border-top: 4px solid var(--rose); }

/* Tag / chip */
.chip { display:inline-flex; align-items:center; gap:.4em; font-family: var(--font-ui); font-weight:700; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; padding:.4em .8em; border:1px solid var(--line-2); border-radius: var(--r-pill); color: var(--moss); background: var(--paper); }
.chip--clay { border-color: transparent; background: var(--clay-soft); color: var(--clay-deep); }
.chip--mint { border-color: transparent; background: var(--mint-soft); color: #2f6d4a; }
.chip--sky  { border-color: transparent; background: var(--sky-soft);  color: #2f6285; }
.chip--lav  { border-color: transparent; background: var(--lavender-soft); color: #5a4b8a; }
.chip--gold { border-color: transparent; background: var(--gold-soft); color: #7f5a16; }
.chip--live { border-color: transparent; background: var(--mint-soft); color: #2f6d4a; }
.chip--live::before { content:""; width:7px;height:7px;border-radius:50%; background: var(--good); box-shadow: 0 0 0 3px rgba(79,138,94,.18); }
.chips-row { display:flex; flex-wrap:wrap; gap:8px; }
.chips-row .chip { font-size:.76rem; padding:.5em .9em; }

/* Grouped, labelled award clusters — reads as distinct categories, not one jumble */
.award-groups { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(18px,2.4vw,30px) clamp(24px,3vw,44px); }
.award-group > .spec { display:block; margin-bottom:.7rem; }
.award-group .chips-row { gap:7px; }

/* placeholder slot for real content (folder-dependent) */
.slot {
  border: 1.5px dashed var(--sage);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  color: var(--moss);
  font-family: var(--font-mono);
  font-size: .82rem;
  text-align: center;
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(143,153,130,.06) 10px, rgba(143,153,130,.06) 20px);
}

/* ---------- Crisis bar (persistent, always visible) ---------- */
.crisis-bar {
  background: var(--ink); color: var(--paper);
  font-size: .82rem;
  border-bottom: 1px solid var(--line-ink);
  position: relative; z-index: 60;
}
.crisis-bar__in { display: flex; align-items: center; justify-content: center; gap: 4px 1.2rem; flex-wrap: wrap; min-height: var(--crisis-h); padding: 7px clamp(16px,4vw,40px); }
.crisis-bar a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--clay); font-weight: 500; }
.crisis-bar strong { color: var(--clay-soft); font-family: var(--font-mono); letter-spacing: .04em; }
.crisis-bar .quick-exit {
  margin-inline-start: auto; border: 1px solid var(--sage-2); border-radius: var(--r-pill);
  padding: 3px 12px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .4em;
}
.crisis-bar .quick-exit:hover { background: var(--danger); border-color: var(--danger); color:#fff; }
@media (max-width: 680px) {
  .crisis-bar__in { justify-content: space-between; gap: .6rem; }
  .crisis-bar .crisis-txt { flex: 1 1 auto; }
}

/* ---------- Navigation ---------- */
/* Solid background (no backdrop-filter): a filter would make .nav the containing
   block for the position:fixed mobile menu, throwing it off-screen. Keep it opaque. */
.nav { position: sticky; top: 0; z-index: 50; background: var(--bone); border-bottom: 1px solid var(--line); }
.nav__in { display: flex; align-items: center; gap: 1.4rem; min-height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: -.02em; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__name { font-size: 1.02rem; line-height: 1; }
.brand__name small { display:block; font-family: var(--font-mono); font-weight: 400; font-size: .56rem; letter-spacing:.14em; text-transform: uppercase; color: var(--moss); margin-top: 3px; }
.nav__menu { display: flex; align-items: center; gap: .3rem; margin-inline-start: auto; list-style: none; padding: 0; margin-block: 0; }
.nav__menu li { list-style: none; }
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: .3em; padding: .5em .7em; font-size: .95rem; font-weight: 500; border-radius: var(--r-sm); color: var(--ink); }
.nav__link:hover { background: var(--bone-2); }
.nav__link .caret { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; opacity:.6; }
.nav__drop { position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .16s var(--ease); box-shadow: var(--shadow-card); }
.nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__drop a { display: block; padding: .55em .7em; border-radius: var(--r-sm); font-size: .92rem; }
.nav__drop a:hover { background: var(--bone); }
.nav__drop a small { display:block; color: var(--moss); font-size:.78rem; font-weight: 400; }
.nav__cta { display: flex; align-items: center; gap: .5rem; margin-inline-start: .4rem; }
.nav__burger { display: none; width: 44px; height: 44px; margin-inline-start: auto; border: 1.5px solid var(--ink); border-radius: var(--r-sm); flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.nav__burger span { width: 20px; height: 2px; background: var(--ink); transition: .2s var(--ease); }
.nav.open .nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.open .nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav__burger { display: flex; }
  .nav__menu {
    position: fixed; left: 0; right: 0;
    top: calc(var(--nav-h) + var(--crisis-h-current, 0px)); bottom: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bone); border-top: 1px solid var(--line);
    padding: 16px clamp(20px,5vw,40px) 40px; margin: 0;
    overflow-y: auto;
  }
  .nav.open .nav__menu { display: flex; }
  .nav__link { padding: .8em .4em; font-size: 1.1rem; justify-content: space-between; }
  .nav__drop { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-inline-start: 2px solid var(--line); border-radius: 0; margin: 0 0 8px; margin-inline-start: 12px; padding: 0; padding-inline-start: 10px; background: transparent; display: none; }
  .nav__item.open .nav__drop { display: block; }
  .nav__cta { margin: 16px 0 0; flex-direction: column; align-items: stretch; }
  .nav__cta .btn { width: 100%; }
}

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--sage-2); padding-block: clamp(48px,6vw,80px) 28px; position: relative; }
.footer a { color: var(--paper); }
.footer a:hover { color: var(--clay-soft); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h2 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); margin-bottom: 1rem; font-weight: 400; }
.footer ul { list-style: none; padding: 0; display: grid; gap: .55rem; font-size: .95rem; }
.footer .brand__name { color: var(--paper); }
.footer .disclaimer { font-size: .8rem; color: #96a49a; max-width: 42ch; margin-top: 1rem; line-height: 1.5; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-top: clamp(32px,5vw,56px); padding-top: 20px; border-top: 1px solid var(--line-ink); font-size: .8rem; font-family: var(--font-mono); letter-spacing: .02em; }
.footer__bottom a { color: var(--sage-2); }
.social-row { display: flex; gap: .6rem; margin-top: 1.1rem; }
.social-row a { width: 38px; height: 38px; border: 1px solid var(--line-ink); border-radius: var(--r-pill); display: grid; place-items: center; }
.social-row a:hover { border-color: var(--clay); background: var(--clay); }
.social-row svg { width: 17px; height: 17px; }

/* ---------- Forms ---------- */
.field { display: grid; gap: .4rem; margin-bottom: 1rem; }
.field label { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--moss); }
.input, .textarea, select.input {
  width: 100%; padding: .75em .9em; background: var(--paper-2);
  color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-sm); font-size: 1rem;
  transition: border-color .15s var(--ease);
}
/* Keep typed text dark even inside dark (.section--ink / .section--dark) sections */
.input::placeholder, .textarea::placeholder { color: var(--moss); opacity: 1; }
.input:focus, .textarea:focus { border-color: var(--ink); outline: none; }
.textarea { min-height: 120px; resize: vertical; }
.inline-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.inline-form .input { flex: 1 1 220px; }
.form-note { font-size: .8rem; color: var(--moss); }
.form-msg { font-size: .9rem; margin-top: .6rem; min-height: 1.2em; }
.form-msg.ok { color: var(--good); }
.form-msg.err { color: var(--danger); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(48px, 8vw, 104px) clamp(40px,6vw,88px); position: relative; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px,4vw,64px); align-items: end; }
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; align-items: start; } }
.hero__title { margin: 1.2rem 0; }
.hero__cta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hero__aside { border-inline-start: 1.5px solid var(--line); padding-inline-start: clamp(20px,2.5vw,32px); }
@media (max-width: 940px){ .hero__aside { border-inline-start: none; padding-inline-start: 0; border-top: 1.5px solid var(--line); padding-top: 24px; } }

/* Stat block (used sparingly, numbers = quiet proof) */
.stat-row { display: flex; flex-wrap: wrap; gap: clamp(20px,4vw,52px); }
.stat { }
.stat__num { font-size: clamp(1.8rem, 3.6vw, 2.9rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.stat__label { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--moss); margin-top: .5rem; }
.section--dark .stat__label, .on-dark .stat__label { color: var(--sage-2); }

/* Program / project cards (real proof) */
.proj { display: grid; grid-template-columns: 1fr; }
.proj__head { display:flex; align-items:center; justify-content: space-between; gap:1rem; }
.proj__tag { font-family: var(--font-mono); font-size: .72rem; color: var(--moss); letter-spacing:.1em; text-transform: uppercase; }
.proj h3 { font-size: clamp(1.3rem,2.2vw,1.7rem); margin: .3rem 0 .5rem; }
.proj .tagline { font-family: var(--font-mono); font-size:.82rem; color: var(--clay-deep); margin-bottom: .6rem; }
/* On dark cards/sections these labels were dark-on-dark (~1.2:1); make them light. */
.card--dark .proj__tag, .section--dark .proj__tag, .on-dark .proj__tag { color: var(--sage-2); }
.card--dark .tagline, .card--dark .proj .tagline,
.section--dark .tagline, .on-dark .tagline { color: var(--clay-soft); }

/* Marquee-free ticker (respects reduced motion) */
.ticker { border-block: 1.5px solid var(--ink); background: var(--clay-btn); color: #fff; overflow: hidden; }
.ticker__track { display: flex; gap: 2.5rem; padding: .55rem 0; white-space: nowrap; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; animation: ticker 32s linear infinite; }
.ticker__track span { display: inline-flex; align-items:center; gap: .6rem; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; flex-wrap: wrap; white-space: normal; justify-content: center; } }

/* ---------- Theory-of-change band + fact blocks ---------- */
.toc-band { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; background:var(--paper); border:1px solid var(--line); border-inline-start:5px solid var(--clay); border-radius:var(--r-md); padding:16px 22px; box-shadow:var(--shadow-sm); }
.toc-band p { font-size:1.02rem; color:var(--ink); font-weight:600; }
.toc-band b { color:var(--clay-deep); }
.section--dark .toc-band { background:var(--olive-2); border-color:var(--olive-2); }
.section--dark .toc-band p { color:var(--paper); }

.fact { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,2.4vw,30px); box-shadow:var(--shadow-sm); }
.fact__n { font-family:var(--font-display); font-weight:600; font-size:clamp(2.1rem,4.4vw,3.1rem); line-height:1; letter-spacing:-.02em; }
.fact p { margin-top:.7rem; font-size:1.05rem; color:var(--ink); }
.fact cite { display:block; margin-top:.9rem; font-style:normal; font-size:.8rem; color:var(--moss); font-weight:700; }
.fact--hard { border-top:5px solid var(--clay); }
.fact--hard .fact__n { color:var(--clay-deep); }
.fact--hope { border-top:5px solid var(--mint); }
.fact--hope .fact__n { color:var(--good); }

/* Theory-of-change visual flow */
.tchange { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(18px,2.2vw,26px); box-shadow:var(--shadow-sm); }
.tchange__row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 9px; margin-top:.85rem; }
.tchange__pill { display:inline-flex; align-items:center; padding:.45em .85em; border-radius:var(--r-pill); font-weight:700; font-size:.92rem; background:var(--mint-soft); color:#2f6d4a; }
.tchange__arrow { color:var(--clay); font-weight:800; font-size:1.15rem; line-height:1; padding:0 .15em; }
.tchange__pill--mid { background:var(--gold-soft); color:#7f5a16; }
.tchange__pill--out { background:var(--olive); color:var(--paper); }
.section--dark .tchange, .section--mint .tchange { background:var(--paper-2); }

.quote-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,3vw,38px); box-shadow:var(--shadow-sm); }

/* ============================================================
   HAND-MADE / DISTINCTIVE ELEMENTS  (the un-template layer)
   ============================================================ */
.hand { font-family: var(--font-hand); font-weight: 600; }

/* Marker underline drawn under a word (looks hand-drawn, not a border) */
.mark { position: relative; white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2016'%20preserveAspectRatio='none'%3E%3Cpath%20d='M4%2010%20C%2046%203%2C%2070%2013%2C%20104%208%20C%20150%202%2C%20168%2013%2C%20196%206'%20fill='none'%20stroke='%23e0805e'%20stroke-width='5'%20stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 92%; background-size: 100% .34em; padding-bottom: .06em;
}
.mark--gold { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2016'%20preserveAspectRatio='none'%3E%3Cpath%20d='M4%2010%20C%2046%203%2C%2070%2013%2C%20104%208%20C%20150%202%2C%20168%2013%2C%20196%206'%20fill='none'%20stroke='%23eab863'%20stroke-width='6'%20stroke-linecap='round'/%3E%3C/svg%3E"); }
.mark--sage { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2016'%20preserveAspectRatio='none'%3E%3Cpath%20d='M4%2010%20C%2046%203%2C%2070%2013%2C%20104%208%20C%20150%202%2C%20168%2013%2C%20196%206'%20fill='none'%20stroke='%238fb89e'%20stroke-width='6'%20stroke-linecap='round'/%3E%3C/svg%3E"); }
.on-dark .mark, .section--dark .mark { filter: none; }

/* Hand-drawn circle around a word */
.circled { position: relative; }
.circled::after { content:""; position:absolute; inset:-24% -12%; z-index:-1;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%20100'%3E%3Cpath%20d='M120%208C60%206%2018%2028%2016%2050c-2%2024%2048%2042%20106%2042%2052%200%20104-16%20104-42%200-24-46-40-98-42'%20fill='none'%20stroke='%23e0805e'%20stroke-width='4'%20stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}

/* Handwritten margin annotation with a little tilt */
.annot { font-family: var(--font-hand); font-weight: 600; font-size: 1.5rem; color: var(--clay-deep); line-height: 1.05; display: inline-block; transform: rotate(-3deg); }
.annot--r { transform: rotate(2.5deg); }

/* Scrapbook / taped photo frame */
.snap { position: relative; background: var(--paper); border: 3px solid var(--ink); border-radius: 5px; overflow: hidden; box-shadow: 5px 7px 0 rgba(38,51,43,.14); transform: rotate(-1.3deg); transition: transform .2s var(--ease); }
.snap:nth-child(2n) { transform: rotate(1.4deg); border-color: var(--clay-deep); }
.snap:nth-child(3n) { transform: rotate(-.6deg); }
.snap:hover { transform: rotate(0) translateY(-3px); }
.snap__img { aspect-ratio: 4/3; background: var(--mint-soft); display: grid; place-items: center; color: var(--sage); overflow: hidden; }
.snap__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snap:nth-child(2n) .snap__img { background: var(--clay-soft); }
.snap:nth-child(3n) .snap__img { background: var(--sky-soft); }
.snap__label { position: absolute; inset-inline-start: 12px; bottom: 10px; font-family: var(--font-hand); font-weight: 700; font-size: 1.9rem; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.4); line-height: 1; }
.snap__tape { position: absolute; top: -9px; left: 50%; width: 68px; height: 22px; transform: translateX(-50%) rotate(-3deg); background: rgba(234,184,99,.6); box-shadow: 0 1px 3px rgba(0,0,0,.08); z-index:2; }
.snap__img svg { width: 40px; height: 40px; opacity: .7; }
.snap__cap { padding: 12px 16px 18px; display:block; }
.snap__cap h3 { font-family: var(--font-hand); font-weight: 700; font-size: 1.7rem; margin: 0; line-height: 1; color: var(--ink); }
.snap__cap p { font-size: .88rem; color: var(--moss); margin-top: 5px; }
/* Framed poster / document */
.poster-frame { margin: 0; max-width: 1000px; }
.poster-frame a { display: block; }
.poster-frame img { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-card); transition: box-shadow .18s var(--ease), transform .18s var(--ease); }
.poster-frame a:hover img { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.poster-frame figcaption { margin-top: .8rem; font-size: .88rem; color: var(--moss); line-height: 1.5; }

.snap-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 26px 20px; align-items: start; }
/* fill the frame: image grows with the card so no white gap under it */
.snap { display: flex; flex-direction: column; }
.snap .snap__img { flex: 1 1 auto; }
@media (prefers-reduced-motion: reduce){ .snap, .snap:hover, .snap:nth-child(2n), .snap:nth-child(3n){ transform:none; } }

/* Campaign 2-column card (text + media) */
.camp { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; }
@media (max-width: 768px){ .camp { grid-template-columns: 1fr; } }
.camp__media img { width: 100%; border-radius: var(--r-md); border: 1px solid var(--line); display: block; }
.camp__media figcaption { margin-top: .5rem; font-size: .84rem; color: var(--moss); }
.camp__panel { border-radius: var(--r-md); padding: clamp(24px, 3vw, 36px); }
.camp__letter { background: var(--lavender-soft); border: 1px dashed var(--lavender); }
.camp__letter .lh { font-family: var(--font-hand); font-size: clamp(1.6rem,3vw,2.1rem); color: #5a4b8a; line-height: 1.05; }
.camp__letter p { font-family: var(--font-hand); font-size: 1.3rem; color: var(--moss); margin-top: .6rem; line-height: 1.3; }
.camp__stat { background: var(--olive); color: var(--paper); }
.camp__stat .cs-n { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem,3.4vw,2.6rem); line-height: 1; }
.camp__stat p { color: var(--sage-2); font-size: .95rem; margin: .3rem 0 0; }

/* Tilted photo-collage strip */
.photo-strip { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px clamp(16px,4vw,40px) 4px; }
.photo-strip img { width: clamp(130px, 15vw, 210px); aspect-ratio: 4/3; object-fit: cover; border: 5px solid var(--paper); border-radius: 6px; box-shadow: var(--shadow-card); margin: 6px -6px; }
.photo-strip img:nth-child(3n+1){ transform: rotate(-3deg); }
.photo-strip img:nth-child(3n+2){ transform: rotate(2deg); }
.photo-strip img:nth-child(3n+3){ transform: rotate(-1deg); }
.photo-strip img:hover { transform: rotate(0) scale(1.03); position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce){ .photo-strip img, .photo-strip img:hover { transform: none; } }

/* Sticker label (rotated pill) */
.sticker { display: inline-block; font-family: var(--font-hand); font-weight: 700; font-size: 1.25rem; background: var(--gold); color: var(--ink); padding: .1em .7em; border-radius: var(--r-pill); transform: rotate(-2deg); box-shadow: 2px 3px 0 rgba(38,51,43,.15); }

/* Doodle accents (inline svgs colored via currentColor) */
.doodle { display: inline-block; color: var(--clay); vertical-align: middle; }
.doodle svg { display:block; }
.doodle--star { color: var(--gold); }

/* Squiggle divider between sections */
.squiggle { display:block; width:100%; height:16px; color: var(--clay);
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2016'%3E%3Cpath%20d='M0%208%20Q%2015%200%2030%208%20T%2060%208%20T%2090%208%20T%20120%208'%20fill='none'%20stroke='%23e0805e'%20stroke-width='3'/%3E%3C/svg%3E") repeat-x center/120px 16px; opacity:.5; }

/* Icon badges (feature cards) */
.ico-badge { width:46px; height:46px; border-radius:var(--r-md); display:grid; place-items:center; margin-bottom:14px; }
.ico-badge svg { width:24px; height:24px; }
.ico-badge--clay { background:var(--clay-soft); color:var(--clay-deep); }
.ico-badge--sky  { background:var(--sky-soft);  color:#2f6285; }
.ico-badge--lav  { background:var(--lavender-soft); color:#5a4b8a; }
.ico-badge--mint { background:var(--mint-soft); color:#2f6d4a; }
.ico-badge--gold { background:var(--gold-soft); color:#8a641c; }

/* ---------- People / team ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(16px,2vw,26px); }
.person { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.person__top { display:flex; align-items:center; gap: 14px; }
.person__avatar { width: 56px; height: 56px; flex:none; border-radius: var(--r-pill); background: var(--olive-2); color: var(--paper); display:grid; place-items:center; font-weight:700; font-size:1.1rem; letter-spacing:.02em; overflow:hidden; }
.person__avatar img { width:100%; height:100%; object-fit: cover; }
.person h3 { font-size: 1.12rem; margin: 0; }
.person__role { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--clay-deep); margin-top: 3px; }
.person__bio { color: var(--moss); font-size: .95rem; margin-top: 12px; line-height: 1.5; }
.person--lead { border-color: var(--ink); border-width: 1.5px; }
.person--lead .person__avatar { background: var(--clay); }

/* Utilities */
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-0{margin-top:0}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.stack > * + * { margin-top: 1rem; }
.muted { color: var(--moss); }
.hide { display: none !important; }
.visually-hidden { position:absolute!important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position: absolute; left: 8px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r-sm); z-index: 100; transition: top .15s; }
.skip-link:focus { top: 8px; }

/* Reserve space for the JS-injected crisis-bar + nav partials so content below
   doesn't jump when they load (prevents cumulative layout shift / CLS). Heights
   match the rendered partials at each breakpoint. */
[data-include="partials/nav.html"] { min-height: 69px; }
[data-include="partials/crisis-bar.html"] { min-height: 42px; }
@media (max-width: 860px) { [data-include="partials/crisis-bar.html"] { min-height: 72px; } }
@media (max-width: 680px) { [data-include="partials/crisis-bar.html"] { min-height: 94px; } }
.badge-award { display:inline-flex; align-items:center; gap:.5rem; border:1.5px solid var(--ink); border-radius: var(--r-pill); padding:.4rem .9rem; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; }
/* Tier dot — replaces medal emoji; small metal-toned disc */
.tdot { display:inline-block; width:.7em; height:.7em; border-radius:var(--r-pill); flex:none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.tdot--bronze { background:#b8763e; }
.tdot--silver { background:#a7adb4; }
.tdot--gold { background:#c99a2e; }
.tdot--plat { background:#7f97a3; }

/* Partner logo wall — even, consistent monogram tiles */
.logo-wall { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,150px),1fr)); gap:14px; }
.logo-mark {
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:.6rem; padding:22px 16px; min-height:132px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  transition:border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.logo-mark:hover { border-color:var(--sage); transform:translateY(-3px); box-shadow:var(--shadow-soft); }
.logo-mark__badge {
  width:48px; height:48px; flex:none; border-radius:var(--r-md);
  display:grid; place-items:center; font-family:var(--font-mono); font-weight:700;
  font-size:.98rem; letter-spacing:.02em; color:var(--paper); background:var(--olive-2);
}
.logo-mark:nth-child(4n+2) .logo-mark__badge { background:var(--clay); }
.logo-mark:nth-child(4n+3) .logo-mark__badge { background:var(--moss); }
.logo-mark:nth-child(4n+4) .logo-mark__badge { background:var(--olive); }
.logo-mark__name { font-family:var(--font-ui); font-weight:700; font-size:.9rem; line-height:1.25; color:var(--ink); }
.logo-mark img { max-width:100%; max-height:60px; width:auto; height:auto; object-fit:contain; display:block; }
.logo-mark__logo { min-height:64px; display:flex; align-items:center; justify-content:center; }
/* Monochrome white-on-green wall (uniform) */
.logo-wall--mono { gap:22px 18px; align-items:stretch; }
.logo-wall--mono .logo-mark { background:transparent; border:none; box-shadow:none; min-height:120px; padding:18px 14px; gap:.9rem; }
.logo-wall--mono .logo-mark:hover { border:none; box-shadow:none; transform:translateY(-3px); }
.logo-wall--mono .logo-mark__logo { min-height:56px; }
.logo-wall--mono .logo-mark img { max-height:52px; opacity:.9; transition:opacity .18s var(--ease); }
.logo-wall--mono .logo-mark:hover img { opacity:1; }
.logo-wall--mono .logo-mark__name { color:var(--sage-2); font-weight:600; font-size:.82rem; }
/* Submission-kind label (dashboard rows) — replaces emoji */
.row-kind { font-family:var(--font-mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--moss); margin-inline-end:.55rem; }
.divider-dot::after{ content:"·"; margin: 0 .5rem; color: var(--sage); }

/* reveal on scroll (opt-in, subtle, reduced-motion safe) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; } }

/* ---- Flip cards (hover / keyboard-focus / tap to reveal) ---- */
.flip-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(16px,2.4vw,26px); }
.flip { perspective: 1100px; min-height: clamp(180px, 23vw, 216px); cursor: pointer; }
.flip__inner { position: relative; width: 100%; height: 100%; min-height: inherit; transition: transform .55s var(--ease); transform-style: preserve-3d; }
.flip:hover .flip__inner, .flip:focus-visible .flip__inner, .flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.flip:focus-visible { outline: none; }
.flip:focus-visible .flip__face { outline: 3px solid var(--focus); outline-offset: 2px; }
.flip__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: .5rem;
  padding: clamp(20px,2.6vw,28px); border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.flip__front { background: var(--paper); }
.flip__back { background: var(--olive); color: var(--paper); border-color: var(--olive); transform: rotateY(180deg); }
.flip__back h3, .flip__back strong { color: var(--paper); }
.flip__tag { font-family: var(--font-ui); font-weight:800; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--clay-deep); }
.flip__back .flip__tag { color: var(--clay-soft); }
.flip__hint { position:absolute; inset-inline-end:14px; bottom:12px; font-family:var(--font-hand); font-size:1.05rem; color:var(--moss); opacity:.8; }
.flip__back .flip__hint { color: var(--sage-2); }
.flip h3 { font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
@media (prefers-reduced-motion: reduce){ .flip__inner { transition: none; } }
html[data-reduce-motion] .flip__inner { transition: none; }

/* ---- Accessibility preference overrides (toggled from account settings, applied by app.js) ---- */
html[data-large-text] { font-size: 112.5%; }  /* raises root; rem-based type scales up ~13% */
html[data-reduce-motion] *,
html[data-reduce-motion] *::before,
html[data-reduce-motion] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}
html[data-reduce-motion] .reveal { opacity: 1 !important; transform: none !important; }
html[data-contrast] {
  --ink: #14140f; --ink-2: #1c1c15; --moss: #33403a;
  --line: #b3a793; --line-2: #a89b86; --clay-deep: #a8441f; --good: #2c663b;
}
html[data-contrast] .lead, html[data-contrast] .card p, html[data-contrast] .muted,
html[data-contrast] .fact p, html[data-contrast] .snap__cap p { color: #33403a; }
html[data-contrast] .card, html[data-contrast] .fact, html[data-contrast] .award { border-width: 1.5px; }

/* ============================================================
   DECORATIVE ELEPHANTS  (soft watercolor mascots — NHA's gentle motif)
   Placed inside position:relative containers (.section/.hero are relative).
   Purely decorative: aria-hidden, no pointer events; if a file is missing
   the <img onerror> removes itself so nothing ever breaks the layout.
   ============================================================ */
/* Hero mascot — right-anchored, vertically centered, scales with viewport, hides before it crowds the copy */
/* Text sized to its content; mascot auto-centered in the leftover space; hides when cramped */
.hero-split { display: grid; grid-template-columns: fit-content(36rem) 1fr; gap: clamp(24px,3vw,56px); align-items: center; }
.hero-split__art { justify-self: center; }
.hero-split__art img { width: clamp(170px,17vw,280px); height: auto; display: block; filter: drop-shadow(0 12px 22px rgba(38,51,43,.14)); }
@media (max-width: 760px){ .hero-split { grid-template-columns: 1fr; } .hero-split__art { display: none; } }

.eleph {
  position: absolute; z-index: 1; pointer-events: auto; cursor: pointer; user-select: none;
  width: clamp(78px, 9vw, 136px); height: auto; opacity: 1;
  filter: drop-shadow(0 10px 18px rgba(38,51,43,.18));
  animation: eleph-float 7s var(--ease) infinite;
  transform-origin: center bottom;
}
/* Playful: grow + wiggle on hover, a bigger "boop" on click/tap (JS adds .is-boop) */
.eleph:hover { animation: eleph-wiggle .6s var(--ease); }
.eleph.is-boop { animation: eleph-boop .6s var(--ease); }
@keyframes eleph-wiggle {
  0%{transform:scale(1) rotate(0)} 25%{transform:scale(1.16) rotate(-9deg)}
  50%{transform:scale(1.16) rotate(8deg)} 75%{transform:scale(1.12) rotate(-5deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes eleph-boop {
  0%{transform:scale(1) rotate(0)} 18%{transform:scale(1.3) rotate(-12deg)}
  38%{transform:scale(1.26) rotate(11deg)} 58%{transform:scale(1.24) rotate(-8deg)}
  78%{transform:scale(1.18) rotate(5deg)} 100%{transform:scale(1) rotate(0)} }
.eleph--sm { width: clamp(60px, 6.4vw, 96px); }
.eleph--lg { width: clamp(108px, 13vw, 190px); }
/* Corner elephants sit ON the section edge so they read as grounded, not floating stickers */
.eleph--tr { top: clamp(-26px,-2.4vw,-14px); right: clamp(10px, 4vw, 56px); }
.eleph--tl { top: clamp(-26px,-2.4vw,-14px); left: clamp(10px, 4vw, 56px); }
.eleph--br { bottom: clamp(-22px,-2vw,-12px); right: clamp(10px, 4vw, 60px); }
.eleph--bl { bottom: clamp(-22px,-2vw,-12px); left: clamp(10px, 4vw, 60px); }
.eleph--d2 { animation-delay: -2.3s; }
.eleph--d4 { animation-delay: -4.6s; }
@keyframes eleph-float { 0%,100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-10px) rotate(-1.6deg); } }
@media (prefers-reduced-motion: reduce){
  .eleph, .eleph:hover, .eleph.is-boop { animation: none; }
  .eleph:hover { transform: scale(1.08); transition: transform .2s var(--ease); }
}

/* Curled post-it corner: a folded dog-ear on SELECT cards/figures (use .card--curl sparingly) */
.card--curl { position: relative; }
.card--curl::after {
  content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-style: solid; border-width: 0 26px 26px 0;
  border-color: rgba(38,51,43,.13) transparent;   /* underside shadow of the fold */
  border-top-right-radius: var(--r-md);
  filter: drop-shadow(-1px 1px 1px rgba(38,51,43,.12));
  transition: border-width .18s var(--ease);
}
.card--curl:hover::after { border-width: 0 34px 34px 0; }   /* the corner "peels" a little more */
@media (prefers-reduced-motion: reduce){ .card--curl:hover::after { border-width: 0 26px 26px 0; } }

/* Washi-tape strip pinned to the top of a card — a light collage motif. Pairs with .card--curl. */
.card--tape::before {
  content: ""; position: absolute; top: -10px; left: 50%; z-index: 2;
  width: 94px; height: 21px; transform: translateX(-50%) rotate(-2.4deg);
  background: repeating-linear-gradient(45deg, rgba(224,128,94,.34) 0 8px, rgba(224,128,94,.14) 8px 16px);
  border: 1px solid rgba(224,128,94,.30); box-shadow: 0 1px 3px rgba(38,51,43,.12); border-radius: 1px;
}
.card--tape:nth-child(even)::before { transform: translateX(-50%) rotate(2.2deg); }
@media (prefers-reduced-motion: reduce){ .card--tape::before { transform: translateX(-50%); } }

/* Real sliced corner: the card's corner is actually cut (chamfer), not a fake overlay.
   Alternate the cut corner so a cluster reads as intentional, not uniform. */
.card--slice { --sl: 30px; clip-path: polygon(0 0, calc(100% - var(--sl)) 0, 100% var(--sl), 100% 100%, 0 100%); box-shadow: none; }
.card--slice-bl { --sl: 30px; clip-path: polygon(0 0, 100% 0, 100% 100%, var(--sl) 100%, 0 calc(100% - var(--sl))); box-shadow: none; }

/* Process flow: a row of connected steps (no boxes) for "how it works" sequences. */
.flow { display:flex; flex-wrap:wrap; }
.flow__step { flex:1 1 180px; min-width:160px; padding: clamp(14px,1.8vw,22px) clamp(16px,1.8vw,22px); position:relative; }
.flow__step:not(:last-child)::after { content:""; position:absolute; right:0; top:18%; bottom:18%; width:1px; background:var(--line); }
.section--dark .flow__step:not(:last-child)::after, .on-dark .flow__step:not(:last-child)::after { background:rgba(255,255,255,.16); }
.flow__num { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--moss); }
.flow__step h3 { margin:.45rem 0 .35rem; }
.flow__step--end .flow__num, .flow__step--end h3 { color:var(--clay-deep); }
@media (max-width:720px){ .flow__step:not(:last-child)::after { top:auto; bottom:0; left:16px; right:16px; width:auto; height:1px; } }

/* De-boxed tile: strips the card container (background / border / shadow) and keeps a
   quiet top hairline for structure. Cuts the "wall of boxes" feel on informational grids;
   content sizes to itself, so uneven bottom-padding from equal-height boxes goes away too. */
.card--bare {
  background: transparent; border: none; box-shadow: none;
  border-top: 1px solid var(--line); border-radius: 0;
  padding: clamp(18px, 2.2vw, 26px) 0 0;
}
.card--bare:hover { transform: none; box-shadow: none; border-color: transparent; border-top-color: var(--clay); }
.section--dark .card--bare, .card--dark.card--bare, .on-dark .card--bare { border-top-color: rgba(255,255,255,.16); }
.section--dark .card--bare:hover, .card--dark.card--bare:hover, .on-dark .card--bare:hover { border-top-color: var(--clay-soft); }
/* On phones the corner elephants would crowd the copy — hide the ones marked hide-sm */
@media (max-width: 560px){ .eleph--hide-sm { display: none; } }

/* ============================================================
   DARK MODE
   Theme is resolved by JS (sets html[data-theme="dark"|"light"]),
   defaulting to the OS preference. The design reuses several light
   pastel tokens both as tinted backgrounds and as light-on-dark text,
   so dark mode flips the pure text/surface tokens and overrides the
   overloaded surfaces explicitly. Verified WCAG AA with axe.
   ============================================================ */
:root[data-theme="dark"] {
  --ink:      #e7efe9;   /* primary text -> light */
  --ink-2:    #c6d3c9;
  --moss:     #a1b2a6;   /* muted text -> light (AA on dark cards) */
  --bone:     #0e1712;   /* page base -> very dark pine */
  --bone-2:   #0a120d;
  --line:     rgba(255,255,255,.12);
  --line-2:   rgba(255,255,255,.08);
  --line-ink: rgba(255,255,255,.16);
  --focus:    #8ab0ff;
  --clay-deep:#f0a888;   /* deep-coral text role -> light coral on dark */
  --danger:   #e07a72;
  --good:     #6fce9a;
  --shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.45);
  --shadow-soft: 0 6px 20px rgba(0,0,0,.4);
  color-scheme: dark;
}

/* Surfaces that used --paper/--ink directly (kept light for text roles) */
:root[data-theme="dark"] .card { background:#18241d; border-color:rgba(255,255,255,.09); }
:root[data-theme="dark"] .section--paper { background:#141d18; }
:root[data-theme="dark"] .section--mint  { background:#13241b; }
:root[data-theme="dark"] .section--peach { background:#241812; }
:root[data-theme="dark"] .section--gold  { background:#241d10; }
:root[data-theme="dark"] .section--sky   { background:#101f2b; }
:root[data-theme="dark"] .section--ink,
:root[data-theme="dark"] .crisis-bar,
:root[data-theme="dark"] .footer,
:root[data-theme="dark"] .skip-link { background:#0a120d; }

/* Inputs */
:root[data-theme="dark"] .input,
:root[data-theme="dark"] .textarea,
:root[data-theme="dark"] select.input { background:#141d18; border-color:rgba(255,255,255,.16); color:var(--ink); }

/* Buttons: fix the ones that relied on --ink/--paper flipping */
:root[data-theme="dark"] .btn { --_bg:#e7efe9; --_fg:#12201a; --_bd:#e7efe9; }
:root[data-theme="dark"] .btn--ghost { --_bg:transparent; --_fg:var(--ink); --_bd:var(--sage-2); }
:root[data-theme="dark"] .btn--ghost:hover { --_bg:#e7efe9; --_fg:#12201a; }
:root[data-theme="dark"] .btn--light { --_bg:#e7efe9; --_fg:#12201a; --_bd:#e7efe9; }
:root[data-theme="dark"] .btn--clay { --_bg:var(--clay-btn); --_fg:#fff; --_bd:var(--clay-btn); }
:root[data-theme="dark"] .btn--clay:hover { --_bg:#c8623d; --_bd:#c8623d; }

/* Chips: dark tinted pills + light text */
:root[data-theme="dark"] .chip { background:#1b2721; color:var(--moss); border-color:rgba(255,255,255,.16); }
:root[data-theme="dark"] .chip--clay { background:#38251c; color:#f0a888; }
:root[data-theme="dark"] .chip--mint { background:#16281f; color:#8fd3ac; }
:root[data-theme="dark"] .chip--gold { background:#2a2413; color:#e6c583; }
:root[data-theme="dark"] .chip--live { background:#16281f; color:#7fce9a; }

/* Small tinted components */
:root[data-theme="dark"] .ico-badge--clay { background:#38251c; color:#f0a888; }
:root[data-theme="dark"] .ico-badge--mint { background:#16281f; color:#8fd3ac; }
:root[data-theme="dark"] .tchange__pill { background:#16281f; color:#8fd3ac; }
:root[data-theme="dark"] .tchange__pill--mid { background:#2a2413; color:#e6c583; }
:root[data-theme="dark"] .sticker { color:#12201a; }
:root[data-theme="dark"] .res-list a { background:#18241d; }

/* Keep the newsletter/photo-section input text dark-on-light readable already handled;
   ensure spec/lead on tinted-dark sections stay light (they use --clay-deep/--moss, now flipped). */

/* Theme toggle button in the nav (shows the icon of the theme you'd switch TO) */
.nav__icon-btn { display:inline-grid; place-items:center; width:38px; height:38px; padding:0;
  border:1.5px solid var(--line-2); border-radius:var(--r-pill); background:transparent;
  color:var(--ink); cursor:pointer; transition:.15s var(--ease); flex:none; }
.nav__icon-btn:hover { border-color:var(--ink); background:var(--bone-2); }
.nav__icon-btn:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.nav__icon-btn .ic-sun { display:none; }
.nav__icon-btn .ic-moon { display:block; }
:root[data-theme="dark"] .nav__icon-btn .ic-moon { display:none; }
:root[data-theme="dark"] .nav__icon-btn .ic-sun { display:block; }

/* Dark mode — remaining components that set a light (--paper/--paper-2/#fff) background directly */
:root[data-theme="dark"] .nav__drop,
:root[data-theme="dark"] .toc-band,
:root[data-theme="dark"] .fact,
:root[data-theme="dark"] .tchange,
:root[data-theme="dark"] .quote-card,
:root[data-theme="dark"] .snap,
:root[data-theme="dark"] .person,
:root[data-theme="dark"] .flip__front,
:root[data-theme="dark"] .logo-mark { background:#18241d; border-color:rgba(255,255,255,.10); }
:root[data-theme="dark"] .section--dark .tchange,
:root[data-theme="dark"] .section--mint .tchange { background:#22322a; }
:root[data-theme="dark"] .snap { border-color:rgba(255,255,255,.28); box-shadow:5px 7px 0 rgba(0,0,0,.45); }
:root[data-theme="dark"] .poster-frame img { background:#e9e3d6; }

/* Dark mode — prose body text + remaining colored chips/badges/panels */
:root[data-theme="dark"] .prose { color:#dbe5dc; }
:root[data-theme="dark"] .section--lavender { background:#1d1830; }
:root[data-theme="dark"] .chip--sky  { background:#152532; color:#8fbfe0; }
:root[data-theme="dark"] .chip--lav  { background:#211d33; color:#b9a9e8; }
:root[data-theme="dark"] .ico-badge--sky  { background:#152532; color:#8fbfe0; }
:root[data-theme="dark"] .ico-badge--lav  { background:#211d33; color:#b9a9e8; }
:root[data-theme="dark"] .ico-badge--gold { background:#2a2413; color:#e6c583; }
:root[data-theme="dark"] .camp__letter { background:#1c1830; border-color:#4b4172; }
:root[data-theme="dark"] .camp__letter .lh { color:#b9a9e8; }

/* Dark mode — page-specific components (account tabs, donate amounts, cards
   defined in per-page <style> blocks). :root[data-theme] out-specifies them. */
:root[data-theme="dark"] .btn-google,
:root[data-theme="dark"] .amt,
:root[data-theme="dark"] .role,
:root[data-theme="dark"] .award,
:root[data-theme="dark"] .prog,
:root[data-theme="dark"] .faq details { background:#18241d; border-color:rgba(255,255,255,.10); }
:root[data-theme="dark"] .prog { border-color:rgba(255,255,255,.2); }
:root[data-theme="dark"] .auth-tabs button[aria-selected="true"],
:root[data-theme="dark"] .amt[aria-pressed="true"] { background:var(--ink); color:#12201a; border-color:var(--ink); }

/* Dark mode — page components that hardcode a dark (--ink) background stay dark */
:root[data-theme="dark"] .crisis-hero { background:#0a120d; }

/* Language switcher in the nav */
.nav__lang { display:inline-flex; align-items:center; gap:.35rem; color:var(--ink); }
.nav__lang svg { opacity:.7; flex:none; }
.nav__lang select {
  font-family:var(--font-ui); font-size:.9rem; font-weight:600; color:var(--ink);
  background-color:transparent; border:1.5px solid var(--line-2); border-radius:var(--r-pill);
  padding:.4em 1.7em .4em .7em; cursor:pointer; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23536358' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6em center; background-size:.66em;
}
.nav__lang select:hover { border-color:var(--ink); }
.nav__lang select:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
:root[data-theme="dark"] .nav__lang select { border-color:rgba(255,255,255,.22); }
:root[data-theme="dark"] .nav__lang select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a1b2a6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* admin tabbar active state in dark (same pattern as account tabs) */
:root[data-theme="dark"] .tabbar button[aria-selected="true"] { background:var(--ink); color:#12201a; border-color:var(--ink); }

/* Right-to-left (Arabic) — mirror the main flex rows; text aligns via dir. */
/* RTL (Arabic): the layout mirrors automatically via dir="rtl" + CSS logical
   properties (margin-inline / border-inline / inset-inline used below).
   These handle the remaining bits that need an explicit direction. */
[dir="rtl"] .skip-link { left: auto; right: 8px; }
[dir="rtl"] .lead, [dir="rtl"] .prose, [dir="rtl"] .section-head,
[dir="rtl"] .card, [dir="rtl"] .hero__aside, [dir="rtl"] .fact,
[dir="rtl"] .stat, [dir="rtl"] .quote-card, [dir="rtl"] .tchange { text-align: right; }
[dir="rtl"] .center, [dir="rtl"] .wrap--narrow.center { text-align: center; }
/* the handwritten accent + doodle sit before their text; keep them leading */
[dir="rtl"] .annot .doodle { margin-left: .3em; margin-right: 0; }

/* Nav settings link (globe -> accessibility/preferences page) */
.nav__link--icon { padding:.5em; color:var(--ink); display:inline-flex; }
.nav__link--icon svg { display:block; opacity:.75; }
.nav__link--icon:hover svg { opacity:1; }

/* Preferences controls on the Accessibility page */
.pref-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem; padding:.8em 0; border-bottom:1px solid var(--line); }
.pref-choices { display:inline-flex; gap:1.1rem; flex-wrap:wrap; }
.pref-choices label { display:inline-flex; align-items:center; gap:.4em; cursor:pointer; font-weight:600; }
.pref-choices input { width:18px; height:18px; accent-color:var(--clay-deep); flex:none; }

/* Activity -> hours guide table (volunteer page) */
.hours-table { display:grid; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.hours-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.85em 1.1em; border-bottom:1px solid var(--line); }
.hours-row:last-child { border-bottom:none; }
.hours-row:nth-child(odd) { background:var(--bone-2); }
.hours-row .hours-act { flex:1; min-width:0; }
.hours-row .hours-val { font-family:var(--font-mono); font-weight:700; color:var(--clay-deep); white-space:nowrap; }
:root[data-theme="dark"] .hours-table { border-color:rgba(255,255,255,.12); }
:root[data-theme="dark"] .hours-row { border-color:rgba(255,255,255,.08); }
:root[data-theme="dark"] .hours-row:nth-child(odd) { background:rgba(255,255,255,.04); }

/* ---- Submission modals (shared by every "open the form" flow) ---- */
dialog.form-modal { margin:auto; border:none; padding:0; max-width:min(94vw,660px); width:100%; color:var(--ink); background:var(--paper); border-radius:var(--r-lg); box-shadow:0 24px 60px rgba(20,25,20,.35); }
dialog.form-modal::backdrop { background:rgba(20,25,20,.5); }
.form-modal__in { padding:clamp(20px,3vw,32px); max-height:88vh; overflow:auto; }
.form-modal__head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin:0 0 .6rem; }
.form-modal__head h3 { font-size:clamp(1.3rem,3vw,1.7rem); margin:0; }
.form-modal__head p { margin:.2rem 0 0; }
.form-modal__close { border:none; background:transparent; color:var(--moss); font-size:1.7rem; line-height:1; cursor:pointer; padding:0 .15em; border-radius:var(--r-sm); }
.form-modal__close:hover { color:var(--ink); }
.form-open-cta { display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; margin-top:1.4rem; }
.form-open-cta .form-note { margin:0; }
:root[data-theme="dark"] dialog.form-modal { background:var(--olive-2); color:var(--paper); }