/* =========================================================================
   National Subsistence and Homesteading Association (NSHA)
   Plain CSS. No build step. Works without JS, fonts, or backdrop-filter.

   Glass (backdrop-filter) is used on exactly three surfaces: the sticky header
   (on its ::before layer), the hero "Start here" card, and the four "Why it
   matters" cards. Each has a solid fallback in an @supports block beside it.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  color-scheme: light only;

  /* Base */
  --c-white: #FFFFFF;
  --c-surface: #F6F8F4;
  --c-band: #EDF3EA;
  --glass-fallback: #FBFCFA;

  /* Earthy greens */
  --c-forest-900: #173324;
  --c-forest-800: #1F4A32;
  --c-forest-700: #2B5E40;
  --c-moss-600: #3D6B4A;
  --c-moss-700: #325A3D;
  --c-sage-400: #8FA98C;
  --c-sage-300: #A9BFA6;
  --c-sage-100: #DCE8D9;

  /* Neutrals */
  --c-ink-900: #1F2A24;
  --c-ink-700: #4B5750;
  --c-ink-300: #C8CFC9;

  /* One warm accent */
  --c-wheat-500: #C99A3E;
  --c-wheat-700: #8A5A19;
  --c-wheat-100: #F5EBD2;

  /* Semantic aliases */
  --bg: var(--c-white);
  --bg-band: var(--c-band);
  --bg-surface: var(--c-surface);
  --text: var(--c-ink-900);
  --text-muted: var(--c-ink-700);
  --heading: var(--c-forest-900);
  --link: var(--c-forest-700);
  --link-hover: var(--c-forest-900);
  --primary: var(--c-moss-600);
  --primary-hover: var(--c-moss-700);
  --on-primary: #FFFFFF;
  --border-soft: var(--c-sage-100);
  --focus: var(--c-moss-600);
  --accent: var(--c-wheat-500);

  /* Radii */
  --r-xs: 4px;   /* text links, focus rings on radius-less elements */
  --r-sm: 6px;
  --r-md: 12px;
  --r-btn: 10px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Shadows (green tinted) */
  --shadow-1: 0 1px 2px rgba(23, 51, 36, .06), 0 4px 12px rgba(23, 51, 36, .06);
  --shadow-2: 0 2px 4px rgba(23, 51, 36, .08), 0 16px 40px rgba(23, 51, 36, .10);

  /* Z-index */
  --z-header: 50;
  --z-menu: 60;
  --z-skip: 100;

  /* Type */
  --font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;

  --fs-h1: clamp(2.25rem, 1.55rem + 2.6vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
  --fs-h3: 1.375rem;
  --fs-h4: 1.125rem;
  --fs-lede: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;
  --fs-micro: 0.75rem;

  /* Spacing (8px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  --header-h: 60px;

  /* Topographic contour tile (sage-400 stroke) */
  --topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600' fill='none' stroke='%238FA98C' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M120 160c60-70 200-60 230 10s-30 130-120 130S60 230 120 160Z'/%3E%3Cpath d='M140 170c50-50 160-45 185 8s-25 100-95 100S95 215 140 170Z'/%3E%3Cpath d='M165 180c35-30 105-28 122 6s-18 65-62 65-90-40-60-71Z'/%3E%3Cpath d='M380 450c60-70 200-60 230 10s-30 130-120 130S320 520 380 450Z'/%3E%3Cpath d='M400 460c50-50 160-45 185 8s-25 100-95 100S355 505 400 460Z'/%3E%3Cpath d='M425 470c35-30 105-28 122 6s-18 65-62 65-90-40-60-71Z'/%3E%3Cpath d='M-10 420c90-60 190-70 300-20s200 40 320 0'/%3E%3Cpath d='M-10 60c120 40 200 20 320 80s190 10 300-80'/%3E%3C/svg%3E");
}

@media (min-width: 900px) {
  :root { --header-h: 72px; }
}

/* ---------- 2. Reset and base ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--heading); margin: 0; }

h1 {
  font: 600 var(--fs-h1) / 1.08 var(--font-serif);
  letter-spacing: -0.015em;
}

h2 {
  font: 600 var(--fs-h2) / 1.15 var(--font-serif);
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-4);
}

h3 {
  font: 600 var(--fs-h3) / 1.25 var(--font-sans);
  margin: 0 0 var(--s-3);
}

h4 {
  font: 600 var(--fs-h4) / 1.3 var(--font-sans);
}

.h4 { font: 600 var(--fs-h4) / 1.3 var(--font-sans); color: var(--heading); margin: 0; }

p { margin: 0; }
p + p { margin-top: var(--s-4); }

ul, ol { margin: 0; padding: 0; }

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .16s ease-out;
}
a:hover { color: var(--link-hover); }

svg { display: inline-block; vertical-align: middle; }

.icon { width: 24px; height: 24px; flex: none; }
.icon--sm { width: 16px; height: 16px; }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: var(--s-4);
}

.small, figcaption, .meta {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-muted);
}

.prose, .lede, .section-head { max-width: 68ch; }

.prose p + p { margin-top: var(--s-4); }

.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;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Focus */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
/* The ring follows each component's own radius. Only elements with no radius
   of their own (text links, the brand lockup) get a small one here. */
a:not([class]):focus-visible, .start-list a:focus-visible, .brand:focus-visible { border-radius: var(--r-xs); }
.btn:focus-visible, .nav__link:focus-visible { outline-offset: 2px; }
/* The skip link's target is the whole <main> region; the scroll is the feedback. */
main:focus, main:focus-visible { outline: none; }
.cta-band :focus-visible { outline-color: #fff; }

/* Eyebrow: carries the single warm accent */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
  font: 600 var(--fs-eyebrow) / 1.2 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-forest-700);
}
.eyebrow::before {
  content: "";
  width: 20px; height: 3px;
  border-radius: 2px;
  background: var(--accent);
  flex: none;
}

/* ---------- 3. Layout --------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.container--narrow { max-width: 820px; }

.section { padding-block: clamp(3.5rem, 6vw, 6rem); }
.section--tight { padding-block: clamp(2.5rem, 4vw, 4rem); }
.band { background: var(--bg-band); }

.section-head { margin-bottom: var(--s-7); }
.section-head--close { margin-bottom: var(--s-6); }
.section-head--tight { margin-bottom: var(--s-5); }
.section-head--flush { margin-bottom: 0; }
.section-head .lede { margin-top: var(--s-4); }
.section-foot { margin-top: var(--s-6); }
.subsection { margin-top: clamp(3rem, 6vw, 5rem); }
.mt-4 { margin-top: var(--s-4); }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 640px) and (max-width: 899.98px) {
  /* A lone third card spans the row instead of sitting orphaned at left. */
  .grid--3 > :nth-child(odd):last-child { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Text + illustration, alternating. Media renders after text on mobile. */
.split { display: grid; gap: var(--s-6); align-items: center; }
.split__media { min-width: 0; }
.split__copy { min-width: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .split--reverse > .split__media { order: -1; }
  .split--wide { grid-template-columns: 7fr 5fr; }
  .split--wide.split--reverse { grid-template-columns: 5fr 7fr; }
  .split--top { align-items: start; }
}
.split + .split { margin-top: clamp(3rem, 6vw, 5rem); }
.split--lead { margin-bottom: var(--s-7); }
/* Callout beside a figure: stretch the callout to the figure's height and
   centre its text, so the two boxes share top and bottom edges. */
.split--stretch { align-items: stretch; }
.split--stretch > .split__copy { display: grid; }
.split--stretch .callout { align-content: center; }
@media (min-width: 640px) and (max-width: 899.98px) {
  .split__media { max-width: 620px; margin-inline: auto; }
}

/* Patterns and washes */
.band--pattern { position: relative; isolation: isolate; }
.band--pattern::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--topo);
  background-size: 600px 600px;
  opacity: .18;
  pointer-events: none;
}

/* Soft green wash behind the "Why it matters" glass cards */
.wash {
  background:
    radial-gradient(55% 60% at 15% 30%, rgba(143, 169, 140, .55) 0%, rgba(143, 169, 140, 0) 70%),
    radial-gradient(50% 55% at 85% 75%, rgba(169, 191, 166, .70) 0%, rgba(169, 191, 166, 0) 70%),
    radial-gradient(40% 45% at 60% 15%, rgba(220, 232, 217, 1) 0%, rgba(220, 232, 217, 0) 70%),
    var(--bg-band);
}

/* ---------- 4. Glass ---------------------------------------------------- */
.glass {
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    0 1px 2px rgba(23, 51, 36, .06),
    0 12px 32px rgba(23, 51, 36, .10);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-fallback); border-color: var(--c-sage-100); }
}

/* ---------- 5. Skip link and disclosure --------------------------------- */
.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: var(--z-skip);
  padding: var(--s-3) var(--s-4);
  background: var(--c-forest-900);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: var(--s-2); outline-color: var(--c-forest-900); }

.disclosure {
  background: var(--c-sage-100);
  color: var(--c-forest-900);
  border-bottom: 1px solid rgba(23, 51, 36, .08);
  font-size: var(--fs-micro);
  line-height: 1.45;
}
.disclosure__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding-block: var(--s-2);
}
.disclosure .icon { color: var(--c-moss-600); margin-top: 1px; }
.disclosure p { margin: 0; }
.disclosure strong { font-weight: 600; }
@media (min-width: 640px) {
  .disclosure { font-size: var(--fs-eyebrow); }
  .disclosure__inner { align-items: center; }
}

/* ---------- 6. Header and nav ------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}
/* The glass lives on a ::before layer so the header element itself carries no
   backdrop-filter; otherwise the absolutely positioned mobile panel that hangs
   below the header is composited incorrectly and cannot blur the page. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .72);
  border-bottom: 1px solid rgba(23, 51, 36, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 20px rgba(23, 51, 36, .06);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before { background: #FFFFFF; }
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: inherit;
  min-height: 44px;
}
/* The official lockup (mark + wordmark) from 640px; the mark alone below that.
   Height drives the size; width follows the image's own aspect ratio. */
.brand__logo { display: block; height: 48px; width: auto; }
@media (min-width: 640px) { .brand__logo { height: 58px; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-forest-900);
  cursor: pointer;
  transition: background-color .16s ease-out;
}
.nav-toggle:hover { background: rgba(23, 51, 36, .06); }
.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }

.nav {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: var(--z-menu);
  padding: var(--s-4);
  flex-direction: column;
  gap: var(--s-1);
}
.nav[data-open="true"] { display: flex; }
/* The mobile panel is deliberately OPAQUE, not glass. It hangs below the
   already-filtered header, so a nested backdrop-filter cannot reach the page
   and any translucency lets hero copy ghost through behind the links. Do not
   "improve" this into a translucent surface. JS-only: without JS the nav is
   static and inline (see .no-js rules). */
@media (max-width: 899.98px) {
  html:not(.no-js) .nav {
    background: var(--bg-band);
    border-bottom: 1px solid rgba(23, 51, 36, .10);
    box-shadow: 0 16px 40px rgba(23, 51, 36, .12);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    /* top: 100% starts the panel at the header's bottom edge, so the space
       left is the viewport minus the header. Short (landscape) viewports scroll
       inside the panel instead of clipping the CTA, and the matching min-height
       fills the viewport so the hero cannot show beneath the menu. main.js
       overrides both with the measured value when the panel opens. */
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    min-height: calc(100vh - 100%);
    min-height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Hold the page still beneath the scrim while the panel is open. */
  html[data-nav-open] body { overflow: hidden; }
}
/* Scrim behind the open mobile panel, toggled by main.js via html[data-nav-open].
   It sits BELOW the header (and so below the panel, which lives inside it) and
   above the page, so the hero cannot read as a continuation of the menu. A
   click on it lands on <body> and main.js closes the menu. */
html[data-nav-open] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  background: rgba(23, 51, 36, .35);
}
@media (min-width: 900px) {
  html[data-nav-open] body::after { display: none; }
}
.nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.nav__link {
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  font: 500 .9375rem / 1 var(--font-sans);
  color: var(--c-forest-800);
  text-decoration: none;
  transition: background-color .16s ease-out, color .16s ease-out, box-shadow .2s ease-out;
}
.nav__link:hover { background: rgba(23, 51, 36, .06); color: var(--c-forest-900); }
.nav__cta { margin-top: var(--s-3); width: 100%; }

@media (min-width: 900px) and (max-width: 1099.98px) {
  .brand__logo { height: 50px; }
  .nav__link { padding: 0 var(--s-2); font-size: .875rem; }
  .nav__cta { margin-left: var(--s-2); }
}
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav {
    display: flex;
    position: static;
    padding: 0;
    flex-direction: row;
    align-items: center;
    gap: var(--s-1);
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .nav__list { flex-direction: row; gap: var(--s-1); }
  .nav__link { width: auto; min-height: 44px; }
  .nav__cta { margin: 0 0 0 var(--s-3); width: auto; }
}

/* No-JS: toggle hidden, links render inline under the brand */
.no-js .nav-toggle { display: none; }
.no-js .nav {
  display: flex;
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.no-js .nav__list { flex-direction: row; flex-wrap: wrap; }
.no-js .nav__link { width: auto; }
.no-js .nav__cta { width: auto; margin: 0 0 0 var(--s-3); }
@media (max-width: 899.98px) {
  .no-js .site-header { position: static; }
  .no-js .site-header__inner { flex-wrap: wrap; padding-block: var(--s-2); }
  .no-js .nav { width: 100%; }
}

/* ---------- 7. Buttons -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-5);
  border-radius: var(--r-btn);
  border: 1.5px solid transparent;
  font: 600 .9375rem / 1 var(--font-sans);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .16s ease-out, color .16s ease-out, border-color .16s ease-out, box-shadow .2s ease-out, transform .2s ease-out;
}
.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, var(--shadow-1);
}
.btn--primary:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn--primary:active { transform: translateY(1px); box-shadow: none; }
.btn--outline {
  background: transparent;
  border-color: var(--c-forest-800);
  color: var(--c-forest-800);
}
.btn--outline:hover { background: rgba(23, 51, 36, .06); color: var(--c-forest-900); }
.btn--link {
  display: inline-block;
  min-height: 0;
  padding: var(--s-3) 0;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  color: var(--link);
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-sage-400);
  white-space: normal;
  text-align: left;
}
/* Inline so a wrapped label keeps normal leading and the arrow follows the last
   word instead of the container edge. */
.btn--link .icon { display: inline-block; vertical-align: -0.2em; margin-left: .15em; }
.btn--link:hover { color: var(--link-hover); text-decoration-color: currentColor; }
/* The last word (or the placeholder marker) and the arrow never separate:
   an inline SVG is an atomic inline with its own break opportunity, so an
   NBSP alone is not enough. */
.nowrap { white-space: nowrap; }
/* Visible "(link to come)" marker on placeholder calls to action. It keeps the
   parent link's underline (text-decoration propagates), only lighter weight. */
.pending { font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.btn--sm { padding: 0 var(--s-4); font-size: .875rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
@media (max-width: 639px) {
  .btn-row .btn { width: 100%; }
}

/* ---------- 8. Hero ----------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 72% 18%, rgba(169, 191, 166, .55) 0%, rgba(169, 191, 166, 0) 70%),
    radial-gradient(45% 40% at 8% 85%, rgba(220, 232, 217, .95) 0%, rgba(220, 232, 217, 0) 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F6F8F4 100%);
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--topo);
  background-size: 600px 600px;
  opacity: .12;
  pointer-events: none;
}
.hero__grid {
  display: grid;
  gap: var(--s-7);
  padding-block: clamp(3rem, 6vw, 6rem) clamp(9rem, 22vw, 15rem);
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 7fr 5fr; align-items: center; }
}
.hero__copy { max-width: 60ch; }
.hero__copy .lede { max-width: 56ch; }

.hero__card { padding: var(--s-6); }
.hero__card .h4 { margin-bottom: var(--s-2); }
.start-list { list-style: none; }
.start-list li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  border-top: 1px solid rgba(23, 51, 36, .08);
}
.start-list li:first-child { border-top: 0; }
.start-list .icon { width: 20px; height: 20px; color: var(--c-moss-600); }
.start-list a {
  color: var(--c-forest-800);
  font-weight: 500;
  text-decoration-color: var(--c-sage-300);
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-block: var(--s-2);
}
.start-list a:hover { color: var(--c-forest-900); text-decoration-color: currentColor; }
.hero__card .small { margin-top: var(--s-3); }

.hero__art {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
  height: clamp(160px, 28vw, 340px);
  z-index: -1;
  display: block;
  margin: 0;
}
.hero__art svg { display: block; width: 100%; height: 100%; }
/* On phones 28vw is a sliver; a fixed 220px keeps the barn and trees legible
   (about 55px tall) and lets the glass card sit on the hills. */
@media (max-width: 599.98px) { .hero__art { height: 220px; } }
/* Below the desktop layout the slice crop pushes the sun to the right edge,
   where it reads as a stray half-disc; the horizon reads fine without it. */
@media (max-width: 899.98px) { .hero__sun { display: none; } }

/* ---------- 9. Cards ---------------------------------------------------- */
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: box-shadow .2s ease-out, transform .2s ease-out;
}
.card__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c-sage-100);
  display: grid;
  place-items: center;
  color: var(--c-moss-600);
  flex: none;
}
.card__icon .icon { width: 22px; height: 22px; }
.card h3 { margin: var(--s-2) 0 0; font-size: var(--fs-h3); }
.card h4 { margin: var(--s-1) 0 0; font-size: var(--fs-h4); }
.card p { color: var(--text); }
.card--compact { padding: var(--s-5); }
.card--compact p { font-size: .9375rem; }
.card .card__link { margin-top: auto; margin-bottom: calc(-1 * var(--s-3)); align-self: flex-start; }
@media (hover: hover) {
  .card--hoverable:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
}

/* Glass feature cards on the wash */
.card--glass {
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 1px 2px rgba(23, 51, 36, .06),
    0 12px 32px rgba(23, 51, 36, .10);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
}
.band .card--glass { background: rgba(255, 255, 255, .62); }
.card--glass .card__icon { background: rgba(255, 255, 255, .85); }
.why-layout .card--glass p { font-size: .9375rem; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card--glass, .band .card--glass { background: var(--glass-fallback); border-color: var(--c-sage-100); }
}

/* Chips and badges */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 24px;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  font: 600 var(--fs-eyebrow) / 1 var(--font-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  width: fit-content;
}
.chip--muted { background: var(--c-surface); color: var(--c-ink-700); border: 1px solid var(--c-ink-300); }
.chip--fact { background: var(--c-sage-100); color: var(--c-forest-800); }
.chip--date { background: var(--c-wheat-100); color: var(--c-forest-900); text-transform: none; letter-spacing: 0; }
.chip--format { background: var(--c-surface); color: var(--c-forest-800); border: 1px solid var(--c-sage-100); text-transform: none; letter-spacing: 0; font-weight: 500; }
.chip--planned { background: var(--c-sage-100); color: var(--c-forest-800); text-transform: none; letter-spacing: 0; }
.chip .icon { color: var(--c-moss-600); }

/* ---------- 10. Photo slots and illustrations --------------------------- */
.photo-slot { margin: 0; }
.photo-slot__frame {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-band);
  box-shadow: var(--shadow-1);
}
/* The <img> rule is a forward-looking hook: README describes swapping each
   placeholder SVG for a real photograph, and the photo then needs no new CSS. */
.photo-slot__frame > svg, .photo-slot__frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-slot figcaption {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
  padding-left: var(--s-3);
  border-left: 2px solid var(--c-sage-300);
}
.photo-slot--wide .photo-slot__frame { aspect-ratio: 16 / 9; }

/* Pull-quote style definition */
.def {
  margin: var(--s-6) 0 0;
  padding: var(--s-4) 0 var(--s-4) var(--s-5);
  border-left: 3px solid var(--accent);
}
.def__term {
  display: block;
  font: 600 var(--fs-h3) / 1.2 var(--font-serif);
  color: var(--c-forest-900);
  margin-bottom: var(--s-2);
}
.def__text { color: var(--text-muted); font-size: var(--fs-body); }

/* ---------- 11. Explainer sections ------------------------------------- */
.mission-grid .card h3 { font-size: var(--fs-h4); }
.section-head--mission { margin-bottom: var(--s-7); }
.mission-position { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--border-soft); }
.mission-position p { font-size: var(--fs-body); color: var(--c-ink-900); }

.principles {
  list-style: none;
  counter-reset: principle;
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.principles li {
  counter-increment: principle;
  position: relative;
  padding: var(--s-3) var(--s-4) var(--s-3) 56px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  font-weight: 500;
  color: var(--c-forest-900);
}
.principles li::before {
  content: counter(principle);
  position: absolute;
  left: var(--s-4);
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-sage-100);
  color: var(--c-forest-800);
  font: 600 .875rem / 28px var(--font-serif);
  text-align: center;
}

.subhead { margin-top: clamp(3rem, 6vw, 5rem); margin-bottom: var(--s-5); }

.myths { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .myths { grid-template-columns: 1fr 1fr; } }
.mythfact {
  display: grid;
  grid-template-rows: auto 1fr;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.mythfact > div {
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border-left: 3px solid transparent;
}
.mythfact__myth {
  background: var(--c-surface);
  border-bottom: 1px solid var(--border-soft);
  border-left-color: var(--c-ink-300);
}
.mythfact__myth p { color: var(--c-ink-700); }
.mythfact__fact { border-left-color: var(--c-moss-600); }
.mythfact p { margin: 0; }

/* Why it matters: 2x2 glass cards beside a photo slot */
.why-layout { display: grid; gap: var(--s-6); align-items: start; }
.why-layout__figure { max-width: 620px; margin-inline: auto; }
@media (min-width: 900px) {
  .why-layout { grid-template-columns: 7fr 4fr; gap: var(--s-8); }
  .why-layout__figure { position: sticky; top: calc(var(--header-h) + var(--s-6)); max-width: none; margin-inline: 0; }
}

/* ---------- 11b. History and precedent --------------------------------- */
.eras { list-style: none; counter-reset: none; }
.era { position: relative; }
.era__year { margin-bottom: var(--s-3); font-family: var(--font-serif); font-size: .9375rem; }
.era h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.era p { font-size: .9375rem; }
.era .credit { margin-top: auto; padding-top: var(--s-3); }
.era--featured { background: var(--c-band); border-color: var(--c-sage-300); }
.credit { font-size: var(--fs-small); color: var(--text-muted); }
.credit a { color: var(--c-forest-700); }
.credit--block { margin-top: var(--s-4); max-width: 80ch; }

.bulletin { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) { .bulletin { grid-template-columns: 4fr 7fr; gap: var(--s-8); } }
.bulletin__body h3 { margin-bottom: var(--s-4); }
.bulletin__body .eyebrow { margin-bottom: var(--s-2); }

.scan { margin: 0; }
.scan img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--shadow-1);
}
.scan--cover { max-width: 420px; }
.scan--cover img { border-radius: var(--r-sm); }
.scan figcaption {
  margin-top: var(--s-3);
  padding-left: var(--s-3);
  border-left: 2px solid var(--c-sage-300);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.plans { margin-top: var(--s-7); align-items: start; }
.plans .scan img { padding: var(--s-2); }

.pullquote {
  margin: var(--s-5) 0;
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--c-wheat-500);
  background: var(--bg-surface);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.pullquote p { font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.55; color: var(--c-forest-900); }
.pullquote footer { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--text-muted); }
.callout--position { border-left: 3px solid var(--c-moss-600); background: #fff; }
.callout--position p { max-width: 80ch; }

/* ---------- 12. Pathway stepper ---------------------------------------- */
.stepper {
  list-style: none;
  display: grid;
  gap: var(--s-6);
  position: relative;
}
.step {
  position: relative;
  padding-left: 64px;
}
.step__num {
  position: absolute;
  left: 0; top: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c-forest-900);
  color: #fff;
  font: 600 1.125rem / 44px var(--font-serif);
  text-align: center;
  box-shadow: 0 0 0 6px var(--bg);
  z-index: 1;
}
.step::before {
  content: "";
  position: absolute;
  left: 21px; top: 44px; bottom: calc(-1 * var(--s-6));
  width: 2px;
  background: var(--c-sage-300);
}
.step:last-child::before { display: none; }
.step h3, .step h4 { font-size: var(--fs-h4); margin-bottom: var(--s-2); padding-top: 8px; }
.step p { color: var(--text); }
.band .step__num { box-shadow: 0 0 0 6px var(--bg-band); }
.step__skills {
  list-style: none;
  margin-top: var(--s-3);
  display: grid;
  gap: var(--s-2);
}
.step__skills li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.45;
}
.step__skills li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-moss-600);
}
@media (min-width: 900px) {
  .stepper { grid-template-columns: repeat(5, 1fr); gap: var(--s-5); }
  .stepper--4 { grid-template-columns: repeat(4, 1fr); }
  .step { padding-left: 0; padding-top: 64px; }
  .step::before {
    left: 52px; right: calc(-1 * var(--s-5) - 8px); top: 21px; bottom: auto;
    height: 2px; width: auto;
  }
  .step h3, .step h4 { padding-top: 0; }
}
@media (min-width: 640px) and (max-width: 899.98px) {
  .stepper--4 { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-8); }
  .stepper--4 .step::before { display: none; }
}
.stepper--4 { margin-top: var(--s-5); }
.stepper--4 .step p { font-size: .9375rem; }
.pathway-figures { margin-top: clamp(3rem, 6vw, 5rem); }

/* ---------- 13. Library tracks ----------------------------------------- */
.track h4 {
  margin-top: var(--s-3);
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-forest-700);
}
.start-list--compact li { font-size: var(--fs-small); }
.start-list--compact a { font-size: .9375rem; min-height: 44px; padding-block: var(--s-1); }
.start-list--compact .icon { width: 16px; height: 16px; }

/* Glossary: two-column definition list with hairline rules */
.glossary {
  display: grid;
  gap: 0 var(--s-8);
  margin: 0;
}
@media (min-width: 640px) { .glossary { grid-template-columns: repeat(2, 1fr); } }
.glossary__item {
  padding: var(--s-4) 0;
  border-top: 1px solid var(--c-sage-300);
}
@media (min-width: 640px) {
  .glossary__item:nth-child(-n+2) { border-top-width: 2px; }
}
.glossary dt {
  font: 600 var(--fs-body) / 1.3 var(--font-sans);
  color: var(--c-forest-900);
  margin-bottom: var(--s-1);
}
.glossary dd { margin: 0; font-size: var(--fs-small); color: var(--text-muted); max-width: 52ch; }

/* ---------- 14. Events ------------------------------------------------- */
.event .chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.event .meta { display: flex; align-items: flex-start; gap: var(--s-2); }
.event .meta .icon { margin-top: 3px; color: var(--c-moss-600); }

/* ---------- 15. Membership tiers --------------------------------------- */
.tiers { align-items: stretch; }
.tier { padding-top: var(--s-7); }
.tier__label {
  position: absolute;
  top: -12px; left: var(--s-6);
}
.tier h3 { margin-top: 0; }
.tier__price {
  font: 600 var(--fs-h4) / 1.3 var(--font-serif);
  color: var(--c-forest-900);
}
.tier__price .small { display: block; font-family: var(--font-sans); font-weight: 400; }
.tier__who { color: var(--text-muted); font-size: var(--fs-small); }
.tier__list { list-style: none; display: grid; gap: var(--s-2); margin-block: var(--s-2) var(--s-4); }
.tier__list li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: .9375rem; }
.tier__list .icon { color: var(--c-moss-600); margin-top: 4px; }
.tier .btn { margin-top: auto; width: 100%; white-space: normal; line-height: 1.3; text-align: center; padding-block: var(--s-3); }
@media (min-width: 640px) and (max-width: 899.98px) {
  .tiers > .tier:last-child .tier__list { grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-6); }
  .tiers > .tier:last-child .btn { width: auto; align-self: flex-start; }
}

.callout {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
}
.callout p { margin: 0; }
.callout--role {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  background: #fff;
  border-left: 3px solid var(--c-moss-600);
  border-radius: var(--r-md);
}
.callout--role .icon { color: var(--c-moss-600); flex: none; margin-top: 4px; }
/* The card hugs its text (about 70ch of copy plus icon and padding) instead
   of stretching across the container with a blank right third. */
.callout--role { max-width: 80ch; }
@media (max-width: 479.98px) {
  .callout--role { flex-direction: column; gap: var(--s-3); }
  .callout--role .icon { margin-top: 0; }
}
.callout--role strong { color: var(--c-forest-900); }

/* ---------- 16. Network ------------------------------------------------ */
.mesh { width: 100%; height: auto; display: block; }
@media (max-width: 479.98px) { .mesh text { display: none; } }
.mesh__frame {
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-1);
}
.mesh-note { margin-top: var(--s-3); padding-left: var(--s-3); border-left: 2px solid var(--c-sage-300); }

.linklist {
  list-style: none;
  counter-reset: link;
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.linklist li {
  counter-increment: link;
  position: relative;
  padding: var(--s-4) var(--s-5) var(--s-4) 72px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
.linklist li::before {
  content: counter(link);
  position: absolute;
  left: var(--s-5);
  top: var(--s-4);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--c-forest-900);
  color: #fff;
  font: 600 .9375rem / 32px var(--font-serif);
  text-align: center;
}
.linklist h4 { margin-bottom: var(--s-1); }
.linklist p { font-size: .9375rem; }
.linklist .btn--link { margin-top: var(--s-2); margin-bottom: calc(-1 * var(--s-3)); }

/* ---------- 17. Land and funding --------------------------------------- */
.outcomes { margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 640px) {
  .outcomes { grid-template-columns: repeat(3, 1fr); }
  .outcomes > :nth-child(odd):last-child { grid-column: auto; }
}

/* Funding cards: a lone third card on tablet lays out icon-left, text-right */
@media (min-width: 640px) and (max-width: 899.98px) {
  .grid--funding > :nth-child(odd):last-child {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: var(--s-5);
    align-items: start;
  }
  .grid--funding > :nth-child(odd):last-child > .card__icon { grid-row: 1 / span 3; }
  .grid--funding > :nth-child(odd):last-child > h3 { margin-top: var(--s-2); }
  .grid--funding > :nth-child(odd):last-child > .card__link { margin-bottom: 0; }
}

/* Programs to know: full-width list beneath the funding cards */
.programs { margin-top: var(--s-7); }
.programs .program-list { margin-top: var(--s-5); }
@media (min-width: 900px) {
  .program-list--cols { grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-7); }
  .program-list--cols li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Visible placeholder notes (events, membership, network, funding) */
.placeholder-note {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  margin-top: var(--s-5);
  max-width: 72ch;
}
.placeholder-note .icon { color: var(--c-moss-600); margin-top: 3px; }
.placeholder-note strong { color: var(--c-forest-900); font-weight: 600; }

.status {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--c-wheat-100);
  color: var(--c-forest-900);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.status strong { font-weight: 600; }
.status__dot {
  width: 8px; height: 8px;
  margin-top: .45em;
  border-radius: 50%;
  background: var(--c-wheat-500);
  flex: none;
}
@media (min-width: 640px) { .status { border-radius: var(--r-pill); } }

.program-list { list-style: none; display: grid; gap: var(--s-3); }
.program-list li {
  padding-left: var(--s-4);
  border-left: 2px solid var(--c-sage-300);
  font-size: .9375rem;
}
.program-list strong { color: var(--c-forest-900); }

.note {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.note .icon { color: var(--c-moss-600); flex: none; margin-top: 2px; width: 20px; height: 20px; }

/* ---------- 18. CTA band ----------------------------------------------- */
.cta-band {
  position: relative;
  isolation: isolate;
  background: var(--c-forest-900);
  color: var(--c-sage-100);
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--topo);
  background-size: 600px 600px;
  opacity: .07;
  filter: brightness(3);
  pointer-events: none;
}
.cta-band .eyebrow { color: var(--c-sage-300); justify-content: center; }
.cta-band .eyebrow::before { display: none; }
.cta-band h2 { color: #fff; }
.cta-band .lede { color: var(--c-sage-100); margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }
.btn--light { background: #fff; color: var(--c-forest-900); }
.btn--light:hover { background: var(--c-sage-100); color: var(--c-forest-900); }
.btn--outline-light { border-color: rgba(255, 255, 255, .7); color: #fff; background: transparent; }
.btn--outline-light:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------- 19. Footer ------------------------------------------------- */
.site-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-soft);
  padding-block: var(--s-8) var(--s-6);
}
.site-footer__grid { display: grid; gap: var(--s-7) var(--s-6); }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; } }
.site-footer .brand { margin-bottom: var(--s-4); }
.site-footer .brand__logo--full { height: auto; width: min(100%, 300px); }
.site-footer__tagline { font-size: var(--fs-small); color: var(--text-muted); max-width: 40ch; }
.site-footer h2 {
  font: 600 var(--fs-eyebrow) / 1.2 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-forest-700);
  margin-bottom: var(--s-3);
}
.site-footer ul { list-style: none; display: grid; gap: 0; }
.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--s-2);
  color: var(--c-forest-800);
  text-decoration: none;
  font-size: .9375rem;
}
.site-footer li a:hover { color: var(--c-forest-900); text-decoration: underline; }
.site-footer address { font-style: normal; font-size: .9375rem; display: grid; gap: var(--s-2); }
.site-footer__legal {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-ink-300);
  display: grid;
  gap: var(--s-5) var(--s-7);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}
.site-footer__statements, .site-footer__legal-lines { display: grid; gap: var(--s-2); align-content: start; }
.site-footer__statements p { font-size: var(--fs-small); max-width: 60ch; }
.site-footer__statements strong { color: var(--c-forest-900); font-weight: 600; }
.site-footer__legal-lines { align-content: end; }
@media (min-width: 900px) {
  .site-footer__legal { grid-template-columns: 1fr 1fr; align-items: end; }
}
.site-footer__disclosure {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  color: var(--c-forest-900);
}
.site-footer__disclosure .icon { color: var(--c-moss-600); margin-top: 3px; }

/* ---------- 20. Motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .card--hoverable:hover { transform: none; }
}