/* ============================================================
   Beneath — shared stylesheet
   Tokens from "Design Beneath.md" — the brand system of record
   ============================================================ */

/* ---------- Fonts ----------
   All webfonts load locally from /Fonts via /* Satoshi (2026-11-01) replaces TeX Gyre Heros as the sans voice.
   - "Satoshi"       true weights: 400 Regular (small print, legal),
                     500 Medium, 700 Bold, 900 Black (headings).
   - "Satoshi Text"  the running-copy family behind --font-text/--font-read/
                     --font-ui: every weight up to 599 resolves to Medium, so
                     the many `font-weight: 400` copy rules read as Medium
                     (user: Medium for normal text); 600-799 Bold, 800+ Black. */
@font-face { font-family: "Satoshi"; src: url("../Fonts/Satoshi-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../Fonts/Satoshi-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../Fonts/Satoshi-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../Fonts/Satoshi-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi Text"; src: url("../Fonts/Satoshi-Medium.woff2") format("woff2"); font-weight: 1 599; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi Text"; src: url("../Fonts/Satoshi-Bold.woff2") format("woff2"); font-weight: 600 799; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi Text"; src: url("../Fonts/Satoshi-Black.woff2") format("woff2"); font-weight: 800 1000; font-style: normal; font-display: swap; }
/* <em> keeps upright weight emphasis, as before (Satoshi's italic is not loaded). */
@font-face { font-family: "Satoshi Text"; src: url("../Fonts/Satoshi-Bold.woff2") format("woff2"); font-weight: 1 1000; font-style: italic; font-display: swap; }
@font-face:
   - Space Mono Bold (700)    → display / h1 / brand voices — ALWAYS uppercase
   - Space Mono Regular (400) → stat / eyebrow / tag / numeric accents —
                                ALWAYS uppercase
   - Satoshi (since 2026-11-01, replacing TeX Gyre Heros) → body copy in
                                Medium, small print in Regular, headings
                                and subheadings in Bold / Black. See the
                                Satoshi faces below and the SATOSHI block. */
@font-face {
  font-family: "Space Mono";
  src: url("../Fonts/SpaceMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../Fonts/SpaceMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* ---------- Tokens ----------
   2026-10-26 — the palette was rebuilt against the coralgardeners.org
   reference the user supplied. The forest-green system is gone. Three
   grounds and one accent carry the whole site now:

       black    #000000   the dark field (hero, mission, impact, cards, social)
       paper    #F3F2F0   the light field (action, footer) — grayish white
       green    #2C4733   small accents only (footer labels, social circles)
       sky      #00A1DB   small marks (#00A1DB since 2026-10-31 night: a more vibrant #128FB4; was #0068FF): slashes, arrows, dots, hovers, grid
       red      #FF1B1C   the primary button (sampled from the reference)
       blue     #00A1DB   the secondary filled button (same reference)

   2026-10-27: green + light blue brought back for an environmental feel;
   the grounds stay black + paper (user, same day); green and light blue
   live in the small details, red/blue on the buttons.

   Sampled straight out of the reference screenshots, not eyeballed: the red
   is identical in the footer button and the Ecotour card button, the dark
   field is pure #000 (the old "no pure black" rule is retired), and the light
   field sits between the two grey casts the screenshots show.
   The old token NAMES are kept and repointed so all 15 pages reskin at once
   — --forest is black now, --green-type is white, --pop is the red.
   ---------- */
:root {
  /* The light ground and the plates that sit on it. */
  --surface: #F9F8F6;
  --surface-raised: #FFFFFF;
  --surface-sunken: #E8E7E4;
  --on-surface: #000000;
  --on-surface-secondary: #000000;
  --on-surface-muted: #000000;
  --border: #D8D7D4;

  /* The accent. One colour, used for every filled button, the footer's
     column labels and the small marks that used to be blue. */
  --red: #FF1B1C;
  --red-hover: #E0100F;
  /* The reference's one other hue: a vivid blue, used ONLY for the faint
     crosshair grid behind the mission statement. Never as a fill. */
  --blue: #00A1DB;
  --blue-hover: #0087B8;
  /* 2026-10-27 — the environmental layer the user asked back for: the
     forest greens and the light blue from the earlier site. Green carries
     the dark grounds, the light blue carries the small marks, and the
     red/blue fills stay on the buttons only, exactly as the reference. */
  --green: #2C4733;
  --green-deep: #1D2E23;
  --green-light: #BAC5A6;
  --sky: #00A1DB;
  --sky-pale: #E0F7FF;

  /* 2026-10-27 polish — one rhythm for the whole site. Every full section
     pads by --section-y top and bottom; the photo cards sit --frame-inset in
     from the page edge, with --frame-pad of breathing room inside them. */
  --section-y: clamp(96px, 10vw, 160px);
  --frame-inset: clamp(12px, 2.2vw, 32px);
  --frame-pad: clamp(20px, 2.6vw, 40px);
  --r-photo: clamp(16px, 1.8vw, 26px);

  --primary: #000000;
  --on-primary: #FFFFFF;
  --primary-hover: #2C4733;
  --accent: #2C4733;
  --on-accent: #FFFFFF;
  --accent-soft: #BAC5A6;
  --accent-muted: #E0F7FF;
  /* --pop was the cyan sprinkled across small details. It is the red now, so
     every rule, slash, dot and small arrow that referenced it comes along. */
  --pop: #00A1DB;

  /* The dark ground. Every old green band resolves to black through these. */
  --sage: #E8E7E4;
  --on-sage: #000000;
  --forest: #000000;
  --on-forest: #FFFFFF;
  --cream: #F9F8F6;
  --on-cream: #000000;
  --inverse-surface: #000000;
  --on-inverse: #FFFFFF;
  /* Large display type on a dark ground. Was the sage green; white now. */
  --green-type: #FFFFFF;
  --stage-ground: #000000;
  --on-stage: #FFFFFF;
  --clay: #FF1B1C;
  --on-clay: #FFFFFF;
  --focus: #00A1DB;
  --error: #FF1B1C;

  --font-h1: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-text: "Satoshi Text", "Satoshi", Helvetica, Arial, sans-serif;
  /* Satoshi's true weights, for headings (Bold/Black) and small print (Regular). */
  --font-sat: "Satoshi", "Satoshi Text", Helvetica, Arial, sans-serif;
  --font-read: "Satoshi Text", "Satoshi", Helvetica, Arial, sans-serif;
  --font-ui: "Satoshi Text", "Satoshi", Helvetica, Arial, sans-serif;

  /* The width of the work-card column. Wide enough not to read as a narrow
     strip, pulled in from the full container so the card is not a letterbox. */
  --work-measure: clamp(320px, 90vw, 1260px);
  /* Every work card is the same height — the lead card sets it. */
  --work-height: clamp(340px, 38vw, 560px);

  /* Hard edges. Plates, images and fields are square — the softness is gone.
     Only controls stay capsules (--r-full), which is the one shape the
     interface layer keeps. */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  /* Controls are no longer capsules. The reference's buttons are rectangles
     with the corner just knocked off — 4px, the same on the red fill and on
     the white one. --r-full is kept pointing at the button radius so the
     chips and tags that still reference it come along. */
  --r-full: 4px;
  /* Photographs are the one plate that keeps a soft corner — enough to
     lift the picture off the paper without turning it into a UI card. */
  --r-img: 10px;
  /* The work card's own frame, a step wider than the photo inside it so the
     picture nests rather than fights the corner it sits in. */
  --r-card: 20px;

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

  /* faint hairline that adapts to the text colour of any card */
  --hairline: color-mix(in srgb, currentColor 26%, transparent);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-padding-top: 88px;
  /* Stop a horizontal swipe from triggering back/forward page navigation,
     and clip any incidental overflow (clip keeps position: sticky working,
     unlike overflow: hidden). Clipped here only — clipping on <body> as well
     makes the body its own scroll container and takes the document scroller
     off its fast path. */
  overflow-x: clip;
  /* No rubber-band either way: scrolling past the top or the bottom used to
     pull the whole page off the window and show empty canvas behind it. The
     canvas itself is painted paper too, in case a browser ignores this. */
  overscroll-behavior: none;
  background: var(--surface);
  /* Eased jumps for in-page anchors (the year pills, "skip to" links). The
     wheel and trackpad are left completely alone: native scrolling is the
     smoothest input path there is, and hijacking it with a JS lerp is exactly
     what makes a site feel heavy and a frame behind your fingers. */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-ui);
  font-size: 22px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }

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

/* ---------- Type scale ---------- */
.display {
  font-family: var(--font-h1);
  font-size: clamp(54px, 7.6vw, 116px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  margin: 0;
}
.h1 {
  font-family: var(--font-h1);
  font-size: clamp(42px, 5.8vw, 92px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  margin: 0;
}
/* h2 and h3 are both Space Mono Regular — the light cut, never the bold
   one — but they differ in case. h2 is UPPERCASE, so a section heading
   still reads as a heading at a glance; h3 and the card titles are
   sentence case. h2 keeps the -0.035em caps tracking; the sentence-case
   voices are looser at -0.02em, because the tighter figure is calibrated
   for monospaced capitals and closes up lowercase counters. */
.h2 {
  font-family: var(--font-mono);
  font-size: clamp(29px, 3.6vw, 53px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  margin: 0;
}
.h3 {
  font-family: var(--font-mono);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
}
.stat {
  font-family: var(--font-mono);
  font-size: clamp(40px, 4.6vw, 56px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  font-feature-settings: "tnum" on;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-surface-secondary);
  margin: 0 0 var(--sp-5);
}
/* ---------- Section mark ----------
   The one label that titles a section, the "OUR MISSION" treatment from the
   hero: Space Mono Bold, all caps, wide-tracked, with the pop tick ahead of
   it. Every section on every page uses this same mark — never a one-off
   size — so a reader learns the shape of a section title once. */
.section-mark {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-secondary);
  margin: 0 0 var(--sp-5);
  word-spacing: -0.06em;
}

/* On the dark grounds the mark takes the band's own ivory. */
.band--ink .section-mark,
.band--deep .section-mark,
.card--forest .section-mark { color: inherit; }

/* Small pop tick ahead of every section label — the same small-mark
   vocabulary as the stat dot and brand mark, just spread further. */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: var(--r-full);
  background: var(--pop);
  margin-right: var(--sp-3);
  vertical-align: 1px;
}
/* The live-status eyebrow already carries its own dot — don't double up. */
.eyebrow:has(.dot)::before { content: none; }
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
.body-large {
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  margin: 0;
}
.body { font-family: var(--font-ui); font-size: 16px; line-height: 1.65; }
.label { font-family: var(--font-ui); font-size: 15px; font-weight: 500; line-height: 1.2; }
.caption { font-family: var(--font-ui); font-size: 13px; font-weight: 400; line-height: 1.4; }

/* One spacing utility, so no element needs a style="" attribute — the
   Content-Security-Policy can then forbid inline style outright. */
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-9 { margin-top: var(--sp-9); }

/* Body copy stays ink-black; grays are reserved for captions/labels. */
.text-secondary { color: var(--on-surface); }
.text-muted { color: #000000; }

/* Emphasis is reserved for a key word set in <em>. There is no highlight
   marker in this system — emphasis is this and nothing else. Space Mono
   never italicises, so the display/h1/h2/h3 headline voices keep their <em>
   words upright (and uppercase); in the reading copy <em> resolves to the
   TeX Gyre Heros Bold face, so it reads as weight, not slant. */
.display em, .h1 em, .h2 em, .h3 em { font-family: inherit; font-style: normal; font-weight: inherit; }
em, .key { font-family: var(--font-text); font-style: italic; font-weight: inherit; }

/* Space Mono is monospaced, so both its letterforms and its word space run
   wide. Every mono voice gets a negative word-space on top of the tightened
   letter-spacing above, so headline caps set as a compact block. */
.display, .h1, .h2, .h3, .stat, .eyebrow, .tag,
.nav__brand, .footer__brand, .feature-card__title, .pathway__title, .statement-line, .image-hero__title,
.event-feature__title, .event-hero__title, .btn, .nav__links a,
.marquee__item, .label-row__item, .stat-value,
.band-stats .stat-value, .stat-cell .stat-label {
  word-spacing: -0.1em;
}

/* Space Mono is ALWAYS set in caps — every selector voiced in the bold
   display mono or the regular accent mono, whatever its content. */
.nav__brand, .footer__brand, .feature-card__title, .mv-panel .statement,
.avatar, .pathway__title,
.event-feature__title, .event-hero__title,
.mini-chip__value, .value-row .num, .timeline .year, .ledger .year,
.ledger .figure, .chip, .atlas-marker__label, .atlas-dong-detail__label,
.event-feature__meta, .event-row__loc, .event-row__cat, .event-row__date,
.atlas-back, .nav__links a, .nav__links .nav__parent, .nav__toggle {
  text-transform: uppercase;
}

/* ---------- Layout ---------- */
.container {
  max-width: 1340px;
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
/* Section panels break out of the centred 1340px measure and run the full
   width of the page — the same edge-to-edge treatment the hero uses, now
   applied to every band's content. Inner elements keep their own reading
   caps (ledes, paragraphs), so only headings and grids gain the extra width. */
.band > .container {
  max-width: none;
  padding-inline: clamp(20px, 3vw, 48px);
}
.section { padding-block: var(--sp-9); }

/* ---------- Buttons ---------- */
/* ---------- Buttons ----------
   Rebuilt 2026-10-26 from the red button in the reference footer: a flat
   rectangle with the corner knocked off, a solid red fill, white Space Mono
   set small and widely tracked, and the arrow pushed to the far side by a
   wide gap rather than sitting next to the word. No capsules, no outlines
   on the primary, no colour on hover other than a darker red.

   .btn            secondary — transparent, hairline in the current text colour
   .btn--primary   the red one
   .btn--light     white fill, black text (for use inside the black cards)
   ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-width: 140px;
  height: 42px;
  padding: 0 16px;
  /* Square corners and the regular cut, exactly as the reference's buttons
     (user, 2026-10-29). */
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  /* The reference tracks its button type wide — this is the one place on the
     site where Space Mono opens up rather than sitting tight. */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  color: currentColor;
  border: 1px solid currentColor;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
/* The arrow belongs to the button: on the red fill it is white, on the
   outline it is whatever the ground gives it. Never the accent — red on
   red made it vanish. */
.btn .arrow { font-size: 13px; color: inherit; }
.btn:hover { background: var(--on-surface); color: var(--surface); }
.band--ink .btn:hover, .band--deep .btn:hover,
.ground--dark .btn:hover { background: #FFFFFF; color: #000000; }

/* The red button. This is the site's button — the one the reference leads
   with, and the shape every call to action takes. */
.btn--primary,
.btn--secondary {
  background: var(--red);
  color: #FFFFFF;
  border: 1px solid var(--red);
}
.btn--primary:hover,
.btn--secondary:hover {
  background: var(--red-hover);
  border-color: var(--red-hover);
  color: #FFFFFF;
}

/* White fill, black type — the button the reference uses on its black cards,
   where a red fill would fight the photograph above it. */
.btn--light {
  background: #FFFFFF;
  color: #000000;
  border: 1px solid #FFFFFF;
}
.btn--light:hover { background: var(--red); border-color: var(--red); color: #FFFFFF; }

/* The reference's other filled button — the blue "ADOPT A CORAL" in its
   header. Sampled straight from the screenshot, like the red. */
.btn--blue {
  background: var(--blue);
  color: #FFFFFF;
  border: 1px solid var(--blue);
}
.btn--blue:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #FFFFFF; }

/* A full-bleed button: fills the width it is given, for the foot of a card. */
.btn--block { display: flex; width: 100%; }

/* Every arrow on the site steps right when its link is live — buttons, row
   links, card titles. One motion, used everywhere, is what makes the page
   feel awake without anything moving on its own. */
.arrow {
  display: inline-block;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
a:hover .arrow,
a:focus-visible .arrow { transform: translateX(4px); }
.btn .arrow { transition: transform 160ms ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface-raised);
  color: var(--on-surface);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
}
.card--forest { background: var(--forest);    color: var(--on-forest); }
.card--cream  { background: var(--cream);     color: var(--on-cream); }
/* On a colour surface, all inner text takes the card's own on-colour —
   never a secondary/muted grey. */
.card--forest .eyebrow,
.card--cream .eyebrow { color: inherit; }

/* ---------- Card anatomy (reference-style detail) ---------- */
/* Top meta row: eyebrow left, pill right */
.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.card-meta .eyebrow { margin: 0; }

/* Footer row: hairline above, meta left, circular arrow right */
.card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
}
.card-foot .tag { color: inherit; }

/* Small filled pill tag (as the reference's "Tutorial" pill) */
.pill {
  display: inline-flex;
  align-items: center;
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--on-primary);
  white-space: nowrap;
}
.pill--ivory { background: var(--surface); color: var(--on-surface); }

/* ---------- Status chips ----------
   One or two outlined capsules above a headline, carrying a plain fact:
   where the work is, when it started, what is measured. Never a dot inside
   them, never a row of three, never a word like "live" — a chip states a
   fact or it does not exist. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
}
/* In a centred block the chips centre with everything else, and the block's
   own gap does the spacing. */
.center-block .chip-row { justify-content: center; margin-bottom: 0; }
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-secondary);
  white-space: nowrap;
}
.band:not(.band--paper) .status-chip { border-color: var(--hairline); color: inherit; }
/* The chip a half-built page wears: a dashed edge so it reads as provisional
   rather than as another fact about the project. */
.status-chip--soon { border-style: dashed; }

/* Circular arrow icon button */
.icon-btn {
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  border-radius: var(--r-full);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms ease, transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.icon-btn:hover,
a:hover .icon-btn {
  border-color: var(--pop);
  transform: translate(2px, -2px);
}

/* Inner data mini-chips (as the reference's FIGMA / CODE chips) */
.mini-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.mini-chip {
  border-radius: var(--r-md);
  padding: 14px 18px;
  min-width: 132px;
  display: grid;
  gap: 2px;
}
.mini-chip__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mini-chip__value {
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1.15;
  font-feature-settings: "tnum" on;
  font-variant-numeric: tabular-nums;
}
.mini-chip--dark { background: var(--primary); color: var(--on-primary); }
.mini-chip--paper { background: var(--surface); color: var(--on-surface); }

/* Live/status dot — clay, the rarer warm accent */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--clay);
  margin-right: var(--sp-2);
  vertical-align: 1px;
}
/* The dot never blinks. A pulsing "live" light is the cheapest signal on the
   web and reads as decoration; the mark is a plain disc, and it is still. */
.dot--live { animation: none; }
/* Green disc — the one status mark on the site: work that is in progress.
   On a dark ground it lifts to the sage display green, which is the only
   green readable there. */
.dot--progress { background: var(--accent); }
/* Only the dark grounds lift it — on ivory or bone the moss green is the
   readable one. */
.band--ink .dot--progress,
.band--deep .dot--progress,
.card--forest .dot--progress { background: var(--green-type); }
/* Inside a chip the disc sits on the chip's own gap, not its own margin. */
.status-chip .dot { margin: 0; }

/* ---------- Links (in-copy + list rows) ---------- */
.link {
  color: var(--on-surface);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-color 160ms ease;
}
.link:hover { text-decoration-color: var(--pop); }

/* Animated ink underline — nav + footer links */
.a-link {
  position: relative;
  text-decoration: none;
  color: inherit;
}
.a-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--pop);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.a-link:hover::after,
.a-link:focus-visible::after { transform: scaleX(1); }

/* ---------- Nav ---------- */
/* Glass bar: the band underneath shows through a blurred, slightly
   over-saturated film, so the nav takes the colour of whatever it is
   crossing instead of sitting on an opaque ivory strip. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
  /* Held on its own layer so scrolling never has to re-promote it.
     NOTE: no `contain: paint` here — the dropdown menus hang below the bar,
     and paint containment clips anything drawn outside its box. */
  will-change: background-color;
}
/* The bar is a solid surface. Once scrolled it picks up a hairline. */
.nav.is-scrolled {
  background: var(--surface);
  border-bottom-color: var(--border);
}
.nav__inner {
  height: 72px;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.nav__inner > nav { margin-left: auto; }
.nav__brand {
  /* The wordmark is set in the dark forest green, not ink — the one word on
     the bar that carries the brand's colour. */
  color: var(--forest);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.045em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
/* The mark sits to the left of the word. logo-beneath.png is the supplied
   artwork rebuilt with a real alpha channel and trimmed to the ink, so it
   needs no margin correction — it is 376x702, a tall narrow mark. */
.nav__brand-logo {
  height: 46px;
  width: auto;
  display: block;
  flex: none;
}
.nav__brand-word {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.nav__brand .brand-mark { color: var(--pop); }
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a,
.nav__links .nav__parent {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.2;
  padding-block: 4px;
}
.nav__links a[aria-current="page"]::after { transform: scaleX(1); background: var(--pop); }
.nav__cta { flex-shrink: 0; }

/* ---------- Nav dropdown ----------
   One nav item ("About") carries a small menu. It hangs from the bar on
   hover or keyboard focus, in the same glass as the bar itself — no other
   panel treatment, no animation beyond the fade the bar already uses. */
.nav__has-menu { position: relative; }
/* The group label itself goes nowhere — it only opens the menu. The pages
   live one level down, so it is plain text, not a link. */
.nav__parent {
  display: inline-block;
  position: relative;
  color: var(--on-surface);
  cursor: default;
  user-select: none;
}
/* The exact underline .a-link draws — same weight, same offset, same
   easing — so hovering a group label reads identically to hovering Home
   or Reach Out. */
.nav__parent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--pop);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav__parent.is-active::after,
.nav__has-menu:hover .nav__parent::after,
.nav__has-menu:focus-within .nav__parent::after { transform: scaleX(1); }
/* A small caret so the parent reads as openable. */
.nav__caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: 2px;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
}
/* Invisible bridge across the gap, so the menu survives the trip down. */
.nav__has-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 18px;
}
.nav__menu {
  position: absolute;
  top: calc(100% + 16px);
  left: -14px;
  min-width: 168px;
  list-style: none;
  margin: 0;
  padding: var(--sp-3) 0;
  /* Solid, not glass: a menu you can read the page through is unreadable. */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--on-surface) 10%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, visibility 160ms;
}
/* The blur is mounted only while the menu is open — a hidden panel should not
   be holding a backdrop-filter layer on every page. */
.nav__has-menu:hover .nav__menu,

.nav__has-menu:hover .nav__menu,
.nav__has-menu:focus-within .nav__menu { opacity: 1; visibility: visible; }
.nav__menu a {
  display: block;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.2;
  color: var(--on-surface-secondary);
  text-decoration: none;
  transition: color 140ms ease, background 140ms ease;
}
/* Hover is a solid step to the component grey, not a translucent wash. */
.nav__menu a:hover,
.nav__menu a:focus-visible {
  color: var(--on-surface);
  background: var(--surface-raised);
}

/* A menu entry whose page is not written yet: the same line, set as plain
   text with a small "In progress" mark after it. It is deliberately not a
   link — nothing in the menu should open a page that has nothing on it. */
.nav__soon {
  display: block;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.2;
  color: var(--on-surface-secondary);
  /* Space Mono is uppercase everywhere, this line included. */
  text-transform: uppercase;
  cursor: default;
}
.nav__soon em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Six labels plus the Donate button: pull the gaps in before the bar wraps. */
@media (max-width: 1080px) {
  .nav__inner { gap: var(--sp-5); }
  .nav__links { gap: var(--sp-5); }
}
@media (max-width: 880px) {
  .nav__inner { gap: var(--sp-4); }
  .nav__links { gap: var(--sp-4); }
}
.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--on-surface);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.015em;
  cursor: pointer;
  color: var(--on-surface);
  transition: border-color 160ms ease;
}
.nav__toggle:hover,
.nav__toggle:active { border-color: var(--pop); }

/* ---------- Footer ---------- */
.footer {
  background: var(--inverse-surface);
  color: var(--on-inverse);
  padding-block: var(--sp-7);
  margin-top: 0;
}
.footer__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.045em;
  margin: 0 0 var(--sp-4);
}
.footer__brand::after { content: "."; color: var(--pop); }

/* ---------- Inputs ---------- */
.input {
  height: 48px;
  padding: 12px 16px;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-text);
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  width: 100%;
}
.input:focus { border-color: var(--focus); outline: none; }
.input::placeholder { color: #000000; }


/* ============================================================
   HOME
   ============================================================ */
/* Centered hero — headline, lede, and actions stacked in a narrow measure. */
/* ---------- Hero ----------
   The standard hero: a small mono kicker, then the headline in Space Mono
   BOLD, UPPERCASE — the display voice — left-aligned and run FULL-WIDTH at
   tight leading, followed by a hairline masthead row pairing the serif lede
   with a button or dateline. */
.hero { padding-block: var(--sp-8) var(--sp-8); text-align: left; }
/* The hero breaks out of the centred 1340px container to run the full width
   of the page, with only a little padding at each edge. */
.hero > .container {
  max-width: none;
  /* Inside the .fold flex column an auto inline-margin makes the container
     shrink to its content and centre — which insets heroes with a short
     title (e.g. Impact). Pin the margins to 0 so the hero always runs the
     full width, left-aligned, regardless of headline length. */
  margin-inline: 0;
  width: 100%;
  padding-inline: clamp(20px, 3vw, 48px);
}
.hero__kicker { margin: 0 0 var(--sp-5); }
/* The one statement on the page set in the BOLD cut of Space Mono, all caps. */
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(34px, 4.9vw, 80px);
  letter-spacing: -0.05em;
  line-height: 1.12;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: none;
  color: var(--forest);
}
/* Space Mono never italicises — an emphasised word stays upright. */
.hero__title em { font-style: normal; font-family: inherit; font-weight: inherit; }
.hero__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.hero__lede {
  font-family: var(--font-text);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--on-surface-secondary);
  max-width: 48ch;
  margin: 0;
}
.hero__meta {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #000000;
  white-space: nowrap;
}
.hero__cta { flex: none; }

/* ---------- First-fold wrapper ----------
   Wraps the hero + ticker + stat band so the three together fill the first
   screen (100vh minus the 72px nav). The hero grows to take the leftover
   space and centres its content; the ticker and stat band keep their natural
   height. */
.fold {
  min-height: calc(100svh - 72px);
  display: flex;
  flex-direction: column;
}
.fold .hero {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fold .marquee,
.fold > .band { flex: none; }


/* Big moss feature card */
.feature-card {
  border-radius: var(--r-lg);
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--sp-8) var(--sp-7);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-7);
  align-items: center;
  overflow: hidden;
}
.feature-card__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.045em;
  margin: 0 0 var(--sp-5);
}
.feature-card__body {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 var(--sp-6);
}
.feature-card .eyebrow { color: var(--on-accent); }
.feature-card .card-foot { margin-top: var(--sp-2); }


/* Centered mission statement — a serif lead line with italic emphasis. */
.statement-line {
  font-family: var(--font-h1);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0;
  max-width: none;
}
.statement-line em { font-family: inherit; font-style: normal; }


/* Mission / vision stacked panels */
.mv-panel {
  border-radius: var(--r-lg);
  padding: var(--sp-8) var(--sp-7);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-7);
  align-items: start;
}
.mv-panel + .mv-panel { margin-top: var(--sp-7); }
.mv-panel--mission { background: var(--forest); color: var(--on-forest); }
.mv-panel--mission .eyebrow { color: var(--on-forest); }
/* The vision panel is an ivory plate. --surface-raised is the container
   colour of the system (#F2F2F2): it reads as a card against the ground
   (#FEFEFE), never against a bone band, which is already that colour. */
.mv-panel--vision {
  background: var(--surface-raised);
  color: var(--on-surface);
}
/* The label is the same small mono tag every row on the site is opened
   with — the statement beside it carries all the weight. */
.mv-panel__label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.mv-panel .statement {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.045em;
  margin: 0;
}

/* ---------- Project index ------------------------------------------------
   The programme list read as an index rather than an article: a counting
   line and its filters open the set, one lead entry runs the full measure,
   and the rest fall into two columns beneath it. Every entry is a single
   photograph with its labels set on top of it — the category pills at the
   top corner, the project's short name on a pill at the foot — and one
   line of description under the plate. No panel, no shadow, no fill behind
   the words. */
.project-index {
  display: grid;
  /* Squarish plates on a grid, three across — not one full-width band per row.
     A column of wide bands reads as a list; a grid of equal plates reads as a
     set, which is what the work actually is. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* The plates sit close: a tight gutter reads as one set, and the wide gap
     was pushing the cards apart into separate objects again. */
  gap: var(--sp-3);
  align-items: stretch;
  margin-inline: 0;
}
/* The work entries are .work-card panels now — see the Work card block. */


/* Numbered value rows */
.value-row {
  display: grid;
  grid-template-columns: 96px 1fr 1.2fr;
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--border);
}
.value-row:first-of-type { border-top: 1px solid var(--border); }
.value-row .num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.025em;
  color: #000000;
  padding-top: 6px;
}
.value-row p { margin: 0; color: var(--on-surface); }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--sp-6);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--border);
}
.timeline li:first-child { border-top: 1px solid var(--border); }
.timeline .year {
  font-family: var(--font-mono);
  font-size: 20px;
  font-feature-settings: "tnum" on;
}
.timeline .year::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--pop);
  margin-right: var(--sp-3);
  vertical-align: 2px;
}
.timeline p { margin: 0; }
.timeline .milestone { font-family: var(--font-ui); font-weight: 500; font-size: 16px; margin-bottom: var(--sp-1); }

/* Team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.team-card { text-align: left; padding: var(--sp-6); }
.team-card .avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  margin-bottom: var(--sp-5);
}
.avatar--forest { background: var(--forest); color: var(--on-forest); }
.team-card .name { font-family: var(--font-ui); font-weight: 500; font-size: 16px; margin: 0 0 var(--sp-1); }
.team-card .role { color: #000000; }


/* Asymmetric stat mosaic */
.stat-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: var(--sp-5);
}
.stat-mosaic .mosaic-lead { grid-column: span 2; grid-row: span 2; }
.stat-cell { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-6); }
.stat-cell .stat-value { font-family: var(--font-mono); font-feature-settings: "tnum" on; font-variant-numeric: tabular-nums; line-height: 1; text-transform: uppercase; }
.mosaic-lead .stat-value { font-size: clamp(72px, 9vw, 128px); letter-spacing: 0; }
.stat-cell:not(.mosaic-lead) .stat-value { font-size: clamp(40px, 4.6vw, 56px); }
.stat-cell .stat-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; }
.stat-cell .stat-note { font-family: var(--font-text); font-size: 16px; line-height: 1.55; margin: 0; }
/* hairline between figure and footnote — reference-style inner divider */
.stat-cell .stat-note,
.aside-panel .stat-note {
  border-top: 1px solid var(--hairline);
  padding-top: var(--sp-4);
}
/* A full stop in ink after the figure — the mark that used to be a
   coloured dot. */
.stat-cell--mark .stat-value::after {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.18em;
  border-radius: var(--r-full);
  background: var(--pop);
}

/* Year-by-year ledger */
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li {
  display: grid;
  grid-template-columns: 120px 1fr 200px;
  gap: var(--sp-6);
  align-items: baseline;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--border);
}
.ledger li:first-child { border-top: 1px solid var(--border); }
.ledger .year { font-family: var(--font-mono); font-size: 18px; font-feature-settings: "tnum" on; }
.ledger .desc { margin: 0; color: var(--on-surface); font-size: 16px; }
.ledger .figure {
  font-family: var(--font-mono);
  font-size: 24px;
  font-feature-settings: "tnum" on;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.figure--clay { color: var(--clay); }


/* Wide alternating pathway rows */
.pathway {
  border-radius: var(--r-lg);
  padding: var(--sp-8) var(--sp-7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
.pathway + .pathway { margin-top: var(--sp-5); }
.pathway__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.045em;
  margin: var(--sp-4) 0 var(--sp-5);
}
.pathway p { margin: 0 0 var(--sp-6); }

/* Donation chips */
.chip-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }
/* The one-pager stacks a lede, then a grid, then the actions in a single
   band-grid column. .section-prose zeroes its last paragraph's margin, so
   whatever follows has to carry its own gap — without this the first row of
   hairlines lands on the last line of the lede. */
.band-grid__main > .section-prose + .chip-group,
.band-grid__main > .section-prose + .info-grid,
.band-grid__main > .section-prose + .spec-grid,
.band-grid__main > .section-prose + .project-index,
.band-grid__main > .section-prose + .follow-list { margin-top: var(--sp-7); }
.band-grid__main > .section-prose + .hero__actions,
.band-grid__main > .chip-group + .hero__actions,
.band-grid__main > .spec-grid + .hero__actions,
.band-grid__main > .info-grid + .hero__actions { margin-top: var(--sp-7); }
.chip {
  font-family: var(--font-mono);
  font-size: 16px;
  font-feature-settings: "tnum" on;
  padding: 12px 22px;
  border-radius: var(--r-sm);
  border: 1px solid var(--on-surface);
  background: var(--surface);
  color: var(--on-surface);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
/* Same button rule: ivory fill, green edge; the edge goes blue on hover and
   on the selected (indicated) chip — never a colour fill. */
.chip:hover,
.chip:active,
.chip[aria-pressed="true"] { border-color: var(--pop); }

.pathway__aside .aside-panel {
  border-radius: var(--r-lg);
  padding: var(--sp-7);
}
.aside-panel .stat { display: block; margin-bottom: var(--sp-3); }
.aside-panel .stat-note { font-family: var(--font-text); font-size: 16px; line-height: 1.55; margin: 0; }


/* Volunteer role list */
.role-list { list-style: none; margin: 0; padding: 0; }
/* The ::before dot is itself a flex item, so space-between was pushing the
   label into the middle of the row. The dot and the label group left; the tag
   is pushed right on its own. */
.role-list li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-ui);
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 500;
}
.role-list li .tag { margin-left: auto; flex: none; }
.role-list li:first-child { border-top: 1px solid var(--hairline); }
.role-list li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: var(--r-full);
  background: var(--pop);
  margin-right: var(--sp-3);
  vertical-align: 2px;
}
.role-list .tag { color: inherit; }

/* Newsletter */
.newsletter {
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  padding: var(--sp-8) var(--sp-7);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-7);
  align-items: center;
}
.newsletter form { display: flex; gap: var(--sp-3); }
.newsletter .input { flex: 1; }

/* ============================================================
   Animation initial states — only applied when JS runs
   (html.gsap gets set before paint; reduced-motion never hides)
   ============================================================ */
html.gsap [data-rise],
html.gsap [data-rise-group] > *,
html.gsap [data-hero] { opacity: 0; }
html.gsap [data-split-scroll] { visibility: hidden; }

.avatar { transition: transform 260ms cubic-bezier(0.34, 1.3, 0.64, 1); }
.team-card:hover .avatar { transform: scale(1.08) rotate(-6deg); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .feature-card,
  .newsletter,
  .pathway { grid-template-columns: 1fr; }
  .stat-mosaic { grid-template-columns: 1fr 1fr; }
  .stat-mosaic .mosaic-lead { grid-column: span 2; grid-row: auto; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .mv-panel { grid-template-columns: 1fr; gap: var(--sp-5); }
  .project-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .work-note { padding-top: 0; }
    .support-layout { grid-template-columns: 1fr; gap: var(--sp-7); }
  .support-media { width: 100%; aspect-ratio: 16 / 9; }
  .value-row { grid-template-columns: 64px 1fr; }
  .value-row p { grid-column: 2; }
  .ledger li { grid-template-columns: 90px 1fr auto; gap: var(--sp-4); }
}

@media (max-width: 720px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    /* The dropped panel is the same glass as the bar it hangs from. */
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-4) var(--sp-6) var(--sp-6);
    display: none;
  }
  .nav__links.is-open {
    display: flex;
    background: var(--surface);
  }
  .nav__links li { width: 100%; }
  .nav__links a { display: block; padding: var(--sp-4) 0; }
  .nav__links .nav__parent { display: block; padding: var(--sp-4) 0 var(--sp-2); }
  .nav__parent::after { display: none; }
  /* No hover on touch — the submenu just sits open, indented under About. */
  .nav__menu {
    position: static;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    padding: 0 0 var(--sp-3) var(--sp-5);
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .nav__menu a { padding: 10px 0; }
  .nav__caret, .nav__has-menu::after { display: none; }
  .nav__cta { display: none; }
  .section { padding-block: var(--sp-8); }
  .stat-mosaic { grid-template-columns: 1fr; }
  .stat-mosaic .mosaic-lead { grid-column: auto; }
  .team-grid { grid-template-columns: 1fr; }
  .newsletter form { flex-direction: column; }
  .card { padding: var(--sp-6); }
  .feature-card, .mv-panel, .pathway, .newsletter { padding: var(--sp-6); }
}

@media (max-width: 600px) {
  .card-foot { flex-wrap: wrap; }
  .nav__brand-logo { height: 38px; }
}

/* ============================================================
   THE CARTON ATLAS — ivory feature card + Seoul gu map
   Ink/paper/warm-gray map; the moss accent and clay reserved for the
   live-campaign markers and the located dong.
   ============================================================ */

/* Ivory variant of the big feature card */
.feature-card--atlas {
  background: var(--surface-raised);
  color: var(--on-surface);
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
}
.feature-card--atlas .eyebrow { color: var(--on-surface-secondary); }
.feature-card--atlas .feature-card__body { color: var(--on-surface); }

/* Map well */
.atlas-map {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 823;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: crosshair;
}
.atlas-map__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Gu polygons — warm-gray tiles with paper hairlines between */
.atlas-gu {
  fill: var(--surface-sunken);
  stroke: var(--surface);
  stroke-width: 1.4;
  transition: fill 260ms ease;
}
.atlas-map__base .atlas-gu:hover { fill: var(--border); }
/* while inspecting a live gu, the rest of the city recedes */
.atlas-map.is-inspecting .atlas-map__base .atlas-gu { fill: var(--surface-raised); }

/* Live campaign gus — ink, flipping to the moss accent on hover/focus
   (ink-on-ink would be no change at all, and moss is the system's one
   interaction colour) */
.atlas-gu--site {
  fill: var(--primary);
  cursor: pointer;
  outline: none;
  transition: fill 260ms ease;
}
.atlas-gu--site.is-hover,
.atlas-gu--site:focus-visible { fill: var(--accent); }
/* an opened gu stays ink so the ivory dong shape reads against it */
.atlas-gu--site.is-open,
.atlas-gu--site.is-open.is-hover,
.atlas-gu--site.is-open:focus-visible { fill: var(--primary); }

/* Located dong inside an opened gu */
.atlas-dong-detail__shape {
  fill: var(--surface);
  stroke: var(--on-surface);
  stroke-width: 1;
}
.atlas-dong-detail__leader {
  fill: none;
  stroke: var(--on-primary);
  stroke-width: 0.8;
  opacity: 0.85;
}
.atlas-dong-detail__label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.045em;
  fill: var(--on-primary);
}

/* Site markers: clay core, expanding clay ring, gu label */
.atlas-marker { transition: opacity 300ms ease; }
.atlas-marker.is-dimmed { opacity: 0 !important; }
.atlas-marker__ring {
  fill: none;
  stroke: var(--clay);
  stroke-width: 1.5;
}
.atlas-marker__core { fill: var(--clay); }
/* gu name in ink, placed just outside its shape */
.atlas-marker__label {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.045em;
  fill: var(--on-surface);
}

/* Back control while zoomed into a gu */
.atlas-back {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 8px 14px;
  background: var(--surface);
  color: var(--on-surface);
  border: 1px solid var(--on-surface);
  border-radius: var(--r-sm);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, visibility 250ms ease, background-color 200ms ease;
}
.atlas-back.is-visible {
  opacity: 1;
  visibility: visible;
}
.atlas-back:hover { background: var(--surface-sunken); }

/* Info card — ivory panel, mono, all caps, black corner brackets */
.atlas-card {
  position: absolute;
  z-index: 3;
  width: 252px;
  padding: 18px 20px 14px;
  background: var(--surface);
  color: var(--on-surface);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.atlas-card.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease;
}
.atlas-card__corner {
  position: absolute;
  width: 11px;
  height: 11px;
  pointer-events: none;
}
.atlas-card__corner--tl {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--on-surface);
  border-left: 2px solid var(--on-surface);
}
.atlas-card__corner--br {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--on-surface);
  border-right: 2px solid var(--on-surface);
}
.atlas-card__status {
  margin: 0 0 10px;
  font-size: 9px;
  letter-spacing: 0.07em;
  color: var(--on-surface-secondary);
}
.atlas-card__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--clay);
  margin-right: 8px;
  vertical-align: 1px;
  animation: dot-pulse 1.6s ease-in-out infinite;
}
.atlas-card__name {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.atlas-card__gu {
  margin: 2px 0 12px;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: #000000;
}
.atlas-card__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.atlas-card__rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 16%, transparent);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: var(--on-surface-secondary);
}
.atlas-card__value {
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--on-surface);
  font-feature-settings: "tnum" on;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 960px) {
  .feature-card--atlas { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .atlas-card { width: 212px; padding: 14px 16px 12px; }
  .atlas-card__name { font-size: 15px; }
  /* SVG text scales with the map, so bump viewBox-unit sizes on small screens */
  .atlas-marker__label { font-size: 20px; }
  .atlas-dong-detail__label { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-card__dot { animation: none; }
}

/* Screen-reader-only text */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   EVENTS — featured panel + list (home) and the detail page
   ============================================================ */

/* Featured upcoming event — compact, text-only cream panel.
   Deliberately narrower than the container so whitespace frames it. */
.event-feature {
  max-width: 620px;
  background: var(--cream);
  color: var(--on-cream);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
  margin-bottom: var(--sp-8);
}
.event-feature__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-surface-secondary);
  margin: 0 0 var(--sp-4);
}
.event-feature__meta {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--on-surface-secondary);
  margin: 0 0 var(--sp-4);
}
.event-feature__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.045em;
  margin: 0 0 var(--sp-4);
  max-width: 16ch;
}
.event-feature__blurb {
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 var(--sp-6);
  max-width: 46ch;
}
.event-art__svg { width: min(100%, 300px); height: auto; }

/* Event list — clean rows in the field-notes register */
.event-list { list-style: none; margin: 0; padding: 0; }
.event-list li { border-bottom: 1px solid var(--border); }
.event-list li:first-child { border-top: 1px solid var(--border); }
.event-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) 132px 116px 20px;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  text-decoration: none;
  color: inherit;
}
.event-row__title {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 160ms ease;
}
.event-row__loc,
.event-row__cat,
.event-row__date {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-row__cat { text-transform: uppercase; letter-spacing: 0.035em; font-size: 12px; }
.event-row__date { text-align: right; color: var(--on-surface-secondary); }
.event-row__arrow {
  font-family: var(--font-ui);
  color: var(--pop);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  text-align: right;
}
.event-row:hover .event-row__title { color: var(--accent); }
.event-row:hover .event-row__arrow { opacity: 1; transform: translateX(0); }

/* ---------- Event detail page ---------- */
.event-crumb {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: #000000;
  margin: 0 0 var(--sp-6);
}
.event-crumb a { color: var(--on-surface); text-decoration: none; }
.event-crumb a:hover { color: var(--accent); }
.event-crumb__sep { margin: 0 var(--sp-3); }

.event-hero { padding-block: var(--sp-7) var(--sp-8); }
.event-hero__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--sp-8);
  align-items: center;
}
.event-hero__art {
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-7);
}
.event-hero__art .event-art__svg { width: min(72%, 260px); }
.event-hero__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.8vw, 58px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.045em;
  margin: 0 0 var(--sp-4);
}
.event-hero__loc {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--on-surface-secondary);
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.event-hero__desc {
  font-family: var(--font-text);
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.55;
  margin: 0 0 var(--sp-6);
  max-width: 36ch;
}

/* Article body — long-form document: image figures interleaved with paragraph
   blocks, all hung off the left gutter, uniform vertical rhythm. */
.event-article { padding-block: var(--sp-7) var(--sp-9); }
.event-article > .container > * + * { margin-top: var(--sp-9); }
.event-figure {
  max-width: 860px;
  margin-inline: 0;
  border-radius: var(--r-lg);
  aspect-ratio: 16 / 10;
  max-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-figure .event-art__svg { width: min(46%, 340px); }
/* The article column is a measure, not a centred page: it starts on the same
   left gutter as every other block on the site. */
.event-doc { max-width: 720px; margin-inline: 0; }
.event-doc .lede {
  font-family: var(--font-text);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  margin: 0 0 var(--sp-6);
}
.event-doc p {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 var(--sp-5);
}
.event-doc p:last-child { margin-bottom: 0; }

/* Detail-page accent panels (hero illustration + article figures) */
.event-detail[data-accent="sage"]  .event-hero__art,
.event-detail[data-accent="sage"]  .event-figure { background: var(--sage);     color: var(--on-sage); }
.event-detail[data-accent="forest"] .event-hero__art,
.event-detail[data-accent="forest"] .event-figure { background: var(--forest);    color: var(--on-forest); }
.event-detail[data-accent="cream"]  .event-hero__art,
.event-detail[data-accent="cream"]  .event-figure { background: var(--cream);     color: var(--on-cream); }

@media (max-width: 860px) {
  .event-feature { max-width: 100%; }
  .event-art__svg { width: min(58%, 220px); }
  .event-hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .event-hero__art { aspect-ratio: 16 / 9; }
  .event-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-3) var(--sp-4);
    padding: var(--sp-4) 0;
  }
  .event-row__loc { display: none; }
  .event-row__cat { grid-row: 2; grid-column: 1; }
  .event-row__date { grid-row: 1; grid-column: 2; }
  .event-row__arrow { display: none; }
}

/* ============================================================
   BAND SYSTEM
   Full-bleed colour fields with organic arched edges — the
   structural spine every page is now assembled from. Sections
   stack as alternating tonal fields (paper → bone → sage →
   ink → sage) rather than as cards floating on ivory.
   ============================================================ */
.band {
  position: relative;
  /* A clear band of empty ground at the top and bottom of every section,
     so two colour fields never crowd each other. */
  /* Air is the main material here: a band breathes wider than its content,
     so sections read as separate held moments rather than a stack. */
  padding-block: var(--section-y);
  background: var(--surface);
  color: var(--on-surface);
}
.band--paper      { background: var(--surface);         color: var(--on-surface); }
.band--bone       { background: var(--surface-raised);  color: var(--on-surface); }
/* Both dark bands are the one forest #2c4733 — the deep footer green is never
   a section ground. */
.band--ink        { background: var(--forest);          color: var(--on-forest); }
.band--deep       { background: var(--forest);          color: var(--on-forest); }
/* Three steps of one rhythm: tight, standard (above), roomy. */
.band--tight      { padding-block: calc(var(--section-y) * 0.6); }
.band--roomy      { padding-block: calc(var(--section-y) * 1.3); }

/* Inside a coloured band, chrome takes the band's own on-colour —
   never the page-default secondary grey. */
.band:not(.band--paper) .eyebrow,
.band:not(.band--paper) .text-secondary,
.band:not(.band--paper) .link { color: inherit; }
.band:not(.band--paper) .timeline li,
.band:not(.band--paper) .ledger li,
.band:not(.band--paper) .value-row,
.band:not(.band--paper) .event-list li { border-color: var(--hairline); }

/* ---------- Display type on a green or black ground ----------
   Large type takes the secondary green rather than ivory, so a dark band
   reads tone-on-tone instead of as high-contrast reversed text. Only the
   big voices are listed here: eyebrows, captions and reading copy on the
   same grounds keep the band's ivory --on- colour, which they need to stay
   legible at small sizes. */
.band--ink .display,   .band--deep .display,
.band--ink .h1,        .band--deep .h1,
.band--ink .h2,        .band--deep .h2,
.band--ink .h3,        .band--deep .h3,
.band--ink .stat,      .band--deep .stat,
.band--ink .stat-value, .band--deep .stat-value,
.band--ink .statement-line, .band--deep .statement-line,
.band--ink .image-hero__title,   .band--deep .image-hero__title,
.band--ink .contact-band__title, .band--deep .contact-band__title,
.card--forest .stat-value {
  color: var(--green-type);
}

/* ---------- Centred block ----------
   The page's biggest moments stack on the centre line: eyebrow, a short
   display sentence, a glyph, and a line of detail. Everything else on the
   site still runs left-aligned — this is the exception, reserved for a
   statement band or a closing panel. */
/* Everything on the page aligns to one left edge. Centred blocks were the
   only thing breaking that, so they align left like the rest. */
.center-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--sp-5);
}
.center-block .eyebrow { margin: 0; }
/* The centred statement runs the full width of the section — each line
   extends to the page edge before it wraps (no balanced/narrow measure). */
.center-block .section-title { text-align: left; max-width: 24ch; }
.center-block .statement-line {
  max-width: 22ch;
  width: 100%;
  text-align: left;
}
/* A small filled disc with a mark in it — the divider between the statement
   and its detail line. It is a shape, not a rule: nothing on this site draws
   a horizontal line across a band. */
.glyph-rule {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: var(--r-full);
  /* A plain cyan disc on every ground — nothing is set inside it. */
  background: var(--pop);
}
/* Detail line under the glyph — mono, upright. Space Mono has no italic
   cut and is never slanted, skewed, or obliqued to fake one. */
.center-block__meta {
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}
.band--ink .center-block__meta,
.band--deep .center-block__meta { color: var(--green-type); }

/* Centered band header — eyebrow, title, optional link */
.band-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.band-head .eyebrow { margin: 0; }
.band-head .h2 { max-width: none; }
.band-head p {
  max-width: 62ch;
  margin: 0;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--on-surface-secondary);
}
.band--ink .band-head p, .band--deep .band-head p { color: inherit; }

/* ---------- Marquee ticker ----------
   A rotated, full-bleed running headline — the loud punctuation
   between two calm fields. */
/* The slim ticker — 12px mono on a hairline band. Its ground is the green a
   half-step lighter than --forest, with the secondary green type on it; the
   design is unchanged, only the colour. */
.marquee {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--forest) 84%, var(--sage));
  color: var(--green-type);
  padding-block: var(--sp-4);
  margin-block: 0;
  border-block: 1px solid color-mix(in srgb, var(--green-type) 26%, transparent);
}
/* The tape rides directly on the stats band below it — drop the seam so the
   two greens read as one block with a moving strip along its top edge. */
.marquee--tape { border-bottom: 0; }
.marquee__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marquee-slide 60s linear infinite;
  /* Promoted once, so the loop is a compositor transform rather than a repaint
     of a strip two viewports wide. */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* Each group must be at least a viewport wide, or the -50% loop exposes
   a gap on large screens; space-around keeps the seam evenly spaced. */
.marquee__group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--sp-6);
  min-width: 100vw;
}
.marquee__item {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__sep {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--pop);
}
@keyframes marquee-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---------- Big centred stat row (on a colour band) ---------- */
/* Four figures read as a data row, not as centred trophies: each column is
   opened by its own hairline and set flush left, so the eye runs across the
   band the same way it runs down a list of rows. */
.band-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6) var(--sp-5);
  text-align: left;
}
.band-stats > * {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
}
.band-stats .stat-value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(46px, 6vw, 84px);
  line-height: 1;
  letter-spacing: 0;
  font-feature-settings: "tnum" on;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-4);
}
.band-stats .caption {
  display: block;
  max-width: 22ch;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* ---------- Closing contact band ---------- */
.contact-band__title {
  text-align: left;
  /* A measure narrow enough to break over three lines and stand as its own
     block, but not so narrow it reads as a column. */
  max-width: 24ch;
  margin: 0 0 var(--sp-7);
}
.contact-form { display: flex; gap: var(--sp-3); max-width: 480px; }
.contact-form .input { flex: 1; }


@media (max-width: 860px) {
  .band-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
}
@media (max-width: 600px) {
  .contact-form { flex-direction: column; }
}


/* ============================================================
   MINIMAL CHROME
   The site carries very little copy, so the footer and the
   closing contact block collapse to a single line / column.
   ============================================================ */
/* The footer is a set of labelled columns — brand first, then the site
   grouped the way the nav groups it, then the ways to reach us. Each
   column runs vertically so a link list is read down, not across. */
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
  gap: var(--sp-7) var(--sp-5);
  align-items: start;
}
.footer__grid .footer__brand { margin: 0 0 var(--sp-3); font-size: 22px; }
.footer__note {
  margin: 0;
  max-width: 26ch;
  font-size: 14px;
  line-height: 1.5;
}
.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
/* Same rule in the footer: the unfinished pages are listed, so the reader can
   see what is coming, but they are text rather than links. */
.footer__soon {
  display: block;
  cursor: default;
}
.footer__soon em {
  font-style: normal;
}
.footer__soon em::before { content: "\00a0/\00a0"; }
/* Every fact in the footer is labelled — a reader should never have to
   guess whether a line is an address, a contact or a copyright. */
.footer__meta {
  width: 100%;
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(244, 243, 238, 0.14);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-5);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.035em;
}
.footer__meta-item { display: flex; flex-direction: column; gap: 2px; }
.footer__meta dt {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.footer__meta dd { margin: 0; }
.footer__nav-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-2);
}

/* Closing contact block — the ask on the left, a small plate tucked into
   the empty corner on the right. The text column starts at the top of the
   row: bottom-aligning it against the taller photo opened a hole between
   the headline and its paragraph. */
.support-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-8);
  align-items: start;
}
.support-media {
  /* Sized so the plate and the text column finish at roughly the same
     depth — no empty band under either. */
  width: clamp(360px, 46vw, 620px);
  aspect-ratio: 4 / 5;
  margin: 0;
  border-radius: var(--r-md);
}
.contact-simple { max-width: 620px; margin-inline: 0; text-align: left; }
/* Reads as one paragraph-and-button pair sitting under the headline. */
.contact-simple p { margin: 0 0 var(--sp-5); }
.contact-simple .contact-form { margin-inline: 0; }

/* Stat/figure blocks with no supporting prose */
.band-stats .stat-label,
.stat-cell .stat-label { }
.figure-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
}
.figure-row:first-child { border-top: 1px solid var(--border); }
.figure-row .year { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.025em; }
.figure-row .figure {
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.4vw, 28px);
  font-feature-settings: "tnum" on;
  font-variant-numeric: tabular-nums;
}


/* ---------- Minimal label row ----------
   The "Partners" pattern, generalised: a tiny mono eyebrow over a
   single row of outlined plates. Used wherever a section only needs
   to name things, not explain them. */
.label-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.label-row__item {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.label-row__item--mark { background: var(--pop); border-color: var(--pop); color: var(--forest); }
.band:not(.band--paper) .label-row__item { border-color: var(--hairline); }
/* On a dark band the ink plate would vanish, so the mark inverts to paper. */
.band:not(.band--paper) .label-row__item--mark { background: var(--surface); border-color: var(--surface); color: var(--on-surface); }


/* ============================================================
   IMAGE SECTIONS
   Big photography paired with a header. Text never sits on top of a
   photo — the image and the words are always separate blocks — and
   every frame carries a soft 12px corner (the full-bleed hero is the one
   exception, and stays square). Drop a real photo in by adding
     <img class="image-frame__img" src="..." alt="...">
   inside the .image-frame; the placeholder hides itself.
   ============================================================ */

/* <figure class="image-block"> wraps the media box; .image-frame clips to
   its aspect box, so nothing but the photo may live inside it. */
.image-block { margin: 0; }

.image-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  /* A softened corner — enough to take the hard edge off the photo
     without letting it read as a UI card. */
  border-radius: var(--r-img);
  background: var(--surface-sunken);
}
/* --fit: the frame takes the photograph's OWN shape instead of a ratio, so
   nothing is cropped — the whole picture is on the page. Use it wherever the
   subject runs to the edges of the shot and a crop would cut people out. */
.image-frame--fit { aspect-ratio: auto; background: none; }
.image-frame--fit .image-frame__img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.image-frame--tall   { aspect-ratio: 4 / 5; }
.image-frame--square { aspect-ratio: 1 / 1; }
.image-frame--photo  { aspect-ratio: 4 / 3; }
/* The wide plate under the hero and in the closing band — inset in the
   container with the page's own padding, never full bleed. */
.image-frame--hero { aspect-ratio: 21 / 9; border-radius: var(--r-img); }
/* The plate sits straight under the hero — the hero's own bottom padding is
   the only gap, so no empty band of paper opens up above the photograph. */
.hero-media { padding-block: 0 var(--sp-9); }

.image-frame__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Pull photography toward the site's muted register so it sits with
     the palette instead of shouting over it. */
  filter: saturate(0.82) contrast(1.03);
}

/* No fade at the bottom edge: a photograph ends where its frame ends. The
   only thing tying it to the page is the muted filter above. */

/* Placeholder — visible only until a real <img> is added */
.image-frame__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #000000;
  background:
    repeating-linear-gradient(45deg,
      transparent 0 14px,
      color-mix(in srgb, var(--on-surface) 4%, transparent) 14px 28px),
    var(--surface-sunken);
}
.image-frame:has(.image-frame__img) .image-frame__ph { display: none; }

/* Photographs carry no caption line — the picture stands on its own and the
   surrounding copy does the naming. */

/* --- 1. Image hero: full-bleed photo, headline in its own block beneath --- */
.image-hero { padding: 0; }
.image-hero .image-frame {
  aspect-ratio: 21 / 9;
  /* The hero photo runs edge to edge, and a radius on a full-bleed element
     just clips the screen corners — this one stays square. */
  border-radius: 0;
  background: var(--forest);
}
.image-hero .image-frame__ph { color: var(--on-forest); opacity: 0.45; background: none; }
.image-hero__inner {
  padding-block: var(--sp-7) var(--sp-9);
  color: var(--on-inverse);
}
.image-hero__title {
  font-family: var(--font-h1);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0;
  /* runs long before it wraps — the lines are meant to be full */
  max-width: 26ch;
}
.image-hero__title em { font-family: inherit; font-style: normal; }
.image-hero__sub {
  margin: var(--sp-5) 0 0;
  max-width: 54ch;
  font-size: 16px;
}
.image-hero .eyebrow { color: inherit; margin-bottom: var(--sp-4); }

/* --- 2b. Flush split: text column on the container grid, photo bleeding
   off the band's outer edge. The photo is the only element on the site
   allowed to touch the viewport edge, and on that side its corner goes
   square — a radius against the screen edge just clips the corner. --- */
.split-flush {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding-block: 0;
  gap: 0;
}
.split-flush__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sp-9);
  /* left gutter lines up with .container (max-width 1340, sp-6 padding) */
  padding-inline: max(var(--sp-6), calc((100vw - 1340px) / 2 + var(--sp-6))) var(--sp-8);
}
.split-flush__text .h2 { max-width: 16ch; }
.split-flush__text p {
  margin: var(--sp-5) 0 0;
  max-width: 42ch;
  font-size: 16px;
}
.split-flush__media { margin: 0; }
.split-flush__media .image-frame {
  height: 100%;
  aspect-ratio: auto;
  min-height: 420px;
  /* Square on all four corners: the photo bleeds off the band edge and
     sits flush against the text column, so a radius here would only cut
     notches into an otherwise clean rectangle. */
  border-radius: 0;
}

/* --- 3. Image duo: two frames, captioned --- */
.image-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}

/* --- 4. Evidence gallery ----------------------------------------------
   A six-column track so frames can take different widths as well as
   different heights: a wide plate beside a narrow upright, then the pair
   reversed, then two equal mid-size frames. Nothing runs the full width,
   so no single photo dominates the section. */
.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* A fixed row height is what keeps the bottoms of a row dead level: the
     frames differ in WIDTH, never in height, so nothing hangs below its
     neighbour. Aspect ratios are deliberately not used here. */
  grid-auto-rows: clamp(280px, 33vw, 520px);
  gap: clamp(16px, 1.6vw, 26px);
  align-items: stretch;
}
.gallery__item { margin: 0; height: 100%; }
.gallery__item > .image-frame { height: 100%; aspect-ratio: auto; }
.gallery__item--w2 { grid-column: span 2; }
.gallery__item--w3 { grid-column: span 3; }
.gallery__item--w4 { grid-column: span 4; }
/* A full-bleed row inside the grid — the opener, as on the reference. */
.gallery__item--w6 { grid-column: span 6; }
/* A full-width plate wants a shallower row than the 2-up and 3-up ones. */
.gallery__item--w6 > .image-frame { min-height: 0; }
.gallery--lead { grid-auto-rows: auto; }
.gallery--lead .gallery__item--w6 > .image-frame { aspect-ratio: 21 / 9; height: auto; }
/* The homepage pair is portrait — the collection photographs are shot
   vertical, and a 4:3 frame cropped the top and bottom off them. */
.gallery--lead .gallery__item--w3 > .image-frame { aspect-ratio: 3 / 4; height: auto; }
.gallery--lead .gallery__item--w2 > .image-frame { aspect-ratio: 3 / 4; height: auto; }
@media (max-width: 720px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery__item--w6, .gallery__item--w4, .gallery__item--w3 { grid-column: span 2; }
}

@media (max-width: 860px) {
  /* One column: the photo always follows its paragraph, whichever side it
     sat on at desktop width. */
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .footer__col--brand { grid-column: 1 / -1; }
  /* The year sits above its own list rather than beside it, and stops
     pinning — there is no room for a side column. */
  .year-group { grid-template-columns: 1fr; gap: var(--sp-5); }
  .year-group__year { position: static; }
  .hero__split { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero--split .hero__title { max-width: none; }
  .alt-row { grid-template-columns: 1fr; gap: var(--sp-6); }
  .info-grid, .info-grid--two { grid-template-columns: 1fr; }
  .figure-panel { grid-template-columns: 1fr; gap: var(--sp-6); }
  .rate-row { grid-template-columns: 11ch minmax(0, 1fr) 5ch; gap: var(--sp-3); }
  .alt-row__media { max-width: 380px; }
  .alt-row + .alt-row { margin-top: var(--sp-7); }
  .alt-row__media .image-frame--tall { aspect-ratio: 4 / 3; }
  .split-flush { grid-template-columns: 1fr; }
  .split-flush__text {
    order: 0;
    padding-inline: var(--sp-6);
    padding-block: var(--sp-8) var(--sp-6);
  }
  .split-flush__media .image-frame {
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-radius: 0;
  }
  .image-duo { grid-template-columns: 1fr; }
  /* Two per row on tablet: w4/w2 both become half, w3 stays half. */
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery__item--w2,
  .gallery__item--w3,
  .gallery__item--w4 { grid-column: span 1; }
  .image-frame--hero { aspect-ratio: 16 / 9; }
  .image-hero .image-frame { aspect-ratio: 4 / 3; }
}

/* ---------- Section prose ----------
   The one place the site runs more than a line of copy: the What We Do
   argument (need → solution → partnership). Reading size, held
   to a single measure so a paragraph never spans the full-bleed band. */
.section-prose { max-width: 66ch; }
.section-prose p {
  margin: 0 0 var(--sp-5);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--on-surface-secondary);
}
.section-prose p:last-child { margin-bottom: 0; }
/* On a coloured ground the secondary grey goes muddy — inherit instead. */
.band:not(.band--paper):not(.band--bone) .section-prose p { color: inherit; }

/* ---------- Split hero ----------
   A coloured masthead: the page name set big and bold on the left, its
   one paragraph of reading copy on the right, sharing a baseline band. */
.hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.hero--split { padding-block: var(--section-y); }
.hero--split .hero__title {
  max-width: 12ch;
  font-size: clamp(36px, 4.7vw, 76px);
  line-height: 1.0;
}
/* On the green ground the forest headline would disappear — the dark-band
   display colour takes over, and the lede drops its page-grey. */
.band--ink .hero__title { color: var(--green-type); }
.hero--split .hero__lede {
  max-width: 56ch;
  color: inherit;
  /* optically aligns the first line of copy with the cap height */
  margin-top: 0.35em;
}

/* ---------- Alternating text / image rows ----------
   The What We Do argument, read as a column of paired rows: a heading and
   its paragraph on one side, a photograph on the other, the sides swapping
   every row. No band colour changes between rows — the ivory ground runs
   the whole way and the alternation does the pacing. */
.alt-row {
  display: grid;
  /* One measure for the words, one fixed plate for the photograph — the
     same two widths on every row, so the columns line up down the page. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  /* Each row opens on a hairline: the rows read as a set, not as three
     loose blocks. */
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.alt-row + .alt-row { margin-top: var(--sp-9); }
/* No mirrored row: see the note on .band-split. Every row runs words left,
   picture right, so the titles all start on the same vertical. */
/* Every plate is the same upright frame. */
.alt-row__media { margin: 0; }
.alt-row__media .image-frame { aspect-ratio: 4 / 5; }

/* The section label: bold Space Mono with the pop tick, used for every
   section title on the about pages — inside an alt-row or standing on its
   own above a list. */
.alt-row__title,
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(28px, 3.4vw, 51px);
  line-height: 1.04;
  letter-spacing: -0.05em;
  letter-spacing: -0.035em;
  margin: 0 0 var(--sp-4);
  max-width: 22ch;
}
/* The same pop tick that marks the mission and every eyebrow, scaled to
   the heading — a section title is a section label. */

/* ---------- Year groups ----------
   The milestone record, read down: one big year in the left column and
   everything that happened in it listed beside it. The year stays pinned
   while its own entries scroll past, so a reader always knows which year
   they are inside. */
.year-group {
  display: grid;
  grid-template-columns: clamp(120px, 16vw, 220px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.year-group + .year-group { margin-top: var(--sp-7); }
.year-group__year {
  position: sticky;
  top: 96px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, 62px);
  line-height: 1;
  letter-spacing: -0.045em;
  font-feature-settings: "tnum" on;
  font-variant-numeric: tabular-nums;
  color: var(--on-surface-secondary);
}
.year-group__list { list-style: none; margin: 0; padding: 0; }
.year-group__list li {
  display: grid;
  /* tick · the record · slack · the photograph · slack. Equal slack on
     both sides floats every photograph in the middle of the space left
     over beside its record — neither tucked against the text nor pushed
     out to the page edge. */
  grid-template-columns: 14px minmax(0, 42ch) minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--border);
}
.year-group__list li:first-child { padding-top: 0; }
/* The same pop tick that marks every section label, here as the entry mark. */
.year-group__list li::before {
  content: "";
  grid-column: 1;
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--pop);
  transform: translateY(-2px);
}
.year-group__shot {
  grid-column: 4;
  grid-row: 1 / -1;
  margin: 0;
  width: clamp(160px, 18vw, 240px);
}
.year-group__shot .image-frame { aspect-ratio: 4 / 3; border-radius: var(--r-img); }
.year-group .milestone {
  grid-column: 2;
  margin: 0;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.5;
}
.band:not(.band--paper) .year-group,
.band:not(.band--paper) .year-group__list li { border-color: var(--hairline); }

/* ============================================================
   PANELS & INFO CARDS
   The quiet card system: a bone band as the ground, ivory panels sitting
   on it. Every figure, chart and diagram lives inside a panel so a
   visual always reads as a placed object rather than loose ink on the
   page. Flat, as everything here is — the ground shift is the depth.
   ============================================================ */
.panel {
  background: var(--surface);
  /* A defined edge, not a shadow: the panel is a crisp object on the ground
     the way a card in a product interface is, and depth still comes only
     from the ground shift. */
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.2vw, 36px);
}
.band--ink .panel,
.band--deep .panel { border-color: transparent; }
/* On the ivory page the card steps the other way, to bone. */
.band--paper .panel { background: var(--surface-raised); }
/* On a dark band the panel lifts to the light ground and takes ink back. */
.band--ink .panel,
.band--deep .panel { background: var(--surface); color: var(--on-surface); }
.panel--tight { padding: clamp(20px, 2vw, 28px); }

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
.info-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* A figure and its one-line reading, side by side inside a panel. */
.figure-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 240px); gap: clamp(28px, 4vw, 64px); align-items: center; }
.figure-panel__read { display: flex; flex-direction: column; gap: var(--sp-3); }
.figure-panel__stat {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-feature-settings: "tnum" on;
  color: var(--forest);
}
.figure-panel__note { margin: 0; font-size: 15px; line-height: 1.6; color: var(--on-surface-secondary); max-width: 30ch; }

/* ============================================================
   DIAGRAMS
   Flat, ink-on-ivory figures — a bar comparison, a cycle ring, and the
   carton line-drawing. All are inline SVG/CSS: no libraries, no fills
   outside the green ramp, and every value is labelled in type so the
   figure never depends on colour alone.
   ============================================================ */
.diagram { margin: 0; }
.diagram__caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000000;
  margin: var(--sp-4) 0 0;
}
.band--ink .diagram__caption, .band--deep .diagram__caption { color: inherit; }

/* --- Bar comparison: one hue, magnitude only, direct labels --- */
.rate-chart { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 620px; }
/* Inside a figure panel the chart fills its column. */
.figure-panel .rate-chart { max-width: none; }
.rate-row { display: grid; grid-template-columns: 13ch minmax(0, 1fr) 5ch; gap: var(--sp-4); align-items: center; }
.rate-row__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.rate-row__track { display: block; width: 100%; height: 14px; background: var(--surface-sunken); border-radius: 4px; overflow: hidden; }
.rate-row__fill { display: block; height: 100%; border-radius: 4px; background: var(--border); }
/* The outlier takes the full-strength ink; the reference bars step back. */
.rate-row--mark .rate-row__fill { background: var(--pop); }
.rate-row__value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-feature-settings: "tnum" on;
  text-align: right;
}
.rate-row--mark .rate-row__value { font-weight: 700; color: var(--pop); }

/* On ivory the ramp runs dark to light; on a forest band it inverts, so the
   first segment never disappears into the ground behind it. */
/* Only the dark grounds flip the figure's type — bone is still paper. */
/* ---------- Path list ----------
   A numbered sequence read down the page: the six steps a collected
   carton passes through. Mono number in its own column, the step and one
   line of explanation beside it, hairline between rows. */
.path-list { list-style: none; margin: 0; padding: 0; }
.path-list li {
  display: grid;
  grid-template-columns: 3.5ch minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-3) 0;
  /* A rule OVER every item, not under. The list becomes a 2- and 3-column grid
     at wider viewports, so a bottom rule plus a top rule on :first-child left
     items 2 and 3 of each row with no line above them. Every item is opened
     the same way now — the same treatment as .flow__step. */
  border-top: 1px solid var(--border);
}
.path-list__n {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  font-feature-settings: "tnum" on;
  color: #000000;
}
.path-list__title {
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-2);
}
.path-list__note {
  margin: 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--on-surface-secondary);
}
.band:not(.band--paper) .path-list li { border-top-color: var(--hairline); }

/* ---------- Follow list ----------
   The closing "Follow us" block: a headline on one side, a stack of
   destinations on the other. Each row is a full-width hairline rule with a
   small mono label, the destination, and an arrow that steps right on
   hover. No cards, no icons — the rules do all the structure. */
.follow-list { list-style: none; margin: 0; padding: 0; }
.follow-list li { border-bottom: 1px solid var(--border); }
.follow-list li:first-child { border-top: 1px solid var(--border); }
.band:not(.band--paper) .follow-list li { border-color: var(--hairline); }
.follow-list a {
  display: grid;
  grid-template-columns: 11ch minmax(0, 1fr) 2ch;
  gap: var(--sp-4);
  align-items: baseline;
  padding: clamp(18px, 2vw, 26px) 0;
  color: inherit;
  text-decoration: none;
}
.follow-list__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000000;
}
.follow-list__value {
  font-family: var(--font-mono);
  /* Sized so a full email address fits its column on one line instead of
     breaking a letter short of the end. */
  font-size: clamp(16px, 1.5vw, 22px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.follow-list__arrow {
  font-family: var(--font-mono);
  justify-self: end;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
}
.follow-list a:hover .follow-list__arrow,
.follow-list a:focus-visible .follow-list__arrow { transform: translateX(4px); opacity: 1; }
@media (max-width: 720px) {
  .follow-list a { grid-template-columns: minmax(0, 1fr) 2ch; }
  .follow-list__label { grid-column: 1 / -1; margin-bottom: var(--sp-2); }
}

/* ---------- Pipeline row ----------
   The label-row plates, read as a sequence: Collect → Reclaim → Innovate
   → Distribute. The arrow is type, not a drawn rule. */
.label-row__arrow {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Closing vision block — the sentence that follows the glyph, still on the
   centre line but set as reading copy rather than mono detail. */
.center-block .btn { margin-top: var(--sp-2); }
.center-block__body {
  max-width: 58ch;
  margin: 0;
  text-align: left;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.6;
  color: var(--on-surface-secondary);
}

/* ============================================================
   CARD HEADINGS
   A title inside a card stays in sentence case even though the
   section-level .h2 above it is uppercase: a card speaks at
   conversation volume. Space Mono Regular, never the bold cut.
   Placed last so it wins over the global caps rule, over the
   uppercase .h2 rule, and over each card component's own title
   definition.
   ============================================================ */
.card .h2,
.card .h3,
.card h2,
.card h3,
.feature-card__title,
.pathway__title {
  font-family: var(--font-mono);
  font-weight: 400;
  /* Was sentence case. Retired: every Space Mono voice on the site is
     uppercase now, card titles included. */
  letter-spacing: -0.02em;
}



/* Clay stays what it always was — a flagged, in-progress figure. */
.figure--clay { color: var(--clay); }


/* ---------- Flow ----------
   The pipeline as boxes: one card per stage, joined left to right by a
   blue connector. Wraps to two rows on narrow screens. */
/* The card is flat. No fill, no box, no shadow — a hairline rule across the
   top, the index sitting on it in mono, then the title and the note. It reads
   as a spec-sheet entry rather than a tile, which is the same vocabulary as
   .follow-list and .path-list. Hover darkens the rule; nothing lifts. */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(24px, 3vw, 56px);
}
.flow__step {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  transition: border-color 0.18s ease;
}
.flow__step:hover { border-top-color: var(--on-surface); }
.band:not(.band--paper) .flow__step { border-top-color: var(--hairline); }
.band:not(.band--paper) .flow__step:hover { border-top-color: currentColor; }

/* The index is a plain mono number on the rule — no disc, no fill. */
.flow__n {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: inherit;
}
.flow__title {
  font-family: var(--font-mono);
  font-size: clamp(18px, 1.7vw, 23px);
  letter-spacing: -0.02em;
  margin: 0;
}
.flow__note {
  margin: 0;
  color: var(--on-surface-secondary);
  max-width: 34ch;
}
/* The rules and the numbering carry the sequence — the connector arrows are
   chrome the flat card does not need. */
.flow__arrow { display: none; }
@media (max-width: 720px) {
  .flow__step { flex-basis: 100%; }
}


/* Reading copy on a dark band takes the band's own ivory — the page-grey
   secondary ink disappears against forest. */
.band--ink .hero__lede,
.band--deep .hero__lede,
.band--ink .center-block__body,
.band--deep .center-block__body,
.band--ink .section-prose p,
.band--deep .section-prose p { color: inherit; }



/* ---------- Centred section head ----------
   The project pages follow the reference layout: eyebrow, headline and a
   two-line summary stacked on the centre line, with the cards beneath. */
.band-head--center { align-items: flex-start; text-align: left; }
.band-head--center .section-title { max-width: 30ch; }
.band-head--center p { max-width: 60ch; }

/* ---------- Charts ----------
   One blue, greys for everything else, and a label on every value. */
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); align-items: start; }
.chart-title {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-5);
}
.chart-svg { width: 100%; max-width: 500px; height: auto; display: block; margin-inline: auto; }
/* The ring is a small figure, not a full-width plate. */
.chart-svg--donut { max-width: 240px; margin-inline: auto; }
.chart-line { fill: none; stroke: var(--pop); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-dot { fill: var(--pop); }
.chart-axis { stroke: var(--border); stroke-width: 1; }
.chart-tick { font-family: var(--font-mono); font-size: 11px; fill: var(--on-surface-muted); letter-spacing: 0.04em; }
.chart-val { font-family: var(--font-mono); font-size: 13px; fill: var(--on-surface); font-feature-settings: "tnum" on; }
.donut-track { fill: none; stroke: var(--border); stroke-width: 26; }
.donut-arc { fill: none; stroke: var(--pop); stroke-width: 26; }
.donut-center { font-family: var(--font-mono); font-weight: 700; font-size: 26px; fill: var(--on-surface); font-feature-settings: "tnum" on; }
.donut-sub { font-family: var(--font-mono); font-size: 11px; fill: var(--on-surface-muted); letter-spacing: 0.06em; }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-5); }
.legend__item { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; }
.legend__key { width: 12px; height: 12px; border-radius: 3px; background: var(--border); }
.legend__key--mark { background: var(--pop); }

/* ---------- Year pills ---------- */
.year-pills { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-7); }
.year-pill {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 10px 22px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  color: var(--on-surface-secondary);
}
.year-pill--on { background: var(--pop); border-color: var(--pop); color: #FFFFFF; }

/* ---------- Tag chips on a site card ---------- */
.chip-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  color: var(--on-surface-secondary);
}
.site-card__region { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #000000; }

/* ---------- Callout ---------- */
.callout { display: flex; gap: var(--sp-4); align-items: flex-start; margin-top: var(--sp-6); }
.callout p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--on-surface-secondary); }
.callout strong { color: var(--on-surface); font-weight: 400; font-family: var(--font-mono); }

@media (max-width: 860px) {
  .chart-grid { grid-template-columns: 1fr; }
}


/* The step list runs in two columns on a wide screen: six steps in three
   rows rather than six, which keeps the section near two-thirds of a screen. */
@media (min-width: 861px) {
  .path-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); }
}
/* Wide screens take three across, so six steps read in two rows. */
@media (min-width: 1100px) {
  .path-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .path-list__note { max-width: 40ch; }
}


/* ---------- Bullets ----------
   A plain list where a numbered grid would be too much furniture: one blue
   tick, the step name, and the line that explains it. */
.bullets { list-style: none; margin: 0; padding: 0; max-width: 78ch; }
.bullets li {
  position: relative;
  padding: var(--sp-3) 0 var(--sp-3) 24px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--on-surface-secondary);
}
.bullets li + li { border-top: 1px solid var(--border); }
.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--sp-3) + 0.6em);
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--pop);
}
.bullets__label {
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--on-surface);
  margin-right: var(--sp-2);
}
.band--ink .bullets li, .band--deep .bullets li { color: inherit; border-color: var(--hairline); }
.band--ink .bullets__label, .band--deep .bullets__label { color: var(--green-type); }

/* ============================================================
   THE MASTHEAD
   Every page opens the same way: the green field, the page's name set
   big, one paragraph and two actions beside it, the running tape, and
   the four figures. Arriving anywhere on the site should feel like
   arriving at the same product.
   ============================================================ */
.hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  /* optically aligns the first line of copy with the headline's cap height */
  margin-top: 0.35em;
}
.hero__aside .hero__lede { margin-top: 0; }

/* One filled action and one ghost beside it — the product-page pairing. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
/* On the green field the secondary action drops its fill and rides on the
   band itself, so the two buttons read as primary and secondary rather than
   as two identical pills. */
.band--ink .hero__actions .btn:not(.btn--primary),
.band--deep .hero__actions .btn:not(.btn--primary) {
  background: none;
  color: var(--green-type);
  border-color: color-mix(in srgb, var(--green-type) 45%, transparent);
}
.band--ink .hero__actions .btn:not(.btn--primary):hover,
.band--deep .hero__actions .btn:not(.btn--primary):hover { border-color: var(--pop); }

/* The dateline under an event's lede */
.hero__meta-line {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}

/* The stat band rides directly under the tape as part of the same green
   block — the tape is the seam, so no second run of padding above it. */

/* ---------- Closing CTA ----------
   The ask, set as a block of type with its two actions. It carries no
   photograph: the sentence is the whole thing. */
.cta-block { max-width: 62ch; }
.cta-block .contact-band__title { margin-bottom: var(--sp-5); }
.cta-block__body {
  margin: 0 0 var(--sp-6);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--on-surface-secondary);
}

/* A text row that lost its photograph runs the full measure instead of
   holding an empty column open beside it. */
.alt-row--plain { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 860px) {
  .hero__aside { margin-top: 0; }
}

/* The closing ask sits back on the green field it always had — it bookends
   the masthead, and it means the CTA never lands on the same ground as the
   band above it. Reading copy on that ground takes the band's own ivory. */
.band--ink .cta-block__body,
.band--deep .cta-block__body { color: inherit; }

/* ============================================================
   CARTON EVIDENCE — the material, the pilot, the proof
   The three figures on projects/carton-recycling.html, carrying the
   numbers from Beneath's own carton survey.

   Two states run through all of them: --pop blue is "this carton got
   where it was supposed to go", --clay rust is "it did not". That blue
   sits at 2.2:1 against the paper and bone grounds, so it is NEVER the
   only thing saying which is which — every figure states its own count
   and percentage in text, and the proof grids carry a written legend.
   ============================================================ */

/* The material-rate comparison reuses .rate-chart as-is. The carton row is
   marked with the existing .rate-row--mark (--pop) — the site has no "loss"
   colour, and inventing one here is what put two unrelated reds on the page. */
.rate-row__value { font-family: var(--font-mono); font-size: 13px; text-align: right; }

/* A pull-out note: the reference page sets its equivalences in a tinted box. */
.note-card { margin: var(--sp-7) 0 0; }
.note-card p { margin: 0; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; }

/* The headline total: the number is the chart, so it is a figure, not a bar. */
.figure-lead {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.figure-lead__stat {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 10vw, 132px);
  line-height: 0.9;
  letter-spacing: -0.055em;
  color: var(--on-surface);
}
.figure-lead__basis {
  font-family: var(--font-mono);
  font-size: 12px !important;
  letter-spacing: 0.04em;
}
@media (max-width: 860px) {
  .figure-lead { grid-template-columns: 1fr; }
}

/* A pipeline card that also carries a category label puts the chip and the
   label on one row — the chip is the mark, so the label drops its own tick. */
.flow__head { display: flex; align-items: center; gap: var(--sp-3); }
.flow__head .eyebrow { margin: 0; }
.flow__head .eyebrow::before { content: none; }
/* In a grid the step is a grid item; the flex basis from .flow does not apply. */
.info-grid .flow__step { flex: none; }

/* ---------- Tag line ----------
   A mono label under a hairline, opened by the blue slash: the one fact a
   section is evidence for, stated flat. It closes a section the way a readout
   closes a panel — no sentence, no punctuation, just the label. This is the
   site's most repeatable mark, so it carries the machine-read register that
   the headlines deliberately do not.
   .loop-foot is the same tag under a pipeline. */
.tag-line,
.loop-foot {
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.band:not(.band--paper) .tag-line,
.band:not(.band--paper) .loop-foot { border-top-color: var(--hairline); }
/* A tag opening a section instead of closing one: the rule sits under it. */
.tag-line--head {
  margin: 0 0 clamp(28px, 3.5vw, 56px);
  padding-top: 0;
  padding-bottom: var(--sp-5);
  border-top: none;
  border-bottom: 1px solid var(--border);
}
.band:not(.band--paper) .tag-line--head { border-bottom-color: var(--hairline); }
/* Two or three readouts on one rule, spread across the measure. */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) clamp(24px, 4vw, 72px);
}
.tag-row .tag-line,
.tag-row .tag-line--head { margin: 0; padding-top: 0; border: none; }


/* ---------- Product-page section header ----------
   Label and title on the left, the one supporting line on the right. A
   headline stacked over a paragraph in a left column, with the other half of
   the page empty, is article furniture — this reads as an interface section
   instead, and stops any block from becoming a column of running prose. */
.band-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(20px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.band-head--split > * { min-width: 0; }
.band-head--split .section-title { margin: 0; max-width: 20ch; }
.band-head__line {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.6;
  color: var(--on-surface-secondary);
}
@media (max-width: 860px) {
  .band-head--split { grid-template-columns: 1fr; align-items: start; gap: var(--sp-4); }
  .band-head--split .section-title { max-width: none; }
}

/* Reading copy steps up with the rest of the scale. */
/* Reading copy is small and quiet. The contrast is the point: an enormous
   headline over a short, ordinary-sized paragraph. Nothing here competes. */
.flow__note      { font-size: 22px; line-height: 1.6; }
.band-head__line { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.55; }
.section-prose p { font-size: clamp(22px, 1.9vw, 27px); line-height: 1.6; }
.hero__lede      { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.55; max-width: 34ch; }
.note-card p     { font-size: clamp(22px, 1.9vw, 27px); line-height: 1.6; }
.body-large      { font-size: clamp(22px, 1.9vw, 27px); line-height: 1.6; }
.path-list__note { font-size: 22px; line-height: 1.6; }
.card-body, .center-block__body {
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.6;
}
.stat-cell .stat-note, .aside-panel .stat-note { font-size: 22px; line-height: 1.55; }
.timeline .milestone, .team-card .name { font-size: 23px; }
.role-list li { font-size: 22px; }
.figure-lead .section-prose p { font-size: clamp(21px, 1.8vw, 26px); }

/* ---------- Section split ----------
   A section whose content and photograph sit side by side, so the page reads
   as text-with-image rather than a slab of copy followed by a slab of
   pictures. The media column is sticky on tall sections: the image stays with
   the text it belongs to while that text scrolls. */
.band-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
/* There is no reversed band-split. Copy starts on the left gutter on every
   band of every page, and the picture answers it on the right — a row that
   mirrors puts a paragraph in the middle of the page and breaks the one
   vertical line the reader is following down the left edge. */
.band-split__body { min-width: 0; }
.band-split__media { margin: 0; min-width: 0; position: sticky; top: calc(72px + var(--sp-6)); }
.band-split__media .image-frame { aspect-ratio: 4 / 5; }
@media (max-width: 900px) {
  .band-split { grid-template-columns: 1fr; }
  .band-split__media { position: static; }
}

/* Inside a split section the body column is already narrow, so the two-column
   section header would squeeze the headline into a ladder. It stacks instead,
   and the headline steps down a size to suit the shorter measure. */
.band-split__body .band-head--split {
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--sp-3);
}
.band-split__body .section-title { font-size: clamp(26px, 3.1vw, 44px); }
.band-split__body .band-head__line { max-width: 52ch; }

/* ---------- Work card ----------
   A panel, not a photo band. Each entry is a squarish plate of the bone grey
   sitting on the ivory ground, with the photograph held INSIDE it — frame
   within frame — and the words on the card's own paper underneath. Nothing is
   set over the picture any more: the old cards were full-bleed photographs
   with type on top, stacked, and a column of those reads as a list.

   The elements are placed off the card's corners rather than stacked down the
   middle: index top-left, kind top-right, the readout under the plate, and the
   action on a hairline at the foot. */
.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--surface-raised);
  border-radius: var(--r-card);
  transition: background 220ms ease, transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.work-card:hover { background: var(--surface-sunken); transform: translateY(-2px); }
.work-card[hidden] { display: none; }

/* The lead entry is laid out ACROSS instead of down: it takes two columns,
   the picture holds the left half and the readout the right. Same card, same
   grey, turned on its side — so the set does not open with a fifth identical
   tile. The cards are deliberately NOT all one size. */
.work-card--lead {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  /* The lead card's two halves are side by side, so the air between picture
     and words is a COLUMN gap — it has to be wider than the stacked cards'
     16px or the type sits right on the photo's edge. */
  column-gap: clamp(32px, 3.4vw, 64px);
  align-items: start;
}
/* The plate fills its half of the card top to bottom. It is a grid item here,
   not a flex one, so it stretches rather than growing — and it needs to beat
   the flexible plate rule below on specificity. */
.work-card.work-card--lead .image-frame {
  grid-column: 1;
  grid-row: 1 / -1;
  aspect-ratio: auto;
  align-self: stretch;
  min-height: 280px;
}
.work-card--lead .work-card__meta { grid-column: 2; grid-row: 1; }
.work-card--lead .work-card__tags { grid-column: 2; grid-row: 2; align-self: start; }
/* The words sit at the BOTTOM of their column, resting on the foot rule —
   not floated in the middle of the card's height. */
.work-card--lead .work-card__body { grid-column: 2; grid-row: 3; align-self: end; }
.work-card--lead .work-card__foot { grid-column: 2; grid-row: 4; }
/* The lead is a bigger PLATE, not bigger type: it takes two columns and turns
   sideways, but every word on it is set at the same size as the tiles. */


.work-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.work-card__n { color: var(--pop); }

/* Two or three hairline tags under the meta line: what the project touches,
   where it runs and what stage it is at. They carry the card's empty top
   instead of leaving it blank, and they are labels, not links. */
.work-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.work-card__tags li {
  padding: 7px 14px;
  border: 1px dotted var(--on-surface);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--on-surface);
}
.work-card--wip .work-card__tags li { }
.work-card__kind { }

/* The plate takes the card's slack instead of a fixed ratio. Every card in a
   row is the same height, but their words are not the same length — with a
   ratio, the shorter cards opened a hole above the foot rule. The picture
   absorbs it, so it is the biggest thing on the card and the rows still end
   level. The floor keeps it a plate on the narrowest column. */
.work-card .image-frame {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: clamp(210px, 16.5vw, 280px);
  border-radius: var(--r-img);
}
.work-card .image-frame__ph span { font-size: 11px; }
/* The lead photo is a portrait shot in a landscape plate: hold the crop high
   so the café owner's face stays in the frame instead of being cut off the
   top by a centred crop. */
.work-card--lead .image-frame__img { object-position: 50% 20%; }

/* One size per role, the same on every card in the set — a card carrying a
   figure is not typeset differently from one carrying a sentence. */
.work-card__title {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--on-surface);
}
.work-card__title a { color: inherit; text-decoration: none; }
/* The whole card is the primary link; the secondary action lifts above it. */
.work-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.work-card__sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}
.work-card__unit { margin-left: 0.5em; }
.work-card__sub .stat { font: inherit; letter-spacing: inherit; }
/* The figure line reads as the card's description, not as a display number:
   same face, same size, same weight as .work-card__sub, so a row of cards has
   one text size in it and no card shouts over its neighbours. */
.work-card__figure-line {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}
/* The figure takes the description's face too, so a card with a number in it
   is set in exactly the same type as a card with a sentence. */
.work-card__figure-line .stat { font: inherit; letter-spacing: inherit; }
.work-card__figure-line .work-card__unit { margin-left: 0.4em; }
.work-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.work-card:hover .work-card__foot { border-top-color: var(--pop); }
.work-card__go { display: inline-flex; align-items: baseline; gap: var(--sp-2); }
/* The second action is a real link over the card's own stretched one. */
.work-card__alt {
  position: relative;
  z-index: 1;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.work-card__alt:hover { opacity: 1; border-bottom-color: var(--pop); }

/* A card whose page is not written yet. It keeps its place in the set — the
   work is real and in progress — but it makes no promise it cannot keep: no
   link off the title, no photo plate standing empty, and a foot that says the
   page is coming instead of offering a "View" that goes nowhere. */
.work-card--wip { cursor: default; }
.work-card--wip:hover { background: var(--surface-raised); transform: none; }
.work-card--wip .work-card__title,
.work-card--wip .work-card__sub { }
.work-card--wip .work-card__title { }
/* The plate is kept as a shape so the rows still line up, but it is a ruled
   empty field rather than a picture that failed to load. */
.work-card__wip-plate {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  min-height: clamp(210px, 16.5vw, 280px);
  padding: var(--sp-3);
  border: 1px dashed var(--border);
  border-radius: var(--r-img);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.5;
}
.work-card__status { }
.work-card--wip:hover .work-card__foot { border-top-color: var(--border); }

/* The words take only the height they need — the plate above them has the
   spare height, and the foot rule sits on the card's bottom edge. */
.work-card__body { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
/* The plate and the words are the two halves of the card: hold them apart by
   more than the card's own rhythm so the picture reads as a plate the type
   sits under, not as a block stacked tight against it. */
.work-card .image-frame + .work-card__body,
.work-card__wip-plate + .work-card__body { margin-top: var(--sp-4); }
/* Not on the lead card: there the picture is beside the words, not above
   them, and the space between the two is the column gap. */
.work-card--lead .image-frame + .work-card__body { margin-top: 0; }

/* The last cell is not a card: the section's own readout, set bare on the
   ground across the full width, closing the grid the way a tag closes a
   section. */
/* The last cell is not a card: the section's readout, bare on the ground and
   across the full width, closing the grid the way a tag closes a section. */
.work-note { grid-column: 1 / -1; display: flex; flex-direction: column; }
.work-note .tag-line { margin: 0; }

@media (max-width: 620px) {
  /* One card per row: the lead gives up its sideways layout and stacks like
     the rest rather than squeezing a plate and a figure into 320px. */
  .project-index { grid-template-columns: 1fr; }
  .work-card--lead { grid-column: span 1; display: flex; }
  .work-card.work-card--lead .image-frame { min-height: 240px; align-self: auto; }
}

/* ============================================================
   Space Mono is ALWAYS uppercase — every voice set in it, without exception.
   Collected here so a new mono component cannot quietly ship lowercase.
   ============================================================ */
.h3,
.mini-chip__value,
.nav__brand, .nav__links a, .nav__links .nav__parent, .nav__menu a, .nav__soon, .nav__toggle,
.footer__brand, .footer__meta,
.feature-card__title, .mv-panel .statement, .pathway__title,
.value-row .num, .timeline .year, .team-card .avatar,
.ledger .year, .ledger .figure,
.chip, .atlas-dong-detail__label, .atlas-marker__label, .atlas-back,
.event-feature__meta, .event-feature__title,
.event-row__loc, .event-row__cat, .event-row__date, .event-hero__title,
.marquee__sep, .band-stats .stat-value,
.figure-row .year, .figure-row .figure,
.year-group__year, .figure-panel__stat,
.rate-row__value, .path-list__n, .path-list__title,
.follow-list__value, .follow-list__arrow, .label-row__arrow,
.card .h2, .card .h3, .card h2, .card h3,
.flow__n, .flow__title,
.chart-title, .chart-tick, .chart-val, .donut-center, .donut-sub,
.legend__item, .year-pill,
.callout strong, .bullets__label,
.work-card__meta,
.work-card__foot,
.figure-lead__stat, .figure-lead__basis {
  text-transform: uppercase;
}


/* Stat cells are flat like every other component now — a hairline over the
   figure instead of a box around it. */
.stat-cell {
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: none;
}
.band:not(.band--paper) .stat-cell { border-top-color: var(--hairline); }

/* ---------- Breathing room ----------
   The copy came down to 15px but the gaps around it were still set for the
   big-type pass, so everything sat compressed. Opened up across the board. */
.band-head--split { margin-bottom: clamp(36px, 4.5vw, 72px); gap: clamp(28px, 5vw, 88px); }
.band-head { margin-bottom: clamp(32px, 3.5vw, 56px); gap: var(--sp-4); }
.section-prose p { margin-bottom: var(--sp-6); }
.flow { gap: clamp(32px, 4vw, 72px); }
.flow__step { gap: var(--sp-4); padding-top: var(--sp-5); }
.info-grid { gap: clamp(32px, 4vw, 72px); }
.mt-8 { margin-top: clamp(40px, 5vw, 72px); }
.mt-9 { margin-top: clamp(56px, 7vw, 104px); }
.note-card { margin-top: clamp(40px, 5vw, 72px); }
.band-split { gap: clamp(36px, 5vw, 88px); }
.loop-foot { margin-top: clamp(32px, 4vw, 56px); padding-top: var(--sp-6); }
.path-list { gap: clamp(28px, 3.5vw, 56px) clamp(28px, 3vw, 56px); }
.path-list li { padding-top: var(--sp-5); }
.follow-list a { padding-block: var(--sp-5); }
.role-list li { padding: var(--sp-5) 0; }
.figure-lead { gap: clamp(32px, 5vw, 88px); }
.footer__grid { row-gap: clamp(32px, 4vw, 64px); }

/* ============================================================
   The pop cyan, used more often — but only ever as a SMALL mark.
   Indices, arrows, separators, ticks, rule accents. Never a large fill,
   never a section ground, and never body copy.
   ============================================================ */
.arrow { color: var(--pop); }
.flow__n { color: var(--pop); opacity: 1; }
.path-list__n { color: var(--pop); }
.shift__arrow { color: var(--pop); opacity: 1; }
.tag-line::before,
.loop-foot::before { content: "/ "; color: var(--pop); }
/* The rest of the small-mark vocabulary, all on the same blue: the arrow at
   the end of a hairline row, the category on an event line, and the slash
   opening any mono readout. */
.follow-list__arrow { color: var(--pop); }
.event-row__cat { color: var(--pop); }
.slab__label::before,
.stage__foot::before,
.hero__meta-line::before,
.figure-lead__basis::before { content: "/ "; color: var(--pop); }
.unit-caption::before,
.diagram__caption::before { content: "/ "; color: var(--pop); }
.footer__nav-label::before { content: "/ "; color: var(--pop); }
.stat-cell .stat-label::before { content: "/ "; color: var(--pop); }
/* The rule over a figure or a card picks up the accent on hover. */
.flow__step:hover { border-top-color: var(--pop); }
.follow-list a:hover { border-color: var(--pop); }
/* On dark grounds the cyan still reads — it is a light on a deep ground. */
.band--ink .arrow, .band--deep .arrow,
.band--ink .flow__n, .band--deep .flow__n { color: var(--pop); }

/* The closing donation block is a CTA, not a second hero — its title was set at
   .h1 (up to 92px), larger than the hero it sits under. Matched to the hero. */
.contact-band__title {
  font-size: clamp(36px, 4.7vw, 76px);
  line-height: 1.0;
}

/* ---------- Air ----------
   Blank space is the material, not the leftover. The whole rhythm was set for
   large type and never reopened when the copy came down to 15px, so sections
   were sitting closer than the design intends. */
.center-block { margin-block: clamp(72px, 9vw, 144px); }
.gallery + .center-block { margin-top: clamp(64px, 8vw, 128px); }
.center-block + .gallery { margin-top: clamp(64px, 8vw, 128px); }
.band-head--split { margin-bottom: clamp(48px, 6vw, 96px); }
.band-head { margin-bottom: clamp(40px, 5vw, 72px); }
/* The work grid keeps its own tight gutter — the section rhythm below sets
   the AIR BETWEEN sections, not between cards in a set. */
.project-index { gap: clamp(14px, 1.3vw, 20px); }
.gallery { gap: clamp(20px, 2vw, 32px); }
.flow { gap: clamp(40px, 5vw, 88px); }
.info-grid { gap: clamp(40px, 5vw, 88px); }
.mt-8 { margin-top: clamp(56px, 7vw, 104px); }
.mt-9 { margin-top: clamp(80px, 10vw, 152px); }
.band-split { gap: clamp(48px, 6vw, 112px); }
.footer { padding-block: clamp(96px, 11vw, 176px) clamp(48px, 5vw, 72px); }


/* ============================================================
   SECTION STRUCTURE
   Every section is built on one asymmetric spine: a narrow rail carrying the
   index and the label, and a wide main column carrying the title and the
   content. The rail is what makes the site legible as a structure rather than
   a stack — a reader can scan the left edge and see the whole document.
   ============================================================ */
.band-grid {
  display: grid;
  grid-template-columns: clamp(96px, 15vw, 220px) minmax(0, 1fr);
  gap: clamp(20px, 3.5vw, 64px);
  align-items: start;
}
.band-grid__rail {
  position: sticky;
  top: calc(72px + var(--sp-6));
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  /* A hairline runs down the rail: the spine is visible, not just implied. */
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.band:not(.band--paper) .band-grid__rail { border-top-color: var(--hairline); }
/* A rail with nothing in it was still taking its column and drawing its
   hairline, which pushed the heading in and left a stray rule beside it.
   With no label to hold, the grid collapses to one column. */
.band-grid__rail:not(:has(*)) { display: none; }
.band-grid:not(:has(.band-grid__rail *)) { grid-template-columns: minmax(0, 1fr); }
.band-grid__rail .eyebrow { margin: 0; }
.band-grid__rail .eyebrow::before { content: none; }
.band-grid__main { min-width: 0; padding-top: var(--sp-4); }
/* The head no longer needs its own two-column split — the spine is the split. */
.band-grid__main .section-title { margin-bottom: var(--sp-5); max-width: 20ch; }
.band-grid__main .band-head__line { max-width: 46ch; margin-bottom: clamp(32px, 4vw, 64px); }
@media (max-width: 860px) {
  .band-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .band-grid__rail { position: static; flex-direction: row; align-items: baseline; gap: var(--sp-4); }
  .band-grid__main { padding-top: 0; border-top: none; }
}

/* ---------- Structural variety ----------
   Not every section is the same shape. A section marked --wide drops the rail
   and runs its content the full measure; --field runs edge to edge with no
   container gutter at all. Alternating these is what stops the page reading
   as one repeated template. */
.band--wide .band-grid { grid-template-columns: 1fr; }
.band--wide .band-grid__rail {
  position: static;
  flex-direction: row;
  align-items: baseline;
  gap: var(--sp-5);
  margin-bottom: clamp(24px, 3vw, 48px);
}
.band--wide .band-grid .band--field > .container { max-width: none; padding-inline: 0; }
.band--field .band-grid { padding-inline: var(--sp-6); }

/* ============================================================
   STAGE
   A full-viewport field, edge to edge. No container, no gutter to speak of —
   the type runs to the page edge and the field takes the whole screen. This is
   the page allowed to stop being a column of bands and become one held image.
   The ground is the deep forest, the darkest in the system; there is no pure
   black here by law.
   ============================================================ */
/* ============================================================
   PHOTO ROW
   Two photographs with a line of copy set BETWEEN them, on the paper ground.
   Reading across, picture and words alternate, so neither gets a band of its
   own — the thing this replaced was a strip of photos with no text in it at
   all. The frames are --fit: full pictures, no crop.
   ============================================================ */
.photo-row {
  display: grid;
  /* The statement is anchored to the LEFT gutter and runs a little over half
     the measure; the two plates sit opposite it on the right. Nothing is
     centred — the copy starts on the container edge, where the eye already is,
     and the pictures answer it across the row. */
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.2vw, 56px);
  /* Everything hangs from one line across the top. */
  align-items: start;
}
.photo-row__figure { margin: 0; min-width: 0; }
/* Both plates take the same upright shape, so their bottom edges land level
   too — the photographs differ by a few pixels of native ratio and that is
   enough to make an aligned row look accidental. The picture is still whole:
   --fit keeps it contained, and the paper shows through the hairline gap. */
.photo-row .image-frame { aspect-ratio: 3 / 4; }
.photo-row .image-frame__img {
  position: absolute;
  inset: 0;
  height: 100%;
}
.photo-row__text {
  margin: 0;
  /* Statement scale, but under the section headings — it is a sentence set
     large, not a headline. */
  font-size: clamp(24px, 2.5vw, 37px);
  line-height: 1.28;
  letter-spacing: -0.02em;
  /* Set to its column: the left edge is the container edge and the lines
     break well before the plates begin. */
  max-width: none;
  text-align: left;
  /* Optical, not metric: the paragraph's first line has leading above the
     cap, and flush-to-the-grid means aligning the letters with the photo
     edge, not the box. */
  margin-top: -0.18em;
}
@media (max-width: 860px) {
  /* One column, source order: the statement, then the two plates under it. */
  .photo-row { grid-template-columns: 1fr 1fr; gap: clamp(20px, 5vw, 40px); }
  .photo-row__text { grid-column: 1 / -1; margin-top: 0; }
}
@media (max-width: 560px) {
  .photo-row { grid-template-columns: 1fr; }
}

.band--stage {
  padding: 0;
  background: var(--stage-ground);
  color: var(--on-stage);
}
.stage {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4vw, 80px);
  align-content: space-between;
  padding: clamp(88px, 9vw, 132px) clamp(14px, 1.6vw, 30px) clamp(28px, 3vw, 52px);
}
/* The black field was type and nothing else. These are what break it up: a
   rail of blue-slashed readouts across the top, a disc on the title, and the
   slash already on the foot — the same small-mark vocabulary the light bands
   use, which is the only thing allowed to carry colour on this ground. */
.stage__rail {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) clamp(20px, 3vw, 56px);
  margin: 0 0 clamp(24px, 4vw, 56px);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.stage__rail span::before { content: "/ "; color: var(--pop); opacity: 1; }
.stage__title { grid-row: 2; }
.stage__aside { grid-row: 2; }
.stage__foot  { grid-row: 3; }

.stage__title {
  grid-column: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  /* Sized so the longest word still fits the LEFT COLUMN, not the viewport.
     Space Mono advances at ~0.6em per character and the column is ~51vw, so
     anything above ~8.5vw pushes a long word past the column edge and it
     overlaps the aside. Learned the hard way. */
  font-size: clamp(38px, 8.4vw, 132px);
  line-height: 0.9;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  color: var(--on-stage);
  max-width: none;
  overflow-wrap: break-word;
}
/* No photograph on the stage: this panel is type on the darkest ground in the
   system, and a picture on it turns the field into a slide. Pictures live on
   the paper bands. */
.stage__aside {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5vw, 80px);
  max-width: 46ch;
}
.stage__lede { margin: 0; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.4; }
.stage__note { margin: 0; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.7; }
.stage__foot {
  grid-column: 1 / -1;
  margin: 0;
  /* Left, with everything else — this label was the last centred text on the
     site. */
  text-align: left;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (max-width: 860px) {
  .stage { grid-template-columns: 1fr; align-content: start; gap: clamp(32px, 8vw, 64px); }
  .stage__title, .stage__aside { grid-column: 1; max-width: none; }
  .stage__foot { margin-top: var(--sp-7); }
}

/* ---------- Closing CTA ----------
   The ask sits beside a photograph rather than alone on the green: text left,
   one upright plate right. The image is the last thing on every page, so it
   carries the weight the copy no longer has to. */
.cta-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: clamp(36px, 5vw, 96px);
  /* Tops align: the headline's cap-height and the top edge of the plate sit on
     one line, so the two columns read as a pair rather than as one floating
     beside the other. */
  align-items: start;
}
.cta-split .cta-block { max-width: none; }
.cta-media { margin: 0; min-width: 0; }
/* Height is capped rather than left to a ratio — a 4:5 plate at this width made
   the closing band taller than any section on the page. */
.cta-media .image-frame { aspect-ratio: auto; height: clamp(260px, 30vw, 420px); }
/* The closing band is a sign-off, not a chapter: it runs shorter than a
   content section. */
.band#support { padding-block: var(--section-y); }
.cta-split .contact-band__title { margin-bottom: var(--sp-5); }
.cta-split .cta-block__body { margin-bottom: var(--sp-6); }
@media (max-width: 860px) {
  .cta-split { grid-template-columns: 1fr; gap: clamp(32px, 6vw, 56px); }
}

/* ---------- Slab ----------
   The stage at a fraction of the height: a short black band that interrupts
   the light grounds with one line. Used where a page already had a standalone
   statement, so the copy is unchanged and only the treatment is new. */
.band--slab {
  background: var(--stage-ground);
  color: var(--on-stage);
  padding-block: calc(var(--section-y) * 0.6);
}
.slab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}
.slab__label {
  grid-column: 1;
  margin: 0 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Same disc on the short black band, so the two dark panels share one mark. */
.slab__line::before {
  content: "";
  display: inline-block;
  width: 0.19em;
  height: 0.19em;
  border-radius: var(--r-full);
  background: var(--pop);
  margin-right: 0.24em;
  vertical-align: 0.3em;
}
.slab__line {
  grid-column: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 58px);
  line-height: 1.0;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  max-width: 20ch;
}
.slab__note {
  grid-column: 1;
  margin: var(--sp-5) 0 0;
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.7;
  max-width: 46ch;
}
.slab__action { grid-column: 2; grid-row: 1 / -1; align-self: end; }
.slab .btn {
  background: transparent;
  color: var(--on-stage);
  border-color: rgba(254, 254, 254, 0.55);
}
.slab .btn:hover { border-color: var(--on-stage); }
@media (max-width: 720px) {
  .slab { grid-template-columns: 1fr; }
  .slab__action { grid-column: 1; grid-row: auto; margin-top: var(--sp-5); }
}

/* ---------- Process icons ----------
   One small line symbol per step, drawn on a 24px box in the same stroke
   weight as the rest of the line work. It sits on the step's rule beside the
   number and is always paired with the step's title — the symbol is a marker,
   never the message, so the list still reads with images off. */
.path-list li { grid-template-columns: 3.5ch 24px minmax(0, 1fr); }
.path-list__icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--pop);
  align-self: start;
  margin-top: 1px;
}
@media (max-width: 480px) {
  .path-list li { grid-template-columns: 3.5ch minmax(0, 1fr); }
  .path-list__icon { display: none; }
}


/* The plate beside the 7,341 figure sits in a narrow column, where 21:9 leaves
   a letterbox strip. Taller ratio, same width. */
.figure-lead .gallery--lead .gallery__item--w6 > .image-frame { aspect-ratio: 4 / 3; }

/* ---------- Head media ----------
   A photograph beside a section's TITLE only, not beside its content. The
   heading and lede take the left column, the picture the right, and whatever
   follows (a .flow, a grid, a list) still runs the full width underneath —
   which is what a .band-split cannot do without crushing it. */
.head-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
  margin-bottom: clamp(32px, 4vw, 72px);
}
.head-media__text { min-width: 0; }
.head-media__figure { margin: 0; min-width: 0; }
.head-media__figure .image-frame { aspect-ratio: 3 / 4; }
@media (max-width: 860px) {
  .head-media { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* A larger head photo, for a section whose picture should carry weight. */
.head-media--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); }
.head-media--wide .image-frame { aspect-ratio: 4 / 5; }

/* ---------- Headings ----------
   The section headings are the one voice set in the forest green; everything
   else on a light ground is near-black ink. They also sit clearly BELOW the
   hero in size (hero tops out at 76-80px, a heading at 44-46px), so a section
   heading never competes with the page title.
   On the dark grounds the heading takes the band's own light colour instead —
   green on forest would disappear. */
.section-title,
.alt-row__title,
.h2,
.h3,
h2, h3 {
  color: var(--forest);
}
.band--ink .section-title, .band--ink .alt-row__title, .band--ink .h2, .band--ink .h3,
.band--ink h2, .band--ink h3,
.band--deep .section-title, .band--deep .h2, .band--deep .h3, .band--deep h2, .band--deep h3,
.band--stage .section-title, .band--stage .h2, .band--stage .h3, .band--stage h2, .band--stage h3,
.band--slab .section-title, .band--slab .h2, .band--slab .h3, .band--slab h2, .band--slab h3,
.card--forest h2, .card--forest h3,
.mv-panel--mission h2, .mv-panel--mission h3 {
  color: inherit;
}

/* ---------- Social carousel ----------
   The Instagram shelf: four posts on a horizontal rail the reader drags or
   steps through, every card opening the account. Scroll-snap does the work —
   there is no autoplay and no transform loop, so it costs nothing while it
   sits off screen.
   ============================================================ */
.social__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.social__head .section-mark { margin-bottom: var(--sp-3); }
.social__head .section-title { margin: 0; }

.social { position: relative; }
/* The rail never stops: the list is duplicated once and the track slides left
   at a constant speed, so the second copy takes over exactly where the first
   began and the loop is seamless. The spacing lives on the item (a margin),
   not on the flex gap — with a gap the halves are not the same width and the
   -50% wrap drifts.

   It is one composited transform running at a walking pace, and it holds
   still whenever the section is off screen, the tab is hidden, the reader is
   on it, or the system asks for less motion. */
.social__viewport { overflow: hidden; }
.social__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  animation: social-drift var(--social-dur, 72s) linear infinite;
  will-change: transform;
}
.social:hover .social__track,
.social:focus-within .social__track,
.social__track.is-paused { animation-play-state: paused; }
@keyframes social-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .social__track { animation: none; }
  .social__viewport { overflow-x: auto; }
}
.social__item {
  flex: 0 0 clamp(240px, 26vw, 360px);
  margin-right: var(--sp-4);
}
.social__item a {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  color: inherit;
  text-decoration: none;
}
.social__item img {
  display: block;
  width: 100%;
  /* The width/height attributes are there for layout stability, but the
     plate's shape is the ratio below — height must be auto or the attribute
     wins and the card runs a thousand pixels tall. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-img);
  background: var(--surface-raised);
  transition: opacity 200ms ease;
}
.social__item a:hover img { opacity: 0.88; }
.social__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.4;
}
.social__item a:hover .social__cap { opacity: 1; }
@media (max-width: 700px) {
  .social__item { flex-basis: 74vw; }
}

/* ---------- Surface panel ----------
   The card's ground and its type, without the card's furniture: no index
   number, no tags, no hairline foot. A wide grey plate with the words on one
   side and the picture on the other — used where a section needs the work
   grid's material but should not read as another card in a set.
   ============================================================ */
.panel-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  column-gap: clamp(32px, 4vw, 72px);
  row-gap: var(--sp-5);
  align-items: start;
  padding: clamp(28px, 3.4vw, 56px);
  background: var(--surface-raised);
  border-radius: var(--r-card);
}
/* The heading runs across the plate; the paragraphs and the picture share the
   width below it, the way a page of writing sits under its own title. */
.panel__head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-3); }
/* The second plate turns the other way so a stack of them is not a column of
   identical rows. */
.panel--flip .panel__text { grid-column: 2; }
.panel--flip .panel__media { grid-column: 1; grid-row: 2; }
.panel__text { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
/* Paragraphs, set as paragraphs — the body size the cards use, at a readable
   measure, with real space between them. */
.panel__text p { margin: 0; font-size: 15px; line-height: 1.6; max-width: 60ch; }
.panel__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.panel__title {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--on-surface);
}
.panel__body { margin: 0; font-size: 15px; line-height: 1.55; max-width: 52ch; }
/* A fixed plate rather than the photograph's own height: the pictures here are
   portrait, and left to their intrinsic ratio they tower over the paragraphs
   beside them. */
.panel__media { margin: 0; min-width: 0; align-self: start; }
.panel__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-img);
  background: var(--surface-sunken);
}
@media (max-width: 860px) {
  .panel { grid-template-columns: 1fr; }
  .panel--flip .panel__text,
  .panel--flip .panel__media { grid-column: 1; grid-row: auto; }
}

/* A quieter alt-row for blocks that carry several paragraphs: the headline
   steps down from the section display size, and the picture takes exactly the
   height of the writing beside it rather than its own portrait height, so the
   row ends level instead of leaving a hole under the last line. */
/* One rule under a section header is enough: the band-grid rail already draws
   a hairline above the block, so the row's own top rule doubled it. */
.alt-row--tight { align-items: stretch; border-top: none; padding-top: 0; }
/* The words fill their column here rather than stopping at the 66ch measure —
   with the plate opposite, a capped measure opened a second gutter between the
   two halves. */
.alt-row--tight .section-prose { max-width: none; }
/* Site reading copy is 22-27px, which is right for one short paragraph under a
   huge headline. Four paragraphs at that size is a wall, so a block of running
   text drops to a reading size. The plate matches the text height, so this
   pulls the photograph down with it. */
.alt-row--tight .section-prose p {
  font-family: var(--font-read);
  font-weight: 400;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.65;
  margin-bottom: var(--sp-4);
}
.alt-row--tight .alt-row__title {
  font-size: clamp(24px, 2.5vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-5);
}
.alt-row--tight .alt-row__media { align-self: stretch; }
.alt-row--tight .alt-row__media .image-frame {
  height: 100%;
  aspect-ratio: auto;
  min-height: clamp(280px, 24vw, 400px);
  max-height: clamp(380px, 34vw, 560px);
}
/* Where a row carries a short passage rather than a whole block, the plate is
   a modest picture beside the words, not a full-height panel. */
.alt-row--tight .image-frame--photo {
  height: auto;
  aspect-ratio: 4 / 3;
  min-height: 0;
  max-height: none;
}

/* ---------- Inset band ----------
   The site's bands run nearly edge to edge (20–48px of gutter). On a page of
   running text that reads as cramped: the reference layouts hold their content
   well inside the window. This modifier gives a band a real margin and a
   capped measure, without changing the full-bleed bands elsewhere.
   ============================================================ */
.band--inset > .container {
  /* 2026-10-27: the 1180px cap centred this content, so its left edge sat
     ~170px further in than the hero and every other band. It now shares the
     site gutter; the text columns inside still cap their own measure. */
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: clamp(24px, 6vw, 104px);
}

/* The card's own furniture, borrowed by the text rows above the join tiles so
   the page reads as one set: the numbered meta line sits on the row's hairline
   and the dotted tags close the copy, exactly as they do on a work card. */
.alt-row--tight .work-card__meta { margin-bottom: var(--sp-4); }
.alt-row--tight .work-card__tags { margin-top: var(--sp-5); }

/* ---------- Quote band ----------
   One sentence set over a photograph, full width: the picture carries the
   ground, a dark wash keeps the words legible on any image, and the line sits
   in the middle. Used to lift a single call out of the running copy.
   ============================================================ */
.quote-band {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(320px, 42vw, 560px);
  padding: clamp(48px, 7vw, 96px) clamp(24px, 6vw, 104px);
  overflow: hidden;
  background: var(--forest);
  isolation: isolate;
}
.quote-band__img,
.quote-band__ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.quote-band__img { object-fit: cover; }
/* The empty state: a plain field with the word Image, the same placeholder the
   other frames use, so a photograph can be dropped in later. */
.quote-band__ph {
  display: grid;
  place-items: center;
  background: var(--forest);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-forest);
  opacity: 0.4;
}
/* The wash: without it a light photograph swallows the words. */
.quote-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, #1D2E23 52%, transparent);
}
.quote-band__inner { max-width: min(92%, 30ch); text-align: center; }
.quote-band__line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--on-forest);
}

/* One mirrored row is allowed on the volunteer page: two blocks in a stack
   read better with the pictures on opposite sides. */
.alt-row--flip .alt-row__text { grid-column: 2; grid-row: 1; }
.alt-row--flip .alt-row__media { grid-column: 1; grid-row: 1; }
@media (max-width: 860px) {
  .alt-row--flip .alt-row__text,
  .alt-row--flip .alt-row__media { grid-column: 1; grid-row: auto; }
}


/* ---------- Spec grid ----------
   Practical information, compact: six short facts in a grid rather than six
   full-width rows. Each is a mono label over one line of answer, so the whole
   block can be read at a glance before a first visit.
   ============================================================ */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5) clamp(24px, 3vw, 48px);
  margin: var(--sp-5) 0 0;
}
.spec-grid__item {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.spec-grid dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.spec-grid dd {
  margin: 0;
  /* Practical facts, so they read as facts: the site's bold sans, a step up in
     size. This is the block someone scans before a first visit. */
  font-family: var(--font-text);
  font-weight: 700;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.4;
}
@media (max-width: 860px) { .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .spec-grid { grid-template-columns: 1fr; } }

/* ---------- Stage over a photograph ----------
   The black panel treatment with a picture behind it: same rail, statement and
   foot, with a wash so the type holds on any image.
   ============================================================ */
.stage--image { position: relative; isolation: isolate; overflow: hidden; }
.stage--image .stage { min-height: clamp(420px, 62vh, 720px); }
.stage__img,
.stage__ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.stage__img { object-fit: cover; }
.stage__ph {
  display: grid;
  place-items: center;
  background: var(--stage-ground);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-stage);
  opacity: 0.35;
}
.stage--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, #1A1A1A 55%, transparent);
}
/* A whole sentence, not a two-word statement: it takes a reading size rather
   than the 132px display cut. */
.stage__title--statement {
  grid-column: 1 / -1;
  font-size: clamp(28px, 4.4vw, 64px);
  line-height: 1.05;
  max-width: 22ch;
}

/* A band that carries one compact block rather than a section of reading: it
   does not need the full section rhythm above and below it. */
.band--tight .band-grid__main { padding-top: 0; }
.band--tight .spec-grid { gap: var(--sp-4) clamp(24px, 3vw, 48px); }

/* ---------- Site stats ----------
   The figures a collection site has to show, as small plates inside the card:
   a green label over its number, two across, so the two sites can be read
   against each other at a glance.
   ============================================================ */
.site-stats {
  margin: 0;
  display: grid;
  /* Five figures across rather than stacked two-up: it is what keeps the card
     a wide band instead of a square. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-2);
}
@media (max-width: 1100px) { .site-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .site-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-4);
  /* A step darker than the card's own ground, no outline. */
  background: var(--surface-sunken);
  border-radius: var(--r-card);
}
/* The headline figure keeps its own plate, one of five, but carries the big
   number so the eye still lands there first. */

/* The last plate takes the row on its own when the count is odd. */
.site-stat dt {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(12px, 1.05vw, 15px);
  letter-spacing: 0.03em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--pop);
  opacity: 1;
  /* Two lines' worth whether the label wraps or not, so every figure below
     sits on the same line across the row. */
  min-height: 2.5em;
  margin-bottom: var(--sp-3);
}
.site-stat dd {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  /* Sized to the plate, not the viewport: the widest figure here is a won
     amount at 10 characters, and Space Mono advances ~0.6em per character, so
     1.9vw ran it past the edge of a one-fifth column. */
  font-size: clamp(20px, 1.7vw, 27px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  color: var(--forest);
}

/* Two sites, not three tiles: the pair takes the full row. */
.project-index--sites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .project-index--sites { grid-template-columns: 1fr; } }

/* Every small label on this page is Space Mono, uppercase, regular weight —
   never the bold sans. */
.work-card__kind,
.work-card__tags li,
.work-card__status,
.work-card__alt,
.spec-grid dt,
.site-stat dt {
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: uppercase;
}

/* Three blocks that belong to one argument: they sit closer than three
   separate sections would. */
.band--stack { padding-block: 0; }
/* The first block keeps the site's normal opening air below the hero ticker —
   only the space BETWEEN the blocks was ever meant to close up. */
.ticker + .band--stack { padding-top: var(--section-y); }
.band--stack + .band--stack { padding-top: 0; }
.band--stack .band-grid__main { padding-top: 0; }
/* Each block still needs a little air under it, just not a section's worth. */
.band--stack .alt-row--tight { margin-bottom: calc(var(--section-y) * 0.75); }
/* The empty rail column and the grid's own row gap were most of the space
   between the blocks. */
.band--stack .band-grid { row-gap: 0; }
.band--stack .band-grid__rail { display: none; }
/* With the rail hidden its column has to go too, or the content sits a
   column's width in from every other page's left edge. */
.band--stack .band-grid { grid-template-columns: minmax(0, 1fr); }
/* The sites are the next thing the page says, so they get real air above. */
.band--stack + .band--wide:not(.band--stack) { padding-top: calc(var(--section-y) * 0.35); }
/* The last block already carries its own bottom margin; the band above must
   not add a second section's worth on top of it. */

/* ---------- Site card ----------
   One card per collection site, laid across instead of down: the picture holds
   the left, the name and its figures the right. A drawn black edge instead of
   a grey plate, and nothing moves on hover — these are records, not links.
   ============================================================ */
.work-card--site {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(24px, 2.5vw, 48px);
  background: transparent;
  border: 1px solid var(--on-surface);
}
.work-card--site:hover { background: transparent; transform: none; }
.work-card--site .image-frame {
  grid-column: 1;
  grid-row: 1 / -1;
  /* Centred against the column of figures, not pinned to the top edge. */
  align-self: center;
  aspect-ratio: 5 / 4;
  min-height: 0;
  max-height: clamp(200px, 19vw, 280px);
}
.work-card--site .work-card__title { font-size: clamp(24px, 2.4vw, 34px); }
.work-card--site .work-card__meta { grid-column: 2; grid-row: 1; }
.work-card--site .work-card__body { grid-column: 2; grid-row: 2; align-self: center; margin-top: var(--sp-3); gap: var(--sp-4); }
.work-card--site .image-frame__img { transition: none; }
/* Two sites side by side. Each card keeps its across layout, so the picture
   holds a narrower left column at this width. */
.project-index--sites { grid-template-columns: 1fr; gap: var(--sp-4); }
@media (max-width: 900px) { .project-index--sites { grid-template-columns: 1fr; } }

/* The figures carry the colour: label muted, number in the forest green so the
   eye lands on the count rather than on its name. */

/* The sites follow block 03 directly, so the rail's rule above them would be a
   second divider in a row. */
.band--wide .band-grid__main { border-top: none; padding-top: 0; }
.band--wide .band-grid__rail { border-top: none; }

/* The district stays ink; the blue is reserved for the figures' labels. */
.work-card--site .work-card__kind { color: var(--on-surface); opacity: 1; }

/* The picture carries more of these rows than it does elsewhere. */
.alt-row--tight { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* A second label inside a band that already has one: the practical block runs
   what-you-need first, then the order of the morning. */
.section-mark--sub { margin-top: clamp(40px, 4.5vw, 72px); }
.band--tight .path-list { margin-top: var(--sp-5); }
/* Inside the inset band the three-column form leaves each step a 200px strip;
   the four steps run down the page instead, at reading size. */
.band--tight .path-list { grid-template-columns: 1fr; gap: 0; }
.band--tight .path-list li { padding-block: var(--sp-4); }
.band--tight .path-list__title { font-size: clamp(16px, 1.4vw, 20px); }
.band--tight .path-list__n { font-size: clamp(20px, 1.9vw, 28px); }
.band--tight .path-list li { align-items: center; }
.band--tight .path-list__note {
  font-family: var(--font-read);
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  max-width: 70ch;
}

/* The hour a site is walked, under its name. */
.site-time {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin: var(--sp-2) 0 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: -0.02em;
  color: var(--forest);
}
.site-time span {
  font-weight: 400;
  font-size: clamp(12px, 1.05vw, 15px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--on-surface);
}

/* ============================================================
   THE REFERENCE LAYER  (2026-10-26)
   Built from the coralgardeners.org screenshots the user supplied. The home
   page is composed entirely out of what follows, in this order:

       .shot        hero — a full-viewport photograph, headline over it
       .manifesto   the mission statement on black, over a blue crosshair grid
       .figures     the impact block: huge headline, huge number, mono tabs
       .doors       the action block: three rounded cards on the light ground
       .gram        the social strip: Instagram posts on black
       .endcap      the footer: email line + red button, links, giant wordmark

   Two things carry the whole look: the ground flips hard between #000 and
   #F3F2F0 with nothing in between, and the only colour anywhere is the red.
   ============================================================ */

/* ---------- Ground helpers ----------
   A section declares its ground and everything inside it — including the
   fixed nav passing over it — reads from that one declaration. */
.ground--dark  { background: #000000; color: #FFFFFF; }
.ground--light { background: var(--surface); color: #000000; }

/* The page gutter. Wider than the old container and not centred to a measure:
   the reference runs its content to a fixed inset from the page edge. */
.gut {
  padding-inline: clamp(20px, 9.5vw, 134px);
  max-width: 1680px;
  margin-inline: auto;
  width: 100%;
}

/* ============================================================
   BRANDMARK — the fixed top-left lockup
   The reference stacks its wordmark vertically down the left edge and leaves
   it there for the whole page. logo-beneath.png is a single flat colour with
   a clean alpha channel, so it is used as a MASK and painted by currentColor
   — that is what lets the same file read white over the hero and black over
   the footer without shipping two images.
   ============================================================ */
.brandmark {
  position: fixed;
  top: 18px;
  left: clamp(14px, 2.2vw, 30px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #FFFFFF;
  transition: color 280ms ease;
}
.brandmark__mark {
  width: clamp(26px, 2.1vw, 34px);
  aspect-ratio: 376 / 702;
  background: currentColor;
  -webkit-mask: url("../logo-beneath.png") center / contain no-repeat;
          mask: url("../logo-beneath.png") center / contain no-repeat;
}
/* The word runs downward beside the mark, set in the display face. */
.brandmark__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 1.05vw, 16px);
  letter-spacing: -0.02em;
  line-height: 0.92;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.brandmark:hover { color: var(--sky); }
/* Over a light section the lockup inverts. The lockup is ~130px tall while
   the bar is 72px, so the two read the ground at different depths and get
   their own classes — one probe for both made the wordmark flip a beat
   early and vanish into the band it was leaving. */
body.mark-light .brandmark { color: #000000; }
/* Once the bar turns solid, the tall lockup would straddle it: the mark
   in the bar, the word over the page, each needing a different colour. So
   the word folds away and the mark sits inside the bar, coloured by the
   bar's own ground. */
.brandmark__word { transition: opacity 200ms ease; }
body.bar-solid .brandmark { color: #FFFFFF; }
body.bar-solid.nav-light .brandmark { color: #000000; }
body.bar-solid .brandmark__word { opacity: 0; pointer-events: none; }
/* Small enough (24px wide = 45px tall) to sit inside the 72px bar. */
.brandmark__mark { transition: width 200ms ease; }
body.bar-solid .brandmark__mark { width: 24px; }
body.bar-solid .brandmark { top: 13px; }
body.bar-solid .brandmark:hover { color: var(--sky); }

/* ============================================================
   NAV — two words, centred, floating over whatever is behind them
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 55;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  will-change: auto;
}
/* Once the page moves, the bar gets a solid ground of its own, so the two
   words never sit on top of a heading. It takes the colour of whatever it is
   crossing (main.js sets body.nav-light), and stays opaque — the glass
   version was tried and rejected. */
.nav { transition: background-color 240ms ease; }
.nav.is-scrolled { background: #000000; border: 0; }
body.nav-light .nav.is-scrolled { background: var(--surface); }
.nav__inner {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: none;
  padding-inline: clamp(20px, 4vw, 48px);
}
.nav__inner > nav { margin-left: 0; }
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.6vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__links a,
.nav__links .nav__parent {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  /* The reference tracks these two words wide and sets them small — it is
     the whole reason the bar reads as a mark rather than a menu. */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-decoration: none;
  transition: color 180ms ease;
}
body.nav-light .nav__links a,
body.nav-light .nav__links .nav__parent { color: #000000; }
.nav__parent { cursor: default; padding: 24px 0; display: inline-block; }
.nav__parent::after { content: none; }
.nav__links a[aria-current="page"]::after { content: none; }
.nav__caret { display: none; }
.nav__has-menu::after { content: none; }
.nav__has-menu:hover .nav__parent,
.nav__has-menu:focus-within .nav__parent { color: var(--sky); }

/* The dropdown is a white plate with black type wherever it opens, over
   the black bar and the paper ground alike. */
.nav__menu {
  position: absolute;
  /* Hangs clear of the bar with a small gap, so it reads as its own plate
     with all four corners rounded rather than a tab growing out of the bar. */
  /* The label row is 62px tall inside a 72px bar: 100% + 14px lands the
     plate 4px under the bar's bottom edge. */
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #FFFFFF;
  border: 1px solid #000000;
  border-radius: var(--r-md);
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, visibility 160ms ease;
}
/* An invisible bridge across that gap, so moving down to the menu does
   not drop the hover. */
.nav__menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -16px;
  height: 16px;
}
.nav__has-menu:hover .nav__menu,
.nav__has-menu:focus-within .nav__menu { opacity: 1; visibility: visible; }
.nav__menu a {
  display: block;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #000000;
  white-space: nowrap;
}
body.nav-light .nav__menu a { color: #000000; }
.nav__menu a:hover,
.nav__menu a:focus-visible { background: #F0F0F0; color: #000000; }
.nav__toggle {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--r-sm);
  padding: 9px 14px;
}

/* ============================================================
   SHOT — the hero (minimal, 2026-10-27)
   Paper ground, black type, nothing behind the words. The headline holds the
   left; three photographs sit inside the white on the right at different
   sizes, like prints laid on a table. A hairline, then the lede and the two
   buttons share the bottom row. The photos rise in once on load.
   ============================================================ */
.shot {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(32px, 5vw, 96px);
  padding: 116px clamp(72px, 9.5vw, 134px) clamp(36px, 4vw, 60px);
  background: var(--surface);
  color: #000000;
}
.shot__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(20px, 3vw, 44px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #000000;
}
.shot__title {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  margin: 0 0 clamp(36px, 4vw, 60px);
  /* Sized so REHABILITATE (12 letters) fits the left column. */
  font-size: clamp(40px, 5.8vw, 100px);
  line-height: 0.94;
  letter-spacing: -0.05em;
  color: #000000;
}

/* The prints. Positioned inside their own box so the arrangement scales as
   one piece; each keeps its photograph's proportions. */
.shot__photos {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  min-height: 440px;
  margin: clamp(28px, 3vw, 48px) 0 clamp(36px, 4vw, 60px);
}
.shot__photo {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-img, 12px);
  background: var(--surface-sunken);
}
.shot__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* No two prints touch: the tall one holds the right, the other two step
   down the left with white between them. */
.shot__photo--a { top: 6%;  right: 0;   width: 50%; aspect-ratio: 3 / 4; }
.shot__photo--b { top: 0;   left: 0;    width: 42%; aspect-ratio: 4 / 3; }
.shot__photo--c { bottom: 0; left: 14%; width: 28%; aspect-ratio: 3 / 4; }
@media (prefers-reduced-motion: no-preference) {
  .shot__photo { animation: shot-print 1s cubic-bezier(0.22, 0.8, 0.28, 1) both; }
  .shot__photo--a { animation-delay: 120ms; }
  .shot__photo--b { animation-delay: 240ms; }
  .shot__photo--c { animation-delay: 360ms; }
}
@keyframes shot-print {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.shot__foot {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px clamp(32px, 5vw, 80px);
  flex-wrap: wrap;
  padding-top: clamp(22px, 2.4vw, 32px);
  border-top: 1px solid rgba(0,0,0,0.16);
}
.shot__lede {
  margin: 0;
  max-width: 44ch;
  font-family: var(--font-read);
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: #000000;
}
.shot__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================================
   MANIFESTO — the mission statement
   Black, with the reference's faint blue crosshair grid drawn behind it, and
   the copy held in one column indented from the left rather than centred.
   ============================================================ */
.manifesto {
  position: relative;
  padding-block: var(--section-y);
  background-color: #000000;
  /* The grid: a 186px tile carrying one hairline cross and the two faint
     rules that meet at it. Inlined as SVG so it costs no request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='186' height='186'%3E%3Cg stroke='%2300A1DB' fill='none'%3E%3Cpath d='M93 0v186M0 93h186' stroke-opacity='.10'/%3E%3Cpath d='M93 85v16M85 93h16' stroke-opacity='.62' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center top;
}
.manifesto__inner { position: relative; }
/* The copy column sits a quarter of the way in, exactly as the reference
   does — the empty left third is part of the composition. */
.manifesto__body {
  margin-left: clamp(0px, 14vw, 230px);
  /* In px, not ch: `ch` here would resolve against this wrapper's inherited
     16px rather than the 35px paragraphs inside it, which collapsed the
     column to a fifth of its intended width. The reference runs its copy
     about half the page wide. */
  max-width: clamp(300px, 48vw, 740px);
}
.manifesto__body .manifesto__label {
  margin: 0 0 clamp(28px, 3.4vw, 52px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}
.manifesto__body p {
  margin: 0 0 clamp(32px, 3.6vw, 56px);
  font-family: var(--font-read);
  font-weight: 400;
  font-size: clamp(21px, 2.35vw, 35px);
  line-height: 1.34;
  letter-spacing: -0.015em;
  color: #FFFFFF;
}
.manifesto__body p:last-child { margin-bottom: 0; }
.manifesto__body em {
  font-style: normal;
  font-weight: 400;
  /* "Heros Text" ships no italic, so an unqualified <em> falls through to the
     bold family. Naming the face keeps the phrase the same weight as the
     sentence around it — the mark is the colour, nothing else. */
  font-family: var(--font-read);
  color: var(--red);
}

/* ============================================================
   FIGURES — the impact block
   Headline left in the display face, a paragraph under it, then the number
   set enormous, and the mono tabs that name what is being counted.
   ============================================================ */
.figures {
  padding-block: var(--section-y);
  background: #000000;
  color: #FFFFFF;
}
.figures__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.figures__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.8vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.figures__note {
  margin: clamp(22px, 2.4vw, 36px) 0 0;
  max-width: 46ch;
  font-family: var(--font-read);
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: #FFFFFF;
}
/* The number. It is the biggest thing in the block by a long way — that
   contrast is the point of the section. */
.figures__count {
  display: block;
  margin-top: clamp(40px, 5vw, 76px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 10.4vw, 168px);
  line-height: 0.86;
  letter-spacing: -0.055em;
  font-feature-settings: "tnum" on;
  color: #FFFFFF;
}
.figures__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(26px, 2.8vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}
.figures__tab {
  appearance: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 11px 16px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}
.figures__tab:hover { border-color: #FFFFFF; color: #FFFFFF; }
/* The selected tab takes the red edge and red type — the reference's tab row
   marks the live one with the accent, nothing more. */
.figures__tab[aria-pressed="true"] {
  border-color: var(--red);
  color: var(--red);
}
/* The right column: the collection sites, as a plain hairline ledger. */
.figures__ledger { margin: 0; padding: 0; list-style: none; }
.figures__ledger li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: clamp(16px, 1.7vw, 24px) 0;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.figures__ledger li:last-child { border-bottom: 1px solid rgba(255,255,255,0.18); }
.figures__ledger dt, .figures__ledger .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.figures__ledger .v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 23px);
  letter-spacing: -0.03em;
  color: #FFFFFF;
  font-feature-settings: "tnum" on;
}

/* ============================================================
   DOORS — the action block
   The centred headline, then three cards. Each card is a tall rounded black
   plate: title, one line under it, a picture, and the button at the foot.
   The last one carries a photograph edge to edge and the red button.
   ============================================================ */
.doors-head {
  margin: 0 0 clamp(40px, 5vw, 76px);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 5.2vw, 82px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: #000000;
}
.doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}
.door {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(420px, 44vw, 620px);
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: var(--r-card);
  background: #000000;
  color: #FFFFFF;
  overflow: hidden;
  isolation: isolate;
}
/* The photo variant: the picture is the card's ground, dimmed just enough
   for the type to hold. */
.door--photo > .door__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
}
.door--photo > .door__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.door--photo > .door__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.24) 44%, rgba(0,0,0,0.58) 100%);
}
.door__title {
  margin: 0;
  text-align: center;
  font-family: var(--font-read);
  font-weight: 400;
  font-size: clamp(30px, 3.1vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}
.door__sub {
  margin: 10px auto 0;
  max-width: 30ch;
  text-align: center;
  font-family: var(--font-read);
  font-weight: 400;
  font-size: clamp(13px, 1.02vw, 15px);
  line-height: 1.5;
  color: #FFFFFF;
}
/* The picture inside a plate card: centred, floating, given the room left
   between the copy and the button. */
/* A fixed window, not a flexible one. The images carry width/height
   attributes, so without an explicit height here the <img> rendered at its
   natural 1300px and the card grew to 1900px tall. */
.door__art {
  height: clamp(190px, 21vw, 300px);
  margin: clamp(20px, 2.2vw, 32px) 0;
  border-radius: var(--r-img);
  overflow: hidden;
}
.door__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* On the photo card the window is empty — it is only holding the space that
   lets the picture behind it breathe between the copy and the button. */
.door--photo .door__art { border-radius: 0; }
.door__foot { margin-top: auto; }

/* ============================================================
   GRAM — the Instagram strip
   Black, a hairline across the top, the section name left and the handle
   right, then the posts running off the right edge of the page.
   ============================================================ */
.gram { padding-block: var(--section-y); background: #000000; color: #FFFFFF; }
.gram__rule { border: 0; border-top: 1px solid rgba(255,255,255,0.26); margin: 0 0 clamp(26px, 3vw, 46px); }
.gram__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-bottom: clamp(26px, 3vw, 44px);
}
.gram__title {
  margin: 0;
  font-family: var(--font-read);
  font-weight: 400;
  font-size: clamp(24px, 2.5vw, 38px);
  letter-spacing: -0.025em;
  color: #FFFFFF;
}
.gram__handle {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #FFFFFF;
}
.gram__handle-name {
  font-family: var(--font-read);
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 26px);
  letter-spacing: -0.02em;
}
.gram__handle-sub {
  display: block;
  margin-top: 3px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.gram__handle:hover .gram__handle-name { color: var(--sky); }
/* The rail scrolls sideways and deliberately runs past the right gutter, so
   the row reads as a feed that continues rather than a tidy set of four. */
.gram__rail {
  display: flex;
  gap: clamp(10px, 1vw, 16px);
  margin: 0;
  padding: 0 clamp(20px, 9.5vw, 134px) 4px 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.gram__rail::-webkit-scrollbar { display: none; }
.gram__post {
  flex: 0 0 clamp(210px, 20vw, 286px);
  scroll-snap-align: start;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #000000;
}
.gram__post a { display: block; text-decoration: none; color: inherit; }
.gram__post-top {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
}
.gram__avatar {
  width: 13px;
  aspect-ratio: 376 / 702;
  background: #FFFFFF;
  -webkit-mask: url("../logo-beneath.png") center / contain no-repeat;
          mask: url("../logo-beneath.png") center / contain no-repeat;
  flex: none;
}
.gram__post-handle {
  font-family: var(--font-read);
  font-weight: 400;
  font-size: 13px;
  color: #FFFFFF;
}
/* height:auto is required, not optional: the markup carries width/height
   attributes, and without it the UA presentational hint wins over
   aspect-ratio and the post renders at the photograph's full 1800px. */
.gram__post img.gram__shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.gram__post-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 13px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.gram__post a:hover .gram__post-foot { color: var(--sky); }
.gram__dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: clamp(22px, 2.4vw, 34px) 0 0;
  padding: 0;
  list-style: none;
}
.gram__dots li { width: 1px; height: 12px; background: rgba(255,255,255,0.4); }
.gram__dots li[data-on] { width: 7px; height: 7px; border-radius: 50%; background: var(--sky); align-self: center; }

/* ============================================================
   ENDCAP — the footer
   The light ground. An email line with the red button beside it, the link
   columns under red mono labels, the social circles, and then the wordmark
   set as large as the page will carry it.
   ============================================================ */
.endcap {
  padding-block: calc(var(--section-y) * 0.6) clamp(16px, 1.6vw, 22px);
  background: var(--surface);
  color: #000000;
}
.endcap__call {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 64px);
  flex-wrap: wrap;
}
/* The email line. It is a link, not an input — the site has no form endpoint,
   so the shape of the reference's field is kept but it opens a mail client. */
.endcap__line {
  flex: 1 1 420px;
  min-width: 0;
  display: block;
  padding-bottom: clamp(14px, 1.4vw, 20px);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-read);
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 38px);
  letter-spacing: -0.025em;
  color: #000000;
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease;
}
.endcap__line:hover { color: #000000; border-bottom-color: #000000; }
.endcap__call .btn { flex: none; }

.endcap__grid {
  display: flex;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 72px);
  flex-wrap: wrap;
  margin-top: clamp(44px, 5vw, 80px);
}
.endcap__cols { display: flex; gap: clamp(40px, 7vw, 124px); flex-wrap: wrap; }
.endcap__col ul { margin: 0; padding: 0; list-style: none; }
.endcap__col li { margin-top: clamp(10px, 1vw, 14px); }
/* The column labels are the second place the red appears. */
.endcap__label {
  margin: 0 0 clamp(14px, 1.4vw, 20px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
}
.endcap__col a {
  font-family: var(--font-read);
  font-weight: 400;
  font-size: clamp(14px, 1.15vw, 17px);
  color: #000000;
  text-decoration: none;
  transition: color 160ms ease;
}
.endcap__col a:hover { color: var(--sky); }
.endcap__social { display: flex; gap: 10px; align-items: flex-start; }
.endcap__social a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: var(--surface);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0;
  transition: background-color 160ms ease;
}
.endcap__social a:hover { background: var(--sky); }
.endcap__social svg { width: 17px; height: 17px; fill: currentColor; display: block; }

/* The wordmark. Sized so one word fills the page's width — the single
   largest piece of type on the site, and the last thing on the page. */
.endcap__wordmark {
  display: block;
  margin: clamp(44px, 6vw, 96px) 0 clamp(18px, 2vw, 30px);
  font-family: var(--font-display);
  font-weight: 700;
  /* 8 characters at Space Mono's ~0.6em advance: 100/(0.6*8) ≈ 20.8vw, less
     the gutters. Sized to the column, as every display line here is. */
  /* Satoshi Black caps run wider than Space Mono's 0.6em advance. */
  font-size: min(17.6vw, 288px);
  line-height: 0.82;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  color: #000000;
  text-align: center;
  white-space: nowrap;
}
.endcap__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding-top: clamp(16px, 1.8vw, 24px);
  border-top: 1px solid var(--border);
}
.endcap__legal ul { display: flex; gap: clamp(16px, 2vw, 30px); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.endcap__legal a, .endcap__legal p {
  margin: 0;
  font-family: var(--font-read);
  font-weight: 400;
  font-size: 13px;
  color: #000000;
  text-decoration: none;
}
.endcap__legal a:hover { color: var(--sky); }

/* ---------- Narrower screens ---------- */
@media (max-width: 1080px) {
  .figures__grid { grid-template-columns: 1fr; }
  .doors { grid-template-columns: 1fr; }
  .door { min-height: 0; }
  .door__art img { max-width: 60%; }
  .manifesto__body { margin-left: 0; max-width: 30ch; }
}

/* The action band's own rhythm, and the social rail's open right edge. */
.doors-band { padding-block: var(--section-y); }

/* ---------- One gutter for the whole site ----------
   The fixed lockup occupies the top-left corner down to about 150px, so the
   old 48px band gutter ran headlines straight through it. Every band now
   takes the same inset .gut does — which is also exactly where the reference
   starts its own content. Below 861px the stacked layout starts well under
   the (smaller) lockup, so the narrow gutter comes back. */
@media (min-width: 861px) {
  .band > .container,
  .container { padding-inline: clamp(72px, 9.5vw, 134px); }
  .stage { padding-inline: clamp(72px, 9.5vw, 134px); }
}

/* The bar went from sticky (in flow) to fixed (over the page), so the first
   band of every page that still opens with one has to clear its 72px. The
   home page opens with .shot, which is meant to run under it. */
main > .band:first-child { padding-top: calc(var(--section-y) + 72px); }
main > .band--tight:first-child { padding-top: calc(var(--section-y) * 0.6 + 72px); }
.gut--open-right { padding-right: 0; max-width: none; margin-right: 0; }

/* ---------- The nav on a touch screen ----------
   Restated here because this layer sits after the original nav rules and
   would otherwise win: the bar keeps its centred two words, the panel drops
   as a white plate rather than the old glass, and both submenus sit open
   inside it (there is no hover to open them with).
   ---------- */
@media (max-width: 860px) {
  .nav__inner { justify-content: flex-end; }
  .nav__toggle { display: block; }
  .nav__links {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: #FFFFFF;
    border: 0;
    padding: var(--sp-4) clamp(20px, 6vw, 40px) var(--sp-6);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links li { width: 100%; }
  .nav__links a,
  body.nav-light .nav__links a { display: block; padding: 12px 0; color: #000000; }
  .nav__links .nav__parent,
  body.nav-light .nav__links .nav__parent {
    display: block;
    padding: var(--sp-5) 0 var(--sp-2);
    color: #000000;
  }
  .nav__menu,
  .nav__has-menu:hover .nav__menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    padding: 0 0 var(--sp-3) var(--sp-5);
    background: none;
    border-radius: 0;
  }
  /* On the phone the submenu sits open inside the white menu panel. */
  .nav__menu,
  .nav__has-menu:hover .nav__menu { border: 0; }
  .nav__menu a,
  body.nav-light .nav__menu a { color: #000000; }
  .nav__menu a:hover { background: none; color: var(--red); }
}
@media (min-width: 861px) {
  .nav__toggle { display: none; }
  /* The original stylesheet drops the bar into a panel below 1024px. This
     layer moves that breakpoint to 860px, so the old rules have to be
     undone across the 861-1024px band or the links would still be absolutely
     positioned under a hidden toggle, on the old glass plate. */
  .nav__links {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(22px, 2.6vw, 40px);
    background: transparent;
    border: 0;
    padding: 0;
  }
  .nav__links li { width: auto; }
  .nav__links a { display: inline; padding: 0; }
  .nav__links .nav__parent { display: inline-block; padding: 24px 0; opacity: 1; }
  /* That reset is broad enough to catch the dropdown's own links, which
     lost all their padding and sat flush against the plate's edge. */
  .nav__links .nav__menu a { display: block; padding: 12px 16px; }
}

/* ---------- The reference layer on a phone ---------- */
@media (max-width: 720px) {
  .brandmark { top: 14px; gap: 4px; }
  .brandmark__word { font-size: 12px; }
  .shot { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; padding: 104px 20px 32px; }
  .shot__title { grid-row: 2; margin: 32px 0 28px; font-size: clamp(34px, 11vw, 60px); }
  .shot__photos { grid-column: 1; grid-row: 3; min-height: 0; height: 72vw; margin: 0 0 28px; }
  .shot__foot { grid-row: 4; }
  .shot__meta span:nth-child(2) { display: none; }
  .shot__actions { width: 100%; }
  .shot__actions .btn { flex: 1 1 0; min-width: 0; }
  .manifesto__body { max-width: none; }
  .manifesto__body p { font-size: clamp(19px, 5.4vw, 26px); }
  .figures__count { font-size: clamp(48px, 17vw, 86px); }
  .figures__ledger li { flex-direction: column; gap: 4px; align-items: flex-start; }
  .door__art img { max-width: 72%; }
  .endcap__call { flex-direction: column; align-items: stretch; }
  .endcap__call .btn { width: 100%; }
  .endcap__grid { flex-direction: column; }
  /* The wordmark is the one thing allowed to stay enormous on a phone — but
     it has to fit the screen, not the desktop column. */
  .endcap__wordmark { font-size: min(17.6vw, 140px); }
  .endcap__legal { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
}

/* ============================================================
   OUR STORY — about/our-story.html
   Rebuilt after coralgardeners.org/our-story. Two modes:
   - the stack (default, phones, reduced motion): a black opening, then
     paper panels down a hairline on the left edge
   - .is-pinned (js/story.js, ≥1024px with motion): the section is made
     tall, the stage sticks, and the panels run sideways under a ruler
   ============================================================ */
.story { position: relative; background: #000000; }
.story__stage { position: relative; background: #000000; }

/* -- The opening -- */
.story__hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #000000;
}
.story__float {
  position: absolute;
  left: var(--mx);
  top: var(--my);
  width: var(--mw);
  transform: translateY(-50%);
  pointer-events: none;
}
.story__float img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  will-change: transform;
}
.story__hero-copy {
  position: absolute;
  top: 50%;
  left: clamp(20px, 9.5vw, 134px);
  right: 20px;
  z-index: 6;
  transform: translateY(-50%);
}
.story__kicker {
  margin: 0;
  max-width: 46ch;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.story__mega {
  margin: 40px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 6.4vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: #FFFFFF;
}
/* The headline arrives one word at a time out of a blur — CSS only, so it
   needs nothing from the script to be readable. */
.story__w { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .story__w {
    animation: story-word 0.9s cubic-bezier(0.22, 0.8, 0.28, 1) both;
    animation-delay: calc(240ms + var(--i) * 90ms);
  }
}
@keyframes story-word {
  from { opacity: 0; filter: blur(14px); transform: translateY(0.18em); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}

/* -- The panels -- */
.story__track { position: relative; display: flex; flex-direction: column; }
.story__panel {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 56px 20px 56px 48px;
  background: var(--surface);
  color: #000000;
}
/* The hairline every panel hangs from, and the short dash that ties each
   label to it. */
.story__panel::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 20px;
  width: 1px;
  background: rgba(0,0,0,0.2);
}
.story__label {
  position: relative;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000000;
}
.story__label::before {
  content: "";
  position: absolute;
  top: 50%; left: -28px;
  width: 16px; height: 1px;
  background: rgba(0,0,0,0.4);
}
.story__media { margin-top: 32px; }
.story__img,
.story__lead {
  display: block;
  max-width: 100%;
  height: 34vh;
  width: auto;
  object-fit: contain;
  object-position: left top;
}
.story__lead { width: 74%; object-fit: cover; will-change: transform; }
.story__sub {
  margin: 20px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000000;
}
.story__copy { margin-top: 20px; max-width: 46ch; }
.story__copy p,
.story__body {
  margin: 0;
  font-family: var(--font-read);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #000000;
}
.story__copy p + p { margin-top: 20px; }
.story__copy em {
  font-family: var(--font-read);
  font-style: normal;
  color: #000000;
}
.story__aside .story__sub { margin-top: 0; }
.story__aside .story__body { margin-top: 20px; }

/* The quote spread: quote | aside over figure | photo. */
.story__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 6vw;
  margin-top: 32px;
}
.story__quote { margin: 0; }
.story__quote p {
  margin: 0;
  font-family: var(--font-text);
  font-weight: 700;
  /* Space Mono caps run ~0.6em a letter, so this is sized for the longest
     word (NEIGHBOURHOOD) to fit half the quote panel. */
  font-size: clamp(1.5rem, 2.2vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #000000;
}
.story__aside { max-width: 38ch; padding-top: 8px; }
.story__fig { margin: 0; display: flex; flex-direction: column; min-height: 0; }
.story__fig img,
.story__fig-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 40vh;
  object-fit: contain;
  object-position: left top;
}
.story__fig figcaption { margin-top: 16px; max-width: 40ch; }

/* The one black panel: the count. */
.story__panel--dark { background: #000000; color: #FFFFFF; }
.story__panel--dark::before { background: rgba(255,255,255,0.2); }
.story__panel--dark .story__label,
.story__panel--dark .story__sub { color: #FFFFFF; }
.story__panel--dark .story__label::before { background: rgba(255,255,255,0.4); }
.story__panel--dark .story__body { color: #FFFFFF; max-width: 40ch; margin-top: 20px; }
.story__stat { display: flex; flex: 1; flex-direction: column; justify-content: center; padding-block: 48px; }
.story__figure {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}
.story__cta { display: flex; flex: 1; flex-direction: column; justify-content: center; padding-block: 48px; }
.story__mega--cta { margin: 0; color: #000000; font-size: clamp(2.2rem, 4.2vw, 5rem); max-width: 12ch; }
.story__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* -- Pinned, sideways mode -- */
.story.is-pinned .story__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  contain: paint;
}
.story.is-pinned .story__hero { position: absolute; inset: 0; min-height: 0; }
.story.is-pinned .story__float { left: var(--x); top: var(--y); width: var(--w); transform: none; }
.story.is-pinned .story__track {
  position: absolute;
  inset: 0 auto 0 0;
  flex-direction: row;
  height: 100%;
  opacity: 0;
  will-change: transform;
}
.story.is-pinned .story__panel { height: 100%; padding: 168px 20px 48px 48px; }
.story.is-pinned .story__panel--sm { width: 26vw; }
.story.is-pinned .story__panel--md { width: 32vw; }
.story.is-pinned .story__panel--lg { width: 52vw; }
.story.is-pinned .story__split { grid-template-columns: 1fr 1fr; gap: 4vh 4vw; flex: 1; min-height: 0; }
.story.is-pinned .story__fig img,
.story.is-pinned .story__fig-img { max-height: 34vh; }
.story.is-pinned .story__panel--dark { padding-top: 168px; }

/* The ruler. */
.story-ruler {
  position: absolute;
  z-index: 20;
  top: 88px;
  left: 8rem;
  right: calc(clamp(20px, 9.5vw, 134px) + 15rem);
  height: 56px;
  display: flex;
  align-items: center;
  color: #000000;
  opacity: 0;
}
.story-ruler__year {
  position: relative;
  width: 9ch;
  height: 20px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.story-ruler__y {
  position: absolute;
  inset: 0;
  line-height: 20px;
  white-space: nowrap;
  transition: transform 300ms ease-out, opacity 300ms ease-out;
}
.story-ruler__y.is-in { transform: translateY(12px); opacity: 0; transition: none; }
.story-ruler__y.is-out { transform: translateY(-12px); opacity: 0; transition-duration: 200ms; transition-timing-function: ease-in; }
.story-ruler__rail {
  position: relative;
  flex: 1;
  height: 100%;
  margin-left: 24px;
}
.story-ruler__tick {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 8px;
  background: currentColor;
  opacity: 0.4;
  transform: translateY(-50%);
}
.story-ruler__tick--first { height: 16px; opacity: 0.9; }
.story-ruler__year.is-on-dark { color: #FFFFFF; }
.story-ruler__tick.is-on-dark { background: #FFFFFF; }
.story-ruler__marker {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 20px;
  margin-left: -1px;
  background: var(--red);
  transform: translateY(-50%);
}
/* The ghost that follows the cursor along the rail. */
.story-ruler__ghost {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 30px;
  margin-top: -15px;
  background: var(--sky);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.story-ruler__ghost-label {
  position: absolute;
  top: 38px;
  left: 0;
  transform: translateX(-50%);
  padding: 4px 8px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #000000;
  color: #FFFFFF;
}

/* The pill, top right: what the story has reached. */
.story-pill {
  position: absolute;
  z-index: 40;
  top: 96px;
  right: clamp(20px, 9.5vw, 134px);
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  background: #000000;
  color: #FFFFFF;
  pointer-events: none;
  opacity: 0;
  transition: background-color 300ms ease, color 300ms ease;
}
.story-pill--on-dark { background: #FFFFFF; color: #000000; }

/* ============================================================
   RAIL — the home page's vertical timeline (js/rail.js)
   The Our story ruler stood on its end down the right edge, mirroring the
   brandmark on the left. Ticks grow leftward from the edge; each one turns
   white over a black section and black over paper.
   ============================================================ */
.rail {
  position: fixed;
  z-index: 45;
  top: 120px;
  bottom: 40px;
  right: clamp(14px, 2.2vw, 30px);
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #000000;
  pointer-events: none;
  transition: color 280ms ease;
}
.rail--on-dark { color: #FFFFFF; }
.rail__label {
  position: relative;
  width: 20px;
  height: 150px;
  flex-shrink: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rail__word {
  position: absolute;
  top: 0;
  right: 0;
  writing-mode: vertical-rl;
  white-space: nowrap;
  line-height: 20px;
  transition: transform 300ms ease-out, opacity 300ms ease-out;
}
.rail__word.is-in { transform: translateX(-12px); opacity: 0; transition: none; }
.rail__word.is-out { transform: translateX(12px); opacity: 0; transition-duration: 200ms; transition-timing-function: ease-in; }
.rail__track {
  position: relative;
  flex: 1;
  width: 56px;
  margin-top: 20px;
  pointer-events: auto;
}
.rail__tick {
  position: absolute;
  right: 0;
  width: 8px;
  height: 1px;
  background: rgba(0,0,0,0.85);
  opacity: 0.4;
}
.rail__tick--major { width: 16px; opacity: 0.9; }
.rail__tick.is-on-dark { background: #FFFFFF; }
.rail__marker {
  position: absolute;
  right: 0;
  width: 22px;
  height: 2px;
  margin-top: -1px;
  background: var(--red);
}
.rail__ghost {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 1px;
  background: var(--sky);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.rail__ghost-label {
  position: absolute;
  top: -11px;
  right: 50px;
  padding: 4px 8px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #000000;
  color: #FFFFFF;
}
@media (max-width: 1023px) {
  .rail { display: none; }
}

/* ============================================================
   PHOTO SECTIONS — home "What we do" card
   After the coralgardeners reference: a photograph filling a rounded card
   that sits a narrow paper margin in from the page edge, copy laid over it.
   ============================================================ */
.photo-band {
  padding: var(--frame-inset);
  background: var(--surface);
}
.photo-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-photo);
  background: #000000;
  color: #FFFFFF;
}
.photo-card {
  display: flex;
  align-items: center;
  min-height: min(88svh, 900px);
}
.photo-card__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,0,0.56) 0%, rgba(0,0,0,0.34) 55%, rgba(0,0,0,0.16) 100%);
}
/* The copy column starts a little under a third of the way in, as the
   reference does, and never runs wider than a comfortable measure. */
.photo-card__body {
  width: 100%;
  max-width: calc(29% + 600px);
  padding: clamp(56px, 8vw, 120px) clamp(24px, 4vw, 56px) clamp(56px, 8vw, 120px) clamp(24px, 29%, 420px);
}
.photo-card__label {
  margin: 0 0 clamp(18px, 2vw, 26px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.photo-card__title {
  margin: 0;
  font-family: var(--font-text);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #FFFFFF;
}
.photo-card__title { font-size: clamp(2.4rem, 4.6vw, 4.6rem); max-width: 16ch; }
.photo-card__text {
  margin: clamp(22px, 2.4vw, 32px) 0 0;
  max-width: 52ch;
  font-family: var(--font-read);
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: #FFFFFF;
}
.photo-card__text + .photo-card__text { margin-top: 16px; }

@media (max-width: 860px) {
  .photo-card { min-height: 78svh; align-items: flex-end; }
  .photo-card::after { background: linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.36) 100%); }
  .photo-card__body { max-width: none; padding: 48px 22px; }
}

/* ============================================================
   HEADINGS — one voice, site-wide (2026-10-27)
   The user: every heading is Space Mono, in capitals (h1–h3 Bold since
   2026-10-31, the rest Regular). This sits
   after every component so it wins over the per-component weights and
   faces (the hero's Bold, the sans titles on the photo cards and doors).
   It only touches face, weight, case and tracking — sizes are left to the
   components and to the phone block below.
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.story__mega,
.story__quote p,
.path-list__title {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  font-synthesis: none;
}
/* 2026-10-31: the big headings go Bold for emphasis — h1, h2, h3 and the
   story's mega line. Smaller headings, labels, eyebrows, nav, buttons and
   the story quote stay Regular, so the weight contrast does the work.
   Bold monospace is the same width as Regular, so no line gets longer. */
h1, h2, h3,
.story__mega {
  font-weight: 700 !important;
  letter-spacing: -0.04em;
}
/* 2026-11-01: subheadings and the smaller headings go back to Regular —
   every h3, the small h2 titles and the section label. Only the big
   display headings (h1, the large h2s, the story mega) stay Bold. */
h3, h4,
.gram__title, .cp-direct__title, .cg-glass__title, .pp-why__title,
.section-mark {
  font-weight: 400 !important;
}
/* SATOSHI (2026-11-01): the Space Mono Bold headings move to Satoshi —
   headings in Black, subheadings (every h3 and the small h2 titles) in
   Bold. Big display figures and the footer wordmark go with them. Space
   Mono keeps every other job: labels, eyebrows, nav, buttons, tickers,
   tags, ledger numbers, the brandmark. (A version with more Space Mono
   was tried and reverted by the user.) */
h1, h2, h3,
.story__mega, .cg-mosaic__line, .story__figure,
.figures__count, .cg-number__num, .cg-reviews__score strong, .cg-stats strong,
.endcap__wordmark {
  font-family: var(--font-sat) !important;
  font-synthesis: none;
  letter-spacing: -0.02em !important;
}
h1, h2,
.story__mega, .cg-mosaic__line, .story__figure,
.figures__count, .cg-number__num, .cg-reviews__score strong, .cg-stats strong,
.endcap__wordmark {
  font-weight: 900 !important;
}
h3,
.gram__title, .cp-direct__title, .cg-glass__title, .pp-why__title {
  font-weight: 700 !important;
}
/* Small print — the legal line, form notes, handles, tiny sub-lines —
   in Satoshi Regular. */
.endcap__legal, .endcap__legal a, .endcap__legal p,
.cp-note, .pp-call__sub, .gram__post-handle {
  font-family: var(--font-sat) !important;
  font-weight: 400 !important;
}
h3,
.gram__title, .cp-direct__title, .cg-glass__title, .pp-why__title {
  font-weight: 700 !important;
}
/* The titles that were set in the sans ran tight for it; Space Mono's caps
   want only a little pulled in. */
.photo-card__title,
.door__title,
.story__quote p {
  letter-spacing: -0.03em;
  line-height: 1.04;
}

/* ============================================================
   BUTTONS — two designs (2026-10-30)
   Red is the main action. White is the second action when two buttons sit
   side by side. A button on its own is always red. Both are flat rectangles
   with unbolded type, so they read as one family. The white button carries a
   hairline so it holds its edge on paper, and turns red on hover.
   !important because the per-ground overrides (dark bands, the slab, the
   black cards) would otherwise pull a button back to an old outline.
   ============================================================ */
.btn,
.btn--primary, .btn--secondary, .btn--light, .btn--blue {
  background: var(--red) !important;
  border: 1px solid var(--red) !important;
  color: #FFFFFF !important;
}
.btn:hover,
.btn:focus-visible {
  background: var(--red-hover) !important;
  border-color: var(--red-hover) !important;
  color: #FFFFFF !important;
}
.btn.btn--white {
  background: #FFFFFF !important;
  border: 1px solid #000000 !important;
  color: #000000 !important;
}
.btn.btn--white:hover,
.btn.btn--white:focus-visible {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #FFFFFF !important;
}

/* ============================================================
   COLLABORATE — get-involved/partner.html (2026-10-29)
   Rebuilt on coralgardeners.org/partnerships: photo hero with the title in
   the bottom-left, a faded-edge strip, one centred statement on black, a
   3-up grid of photo cards whose hover lifts a white detail panel, a full
   photograph carrying a card, and the closing call on black. Inner content
   aligns to the site gutter.
   ============================================================ */
.pp { --pp-x: clamp(20px, 9.5vw, 134px); }

/* -- Hero -- */
.pp-hero {
  position: relative;
  height: min(88svh, 60vw);
  min-height: 520px;
  overflow: hidden;
  background: #000000;
  color: #FFFFFF;
}
.pp-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
.pp-hero::before,
.pp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pp-hero::before { background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 160px); }
.pp-hero::after  { background: linear-gradient(0deg, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.20) 50%, rgba(0,0,0,0) 100%); }
.pp-hero__body {
  position: absolute;
  z-index: 1;
  left: var(--pp-x);
  right: var(--pp-x);
  bottom: clamp(40px, 4vw, 56px);
}
.pp-hero__title {
  margin: 0;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: #FFFFFF;
}
.pp-hero__lede {
  margin: clamp(20px, 2vw, 24px) 0 0;
  max-width: 52ch;
  font-family: var(--font-read);
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: #FFFFFF;
}
.pp-hero__actions { margin-top: clamp(24px, 2.4vw, 32px); }

/* -- The strip: the ticker set like the reference's logo marquee, on
      white, with the edges fading out. Used under every subpage hero;
      thin tape, blue text (user, 2026-11-01). -- */
.ticker.ticker--strip {
  position: relative;
  padding-block: clamp(12px, 1.1vw, 16px);
  background: #FFFFFF;
  border: 0;
}
.ticker--strip::before,
.ticker--strip::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  z-index: 1;
  width: 14%;
  pointer-events: none;
}
.ticker--strip::before { left: 0;  background: linear-gradient(90deg, #FFFFFF, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0)); }
.ticker--strip::after  { right: 0; background: linear-gradient(270deg, #FFFFFF, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0)); }
.ticker.ticker--strip .ticker__item {
  margin-left: 0;
  font-family: var(--font-mono);
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.08em;
  color: var(--blue);
  padding-inline: clamp(40px, 4vw, 64px);
}
.ticker.ticker--strip .ticker__item + .ticker__item,
.ticker.ticker--strip .ticker__group + .ticker__group .ticker__item:first-child { margin-left: 0; }

/* -- Statement -- */
.pp-statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: min(95svh, 900px);
  padding: var(--section-y) var(--pp-x);
  background: #000000;
  color: #FFFFFF;
  text-align: center;
}
.pp-statement__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.pp-statement__line {
  margin: clamp(32px, 3vw, 40px) auto 0;
  max-width: 30ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* -- Photo cards -- */
.pp-cards {
  padding: 12px var(--pp-x) var(--section-y);
  background: #FFFFFF;
}
.pp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pp-card {
  position: relative;
  overflow: hidden;
  background: #000000;
  outline: none;
}
.pp-card > img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 1200ms cubic-bezier(0.22, 0.8, 0.28, 1);
}
.pp-card--wide { grid-column: 1 / -1; }
.pp-card--wide > img { aspect-ratio: 16 / 7; }
.pp-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 66%;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,0.35) 50%, rgba(0,0,0,0));
}
.pp-card__cover,
.pp-card__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: clamp(20px, 1.8vw, 24px);
}
.pp-card__cap {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.pp-card__n { margin-right: 8px; }
.pp-card__title {
  margin: 8px 0 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #FFFFFF;
}
/* The white panel waits below the card and slides up on hover or focus,
   carrying the detail. */
.pp-card__panel {
  z-index: 2;
  background: #FFFFFF;
  transform: translateY(101%);
  transition: transform 500ms cubic-bezier(0.22, 0.8, 0.28, 1);
}
.pp-card__panel .pp-card__cap { color: var(--red); }
.pp-card__panel .pp-card__title { color: #000000; max-width: 24ch; }
.pp-card__note {
  margin: 12px 0 0;
  max-width: 40ch;
  font-family: var(--font-read);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: #000000;
}
@media (hover: hover) {
  .pp-card:hover > img { transform: scale(1.04); }
  .pp-card:hover .pp-card__panel,
  .pp-card:focus-visible .pp-card__panel { transform: translateY(0); }
}
/* No hover on touch: the detail sits under the photograph instead. */
@media (hover: none) {
  .pp-card { background: #FFFFFF; }
  .pp-card::after { height: 0; }
  .pp-card__cover { display: none; }
  .pp-card__panel { position: static; transform: none; padding-inline: 0; }
}

/* -- Why: a full photograph carrying a card -- */
.pp-why { position: relative; background: #000000; }
.pp-why__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.pp-why__wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: clamp(20px, 5vw, 80px) var(--pp-x);
}
.pp-why__card {
  width: 100%;
  max-width: 34rem;
  padding: clamp(28px, 3vw, 40px);
  border-radius: clamp(24px, 2.6vw, 44px);
  /* Glass (2026-10-31, user request): frosted over the photograph, the
     aerial view blurring through it. A dark tint under the frost keeps the
     white type readable over the bright roofs and trees; a bright hairline
     edge and a soft top sheen give it the glass rim. */
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04) 55%),
    rgba(8, 18, 30, 0.34);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 24px 60px rgba(0, 0, 0, 0.25);
  color: #FFFFFF;
}
.pp-why__title {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.pp-why__list {
  margin: clamp(20px, 2vw, 28px) 0 0;
  padding: 0;
  list-style: none;
}
.pp-why__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.28);
  font-family: var(--font-read);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #FFFFFF;
}
.pp-why__tag {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.pp-why__foot {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.28);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
}
/* On the glass card the type is all white (other rules paint headings
   black on light cards, so this one is stated outright). */
.pp-why .pp-why__card .pp-why__title { color: #FFFFFF !important; }

/* -- Closing call -- */
.pp-call {
  position: relative;
  overflow: hidden;
  padding: var(--section-y) var(--pp-x);
  background-color: #000000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='186' height='186'%3E%3Cg stroke='%2300A1DB' fill='none'%3E%3Cpath d='M93 0v186M0 93h186' stroke-opacity='.10'/%3E%3Cpath d='M93 85v16M85 93h16' stroke-opacity='.62' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center top;
  color: #FFFFFF;
}
.pp-call__inner { max-width: 36rem; margin-inline: auto; }
.pp-call__title {
  margin: 0;
  color: #FFFFFF;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.pp-call__sub {
  margin: 16px 0 0;
  font-family: var(--font-read);
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
}
.pp-call__btn { display: flex; width: 100%; height: 48px; margin-top: 36px; }

@media (max-width: 860px) {
  .pp-hero { height: auto; aspect-ratio: 4 / 5; min-height: 0; }
  .pp-grid { grid-template-columns: 1fr; }
  .pp-card--wide > img { aspect-ratio: 3 / 4; }
  .pp-why__img { aspect-ratio: 3 / 4; }
  .pp-why__wrap { align-items: flex-end; padding: 20px; }
  .pp-statement { min-height: 85svh; }
}

/* ============================================================
   VOLUNTEER — get-involved/volunteer.html (2026-10-29)
   Rebuilt on coralgardeners.org/shop, minus the shop: photo hero with the
   title bottom-left, story rows under a hairline with the heading on the
   left and the meta on the right, the values strip (icon, label, line
   between vertical hairlines), the collection sites, a square photo mosaic,
   and the closing statement set large on black.
   ============================================================ */
.vp { --vp-x: clamp(20px, 9.5vw, 134px); }

/* -- Hero -- */
.vp-hero {
  position: relative;
  height: min(92svh, 66vw);
  min-height: 540px;
  overflow: hidden;
  background: #000000;
  color: #FFFFFF;
}
.vp-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.vp-hero::before,
.vp-hero::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.vp-hero::before { top: 0; height: 160px; background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0)); }
.vp-hero::after  { bottom: 0; height: 66%; background: linear-gradient(0deg, rgba(0,0,0,0.7), rgba(0,0,0,0.25) 50%, rgba(0,0,0,0)); }
.vp-hero__body {
  position: absolute;
  z-index: 1;
  left: var(--vp-x);
  right: var(--vp-x);
  bottom: clamp(32px, 6vw, 96px);
}
.vp .vp-hero__title {
  margin: 0;
  max-width: none;
  font-size: clamp(2.6rem, 7vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: #FFFFFF;
}
.vp-hero__lede {
  margin: clamp(24px, 2.4vw, 32px) 0 0;
  max-width: 44ch;
  font-family: var(--font-read);
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  color: #FFFFFF;
}
.vp-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 2.4vw, 32px); }

/* -- Story rows -- */
.vp-kicker {
  margin: 0;
  padding: var(--section-y) var(--vp-x) 0;
  background: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #000000;
}
.vp-row {
  padding: clamp(28px, 2.6vw, 40px) var(--vp-x) calc(var(--section-y) * 0.6);
  background: #FFFFFF;
  color: #000000;
}
.vp-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 40px;
  flex-wrap: wrap;
  padding-top: clamp(28px, 2.6vw, 40px);
  border-top: 1px solid rgba(0,0,0,0.25);
}
.vp-row__title {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(1.8rem, 2.6vw, 2.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #000000;
}
.vp-row__meta {
  margin: 0;
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000000;
}
.vp-row__meta span { color: var(--red); margin-right: 8px; }
.vp-row__grid {
  display: grid;
  /* Text leads; the photo is a supporting print, not a half-page. */
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  margin-top: clamp(28px, 3vw, 48px);
}
.vp-row--flip .vp-row__media { order: -1; }
.vp-row__text p {
  margin: 0 0 18px;
  max-width: 52ch;
  font-family: var(--font-read);
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: #000000;
}
.vp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.vp-tags li {
  padding: 8px 12px;
  border: 1px solid rgba(0,0,0,0.25);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000000;
}
.vp-row__media { margin: 0; }
.vp-row__media { max-width: 400px; justify-self: end; }
.vp-row--flip .vp-row__media { justify-self: start; }
/* height:auto, or the img's height attribute (1300px) wins over the ratio. */
.vp-row__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* -- Values strip -- */
.vp-values {
  padding: var(--section-y) var(--vp-x);
  background: #F5F5F5;
  color: #000000;
}
.vp-values__title {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(2.2rem, 3.6vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #000000;
}
.vp-values__title--sub { margin-top: var(--section-y); }
.vp-values__list {
  display: grid;
  gap: clamp(40px, 4vw, 56px) 0;
  margin: clamp(32px, 4vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}
.vp-values__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vp-values__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vp-value {
  display: flex;
  flex-direction: column;
  min-height: 9rem;
  margin: 0;
  padding: 0 clamp(16px, 2vw, 28px) 0 24px;
  border-left: 1px solid rgba(0,0,0,0.25);
}
.vp-icon {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vp-value dt,
.vp-value__n {
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
.vp-value dd,
.vp-value p {
  margin: 10px 0 0;
  max-width: 26ch;
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #000000;
}
.vp-values__foot {
  margin: clamp(40px, 4vw, 64px) 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,0.2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000000;
}

/* -- Sites + mosaic -- */
.vp-sites {
  padding: var(--section-y) var(--vp-x);
  background: #FFFFFF;
  color: #000000;
}
.vp-sites__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding-top: clamp(28px, 2.6vw, 40px);
  border-top: 1px solid rgba(0,0,0,0.25);
}
.vp-sites__title {
  margin: 0;
  font-size: clamp(1.8rem, 2.6vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #000000;
}
.vp-sites__link {
  font-family: var(--font-read);
  font-size: 16px;
  color: #000000;
  text-decoration: none;
  transition: color 160ms ease;
}
.vp-sites__link:hover { color: var(--red); }
.vp-sites__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(56px, 6vw, 112px) clamp(40px, 5vw, 96px);
  margin-top: clamp(28px, 3vw, 40px);
}
.vp-site > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.vp-site__meta {
  margin: 20px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000000;
}
.vp-site__meta span { color: var(--red); margin-right: 8px; }
.vp-site__title {
  margin: 8px 0 0;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #000000;
}
.vp-site__time {
  margin: 10px 0 0;
  font-family: var(--font-read);
  font-size: 15px;
  color: #000000;
}
.vp-site__time span {
  margin-right: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000000;
}
.vp-site__stats { margin: 20px 0 0; padding: 0; }
.vp-site__stats > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(0,0,0,0.14);
}
.vp-site__stats > div:last-child { border-bottom: 1px solid rgba(0,0,0,0.14); }
.vp-site__stats dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000000;
}
.vp-site__stats dd { margin: 0; font-family: var(--font-mono); font-size: 16px; color: #000000; }
.vp-site__lead dd { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.03em; }
.vp-mosaic {
  display: grid;
  /* One row of four even squares — no oversized tiles. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: clamp(48px, 5vw, 80px) 0 0;
  padding: 0;
  list-style: none;
}
.vp-mosaic li { aspect-ratio: 1; overflow: hidden; background: rgba(0,0,0,0.05); }
.vp-mosaic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease-out;
}
.vp-mosaic li:hover img { transform: scale(1.03); }

/* -- Closing statement -- */
.vp-call {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(82svh, 820px);
  padding: var(--section-y) var(--vp-x) calc(var(--section-y) + 120px);
  background: #000000;
  color: #FFFFFF;
}
.vp-call__title {
  margin: 0 auto;
  max-width: 24ch;
  text-align: center;
  font-size: clamp(2rem, 4.4vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #FFFFFF;
}
.vp-call__foot {
  position: absolute;
  left: var(--vp-x);
  right: var(--vp-x);
  bottom: clamp(32px, 3.4vw, 48px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.vp-call__rail {
  margin: 0;
  display: flex;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
}

@media (max-width: 860px) {
  .vp-hero { height: auto; aspect-ratio: 4 / 5; min-height: 0; }
  .vp-row__grid { grid-template-columns: 1fr; }
  .vp-row--flip .vp-row__media { order: 0; }
  .vp-row__media { max-width: none; justify-self: stretch; }
  .vp-values__list--3,
  .vp-values__list--4 { grid-template-columns: 1fr; gap: 0; border-bottom: 1px solid rgba(0,0,0,0.2); }
  .vp-value {
    display: grid;
    grid-template-columns: 3rem 1fr;
    column-gap: 16px;
    min-height: 0;
    padding: 24px 0;
    border-left: 0;
    border-top: 1px solid rgba(0,0,0,0.2);
  }
  .vp-icon { grid-row: span 2; }
  .vp-value dt, .vp-value__n { margin-top: 0; }
  .vp-sites__grid { grid-template-columns: 1fr; }
  .vp-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-call__title { text-align: left; margin: 0; }
  .vp-call { padding-bottom: calc(var(--section-y) + 160px); }
}

/* ============================================================
   CONTACT — contact.html (2026-10-30)
   Laid out on coralgardeners.org/contact: a paper head with the page name,
   the form centred on plain black, then the direct
   addresses as hairline rows. .cp-* classes.
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cp-head,
.cp-direct { --cp-x: clamp(20px, 9.5vw, 134px); }

.cp-head {
  padding: clamp(120px, 11vw, 168px) var(--cp-x) clamp(56px, 5vw, 80px);
  background: var(--surface);
  color: #000000;
}
.cp-head__eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
.cp-head__title {
  margin: 0;
  font-size: clamp(48px, 7vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: #000000;
}
.cp-head__lede {
  margin: clamp(20px, 2vw, 28px) 0 0;
  max-width: 52ch;
  font-family: var(--font-read);
  font-weight: 400;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: #000000;
}

/* -- The form on black -- */
.cp-form {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 10vw, 150px) 20px;
  background: #000000;
  color: #FFFFFF;
}
.cp-form__inner {
  position: relative;
  max-width: 580px;
  margin: 0 auto;
}
.cp-form__title {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 50px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #FFFFFF;
}
.cp-form__sub {
  margin: 14px 0 0;
  font-family: var(--font-read);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: #FFFFFF;
}
.cp-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(28px, 3vw, 40px);
}
.cp-field { grid-column: 1 / -1; display: block; position: relative; }
.cp-field--half { grid-column: auto; }
.cp-field input,
.cp-field select,
.cp-field textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: #FFFFFF;
  color: #000000;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-align: center;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.cp-field textarea { min-height: 104px; resize: vertical; line-height: 1.6; text-align: left; }
.cp-field textarea::placeholder { text-align: center; }
.cp-field input::placeholder,
.cp-field textarea::placeholder { color: #000000; text-transform: uppercase; }
.cp-field select { text-transform: uppercase; cursor: pointer; padding-right: 44px; }
.cp-field select:invalid { color: #000000; }
.cp-field--select::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #000000;
  border-bottom: 1.5px solid #000000;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.cp-field input:focus-visible,
.cp-field select:focus-visible,
.cp-field textarea:focus-visible { box-shadow: inset 0 0 0 2px var(--sky); }
.cp-send {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  margin-top: 14px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: var(--red);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.cp-send:hover,
.cp-send:focus-visible { background: var(--red-hover); }
.cp-note {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-family: var(--font-read);
  font-size: 14px;
  color: #FFFFFF;
}

/* -- Or write directly -- */
.cp-direct {
  padding: var(--section-y) var(--cp-x);
  background: var(--surface);
  color: #000000;
}
.cp-direct__title {
  margin: 0;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #000000;
}
.cp-direct__list {
  margin: clamp(32px, 3.4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid rgba(0,0,0,0.18);
}
.cp-direct__list li { border-top: 1px solid rgba(0,0,0,0.18); }
.cp-direct__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
  padding: clamp(22px, 2.2vw, 30px) 0;
  color: #000000;
  text-decoration: none;
}
.cp-direct__label {
  font-family: var(--font-read);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.01em;
}
.cp-direct__value {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000000;
  transition: color 160ms ease;
}
.cp-direct__list a:hover .cp-direct__value { color: var(--red); }
@media (max-width: 560px) {
  .cp-field--half { grid-column: 1 / -1; }
}

/* ============================================================
   POP-UP CARD (2026-10-30) — js/popcard.js
   After coralgardeners.org's "Adopt a coral" tile: a small white card in the
   bottom-right corner with one drawn object and one bold call to action. It
   rises in after a short scroll and stays closed once closed.
   ============================================================ */
.popcard {
  position: fixed;
  right: clamp(16px, 2.2vw, 30px);
  bottom: clamp(16px, 2.2vw, 30px);
  z-index: 58;
  width: 136px;
  aspect-ratio: 1;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity 360ms ease, transform 420ms cubic-bezier(0.22, 0.8, 0.28, 1), visibility 0s linear 420ms;
}
.popcard.is-in {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 360ms ease, transform 420ms cubic-bezier(0.22, 0.8, 0.28, 1), visibility 0s;
}
.popcard__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  height: 100%;
  padding: 18px 12px 16px;
  color: #000000;
  text-decoration: none;
}
.popcard__art { display: block; width: 54px; transition: transform 260ms ease; }
.popcard__art svg { display: block; width: 100%; height: auto; }
.popcard__link:hover .popcard__art { transform: translateY(-3px) rotate(-4deg); }
.popcard__label {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-align: center;
  transition: color 160ms ease;
}
.popcard__link:hover .popcard__label { color: var(--red); }
.popcard__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #000000;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.popcard__close:hover { background: var(--surface); color: #000000; }
/* On home the timeline rail runs down the same edge; it stops above the card. */
body.has-popcard .rail { bottom: calc(clamp(16px, 2.2vw, 30px) + 136px + 24px); }
@media (max-width: 620px) {
  .popcard { width: 112px; }
  .popcard__art { width: 38px; }
  .popcard__label { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .popcard, .popcard.is-in { transform: none; }
}

/* ============================================================
   CARD TILT (2026-10-31) — js/tilt.js
   The home Get involved cards turn toward the pointer in 3D, after the
   "Get gardening" cards on coralgardeners.org. The cards had to stop
   clipping (overflow / isolation flatten 3D), so the photo card's picture
   now carries its own rounded clip. The button on a card is white with
   black type and turns red with white type when the card is hovered.
   ============================================================ */
.doors { perspective: 1200px; }
.door {
  overflow: visible;
  isolation: auto;
  transform-style: preserve-3d;
  transition: transform 450ms cubic-bezier(0.22, 0.8, 0.28, 1), box-shadow 450ms ease;
  will-change: transform;
}
.door.is-tilting { box-shadow: 0 34px 60px -24px rgba(0,0,0,0.45); }
.door--photo > .door__bg {
  border-radius: var(--r-card);
  overflow: hidden;
  transform: translateZ(0);
}
.door__title, .door__sub, .door__foot, .door__row, .door__rule, .door__list { transform: translateZ(18px); }
.door__art {
  transition: transform 900ms cubic-bezier(0.22, 0.8, 0.28, 1), box-shadow 450ms ease;
}
.door.is-tilting .door__art { box-shadow: 0 24px 40px -18px rgba(0,0,0,0.6); }

.door .btn,
.door .btn--primary {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #000000 !important;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.door .btn--block { display: inline-flex; width: auto; }
.door:hover .btn,
.door .btn:hover,
.door .btn:focus-visible {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #FFFFFF !important;
}

/* ============================================================
   GRAIN (2026-10-31)
   The paper texture from coralgardeners.org (their .cg-grain): a 200px tile
   of fractal noise, warm brown specks at ~40% (film-toned since the
   "Organico" reference, 2026-10-31), laid over the light grounds — the
   page itself, the paper and white sections, the heads, the footer and the
   solid light nav bar. Black specks vanish on black, so the dark sections
   stay clean without needing a list of exceptions. Drawn as a background
   layer, so it always sits under the content.
   ============================================================ */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .12 1 0 0 0 -0.42'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='.3'/%3E%3C/svg%3E");
}
body,
.band, .band--paper, .band--bone, .ground--light,
.shot, .endcap, .story__panel, .photo-band,
.cp-head, .cp-direct,
.vp-row, .vp-sites,
.ticker,
body.nav-light .nav.is-scrolled {
  background-image: var(--grain);
  background-size: 200px 200px;
}

/* ============================================================
   INSTRUMENT DETAILING (2026-10-31)
   The branded, technical register (sci-fi without motion): printer's ticks
   down the margins of the paper heads and the footer, mono coordinates
   beside place names. Viewfinder corners and a paper-texture pass over the
   photos were both tried and rejected.
   ============================================================ */
:root {
  --tick-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='140'%3E%3Cpath d='M0 70.5h11' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  --tick-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='140'%3E%3Cpath d='M7 70.5h11' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
}
/* Printer's ticks down both margins of the paper heads and the footer. */
.shot, .cp-head, .cp-direct, .endcap {
  background-image: var(--tick-l), var(--tick-r), var(--grain);
  background-size: 18px 140px, 18px 140px, 200px 200px;
  background-position: left top, right top, 0 0;
  background-repeat: repeat-y, repeat-y, repeat;
}

/* Coordinates. */
.coord {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
}
.shot__coord { margin-left: auto; }
.vp-site__meta { display: flex; align-items: baseline; gap: 6px; }
.vp-site__meta .coord { margin-left: auto; color: #000000; }
.endcap__legal .coord { margin-left: 10px; }

/* The pop-up card carries a printed photograph instead of a drawing. */
.popcard__art {
  position: relative;
  width: 58px;
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 8px 14px -8px rgba(0,0,0,0.45);
}
.popcard__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 620px) {
  .popcard__art { width: 46px; }
  .shot__coord { display: none; }
}

/* ============================================================
   TICKET FORMATTING (2026-10-31)
   From the user's references (a tea card, an apothecary ticket card):
   dotted leader rows, [ bracket ] labels, a hairline with a dot marker,
   ticket-shaped cards with notches and a perforation, and a soft matte
   grade on the photographs. The grounds and grain stay as they were.
   ============================================================ */
.popcard__close:hover { background: var(--surface); }

/* Dotted leader rows: label on the left, value on the right. */
.follow-list li { border-bottom-style: dotted; border-bottom-color: rgba(0,0,0,0.6); }
.follow-list li:first-child { border-top-style: dotted; border-top-color: rgba(0,0,0,0.6); }
.cp-direct__list { border-bottom-style: dotted; border-bottom-color: rgba(0,0,0,0.6); }
.cp-direct__list li { border-top-style: dotted; border-top-color: rgba(0,0,0,0.6); }
.vp-site__stats > div { border-top-style: dotted; border-top-color: rgba(0,0,0,0.6); }
.vp-site__stats > div:last-child { border-bottom-style: dotted; border-bottom-color: rgba(0,0,0,0.6); }
.figures__ledger li { border-top-style: dotted; border-top-color: rgba(255,255,255,0.6); }
.figures__ledger li:last-child { border-bottom-style: dotted; border-bottom-color: rgba(255,255,255,0.6); }

/* [ Bracket ] labels. */
.cp-head__eyebrow::before, .vp-kicker::before, .section-mark::before,
.story__kicker::before, .pp-statement__eyebrow::before, .endcap__label::before { content: "[ "; }
.cp-head__eyebrow::after, .vp-kicker::after, .section-mark::after,
.story__kicker::after, .pp-statement__eyebrow::after, .endcap__label::after { content: " ]"; }
.vp-row__meta span::before, .vp-site__meta span::before { content: "["; }
.vp-row__meta span::after, .vp-site__meta span::after { content: "]"; }
/* Text actions read like the reference's "[+] ADD TO CART". */
.vp-sites__link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.vp-sites__link::before { content: "[\2197] "; }

/* A hairline with a dot marker, like a slider at rest. */
.shot__foot, .vp-sites__head { position: relative; border-top-color: rgba(0,0,0,0.55); }
.shot__foot::before, .vp-sites__head::before {
  content: "";
  position: absolute;
  top: -3.5px;
  left: 6%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #000000;
}

/* Ticket cards (home Get involved), laid out like the apothecary card:
   the photograph in its own top compartment, a perforation with a notch
   on each side, then the title, a [ label ] / readout row, a hairline with
   a dot, the copy in mono caps, a slash list, and the button bottom-left.
   The notch discs carry the section's ground. */
.door--ticket {
  --pad: clamp(18px, 1.8vw, 26px);
  --art-h: clamp(200px, 19vw, 280px);
  --gap: 22px;
  padding: var(--pad);
  text-align: left;
}
.door--ticket .door__art {
  height: var(--art-h);
  margin: 0;
  border-radius: calc(var(--r-card) - var(--pad) / 2);
}
.door__body {
  margin-top: var(--gap);
  padding-top: calc(var(--gap) + 6px);
  border-top: 1px dashed rgba(255,255,255,0.45);
}
.door--ticket::before, .door--ticket::after {
  content: "";
  position: absolute;
  top: calc(var(--pad) + var(--art-h) + var(--gap) - 11px);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface) var(--grain);
  background-size: 200px 200px;
  z-index: 2;
}
.door--ticket::before { left: -11px; }
.door--ticket::after { right: -11px; }
.door--ticket .door__title {
  text-align: left;
  font-family: var(--font-mono);
  font-size: clamp(24px, 2.1vw, 34px);
  letter-spacing: -0.02em;
}
.door__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.door__rule {
  position: relative;
  display: block;
  height: 1px;
  margin: 16px 0 18px;
  background: rgba(255,255,255,0.45);
}
.door__rule::before {
  content: "";
  position: absolute;
  top: -2.5px;
  left: 10%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFFFFF;
}
.door--ticket .door__sub {
  margin: 0;
  max-width: none;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.door__list {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.door--ticket .door__foot {
  margin-top: auto;
  padding-top: 26px;
  text-align: left;
}

/* Ticket colours (2026-10-31): coralgardeners.org's own palette for its
   "Get gardening" cards — black plate, white type, white button that turns
   red — with their blue (#00A1DB) for the small marks: the [ label ] and
   the dot on the rule. The notches are tall ovals, like the reference
   ticket. (A light-grey card was tried and rejected.) */
.door--ticket {
  /* A touch of the sea (2026-10-31): kept low so the card still reads as
     black. Teal light seeps in at the top-right corner, deep navy pools
     at the bottom left, with the film grain over it. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 2.2 0 0 0 -1'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='.35'/%3E%3C/svg%3E") 0 0 / 240px 240px repeat,
    radial-gradient(70% 45% at 100% 0%, rgba(16, 136, 173, 0.38), rgba(10, 75, 121, 0.16) 50%, rgba(10, 75, 121, 0) 78%) no-repeat,
    radial-gradient(80% 50% at 0% 100%, rgba(12, 47, 99, 0.55), rgba(12, 47, 99, 0) 75%) no-repeat,
    #000000;
  color: #FFFFFF;
}
.door--ticket .door__title,
.door--ticket .door__row,
.door--ticket .door__sub,
.door--ticket .door__list { color: #FFFFFF; }
.door--ticket .door__row span:first-child { color: var(--blue); }
.door--ticket .door__body { border-top-color: rgba(255,255,255,0.4); }
.door--ticket .door__rule { background: rgba(255,255,255,0.4); }
.door--ticket .door__rule::before { background: var(--blue); }
.door--ticket::before, .door--ticket::after {
  width: 16px;
  height: 30px;
  border-radius: 999px;
  top: calc(var(--pad) + var(--art-h) + var(--gap) - 15px);
}
.door--ticket::before { left: -8px; }
.door--ticket::after { right: -8px; }
.door--ticket.is-tilting { box-shadow: 0 34px 60px -24px rgba(0,0,0,0.45); }
.door--ticket.is-tilting .door__art { box-shadow: none; }
/* The picture drifts inside its clipped frame; it rests slightly zoomed so
   the drift never shows an edge. */
.door--ticket .door__art img {
  transform: scale(1.06);
  transition: transform 900ms cubic-bezier(0.22, 0.8, 0.28, 1);
}

/* Photographs get a warm film-print grade (2026-10-31, the user's
   "Organico" reference): fine grain in the picture and lifted blacks from
   the #film filter that main.js defines, then warmth and a little extra
   colour on top. Kept fine and soft on purpose: an earlier, heavier paper
   texture over the photos read as "corrosive". */
main img:not(.gram__shot):not(.gram__avatar),
.popcard__art img {
  filter: url(#film) sepia(0.14) saturate(1.12) contrast(0.96) brightness(1.02);
}
.social img { filter: none; }

/* ============================================================
   SEA (2026-10-31)
   First made for the home page's "Our story" band, which the user called
   "absolutely perfect", then spread through the site a little at a time.
   Two strengths, so it balances against the plain black and paper:
   - .sea        the full water: light from the top falling to black. Used
                 once per page at most (home story, the contact form, the
                 closing calls on partner and volunteer, the slab statements
                 on the project and board pages, the what-we-do stage).
   - .sea--deep  mostly black, the water's light only leaking in from the
                 top-right corner. Used on the inner-page heroes.
   Both carry the white + grid and the film grain. The pseudo-elements sit
   at z-index -1 inside an isolated section, so they paint over its
   background and under all of its content without touching the children.
   The colours are the user's underwater photo, sampled from it: pale teal light along the top
   underwater photo, sampled from it: pale teal light along the top
   (#68A7B7, #5C9CB0), bright sea cyan below it (#39AEC4, #2191B2, #1088AD),
   deep blue through the middle (#0A699B, #0C5A8B, #0A4B79), navy lower down
   (#0C376F, #0C265A, #0D1F48) and near-black at the floor (#0E141D), with
   the photo's steel blue in the top left (#386582) and its film grain over
   everything.
   - The base is the photo's top-to-bottom fall from light to dark.
   - ::before scatters loose patches of its light and its deep blue across
     the band, blurred into freeform shapes like the light on the water.
   - ::after is the grain.
   ============================================================ */
.sea {
  position: relative;
  background: linear-gradient(180deg,
    #4F92A8 0%, #2C9DBA 22%, #1088AD 40%, #0A699B 56%,
    #0A4B79 68%, #0C2F63 80%, #0D1F48 90%, #0E141D 100%);
  overflow: hidden;
  isolation: isolate;
}
.sea::before,
.sea::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.sea::before {
  inset: -6%;
  background:
    radial-gradient(22% 14% at 10% 8%,  rgba(56, 101, 130, 0.9),   transparent 70%),
    radial-gradient(18% 10% at 30% 14%, rgba(104, 167, 183, 0.85), transparent 70%),
    radial-gradient(26% 9%  at 58% 6%,  rgba(140, 195, 207, 0.6),  transparent 70%),
    radial-gradient(16% 12% at 84% 12%, rgba(57, 174, 196, 0.85),  transparent 70%),
    radial-gradient(14% 8%  at 46% 24%, rgba(104, 167, 183, 0.7),  transparent 70%),
    radial-gradient(20% 10% at 72% 30%, rgba(92, 156, 176, 0.65),  transparent 70%),
    radial-gradient(18% 12% at 18% 34%, rgba(80, 141, 160, 0.7),   transparent 70%),
    radial-gradient(24% 12% at 90% 46%, rgba(13, 125, 168, 0.8),   transparent 70%),
    radial-gradient(20% 14% at 8% 56%,  rgba(10, 75, 121, 0.8),    transparent 70%),
    radial-gradient(16% 9%  at 54% 50%, rgba(33, 145, 178, 0.55),  transparent 70%),
    radial-gradient(26% 14% at 80% 70%, rgba(12, 55, 111, 0.85),   transparent 70%),
    radial-gradient(22% 12% at 30% 78%, rgba(9, 41, 82, 0.8),      transparent 70%),
    /* The photo's blacks (#0E0D0F, #0F1216), kicked in as deep shadows. */
    radial-gradient(22% 34% at 2% 42%,  rgba(14, 13, 15, 1),       transparent 72%),
    radial-gradient(16% 14% at 66% 18%, rgba(15, 18, 22, 0.9),     transparent 72%),
    radial-gradient(26% 26% at 98% 60%, rgba(14, 13, 15, 1),       transparent 72%),
    radial-gradient(24% 20% at 40% 66%, rgba(15, 18, 22, 0.75),    transparent 72%),
    radial-gradient(40% 22% at 72% 98%, rgba(14, 13, 15, 1),       transparent 72%),
    radial-gradient(26% 18% at 6% 94%,  rgba(15, 18, 22, 1),       transparent 72%);
  filter: blur(26px);
}
.sea::after {
  inset: 0;
  /* The + grid back on top, in white so it holds on every blue (the site's
     blue crosses vanish into the cyan), then the film grain. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='186' height='186'%3E%3Cg stroke='%23FFFFFF' fill='none'%3E%3Cpath d='M93 0v186M0 93h186' stroke-opacity='.08'/%3E%3Cpath d='M93 85v16M85 93h16' stroke-opacity='.55' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 2.2 0 0 0 -1'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='1' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.2 0 0 0 -1'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='.45'/%3E%3C/svg%3E");
  background-size: 186px 186px, 240px 240px, 240px 240px;
  background-position: center top, 0 0, 0 0;
}
.sea .manifesto__body p { color: #FFFFFF; }
/* Red on the sea cyan is unreadable, so an accent phrase is white here,
   marked by an underline instead of colour. */
.sea em {
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* The deep strength: black water with the light leaking in from the top
   right, a few drifting patches of teal and navy, and the photo's blacks. */
.sea--deep {
  background:
    radial-gradient(55% 75% at 92% 0%, #1088AD 0%, #0A699B 22%, #0A4B79 40%, #0C2F63 58%, rgba(13, 31, 72, 0) 82%),
    radial-gradient(40% 60% at 0% 100%, rgba(12, 38, 90, 0.9), rgba(12, 38, 90, 0) 75%),
    #0E0E10;
}
.sea--deep::before {
  background:
    radial-gradient(18% 14% at 82% 10%, rgba(104, 167, 183, 0.75), transparent 70%),
    radial-gradient(14% 10% at 96% 26%, rgba(57, 174, 196, 0.6),   transparent 70%),
    radial-gradient(22% 14% at 64% 30%, rgba(10, 75, 121, 0.6),    transparent 70%),
    radial-gradient(20% 16% at 14% 82%, rgba(12, 55, 111, 0.7),    transparent 70%),
    radial-gradient(26% 26% at 74% 4%,  rgba(14, 13, 15, 0.7),     transparent 72%),
    radial-gradient(30% 30% at 40% 50%, rgba(14, 13, 15, 0.9),     transparent 72%);
}

/* ============================================================
   SUBPAGE HERO (2026-11-01)
   Every subpage hero is the deep-sea gradient alone, no photo (the user
   tried a framed photo, a faded one and a blended full-bleed one, then
   asked for the background only). The band is 2 : 3.5 of the viewport
   height. The + grid and grain sit on top (grid restored 2026-11-01).
   ============================================================ */
.hero--split.sea--deep {
  box-sizing: border-box;
  min-height: calc(100svh * 2 / 3.5);
  padding-block: clamp(104px, 9vw, 132px) clamp(36px, 4vw, 56px);
  display: flex;
  align-items: flex-end;
}
/* 2026-11-01: the hero takes the colours of the upper half of the home
   story's .sea band — its light blues with the photo's black kicked in —
   by stretching the same gradient and light patches to twice the hero's
   height, so only the top half shows. The + grid is back (user). */
.hero--split.sea--deep {
  background: linear-gradient(180deg,
    #4F92A8 0%, #2C9DBA 22%, #1088AD 40%, #0A699B 56%,
    #0A4B79 68%, #0C2F63 80%, #0D1F48 90%, #0E141D 100%) top / 100% 200% no-repeat;
}
.hero--split.sea--deep::before {
  inset: -6% -6% auto;
  height: 212%;
  background:
    radial-gradient(22% 14% at 10% 8%,  rgba(56, 101, 130, 0.9),   transparent 70%),
    radial-gradient(18% 10% at 30% 14%, rgba(104, 167, 183, 0.85), transparent 70%),
    radial-gradient(26% 9%  at 58% 6%,  rgba(140, 195, 207, 0.6),  transparent 70%),
    radial-gradient(16% 12% at 84% 12%, rgba(57, 174, 196, 0.85),  transparent 70%),
    radial-gradient(14% 8%  at 46% 24%, rgba(104, 167, 183, 0.7),  transparent 70%),
    radial-gradient(20% 10% at 72% 30%, rgba(92, 156, 176, 0.65),  transparent 70%),
    radial-gradient(18% 12% at 18% 34%, rgba(80, 141, 160, 0.7),   transparent 70%),
    radial-gradient(24% 12% at 90% 46%, rgba(13, 125, 168, 0.8),   transparent 70%),
    radial-gradient(20% 14% at 8% 56%,  rgba(10, 75, 121, 0.8),    transparent 70%),
    radial-gradient(16% 9%  at 54% 50%, rgba(33, 145, 178, 0.55),  transparent 70%),
    radial-gradient(26% 14% at 80% 70%, rgba(12, 55, 111, 0.85),   transparent 70%),
    radial-gradient(22% 12% at 30% 78%, rgba(9, 41, 82, 0.8),      transparent 70%),
    /* The photo's blacks (#0E0D0F, #0F1216), kicked in as deep shadows. */
    radial-gradient(22% 34% at 2% 42%,  rgba(14, 13, 15, 1),       transparent 72%),
    radial-gradient(16% 14% at 66% 18%, rgba(15, 18, 22, 0.9),     transparent 72%),
    radial-gradient(26% 26% at 98% 60%, rgba(14, 13, 15, 1),       transparent 72%),
    radial-gradient(24% 20% at 40% 66%, rgba(15, 18, 22, 0.75),    transparent 72%),
    radial-gradient(40% 22% at 72% 98%, rgba(14, 13, 15, 1),       transparent 72%),
    radial-gradient(26% 18% at 6% 94%,  rgba(15, 18, 22, 1),       transparent 72%);
  filter: blur(26px);
}
.hero--split.sea--deep > .container { width: 100%; }

/* ============================================================
   CORAL GARDENERS SUBPAGE LAYOUTS (2026-11-01)
   Volunteer, Education and Executive board, below the shared gradient
   hero, are laid out on coralgardeners.org's own subpage photo layouts.
   Each layout is used once:
   - Volunteer: book-a-tour's photo collage, its photo + panel list cards,
     its black numbers band; adopt's frosted card on a full photo.
   - Education: adopt's big number beside a photo and "how it works" photo
     steps; donate's rounded photo card; book-a-tour's portrait photo cards.
   - Executive board: book-a-tour's review cards; donate's huge heading
     beside a white card over a photo; shop's square mosaic.
   Words are each page's own. Fonts stay the site's two voices.
   ============================================================ */
.cg-label {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #000;
}
.cg-label span { margin-left: 8px; color: var(--blue); }
.cg-bento img, .cg-list img, .cg-glass img, .cg-number img, .cg-steps img,
.cg-round img, .cg-people img, .cg-shapes img, .cg-mosaic img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.cg-bento figure, .cg-list figure, .cg-number figure, .cg-steps figure, .cg-shapes figure { margin: 0; }

/* Volunteer — photo collage beside the intro (book-a-tour gallery). */
.cg-bento {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
  padding: var(--section-y) clamp(20px, 9.5vw, 144px);
  background: var(--surface);
  color: #000;
}
.cg-bento__lead {
  margin: 0 0 22px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: clamp(22px, 2.1vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.cg-bento__copy p:not(.cg-label):not(.cg-bento__lead) {
  margin: 0 0 14px;
  font-family: var(--font-read);
  font-weight: 400;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
}
.cg-bento__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: repeat(2, clamp(160px, 17vw, 270px));
  gap: 10px;
}
.cg-bento__grid figure { border-radius: 8px; overflow: hidden; }
.cg-bento__a { grid-row: 1 / span 2; }
.cg-bento__d { grid-column: 2 / span 2; }

/* Volunteer — sites as photo + white panel cards (book-a-tour tours). */
.cg-list { padding: var(--section-y) clamp(20px, 9.5vw, 144px); background: #EDECEA; color: #000; }
.cg-list__head { padding-bottom: 20px; margin-bottom: clamp(28px, 3vw, 44px); border-bottom: 1px solid #000; }
.cg-list__heading {
  margin: 0;
  font-size: clamp(32px, 4vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.cg-list__items { display: grid; gap: 16px; }
.cg-list__item {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  background: #FFF;
  min-height: clamp(320px, 30vw, 440px);
}
.cg-list__photo { position: relative; overflow: hidden; }
.cg-list__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000;
}
.cg-list__body { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 44px); }
.cg-list__title {
  margin: 0 0 14px;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.cg-list__pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.cg-list__pills li {
  padding: 5px 10px;
  border: 1px solid #000;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cg-list__text { margin: 0 0 18px; font-family: var(--font-read); font-weight: 400; font-size: 16px; line-height: 1.55; }
.cg-list__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 0 0 24px; padding: 0; list-style: none; }
.cg-list__stats li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid #D8D7D4;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cg-list__stats strong { font-size: 14px; letter-spacing: 0; }
.cg-list__btn { margin-top: auto; align-self: flex-start; }

/* Volunteer — black numbers band split by rules (book-a-tour). */
.cg-stats { padding: var(--section-y) clamp(20px, 9.5vw, 144px); background: #000; color: #FFF; }
.cg-stats__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 96px);
}
.cg-stats__title {
  margin: 0;
  font-size: clamp(34px, 4.4vw, 70px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #FFF;
}
.cg-stats__text { margin: 0; font-family: var(--font-read); font-weight: 400; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; color: #FFF; }
.cg-stats__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.cg-stats__row li { padding: 0 clamp(16px, 2vw, 32px); border-left: 1px solid rgba(255,255,255,.4); }
.cg-stats__row li:first-child { padding-left: 0; border-left: 0; }
.cg-stats__row strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.2vw, 88px);
  line-height: 1;
  letter-spacing: -0.06em;
  color: #FFF;
}
.cg-stats__row span {
  display: block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFF;
}

/* Volunteer — full photo with a frosted card (adopt). */
.cg-glass {
  position: relative;
  min-height: min(92vh, 880px);
  display: flex;
  align-items: flex-start;
  padding: clamp(24px, 6vw, 80px);
  overflow: hidden;
  isolation: isolate;
}
.cg-glass__img { position: absolute; inset: 0; z-index: -1; }
.cg-glass__card {
  max-width: 620px;
  padding: clamp(28px, 4vw, 60px);
  border-radius: clamp(20px, 3vw, 40px);
  background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.06)), rgba(30, 20, 26, .36);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  color: #FFF;
}
.cg-glass__title { margin: 0 0 20px; font-size: clamp(26px, 3vw, 46px); line-height: 1; letter-spacing: -0.04em; text-transform: uppercase; color: #FFF; }
.cg-glass__card p { margin: 0 0 14px; font-family: var(--font-read); font-weight: 400; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.6; color: #FFF; }
.cg-glass__card .btn { margin-top: 10px; }

/* Education — big number on black beside a photo (adopt "why adopt"). */
.cg-number {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
  min-height: 92vh;
  padding: var(--section-y) clamp(20px, 9.5vw, 144px);
  background-color: #000;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M60 54v12M54 60h12' stroke='%2300A1DB' stroke-opacity='.5'/%3E%3C/svg%3E");
  color: #FFF;
}
.cg-number__text { margin: 0 0 clamp(32px, 4vw, 56px); max-width: 22ch; font-family: var(--font-text); font-weight: 700; font-size: clamp(24px, 2.6vw, 42px); line-height: 1.12; letter-spacing: -0.02em; color: #FFF; }
.cg-number__label { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #FFF; }
.cg-number__label::before { content: "+"; margin-right: 10px; }
.cg-number__num { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(120px, 17vw, 280px); line-height: 0.9; letter-spacing: -0.07em; color: #FFF; }
.cg-number__note { margin: 18px 0 0; max-width: 46ch; font-family: var(--font-read); font-weight: 400; font-size: 15px; line-height: 1.55; color: #FFF; }
.cg-number__photo { aspect-ratio: 4 / 5; border-radius: var(--r-img, 10px); overflow: hidden; }

/* Education — "how it works" photo steps (adopt). */
.cg-steps { padding: var(--section-y) clamp(20px, 9.5vw, 144px); background: #FFF; color: #000; }
.cg-steps__head { margin-bottom: clamp(36px, 4vw, 60px); }
.cg-steps__heading { margin: 0; font-size: clamp(40px, 6vw, 96px); line-height: 0.92; letter-spacing: -0.05em; text-transform: uppercase; }
.cg-steps__head p { margin: 20px 0 0; max-width: 52ch; font-family: var(--font-read); font-weight: 400; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; }
.cg-steps__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); }
.cg-steps__photo { margin: 0 0 18px; aspect-ratio: 1; overflow: hidden; }
.cg-steps__n { margin: 0 0 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.cg-steps__title { margin: 0 0 10px; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.1; letter-spacing: -0.03em; text-transform: uppercase; }
.cg-steps__note { margin: 0; font-family: var(--font-read); font-weight: 400; font-size: 15px; line-height: 1.55; }

/* Education — rounded photo card, words centred (donate). */
.cg-round { padding: var(--frame-inset, 24px); background: var(--surface); }
.cg-round__card {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: min(96vh, 900px);
  border-radius: var(--r-photo, 24px);
  overflow: hidden;
  isolation: isolate;
}
.cg-round__img { position: absolute; inset: 0; z-index: -2; }
.cg-round__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.5); }
.cg-round__body { align-self: center; max-width: 620px; padding: clamp(48px, 7vw, 120px) clamp(24px, 4vw, 48px); color: #FFF; }
.cg-round__title { margin: 0 0 28px; font-size: clamp(36px, 4.6vw, 72px); line-height: 0.95; letter-spacing: -0.05em; text-transform: uppercase; color: #FFF; }
.cg-round__body p { margin: 0 0 14px; font-family: var(--font-read); font-weight: 400; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; color: #FFF; }
.cg-round__body strong { font-family: var(--font-text); font-weight: 700; }

/* Education — portrait photo cards, caption on the picture (book-a-tour "They did it"). */
.cg-people { padding: var(--section-y) clamp(20px, 9.5vw, 144px); background: #000; color: #FFF; }
.cg-people__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; padding-top: 24px; margin-bottom: clamp(28px, 3vw, 44px); border-top: 1px solid rgba(255,255,255,.4); }
.cg-people__heading { margin: 0; font-size: clamp(32px, 4vw, 64px); line-height: 0.95; letter-spacing: -0.05em; text-transform: uppercase; color: #FFF; }
.cg-people__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.cg-people__card { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; }
.cg-people__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0) 45%); }
.cg-people__cap { position: absolute; top: 0; left: 0; right: 0; z-index: 1; padding: 20px; }
.cg-people__cap h3 { margin: 0 0 6px; font-size: clamp(20px, 1.8vw, 28px); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; color: #FFF; }
.cg-people__cap p { margin: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #FFF; }

/* Executive board — seats as review cards under one figure (book-a-tour). */
.cg-reviews { padding: var(--section-y) clamp(20px, 9.5vw, 144px); background: #EDECEA; color: #000; }
.cg-reviews__head { margin-bottom: clamp(28px, 3vw, 44px); }
.cg-reviews__heading { margin: 0 0 20px; font-size: clamp(32px, 4vw, 64px); line-height: 0.95; letter-spacing: -0.05em; text-transform: uppercase; }
.cg-reviews__score { display: flex; align-items: center; gap: 18px; }
.cg-reviews__score strong { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 7vw, 112px); line-height: 1; letter-spacing: -0.06em; }
.cg-reviews__score span { max-width: 22ch; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.cg-reviews__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cg-reviews__card { display: flex; flex-direction: column; min-height: 300px; padding: 26px; border-radius: 14px; background: #FFF; }
.cg-reviews__meta { margin: 0 0 28px; padding-bottom: 12px; border-bottom: 1px solid #D8D7D4; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.cg-reviews__role { margin: 0 0 16px; font-size: clamp(22px, 2vw, 30px); line-height: 1; letter-spacing: -0.04em; text-transform: uppercase; }
.cg-reviews__name { margin: auto 0 0; padding: 8px 14px; align-self: flex-start; border: 1px solid #000; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }

/* Executive board — huge heading beside a white card over a photo (donate). */
.cg-shapes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 96px);
  padding: var(--section-y) clamp(20px, 9.5vw, 144px);
  background: var(--surface);
  color: #000;
}
.cg-shapes__heading { margin: 0; font-size: clamp(48px, 6.4vw, 108px); line-height: 0.9; letter-spacing: -0.05em; text-transform: uppercase; }
.cg-shapes__stack { position: relative; padding: 48px 0 48px 64px; }
.cg-shapes__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 70%; border-radius: var(--r-img, 10px); overflow: hidden; }
.cg-shapes__card { position: relative; max-width: 380px; padding: clamp(24px, 2.4vw, 36px); background: #FFF; box-shadow: 0 24px 60px rgba(0,0,0,.18); }
.cg-shapes__card p { margin: 0 0 14px; font-family: var(--font-read); font-weight: 400; font-size: 16px; line-height: 1.55; }
.cg-shapes__card strong { font-family: var(--font-text); font-weight: 700; }
.cg-shapes__ticks { display: flex; justify-content: space-between; margin: 22px 0 0 !important; }
.cg-shapes__ticks span { width: 1px; height: 14px; background: #000; }
.cg-shapes__ticks span:first-child { width: 3px; }

/* Executive board — statement over a square photo mosaic (shop). */
.cg-mosaic { padding: var(--section-y) clamp(20px, 9.5vw, 144px); background: #000; color: #FFF; }
.cg-mosaic__head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 72px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.cg-mosaic__line { grid-row: 1 / span 2; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6vw, 100px); line-height: 0.92; letter-spacing: -0.06em; text-transform: uppercase; color: #FFF; }
.cg-mosaic__note { margin: 0; font-family: var(--font-read); font-weight: 400; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; color: #FFF; }
.cg-mosaic__head .btn { justify-self: start; }
.cg-mosaic__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.cg-mosaic__grid li { aspect-ratio: 1; overflow: hidden; }

@media (max-width: 1080px) {
  .cg-steps__grid, .cg-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg-stats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .cg-stats__row li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 900px) {
  .cg-bento, .cg-list__item, .cg-stats__head, .cg-number, .cg-shapes, .cg-mosaic__head { grid-template-columns: 1fr; }
  .cg-list__photo { aspect-ratio: 16 / 10; }
  .cg-number { min-height: 0; }
  .cg-people__row { grid-template-columns: 1fr 1fr; }
  .cg-mosaic__line { grid-row: auto; }
  .cg-mosaic__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg-shapes__stack { padding: 40px 0 40px 24px; }
}
@media (max-width: 560px) {
  .cg-bento__grid { grid-template-rows: repeat(2, 140px); }
  .cg-steps__grid, .cg-reviews__grid, .cg-people__row, .cg-list__stats { grid-template-columns: 1fr; }
}

/* ============================================================
   PHOTO RHYTHM (2026-11-01)
   User: "continuous photos throughout each subpage". Contact's direct
   block carries a photo. (Collaborate's statement strip was removed by
   the user, 2026-11-01.)
   ============================================================ */
.cp-direct__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-direct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); column-gap: clamp(32px, 6vw, 112px); }
.cp-direct__title, .cp-direct__list { grid-column: 1; }
.cp-direct__photo { grid-column: 2; grid-row: 1 / span 2; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-img, 10px); overflow: hidden; align-self: center; }
@media (max-width: 960px) {
  .cp-direct { grid-template-columns: 1fr; }
  .cp-direct__photo { grid-column: 1; grid-row: auto; margin-bottom: 32px; }
}

/* ============================================================
   SQUARE GALLERIES (2026-11-01)
   User: only the photo galleries / collections lose their rounded corners
   (multi-photo grids, strips and the Instagram rails). Single photos,
   photo cards, text cards, buttons and pills keep their radius.
   ============================================================ */
.cg-bento__grid figure, .cg-bento__grid img,
.cg-mosaic__grid li, .cg-mosaic__grid img,
.cg-steps__photo, .cg-steps__photo img,
.gram__post, .gram__post img, .social__item img {
  border-radius: 0 !important;
}

/* ============================================================
   PHONE
   The components added late in the build (the volunteer page's rows and site
   cards, the Instagram rail, the photo stage) were written for the desktop
   grid and kept their two-column shapes on a phone, which left the pictures a
   couple of hundred pixels wide. Everything here collapses to one column and
   gives the photographs the full measure.
   ============================================================ */
/* Phone rules that were written earlier in the file than their desktop
   rules, so the desktop rule won at every width. Re-stated here, after
   everything, so they finally apply. */
@media (max-width: 960px) {
  .support-layout { grid-template-columns: 1fr; }
  .support-media { width: 100%; aspect-ratio: 16 / 9; }
}
@media (max-width: 860px) {
  .year-group { grid-template-columns: 1fr; }
  .year-group__year { position: static; }
  .hero__split { grid-template-columns: 1fr; }
  .hero--split .hero__title { max-width: none; }
  .alt-row { grid-template-columns: 1fr; }
  .info-grid, .info-grid--two { grid-template-columns: 1fr; }
  .figure-panel { grid-template-columns: 1fr; }
  .rate-row { grid-template-columns: 11ch minmax(0, 1fr) 5ch; }
}

/* Phone header: the tall vertical lockup ran ~100px down the left edge and
   sat on top of every headline. Below 860px it lies down — mark and word in
   one row, centred in the 72px bar, opposite the MENU button — and the button
   takes the same white/black as the lockup. */
@media (max-width: 860px) {
  .brandmark,
  body.bar-solid .brandmark {
    top: 18px;
    left: 20px;
    flex-direction: row;
    gap: 10px;
  }
  .brandmark__mark,
  body.bar-solid .brandmark__mark { width: 19px; }
  .brandmark__word {
    writing-mode: horizontal-tb;
    font-size: 15px;
    line-height: 1;
  }
  body.bar-solid .brandmark__word { opacity: 1; pointer-events: auto; }
  .nav__toggle { color: #FFFFFF; }
  body.nav-light .nav__toggle { color: #000000; }
  /* The open menu is a white panel with black type, like the desktop
     dropdown, and the bar above it goes white too while it is open. */
  .nav__links, .nav__links.is-open { background: #FFFFFF; }
  .nav:has(.nav__links.is-open) { background: #FFFFFF; }
  .nav:has(.nav__links.is-open) .nav__toggle { color: #000000; }
  body:has(.nav__links.is-open) .brandmark { color: #000000; }
}

/* Tablet hero: between 721 and 860px the two-column hero left the title at
   the bottom of an empty screen with the prints floating top-right. It takes
   the phone's stacked order instead: title, prints, lede and button. */
@media (min-width: 721px) and (max-width: 860px) {
  .shot { min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; padding: 116px 40px 40px; }
  .shot__title { grid-row: 2; margin: 40px 0 32px; }
  .shot__photos { grid-column: 1; grid-row: 3; min-height: 0; height: 60vw; margin: 0 0 32px; }
  .shot__photo--c { width: 24%; }
  .shot__foot { grid-row: 4; }
}

/* Buttons wrap onto a second line instead of running off a narrow screen. */
.hero__actions, .shot__actions, .cta-block .hero__actions { flex-wrap: wrap; }
.btn { max-width: 100%; }

@media (max-width: 860px) {
  /* The numbered blocks: words, then a full-width picture. */
  .alt-row--tight { grid-template-columns: 1fr; row-gap: var(--sp-5); }
  .alt-row--tight .alt-row__media { max-width: none; }
  .alt-row--tight .alt-row__media .image-frame {
    height: auto;
    aspect-ratio: 4 / 3;
    min-height: 0;
    max-height: none;
  }

  /* Site cards stack: picture on top, then the name and its figures. */
  .work-card--site {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: var(--sp-4);
  }
  .work-card--site .image-frame {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 5 / 4;
    max-height: none;
  }
  .work-card--site .work-card__meta { grid-column: 1; grid-row: 2; }
  .work-card--site .work-card__body { grid-column: 1; grid-row: 3; margin-top: 0; }

  /* The inset bands keep a phone-sized gutter rather than a desktop margin. */
  .band--inset > .container { padding-inline: var(--sp-5); }

  /* A statement over a photograph does not need half the screen height. */
  .stage--image .stage { min-height: clamp(320px, 52vh, 480px); }
}

@media (max-width: 620px) {
  /* Two figures across is the floor: below that the numbers wrap. */
  .site-stats { gap: var(--sp-2); }
  .site-stat { padding: var(--sp-3); }
  .site-stat dt { min-height: 0; }
  /* One project tile per row — two 150px tiles are unreadable. */
  .project-index { grid-template-columns: 1fr; }
  .work-card--lead { grid-column: span 1; }
  /* The rail runs a card and a half wide so the next one is visible. */
  .social__item { flex-basis: 80vw; }
}

/* ---------- Ticker ----------
   The strip between the hero and the figures. It carries facts about the work
   rather than four verbs, it is set on bone rather than a second green so the
   masthead is not one unbroken block of colour, and the separator is the
   carton mark itself — the one thing on the site nobody else would use.
   ============================================================ */
.ticker {
  overflow: hidden;
  background: var(--surface-raised);
  color: var(--on-surface);
  border-block: 1px solid var(--border);
  padding-block: var(--sp-3);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-slide 48s linear infinite;
  will-change: transform;
  transform: translateZ(0);
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; align-items: center; }
.ticker__item {
  color: var(--pop);
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.95vw, 13px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The facts are spaced by air, not by a glyph. */
.ticker__item + .ticker__item { margin-left: clamp(28px, 4vw, 72px); }
.ticker__group + .ticker__group .ticker__item:first-child { margin-left: clamp(28px, 4vw, 72px); }
@keyframes ticker-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* The label over the home headline: the site's mono voice at label size, with
   the headline's own left edge. */
.hero__eyebrow {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-type);
}

/* ---------- Record ----------
   Three figures on the green, each in its own column under a hairline: the
   same grid discipline as the rest of the site, at reading scale rather than
   poster scale, and with no count-up — a number that spins on arrival reads as
   decoration, not as a record.
   ============================================================ */
.record {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.record li {
  padding-top: var(--sp-4);
  border-top: 1px solid color-mix(in srgb, var(--green-type) 30%, transparent);
}
.record__figure {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(32px, 3.6vw, 56px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--green-type);
}
.record__label {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}
/* The source sits under the first column, on the same left edge as the
   figures — a footnote to the row, not a fourth item in it. */
.record__note {
  margin: clamp(28px, 3vw, 44px) 0 0;
  max-width: 46ch;
  font-family: var(--font-read);
  font-weight: 400;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.5;
}
@media (max-width: 900px) { .record { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .record { grid-template-columns: 1fr; gap: var(--sp-4); }
}



/* A path list with no step symbols: number and words only. */
.path-list--plain li { grid-template-columns: 3.5ch minmax(0, 1fr); }