/* ==========================================================================
   The Generation Fund — main stylesheet
   ==========================================================================

   LEGIBILITY CONTRACT (do not weaken without re-running the contrast audit)
   - Body text: 18px minimum, weight 500 minimum, 7:1 contrast minimum.
   - Nothing on this site is smaller than 16px or lighter than weight 500.
   - Only one body text colour exists (--ink). There is no grey body text.
   - Links in body copy are underlined, never colour-differentiated alone.
   - Lowest text contrast ratio in the system: 7.25:1 (AAA is 7:1).

   COLOUR COHERENCE (OKLCH)
   The blue carries the same chroma as the brand green (0.060 vs 0.061) so
   neither out-saturates the other, and cards sit 5 L* above the stone so
   they read as raised rather than as a same-value patch.

   SURFACE SYSTEM
   One reading surface carries all long-form text:
     --surface-stone  #E9E4D9   warm stone   (ink 12.92:1)
   Sections are not colour-coded; rhythm comes from spacing and rules.
   Cards use --surface-card #F7F5EF on every surface and are defined by a
   2px --rule border. Never fill a card with the same tone as the surface
   behind it: the two read as one flat area.
   Statement surfaces are saturated and carry near-white text only:
     --statement-green #1F4D3A  (paper 8.54:1, white 9.63:1)
     --statement-blue  #2A4864  (paper 8.43:1, white 9.50:1)
   Statement surfaces mark the vision, the framework, and the footer.
   Never place long-form body copy on a statement surface.

   Typography: Lora 600/700 (headings), Source Sans 3 500/600/700 (body).
   Weight 400 is deliberately not loaded so light text cannot reappear.
   ========================================================================== */

/* ---------- Design tokens ---------- */

:root {
  /* Surfaces */
  --surface-stone: #e9e4d9;
  /* Cards sit a step lighter than the page and are defined by their
     border, never by a fill that matches the surface behind them */
  --surface-card: #f7f5ef;
  --statement-green: #1f4d3a;
  --statement-blue: #2a4864;
  --field: #f4f1ea;

  /* Text */
  --ink: #1b211d;
  --paper: #f4f1ea;
  --white: #ffffff;
  --heading-green: #1f4d3a;
  --accent-blue: #2a4864;

  /* Lines */
  --rule: #736e62;

  /* Type */
  --font-heading: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Segoe UI", -apple-system, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.25rem, 5vw, 3.25rem);
  --fs-h1: clamp(2rem, 4.5vw, 3rem);
  --fs-h2: clamp(1.625rem, 3vw, 2.125rem);
  --fs-h3: 1.375rem;
  --fs-lede: 1.25rem;
  --fs-body: 1.125rem;
  --fs-label: 1rem;

  --lh-body: 1.65;
  --lh-heading: 1.3;
  --measure: 68ch;

  /* Space */
  --radius: 6px;
  --radius-lg: 12px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: clamp(2.75rem, 4.5vw, 4rem);

  --container: 72rem;
  --header-h: 5.5rem;
  --tap: 44px;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* Column layout + sticky footer: on a short page the footer sits at the
     bottom of the viewport rather than below the fold. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
  color: var(--ink);
  background-color: var(--surface-stone);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--heading-green);
  margin: 0 0 var(--space-2);
  /* Even out multi-line headings instead of leaving a stranded last word */
  text-wrap: balance;
}

/* Stop paragraphs ending on a single orphaned word */
p, li, dd, figcaption {
  text-wrap: pretty;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-body); font-weight: 600; }

p, ul, ol {
  margin: 0 0 var(--space-2);
  max-width: var(--measure);
}

strong {
  font-weight: 700;
}

a {
  color: var(--accent-blue);
}

/* Links inside running copy are always underlined, never colour alone */
main p a:not(.contact-email),
main li a,
main dd a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--heading-green);
}

/* Undecorated links: the footer and the contact email read as plain text */
.site-footer a,
.contact-email {
  text-decoration: none;
}

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* On a page shorter than the viewport the final block fills the space
   main is given, so no strip of the page surface is ever exposed above
   the footer. Matters most on the home page, whose hero is dark green. */
main > :last-child {
  flex-grow: 1;
}

.site-footer {
  flex-shrink: 0;
}

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

:focus-visible {
  outline: 3px solid var(--accent-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Utilities ---------- */

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  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;
  top: -100%;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--statement-green);
  color: var(--paper);
  font-weight: 600;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
  color: var(--paper);
}

/* ---------- Header & navigation ---------- */

.site-header {
  background: var(--surface-stone);
  border-bottom: 2px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  padding: 0.25rem 0;
}

.brand__logo {
  height: 3.4rem;
  width: auto;
}

.brand__logo[hidden] {
  display: none;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--heading-green);
  white-space: nowrap;
}

.brand__tagline {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent-blue);
  white-space: nowrap;
}

.brand:hover .brand__name {
  color: var(--accent-blue);
}

.nav__toggle {
  display: none;
  min-width: var(--tap);
  min-height: var(--tap);
  background: none;
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.5rem 0.65rem;
  cursor: pointer;
  color: var(--accent-blue);
}

.nav__toggle-bar {
  display: block;
  width: 24px;
  height: 3px;
  background: currentColor;
  margin: 5px 0;
  transition: transform 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.nav__link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0.5rem 0.7rem;
  font-size: var(--fs-label);
  font-weight: 600;
  white-space: nowrap;
  color: var(--accent-blue);
  text-decoration: none;
  border-radius: var(--radius);
}

.nav__link:hover {
  background: var(--surface-card);
  color: var(--heading-green);
}

.nav__link[aria-current="page"] {
  color: var(--heading-green);
  box-shadow: inset 0 -3px 0 var(--heading-green);
  border-radius: var(--radius) var(--radius) 0 0;
}

@media (max-width: 58rem) {
  .nav__toggle {
    display: block;
  }

  .nav__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface-stone);
    border-bottom: 2px solid var(--rule);
    box-shadow: 0 12px 24px rgba(27, 33, 29, 0.14);
    padding: 0.5rem 1.25rem 1rem;
  }

  .nav__list--open {
    display: flex;
  }

  .nav__link {
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid var(--rule);
  }

  .nav__link[aria-current="page"] {
    box-shadow: inset 4px 0 0 var(--heading-green);
    border-radius: 0;
    padding-left: 0.85rem;
  }
}

@media (max-width: 30rem) {
  .brand__logo {
    height: 2.75rem;
  }

  .brand__name {
    font-size: 1.2rem;
  }
}

/* ---------- Sections & surfaces ---------- */

.section {
  padding: var(--space-5) 0;
}

/* Statement surface: near-white text only, never long-form body copy */
.section--statement {
  background: var(--statement-green);
  color: var(--paper);
}

/* Scoped to the section's own headings only: cards placed on a statement
   surface (e.g. .framework__col) keep their own reading-surface colours. */
.section--statement > .container > h1,
.section--statement > .container > h2,
.section--statement > .container > h3 {
  color: var(--white);
}

.section--statement > .container > p a {
  color: var(--white);
}

.section__kicker {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: var(--space-1);
}

.section--statement .section__kicker {
  color: var(--paper);
}

.section__intro {
  font-size: var(--fs-lede);
  max-width: 46rem;
  text-wrap: balance;
}

/* ---------- Hero ---------- */

.hero {
  padding: var(--space-5) 0;
}

.hero__split {
  display: grid;
  /* Text column takes the larger share so headings are not forced to
     break across two lines. */
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0;
}

.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 18rem;
  max-height: 34rem;
  object-fit: cover;
}

.hero__media--arch,
.hero__media--arch img {
  border-radius: 12rem 12rem var(--radius-lg) var(--radius-lg);
}

.hero__kicker {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: var(--space-2);
}

.hero__title {
  margin-bottom: var(--space-3);
}

.hero__lede {
  font-size: var(--fs-lede);
  max-width: 40rem;
  /* Ledes longer than the 72ch cap must wrap; balance them into even
     lines rather than a full line plus a stub. */
  text-wrap: balance;
}

/* Page heroes sit on the primary reading surface */
.hero--page {
  background: var(--surface-stone);
  padding: var(--space-4) 0 var(--space-5);
}

/* Compact hero: used where the section below is the page's centrepiece
   and should be reachable without scrolling past a tall header block. */
.hero--compact {
  padding: var(--space-4) 0 var(--space-3);
}

/* Statement heroes: deep green, near-white text */
.hero--statement {
  background: var(--statement-green);
  color: var(--paper);
}

.hero--statement .hero__title,
.hero--statement h1 {
  color: var(--white);
}

.hero--statement .hero__kicker {
  color: var(--paper);
}

.hero--home {
  display: flex;
  align-items: flex-start;
  /* No forced viewport height: the page is short enough that the footer
     stays in view without scrolling. */
  padding-top: var(--space-5);
  padding-bottom: var(--space-4);
}

/* Wherever a picture sits beside text it fills its column at exactly the
   height of that text. Absolute positioning stops the image's own aspect
   ratio driving the row taller than the copy, which is what leaves a band
   of empty surface beside short text. */
.hero__split {
  align-items: stretch;
}

.hero__split .hero__media {
  position: relative;
  margin-top: 0;
  min-height: 20rem;
}

.hero__split .hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: cover;
}

@media (max-width: 52rem) {
  .hero__split .hero__media {
    position: static;
    min-height: 0;
  }

  .hero__split .hero__media img {
    position: static;
    height: auto;
    aspect-ratio: 3 / 2;
  }
}

.hero--home .hero__title {
  font-size: clamp(1.875rem, 3.3vw, 2.625rem);
  line-height: 1.32;
  letter-spacing: -0.005em;
  margin-bottom: var(--space-4);
}

.hero--home .hero__lede {
  line-height: 1.7;
}

.hero--vision {
  text-align: center;
  padding: var(--space-4) 0;
}

.hero--vision .hero__inner {
  margin-inline: auto;
}

/* The vision statement carries weight through scale and italics rather
   than bold, which reads too heavy at display size. */
.hero--vision .hero__title {
  font-size: var(--fs-display);
  font-style: italic;
  font-weight: 600;
  max-width: 26ch;
  margin-inline: auto;
}

/* CTA row: one solid action, the rest as underlined arrow links */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--accent-blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.link-arrow::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.45rem;
  text-decoration: none;
}

.link-arrow:hover {
  color: var(--heading-green);
}

.hero--statement .link-arrow,
.section--statement .link-arrow {
  color: var(--paper);
}

.hero--statement .link-arrow:hover,
.section--statement .link-arrow:hover {
  color: var(--white);
}

@media (max-width: 52rem) {
  .hero__split {
    grid-template-columns: 1fr;
  }

  .hero__media img {
    min-height: 0;
    aspect-ratio: 3 / 2;
    height: auto;
  }

  .hero--home {
    min-height: 0;
    padding: var(--space-4) 0;
  }

  .hero__media--arch,
  .hero__media--arch img {
    border-radius: 7rem 7rem var(--radius-lg) var(--radius-lg);
  }
}

@media (max-width: 40rem) {
  .hero__actions {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-1);
  }

  .hero__actions .btn {
    text-align: center;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--fs-body);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}

.btn--primary {
  background: var(--statement-green);
  color: var(--paper);
}

.btn--primary:hover {
  background: #163a2b;
  color: var(--white);
}

/* On a statement surface the solid button inverts to keep 8.54:1 */
.hero--statement .btn--primary,
.section--statement .btn--primary {
  background: var(--paper);
  color: var(--statement-green);
}

.hero--statement .btn--primary:hover,
.section--statement .btn--primary:hover {
  background: var(--white);
  color: var(--statement-green);
}

/* ---------- Photo band ---------- */

.photo-band {
  margin: 0;
}

.photo-band img {
  display: block;
  width: 100%;
  height: clamp(15rem, 38vw, 24rem);
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* ---------- Principles ---------- */

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.principle {
  border-left: 4px solid var(--accent-blue);
  padding-left: var(--space-2);
}

.principle__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--heading-green);
  margin-bottom: 0.3rem;
}

.principle__text {
  margin: 0;
  font-size: var(--fs-body);
}

/* ---------- Values (centred flex so a row never strands one box) ---------- */

.values-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  max-width: none;
}

.value {
  /* Three across, so a two-word value name is never split. The five items
     fall as a centred 3 + 2, which reads as deliberate rather than as a
     stranded single box. */
  flex: 0 1 calc((100% - 2 * var(--space-3)) / 3);
  background: var(--surface-card);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-2);
}

.value__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--heading-green);
  margin-bottom: 0.3rem;
}

.value__text {
  margin: 0;
  font-size: var(--fs-body);
}

@media (max-width: 64rem) {
  .value {
    flex: 0 1 calc((100% - 2 * var(--space-3)) / 3);
  }
}

@media (max-width: 40rem) {
  .value {
    flex: 1 1 100%;
    max-width: 28rem;
  }
}

/* ---------- Definition trio ---------- */

.trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.trio__item {
  background: var(--surface-card);
  border: 2px solid var(--rule);
  border-top: 6px solid var(--statement-green);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.trio__item:nth-child(2) { border-top-color: var(--statement-blue); }
.trio__item:nth-child(3) { border-top-color: var(--statement-green); }

.trio__item p:last-child {
  margin-bottom: 0;
}

/* ---------- Framework (statement surface) ----------
   This is the single most important asset on the site: it is what a
   non-profit uses to decide whether the Fund is a possible match, so it
   leads the Strategic Focus page and is sized accordingly. */

.section--framework {
  padding-top: var(--space-4);
}

.framework__heading {
  font-size: var(--fs-display);
  margin-bottom: var(--space-2);
}

.framework {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--space-2);
  align-items: stretch;
  margin-top: var(--space-4);
  max-width: none;
}

.framework__col {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-2);
  text-align: center;
}

.framework__label {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--statement-green);
  border-radius: 999px;
  padding: 0.25rem 1rem;
  margin-bottom: var(--space-1);
}

.framework__col--who .framework__label {
  background: var(--statement-blue);
}

.framework__title {
  font-size: var(--fs-h3);
  color: var(--heading-green);
  margin-bottom: var(--space-2);
  text-wrap: nowrap;
}

@media (max-width: 64rem) {
  .framework__title {
    text-wrap: balance;
  }
}

.framework__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.framework__list li {
  background: var(--surface-stone);
  border-radius: 999px;
  padding: 0.65rem 1rem;
  margin: 0.6rem auto;
  max-width: 20rem;
  font-weight: 600;
  font-size: var(--fs-lede);
  color: var(--ink);
}

.framework__connector {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 3.6rem;
}

.framework__connector::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  right: -0.75rem;
  top: 50%;
  border-top: 2px dashed var(--paper);
  opacity: 0.6;
}

.framework__connector span {
  position: relative;
  background: var(--paper);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--ink);
}

.framework__thread {
  width: fit-content;
  margin: var(--space-4) auto 0;
  background: var(--paper);
  color: var(--statement-green);
  border-radius: 999px;
  padding: 0.8rem 1.8rem;
  font-weight: 700;
  font-size: var(--fs-lede);
  text-align: center;
}

@media (max-width: 52rem) {
  .framework {
    grid-template-columns: 1fr;
  }

  .framework__connector {
    min-height: 3.2rem;
  }

  .framework__connector::before {
    left: 50%;
    right: auto;
    top: -0.75rem;
    bottom: -0.75rem;
    border-top: none;
    border-left: 2px dashed var(--paper);
  }
}

.framework__note {
  margin: var(--space-2) auto 0;
  max-width: none;
  text-align: center;
  font-size: var(--fs-label);
  color: var(--paper);
}

/* ---------- Orientation statement ---------- */

.orient {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.orient__statement {
  font-size: var(--fs-display);
  line-height: 1.15;
  margin-bottom: 0;
  max-width: 14ch;
}

.orient__statement em {
  font-style: italic;
  color: var(--accent-blue);
}

.orient__body p {
  max-width: 54ch;
}

.orient__body .notice {
  margin-top: var(--space-3);
}

@media (max-width: 52rem) {
  .orient {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* ---------- Numbered ledger ---------- */

.ledger {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  max-width: none;
}

.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-2) clamp(2rem, 5vw, 4.5rem);
  padding: var(--space-4) 0;
  border-top: 2px solid var(--rule);
}

.ledger__row:last-child {
  border-bottom: 2px solid var(--rule);
}

.ledger__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.ledger__num {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-blue);
}

.ledger__title {
  font-size: 1.5rem;
  margin: 0;
}

.ledger__text {
  margin: 0;
  max-width: 58ch;
}

@media (max-width: 52rem) {
  .ledger__row {
    grid-template-columns: 1fr;
    padding: var(--space-3) 0;
  }
}

/* ---------- Chapters ---------- */

.chapters {
  margin-top: var(--space-2);
}

.chapter {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-1) clamp(1.75rem, 4vw, 3.5rem);
  padding: var(--space-3) 0;
  border-top: 2px solid var(--rule);
}

/* Number sits on the same line as the kicker rather than claiming a line
   of its own, which is where most of this page's dead space came from. */
.chapter__aside {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  align-content: start;
  gap: 0 0.7rem;
}

.chapter__num {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--heading-green);
}

.chapter__aside .section__kicker {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 0;
}

.chapter__aside h2 {
  grid-column: 1 / -1;
  font-size: 1.5rem;
  margin-top: 0.15rem;
  margin-bottom: 0;
  max-width: 20ch;
}

.chapter__body > p:first-child {
  margin-top: 0.25rem;
}

.chapter__body ul {
  padding-left: 1.2rem;
}

.chapter__body li {
  margin-bottom: 0.5rem;
}

.stat {
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 4px solid var(--statement-green);
  max-width: 12rem;
}

.stat__figure {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--heading-green);
  line-height: 1.1;
}

.stat__label {
  font-size: var(--fs-label);
}

@media (max-width: 52rem) {
  .chapter {
    grid-template-columns: 1fr;
    padding: var(--space-3) 0;
  }

  .chapter__num {
    font-size: 2rem;
  }
}

/* ---------- Contact ----------
   Details and the applications notice sit side by side so the page and
   its footer fit in one viewport without scrolling. */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-3) clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  max-width: none;
}

.contact-grid__details > h3:first-child {
  margin-top: 0;
}

.contact-grid__details h3 {
  margin-bottom: 0.35rem;
}

.contact-grid__details p,
.contact-grid__details ul {
  margin-bottom: var(--space-2);
}

.contact-grid__details ul {
  padding-left: 1.2rem;
}

.contact-grid__details > p:last-child {
  margin-bottom: 0;
}

@media (max-width: 52rem) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Tighter rhythm for pages short enough to fit one viewport */
.section--tight {
  padding: var(--space-3) 0 var(--space-4);
}

.hero--tight {
  padding-top: var(--space-3);
  padding-bottom: var(--space-2);
}

/* ---------- Notice ---------- */

.notice {
  background: var(--surface-card);
  border-left: 6px solid var(--statement-green);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-2) var(--space-3);
  max-width: var(--measure);
}

.notice p:last-child {
  margin-bottom: 0;
}

.page-note {
  padding-top: var(--space-4);
}

/* ---------- Footer (statement surface) ---------- */

.site-footer {
  background: var(--statement-green);
  color: var(--paper);
  padding: var(--space-4) 0;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap: var(--space-4);
  align-items: start;
}

.site-footer__brand {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.3rem;
}

.site-footer__tagline {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--paper);
}

.site-footer p {
  margin: 0 0 0.5rem;
  font-size: var(--fs-body);
  color: var(--paper);
  max-width: 38rem;
}

.site-footer a {
  color: var(--white);
  text-decoration: none;
}

/* A link that is the whole paragraph is a standalone control, so it needs
   the full 44px target rather than the inline-link exemption. */
.site-footer__inner p > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.site-footer__heading {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 var(--space-1);
}

.site-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: var(--space-3);
}

.site-footer__links a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-body);
  color: var(--paper);
}

.site-footer__links a:hover {
  color: var(--white);
}

.site-footer__note {
  font-size: var(--fs-label);
  color: var(--paper);
}

@media (max-width: 52rem) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* ---------- Partner showcase (unpublished template) ---------- */

.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
  max-width: none;
}

.partner-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--surface-card);
  border: 2px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.partner-card__logo {
  display: flex;
  align-items: center;
  height: 4.5rem;
}

.partner-card__logo img {
  max-height: 100%;
  width: auto;
  max-width: 12rem;
  object-fit: contain;
}

.partner-card__name {
  font-size: var(--fs-h3);
  margin: 0;
}

.partner-card__desc {
  margin: 0;
  font-size: var(--fs-body);
  flex-grow: 1;
}

.partner-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.partner-card__meta li {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--paper);
  background: var(--statement-blue);
  border-radius: 999px;
  padding: 0.2rem 0.8rem;
}

/* ---------- Motion ----------
   There is no scroll-reveal or entrance animation on this site: text must
   never start invisible or arrive late for a reader with low vision. The
   only transitions are hover/focus feedback on interactive elements. */

/* Short laptop screens: trim padding (never type) so the one-viewport
   pages and their footers still fit without scrolling. */
@media (min-width: 53rem) and (max-height: 880px) {
  .hero--home {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }

  .hero--tight {
    padding-top: var(--space-2);
    padding-bottom: var(--space-1);
  }

  .section--tight {
    padding: var(--space-2) 0 var(--space-3);
  }

  .section--tight .notice {
    padding: var(--space-2);
  }

  .site-footer {
    padding: var(--space-3) 0;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}