/* Site styles. Tokens come from tokens.css, which is generated from DESIGN.md. */

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

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
}

.wrap {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0 var(--layout-gutter);
}

@media (max-width: 480px) { .wrap { padding: 0 16px; } }

a { color: var(--color-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: 2px; }
.masthead :focus-visible { outline-color: var(--color-surface); }

.skip {
  position: absolute;
  left: -9999px;
  z-index: 10;
}
.skip:focus {
  left: var(--space-4);
  top: var(--space-4);
  background: var(--color-surface);
  color: var(--color-ink);
  padding: var(--space-2) var(--space-3);
}

/* Masthead */
.masthead { background: var(--color-primary); color: var(--color-surface); }
.masthead-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  padding-bottom: var(--space-3);
}
/* The seal: a small mark beside the wordmark, never a hero (DESIGN.md, "The seal"). */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  min-width: 0;
  line-height: var(--type-heading-line-height);
}
.seal { display: block; flex: none; width: 48px; height: 48px; }
.wordmark {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--type-heading-font-size);
  letter-spacing: var(--type-heading-letter-spacing);
  color: var(--color-surface);
  text-decoration: none;
}
/* Volunteer now: in the header on every page, so it is seen straight away. */
.masthead-actions { margin: 0 0 0 auto; flex: none; display: flex; gap: var(--space-2); }
.button-donate { min-height: 40px; padding: 0 var(--space-3); font-size: 15px; white-space: nowrap; }
.button-volunteer { min-height: 40px; padding: 0 var(--space-3); font-size: 15px; white-space: nowrap; }
.langs { margin: 0; padding: 0; display: flex; gap: var(--space-1); flex: none; }
.langs a {
  color: var(--color-surface);
  font-size: var(--type-small-font-size);
  font-weight: 500;
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-radius: 2px;
}
.langs a[aria-current="true"] { border-color: rgba(244, 241, 232, 0.55); }
.navbar { border-top: 1px solid rgba(244, 241, 232, 0.16); }
.nav {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav li { flex: none; }
.nav a {
  display: block;
  color: var(--color-surface);
  font-size: var(--type-small-font-size);
  text-decoration: none;
  padding: var(--space-2) var(--space-2);
  min-height: 44px;
  line-height: 20px;
  border-bottom: 3px solid transparent;
  transition: border-color 160ms ease-out;
}
.nav li:first-child a { padding-left: 0; }
.nav a:hover { border-bottom-color: rgba(244, 241, 232, 0.5); }
.nav a[aria-current="page"] { border-bottom-color: var(--color-surface); font-weight: 600; }
@media (max-width: 480px) {
  .brand { gap: var(--space-2); }
  .seal { width: 40px; height: 40px; }
  .wordmark { font-size: 21px; }
}
/* On phones, the two buttons move below the menu, small and to the left, at the top of
   the page itself. The header row lets its pieces join the masthead's column, so the
   buttons can follow the menu without being written twice. */
@media (max-width: 600px) {
  .masthead { display: flex; flex-direction: column; --masthead-pad: var(--layout-gutter); }
  .masthead-top { display: contents; }
  .brand { order: 1; padding: var(--space-4) var(--masthead-pad) 0; }
  .langs { order: 2; padding: var(--space-3) var(--masthead-pad); }
  .navbar { order: 3; }
  .masthead-actions { order: 4; margin: 0; padding: var(--space-4) var(--masthead-pad) 0; gap: 8px; }
  .masthead .button-volunteer,
  .masthead .button-donate { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
}
@media (max-width: 480px) { .masthead { --masthead-pad: 16px; } }

/* Headings and prose */
.display {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--type-display-font-size);
  line-height: var(--type-display-line-height);
  letter-spacing: var(--type-display-letter-spacing);
  font-weight: 400;
  margin: var(--space-7) 0 var(--space-3);
  max-width: 20ch;
}
.heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--type-heading-font-size);
  line-height: var(--type-heading-line-height);
  letter-spacing: var(--type-heading-letter-spacing);
  font-weight: 400;
  margin: var(--space-6) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-hairline);
}
.lead { max-width: 60ch; font-size: 19px; line-height: 1.6; margin: 0 0 var(--space-6); }
.small { font-size: var(--type-small-font-size); color: var(--color-secondary); }
.label {
  font-size: var(--type-label-font-size);
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: uppercase;
  color: var(--color-secondary);
}

/* Figures */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5) var(--space-5);
  margin: 0 0 var(--space-7);
  padding: 0;
}
.figure { border-top: 3px solid var(--color-primary); padding-top: var(--space-3); }
.figure dd { margin: 0; }
.amount {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--type-figure-font-size);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-feature-settings: var(--type-figure-font-feature);
  margin: var(--space-2) 0 var(--space-2);
  color: var(--color-primary);
}
@media (max-width: 480px) { .amount { font-size: 30px; } }
.caption { font-size: var(--type-small-font-size); color: var(--color-secondary); margin: 0; }

/* Footer */
.footer {
  margin-top: var(--space-8);
  padding: var(--space-6) 0 var(--space-7);
  border-top: 3px solid var(--color-primary);
  background: var(--color-surface-shaded);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.footer-contact .label { display: block; margin-bottom: var(--space-0); }
.footer a { color: var(--color-ink); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Ledger */
.views { display: grid; gap: var(--space-3); margin: 0 0 var(--space-6); }
.view-group .label { margin: 0 0 var(--space-1); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--space-0) var(--space-3);
  border: 1px solid var(--color-hairline);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--type-small-font-size);
  text-decoration: none;
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
}
.chip:hover { border-color: var(--color-primary); }
.chip[aria-current="page"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-surface); }
.chip-quiet { border-style: dashed; color: var(--color-secondary); }
@media (pointer: coarse) { .chip { min-height: 44px; } }
.table-scroll { overflow-x: auto; border-top: 2px solid var(--color-primary); }
.ledger { width: 100%; border-collapse: collapse; font-size: var(--type-small-font-size); }
.ledger caption { text-align: left; padding: var(--space-2) 0; }
.ledger th, .ledger td {
  text-align: left;
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--color-hairline);
  vertical-align: top;
}
.ledger th { font-size: var(--type-label-font-size); letter-spacing: var(--type-label-letter-spacing); text-transform: uppercase; color: var(--color-secondary); }
.ledger tbody tr:nth-child(even) { background: var(--color-surface-shaded); }
.numeric { text-align: right; white-space: nowrap; }
.mono { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-feature-settings: var(--type-figure-small-font-feature); }
.proof-label { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: var(--type-label-font-size); letter-spacing: .06em; }
.row-note { display: block; color: var(--color-secondary); font-size: var(--type-label-font-size); margin-top: var(--space-1); }
.row-voided td { text-decoration: line-through; background: var(--color-alert-tint); }
.row-voided .row-note { text-decoration: none; color: var(--color-alert); }
.row-corrected { background: var(--color-warn-tint); }
.row-corrected .row-note { color: var(--color-warn); }
.footnote { border-top: 1px solid var(--color-hairline); padding-top: var(--space-3); max-width: 68ch; }

/* Banner, cards, records */
.banner {
  border: 1px solid var(--color-alert);
  background: var(--color-alert-tint);
  padding: var(--space-4);
  margin: var(--space-5) 0;
}
.banner-title { font-family: "Playfair Display", Georgia, serif; font-size: var(--type-heading-font-size); font-weight: 400; margin: 0 0 var(--space-2); color: var(--color-alert); }
.banner-list { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.banner a { color: var(--color-alert); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5) var(--space-6); }
@media (min-width: 820px) { #campaigns-heading + .cards { grid-template-columns: 1fr 1fr; } }
.card { border-top: 1px solid var(--color-hairline); padding-top: var(--space-4); }
.card-title { font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: var(--type-heading-font-size); margin: 0 0 var(--space-1); }
.card a, .record a { color: var(--color-ink); }
.card-figures { margin: var(--space-2) 0 var(--space-1); }
.state {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: var(--type-label-font-size);
  letter-spacing: .06em;
  border: 1px solid currentColor;
  padding: 1px var(--space-2);
}
.state-warn { color: var(--color-warn); }
.state-alert { color: var(--color-alert); }
.state-ok, .state-open { color: var(--color-secondary); }
.note { border-left: 3px solid var(--color-secondary); padding: var(--space-2) var(--space-3); margin: var(--space-3) 0; background: var(--color-surface-shaded); }
.note-alert { border-left-color: var(--color-alert); background: var(--color-alert-tint); color: var(--color-alert); }
.note-warn { border-left-color: var(--color-warn); background: var(--color-warn-tint); color: var(--color-warn); }
.record { border-top: 1px solid var(--color-hairline); padding-top: var(--space-4); margin-bottom: var(--space-6); }
.record-name { font-family: "Playfair Display", Georgia, serif; font-size: var(--type-heading-font-size); margin: 0; }
.pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin: var(--space-4) 0; }
.pair dd { margin: var(--space-1) 0 0; font-size: var(--type-small-font-size); }
.photo-slot { border: 1px dashed var(--color-hairline); padding: var(--space-4); margin-top: var(--space-3); }
.state-note { color: var(--color-secondary); }
.video { margin: var(--space-4) 0 0; }
.video-player { display: block; width: 100%; max-width: 100%; height: auto; background: var(--color-ink); }
.video figcaption { margin-top: var(--space-2); }
.video-slot { border: 1px dashed var(--color-hairline); padding: var(--space-4); margin-top: var(--space-3); }

.plain { max-width: 68ch; }
.plain li { margin-bottom: var(--space-2); }

.timeline { list-style: none; margin: 0; padding: 0; max-width: 68ch; }
.timeline li { border-left: 2px solid var(--color-hairline); padding: 0 0 var(--space-5) var(--space-4); }
.timeline-date { margin: 0; font-size: var(--type-label-font-size); color: var(--color-secondary); }
.timeline-what { margin: var(--space-1) 0 0; }

/* Overview campaign card details */
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.card-raised { margin: 0 0 var(--space-2); }
.amount-card { font-size: 28px; margin: 0; }
.goal {
  display: block;
  width: 100%;
  height: 6px;
  margin: 0 0 var(--space-1);
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-hairline);
  border: 0;
  border-radius: 3px;
  overflow: hidden;
}
.goal::-webkit-meter-bar { background: var(--color-hairline); border: 0; border-radius: 3px; height: 6px; }
.goal::-webkit-meter-optimum-value,
.goal::-webkit-meter-suboptimum-value,
.goal::-webkit-meter-even-less-good-value { background: var(--color-primary); border-radius: 3px; }
.goal::-moz-meter-bar { background: var(--color-primary); border-radius: 3px; }
.card-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-3) 0 0; }
.card-pairs dd { margin: var(--space-0) 0 0; }

/* Front page (the holding page on the domain until the record launches) */
.front-hero { border-bottom: 1px solid var(--color-hairline); }
.front-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-7);
  align-items: end;
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}
@media (max-width: 860px) { .front-hero-inner { grid-template-columns: 1fr; gap: var(--space-6); padding-top: var(--space-6); } }
.front-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-4);
  max-width: 14ch;
  color: var(--color-primary);
}
.front-lead { font-size: 20px; line-height: 1.55; max-width: 44ch; margin: 0 0 var(--space-4); }
.front-status {
  display: inline-block;
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface-shaded);
  font-size: var(--type-small-font-size);
}
.front-marks { margin: 0; display: grid; gap: var(--space-3); border-top: 3px solid var(--color-primary); padding-top: var(--space-4); }
.front-marks dt { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: var(--type-small-font-size); font-weight: 500; letter-spacing: 0.02em; }
.front-marks dd { margin: var(--space-0) 0 0; color: var(--color-secondary); font-size: var(--type-small-font-size); }
.mark { display: inline-block; width: 1.4em; color: var(--color-primary); }
.mark-none { color: var(--color-secondary); }
.front-rules { padding-top: var(--space-4); }
.rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-7);
  counter-reset: rule;
}
@media (max-width: 720px) { .rules { grid-template-columns: 1fr; gap: var(--space-5); } }
.rules li { counter-increment: rule; border-top: 1px solid var(--color-hairline); padding-top: var(--space-3); }
.rules h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1.2; margin: 0 0 var(--space-2); }
.rules p { margin: 0; color: var(--color-ink); max-width: 46ch; }
.front-promise { margin-top: var(--space-8); background: var(--color-primary); color: var(--color-surface); padding: var(--space-7) 0; }
.front-promise-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  margin: 0 0 var(--space-3);
  max-width: 22ch;
}
.front-promise p { max-width: 60ch; margin: 0; font-size: 18px; line-height: 1.6; color: rgba(244, 241, 232, 0.9); }
.front .footer { margin-top: 0; }

/* Campaign rail: a row of cards that scrolls sideways and snaps, no JavaScript. */
.rail {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--layout-gutter);
  margin: 0 calc(-1 * var(--layout-gutter)) var(--space-6);
  padding: var(--space-1) var(--layout-gutter) var(--space-4);
  scrollbar-color: var(--color-primary) var(--color-hairline);
  scrollbar-width: thin;
}
@media (max-width: 480px) {
  .rail { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; scroll-padding-left: 16px; }
}
.rail-track { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-4); }
.rail-card { flex: 0 0 min(320px, 82vw); scroll-snap-align: start; }
.rail-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--color-ink);
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 160ms ease-out, transform 160ms ease-out;
}
.rail-link:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.rail-card.is-current .rail-link { border: 2px solid var(--color-primary); }
.rail-media { display: block; aspect-ratio: 8 / 5; background: var(--color-primary); overflow: hidden; }
.rail-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rail-fallback {
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding: var(--space-3);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(244, 241, 232, 0.14), transparent 60%),
    linear-gradient(160deg, #0a5a30 0%, var(--color-primary) 70%);
  color: var(--color-surface);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
  line-height: 1.2;
}
.rail-body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); flex: 1; }
.rail-body .state { align-self: flex-start; }
.rail-title { font-family: "Playfair Display", Georgia, serif; font-size: 21px; line-height: 1.2; margin-top: var(--space-0); }
.rail-dates { font-size: 12.5px; color: var(--color-secondary); }
.rail-raised { margin-top: var(--space-2); }
.rail-body .goal { margin-top: var(--space-1); }
.rail-alert { margin-top: var(--space-2); padding: var(--space-1) var(--space-2); font-size: 13.5px; border-left: 3px solid var(--color-alert); background: var(--color-alert-tint); color: var(--color-alert); }
.rail-alert-warn { border-left-color: var(--color-warn); background: var(--color-warn-tint); color: var(--color-warn); }
@media (prefers-reduced-motion: reduce) { .rail { scroll-behavior: auto; } .rail-link:hover { transform: none; } }

/* Page header band: every page opens in one green block with the navigation. */
.page-head {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(244, 241, 232, 0.07), transparent 60%),
    var(--color-primary);
  color: var(--color-surface);
  padding: var(--space-6) 0 var(--space-6);
}
.page-head:empty, .page-head .wrap:empty { display: none; }
.page-head .display { color: var(--color-surface); margin: 0 0 var(--space-3); max-width: 22ch; }
.page-head .lead { color: rgba(244, 241, 232, 0.9); margin: 0; }
.page-head .small { color: rgba(244, 241, 232, 0.8); margin: 0 0 var(--space-2); }
.page-head a { color: var(--color-surface); }
.page-head .state { color: var(--color-surface); border-color: rgba(244, 241, 232, 0.6); }
main.wrap { padding-top: var(--space-5); }

/* The overview hero: headline, mission and the seal, then the four figures. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: end; }
.hero .display { font-size: clamp(40px, 6.2vw, 76px); line-height: 1.02; letter-spacing: -0.025em; max-width: 14ch; }
.hero .lead { font-size: 20px; max-width: 46ch; }
.hero-portrait { width: auto; height: 380px; object-fit: contain; filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.3)); }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-seal { order: -1; width: 112px; height: 112px; }
}
.head-figures { margin-top: var(--space-6); }
.head-figures .heading { color: var(--color-surface); border-bottom-color: rgba(244, 241, 232, 0.2); font-size: 20px; margin-top: 0; }
.head-figures .figures { margin-bottom: 0; }
.head-figures .figure { border-top-color: rgba(244, 241, 232, 0.55); }
.head-figures .label { color: rgba(244, 241, 232, 0.78); }
.head-figures .amount { color: var(--color-surface); font-size: clamp(32px, 4vw, 44px); }
.head-figures .caption { color: rgba(244, 241, 232, 0.8); }
.masthead { border-bottom: 0; }

/* Texture and accent.
   Paper: a faint grain tile on the cream (self-hosted, metadata-free, tools/make_texture.py).
   Engraving: a fine crossed-line pattern on the green bands, drawn in CSS, like the
   guilloche on a certificate. Sage (the accent token) is decorative only: short rules,
   edges and marks, never text on cream. */
body { background: var(--color-surface) url("../img/grain.png") repeat; }
.masthead, .page-head, .front-promise, .rail-fallback {
  background-image:
    repeating-linear-gradient(135deg, rgba(244, 241, 232, 0.035) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(45deg, rgba(244, 241, 232, 0.022) 0 1px, transparent 1px 13px),
    radial-gradient(90% 120% at 100% 0%, rgba(244, 241, 232, 0.08), transparent 60%);
  background-color: var(--color-primary);
}
.rail-fallback { background-color: #0a5a30; }
.navbar { border-top: 1px solid rgba(127, 184, 148, 0.5); }
.page-head { border-bottom: 3px solid var(--color-accent); }

/* A short accent rule above every section heading. */
.heading { position: relative; padding-top: var(--space-3); }
.heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--color-accent);
}
.head-figures .heading { padding-top: var(--space-3); }
.head-figures .figure { border-top: 3px solid var(--color-accent); }
.figure { border-top-width: 3px; }
.footer { border-top: 3px solid var(--color-primary); }
.front-marks { border-top-color: var(--color-accent); }
.front-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: var(--space-4);
  background: var(--color-accent);
}
.rules li { border-top: 2px solid var(--color-accent); }
.rail-card.is-current .rail-link { border-color: var(--color-accent); }
.rail-link:hover { border-color: var(--color-accent); }
.chip[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--color-accent); }

/* The front page's hero matches the site's green header band. */
.front-hero {
  background-color: var(--color-primary);
  background-image:
    repeating-linear-gradient(135deg, rgba(244, 241, 232, 0.035) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(45deg, rgba(244, 241, 232, 0.022) 0 1px, transparent 1px 13px),
    radial-gradient(90% 120% at 100% 0%, rgba(244, 241, 232, 0.08), transparent 60%);
  color: var(--color-surface);
  border-bottom: 3px solid var(--color-accent);
}
.front-hero .front-title { color: var(--color-surface); }
.front-hero .front-lead { color: rgba(244, 241, 232, 0.92); }
.front-hero .front-status { background: rgba(244, 241, 232, 0.08); border-left-color: var(--color-accent); color: var(--color-surface); }
.front-hero .front-marks dd { color: rgba(244, 241, 232, 0.78); }
.front-hero .mark { color: var(--color-accent); }
.front-hero .mark-none { color: rgba(244, 241, 232, 0.6); }

/* Endless campaign row (overview): pure CSS, two copies of the cards sliding left by half.
   Each card carries its own right margin, so one copy's width is exactly half the track. */
.rail-marquee {
  overflow: hidden;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.rail-marquee .rail-track { width: max-content; gap: 0; animation: rail-slide 60s linear infinite; }
.rail-marquee .rail-card { margin-right: var(--space-4); }
.rail-marquee:hover .rail-track,
.rail-marquee:focus-within .rail-track { animation-play-state: paused; }
@keyframes rail-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .rail-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .rail-marquee .rail-track { animation: none; }
  .rail-marquee .rail-card[aria-hidden="true"] { display: none; }
}

/* Still grid (ledger filters): every campaign visible at once, no scrolling. */
.rail-grid { overflow: visible; margin: 0 0 var(--space-2); padding: 0; }
.rail-grid .rail-track { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.rail-grid .rail-media { aspect-ratio: 16 / 7; }
.rail-grid .rail-fallback { font-size: 16px; padding: var(--space-2) var(--space-3); }
.rail-grid .rail-title { font-size: 17px; }
.rail-grid .rail-body { padding: var(--space-2) var(--space-3) var(--space-3); }

/* Overview hero, second version: about the foundation, with the portrait standing on the
   band's bottom edge and filling its height. The record starts in the section below. */
.page-head-hero { padding-bottom: 0; }
.page-head-hero .hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-4);
}
.page-head-hero .hero-text { align-self: center; padding: var(--space-6) 0 var(--space-7); }
.hero-name {
  margin: 0 0 var(--space-3);
  font-size: var(--type-small-font-size);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.page-head-hero .display { max-width: 16ch; text-wrap: balance; font-size: clamp(40px, 4.6vw, 64px); }
/* The band's height is set by --band (the portrait's old box). The portrait itself
   rises above that box into the band's top padding, to just under the navigation, and
   stays centred in its half of the page; the band keeps its height. */
/* Clipped on every side, so the portrait never shows below the band while it rises in. */
.page-head-hero { overflow: clip; }
.page-head-hero .hero-portrait {
  --band: clamp(460px, min(52vw, 100svh - 210px), 760px);
  --lift: calc(var(--space-6) - var(--space-2));
  align-self: end;
  justify-self: center;
  height: calc(var(--band) + var(--space-4) + var(--lift));
  margin-top: calc(var(--space-4) - var(--space-4) - var(--lift));
  width: auto;
  max-width: none;
  display: block;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0 0; }
.button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-4);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  transition: transform 160ms ease-out, background-color 160ms ease-out;
}
.button:hover { transform: translateY(-1px); background: #fffdf6; }
.button:active { transform: translateY(1px); }
.button-quiet { background: transparent; color: var(--color-surface); border: 1px solid rgba(244, 241, 232, 0.55); }
.button-quiet:hover { background: rgba(244, 241, 232, 0.08); }
@media (max-width: 860px) {
  .page-head-hero .hero { grid-template-columns: 1fr; }
  .page-head-hero .hero-text { padding: var(--space-5) 0 0; }
  .page-head-hero .hero-portrait { order: 0; justify-self: center; margin: var(--space-5) 0 0; height: min(380px, 96vw); max-width: 100%; }
}
.record-intro { padding-top: var(--space-5); }
.section-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}
.figures-label { margin: var(--space-5) 0 var(--space-3); }
.record-intro .figure { border-top-color: var(--color-primary); }
/* Buttons inside the green band: the band's link colour must not reach them. */
.page-head .button { color: var(--color-primary); }
.page-head .button-quiet { color: var(--color-surface); }

/* Campaign hero: the campaign's details on the left, its photo on the right (or the
   branded panel until a photo is published). */
.campaign-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.campaign-hero-media { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); border: 1px solid rgba(244, 241, 232, 0.18); }
.campaign-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.campaign-hero-media .rail-fallback { font-size: 24px; padding: var(--space-4); }
@media (max-width: 860px) {
  .campaign-hero { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* "From the project": the campaign's photos, captioned and dated. */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-6); }
.gallery-item { margin: 0; }
.gallery-item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--color-primary); }
.gallery-item figcaption { margin-top: var(--space-1); }

/* Hero entrance. On load each part fades in and rises into the place it already holds, in
   a slow cascade: the label, then the headline word by word from behind a mask, then the
   lead and the buttons, with the portrait rising alongside. Transform and opacity only, so
   nothing reflows; with reduced motion there is no animation at all. */
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes rise-from-mask { from { transform: translateY(105%); } to { transform: none; } }
@keyframes rise-long { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: none; } }
.rise-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.rise-word { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  /* On the overview, the hero waits for the opening curtain to lift. */
  .splash ~ .page-head-hero { --after-splash: 2300ms; }
  .page-head-hero .hero-name,
  .page-head-hero .lead,
  .page-head-hero .hero-actions,
  .campaign-hero-text > * { animation: rise 1000ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .page-head-hero .hero-name { animation-delay: calc(var(--after-splash, 0ms) + 80ms); }
  .rise-word { animation: rise-from-mask 1100ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--after-splash, 0ms) + 180ms) both; }
  .rise-mask:nth-of-type(2) .rise-word { animation-delay: calc(var(--after-splash, 0ms) + 290ms); }
  .rise-mask:nth-of-type(3) .rise-word { animation-delay: calc(var(--after-splash, 0ms) + 400ms); }
  .rise-mask:nth-of-type(4) .rise-word { animation-delay: calc(var(--after-splash, 0ms) + 510ms); }
  .rise-mask:nth-of-type(5) .rise-word { animation-delay: calc(var(--after-splash, 0ms) + 620ms); }
  .rise-mask:nth-of-type(6) .rise-word { animation-delay: calc(var(--after-splash, 0ms) + 730ms); }
  .rise-mask:nth-of-type(n+7) .rise-word { animation-delay: calc(var(--after-splash, 0ms) + 840ms); }
  .page-head-hero .lead { animation-delay: calc(var(--after-splash, 0ms) + 900ms); }
  .page-head-hero .hero-actions { animation-delay: calc(var(--after-splash, 0ms) + 1020ms); }
  .page-head-hero .hero-portrait { animation: rise-long 2200ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--after-splash, 0ms) + 220ms) both; }
  .campaign-hero-text > :nth-child(1) { animation-delay: 80ms; }
  .campaign-hero-text > :nth-child(2) { animation-delay: 220ms; }
  .campaign-hero-text > :nth-child(3) { animation-delay: 340ms; }
  .campaign-hero-text > :nth-child(4) { animation-delay: 460ms; }
  .campaign-hero-media { animation: rise-long 1300ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both; }
}

/* The overview's opening curtain: cream paper with the green seal, which settles, then lifts
   away upward as the hero rises in. CSS only; it never takes clicks once lifted, and with
   reduced motion it is not shown at all. */
.splash { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .splash {
    display: grid;
    place-items: center;
    position: fixed;
    inset: 0;
    z-index: 100;
    /* Cream paper, so the lift reveals the green band as a clear change of colour. */
    background: var(--color-surface) url("../img/grain.png") repeat;
    border-bottom: 3px solid var(--color-accent);
    animation: splash-lift 1000ms cubic-bezier(0.76, 0, 0.24, 1) 1700ms both;
  }
  .splash-seal {
    width: clamp(200px, 22vw, 280px);
    height: auto;
    /* The spin, and under it a slow steady zoom that runs until the curtain has lifted,
       so the seal never comes to a dead stop. */
    animation:
      splash-seal 1500ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both,
      splash-drift 2700ms linear 80ms both;
  }
}
@keyframes splash-drift { from { scale: 1; } to { scale: 1.1; } }
/* The seal spins in: one and a half turns, growing as it comes, and slows to rest upright. */
@keyframes splash-seal {
  from { opacity: 0; transform: rotate(-540deg) scale(0.4); }
  35% { opacity: 1; }
  to { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes splash-lift {
  0% { transform: none; visibility: visible; }
  99% { visibility: visible; }
  100% { transform: translateY(calc(-100% - 3px)); visibility: hidden; pointer-events: none; }
}

/* "See where the money went" glides down and lands with the band's sage edge just at the
   top of the screen: the heading sits 64px (main + section padding) below that edge. */
#record-heading { scroll-margin-top: calc(var(--space-5) * 2 + 4px); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ===== Visual supports on the inner pages (layout unchanged; these add to it) ========= */

/* The seal, engraved faintly into the right of every inner page's green band. */
.page-head:not(.page-head-hero):not(.page-head-campaign) { position: relative; overflow: clip; }
.page-head:not(.page-head-hero):not(.page-head-campaign)::after {
  content: "";
  position: absolute;
  right: max(-80px, calc((100vw - var(--layout-max-width)) / 2 - 140px));
  top: 50%;
  width: 380px;
  height: 380px;
  transform: translateY(-50%) rotate(-12deg);
  background: url("../img/seal-560.png") center / contain no-repeat;
  opacity: 0.16;
  mix-blend-mode: screen;
  pointer-events: none;
}
.page-head .wrap { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .page-head:not(.page-head-hero):not(.page-head-campaign)::after { width: 220px; height: 220px; right: -60px; }
}

/* Icons: one family (Phosphor, regular weight), sized to the text beside them. */
.icon { width: 1.25em; height: 1.25em; flex: none; }
.icon-badge {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-primary); color: var(--color-surface);
}
.icon-badge .icon { width: 22px; height: 22px; }

/* "Where each peso stands": three bars against what was raised. */
.flow { margin: 0 0 var(--space-6); padding: var(--space-4); background: var(--color-surface-shaded); border-radius: 6px; }
.flow .label { margin-bottom: var(--space-3); }
.flow-row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.flow-name { font-size: var(--type-small-font-size); color: var(--color-secondary); }
.flow-amount { font-size: var(--type-small-font-size); color: var(--color-primary); font-weight: 600; min-width: 7ch; text-align: right; }
.flow-bar { width: 100%; height: 12px; display: block; appearance: none; -webkit-appearance: none; background: var(--color-hairline); border: 0; border-radius: 6px; }
.flow-bar::-webkit-meter-bar { background: var(--color-hairline); border: 0; border-radius: 6px; height: 12px; }
.flow-bar::-webkit-meter-optimum-value { border-radius: 6px; }
.flow-raised::-webkit-meter-optimum-value { background: var(--color-primary); }
.flow-disbursed::-webkit-meter-optimum-value { background: #2f7a4f; }
.flow-receipted::-webkit-meter-optimum-value { background: var(--color-accent); }
.flow-bar::-moz-meter-bar { border-radius: 6px; }
.flow-raised::-moz-meter-bar { background: var(--color-primary); }
.flow-disbursed::-moz-meter-bar { background: #2f7a4f; }
.flow-receipted::-moz-meter-bar { background: var(--color-accent); }
@media (max-width: 560px) {
  .flow-row { grid-template-columns: 1fr auto; }
  .flow-bar { grid-column: 1 / -1; order: 3; }
}

/* Campaigns: a picture card for each, the photo (or the branded panel) beside the figures. */
.card-visual { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.card-media { display: block; aspect-ratio: 8 / 5; border-radius: 6px; overflow: hidden; background: var(--color-primary); }
.card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); }
.card-media .rail-fallback { font-size: 18px; transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); }
.card-visual:hover .card-media img, .card-visual:hover .card-media .rail-fallback { transform: scale(1.04); }
.card-visual .heading { margin-top: 0; }
.card-goal { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.card-goal .goal { flex: 0 0 min(260px, 50%); }
@media (min-width: 1000px) { .card-visual .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
@media (max-width: 760px) { .card-visual { grid-template-columns: 1fr; } }

/* How this works: tiles for what the site never does, a numbered timeline for the steps,
   and a tile for each proof state. */
.tiles { list-style: none; padding: 0; margin: var(--space-3) 0 var(--space-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); }
.tile { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--color-surface-shaded); border-radius: 6px; border-top: 3px solid var(--color-primary); }
.tile .icon { width: 34px; height: 34px; color: var(--color-primary); }
.steps { list-style: none; counter-reset: step; padding: 0; margin: var(--space-4) 0 var(--space-5); max-width: 72ch; position: relative; }
.steps::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(var(--color-accent), var(--color-primary)); }
.steps li { counter-increment: step; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-3); align-items: start; margin-bottom: var(--space-4); }
.steps li::before {
  content: counter(step);
  grid-row: 1; grid-column: 1;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-primary); color: var(--color-surface);
  font-family: "Playfair Display", Georgia, serif; font-size: 20px;
  position: relative; z-index: 1;
}
.steps li > .icon { display: none; }
.steps li > span { padding-top: 10px; }
.proof-tiles .pair { padding: var(--space-4); background: var(--color-surface-shaded); border-radius: 6px; }
.proof-tiles .label { font-size: 15px; color: var(--color-primary); }

/* Partners, disclosures: a badge beside each record's name. */
.record-visual { padding: var(--space-5); background: var(--color-surface-shaded); border-radius: 6px; border-top: 3px solid var(--color-primary); }
.record-top { display: flex; align-items: center; gap: var(--space-3); }
.monogram {
  display: inline-grid; place-items: center; flex: none;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--color-primary); color: var(--color-surface);
  font-family: "Playfair Display", Georgia, serif; font-size: 22px; letter-spacing: 0.02em;
  box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 4px var(--color-accent);
}
.partner-logo {
  display: block; flex: none; width: 96px; height: 96px; object-fit: contain;
  padding: 6px; background: #fff; border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(20, 37, 27, 0.08);
}
.partner-meta { margin-top: 2px; }
.partner-about-label { margin: var(--space-5) 0 0; }
.partner-about { max-width: 68ch; margin: var(--space-3) 0 0; line-height: 1.65; }
.cred-tiles .pair { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-2); padding: var(--space-3); background: var(--color-surface); border-radius: 6px; }
.cred-tiles .pair > .icon { grid-row: 1 / span 2; color: var(--color-primary); width: 24px; height: 24px; }

/* Schools: the branded panel beside the facts, each fact with its icon. */
.record-school { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.school-panel { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; }
.school-panel .rail-fallback { flex-direction: column; align-items: flex-start; justify-content: space-between; font-size: 18px; }
.school-panel .rail-fallback .icon { width: 36px; height: 36px; opacity: 0.85; }
.facts { list-style: none; padding: 0; margin: var(--space-2) 0 var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.facts li { display: flex; align-items: center; gap: var(--space-1); font-size: var(--type-small-font-size); }
.facts .icon { color: var(--color-primary); }
@media (max-width: 760px) { .record-school { grid-template-columns: 1fr; } }

/* Corrections (none yet) and contact. */
.empty-state { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5); background: var(--color-surface-shaded); border-radius: 6px; max-width: 72ch; }
.contact-cards .pair { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); padding: var(--space-4); background: var(--color-surface-shaded); border-radius: 6px; border-top: 3px solid var(--color-primary); }
.contact-cards .pair > .icon { grid-row: 1 / span 2; width: 28px; height: 28px; color: var(--color-primary); }
.contact-cards dd { word-break: break-word; }

/* Page-to-page: the page swaps at once under a still masthead (a cross-document view
   transition with no animation, so there is no white flash), then the new page arrives:
   the band's title and intro rise smoothly, line by line; the content beneath rises in
   more slowly, one section after another. Sections further down rise in as they are
   scrolled to, where the browser supports scroll-driven animation; elsewhere they join
   the cascade on load. CSS only; none under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  ::view-transition-old(root) { display: none; }

  .page-head:not(.page-head-hero):not(.page-head-campaign) .wrap > * { animation: rise 900ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .page-head:not(.page-head-hero):not(.page-head-campaign) .wrap > :nth-child(2) { animation-delay: 110ms; }
  .page-head:not(.page-head-hero):not(.page-head-campaign) .wrap > :nth-child(n+3) { animation-delay: 220ms; }

  /* ---- Content arrival and reveal ------------------------------------------------
     Every piece of content is a unit: each heading, label, paragraph, note, tile, card,
     figure, record part and table row. A unit's start time comes from where it sits:
       --base  which section of the page it is in (the main area's children, in order)
       --sub   its place within that section
       --step  its place within a row or list inside that
     so a title always starts before whatever sits beneath it. On arrival, the units on
     screen cascade in by themselves in that order (the timed "arrive": filter opacity +
     translate). Units further down are revealed as they are scrolled to (the
     scroll-linked "rise-slow": opacity + transform), where the browser supports it; for
     units already on screen that one is complete from the start, so the two never
     fight. Each scroll reveal completes once the unit is wholly in view, or once 160px
     of a tall one is, so nothing on screen is ever left half-shown. */

  /* On the overview the content waits for the opening curtain and the hero. */
  .splash ~ main { --after-splash: 2300ms; }

  main.wrap > :nth-child(1) { --base: 300ms; }
  main.wrap > :nth-child(2) { --base: 460ms; }
  main.wrap > :nth-child(3) { --base: 620ms; }
  main.wrap > :nth-child(4) { --base: 780ms; }
  main.wrap > :nth-child(5) { --base: 940ms; }
  main.wrap > :nth-child(6) { --base: 1100ms; }
  main.wrap > :nth-child(7) { --base: 1260ms; }
  main.wrap > :nth-child(8) { --base: 1420ms; }
  main.wrap > :nth-child(9) { --base: 1580ms; }
  main.wrap > :nth-child(10) { --base: 1740ms; }
  main.wrap > :nth-child(11) { --base: 1900ms; }
  main.wrap > :nth-child(n+12) { --base: 2060ms; }
  main.wrap > * > :nth-child(2) { --sub: 130ms; }
  main.wrap > * > :nth-child(3) { --sub: 260ms; }
  main.wrap > * > :nth-child(4) { --sub: 390ms; }
  main.wrap > * > :nth-child(5) { --sub: 520ms; }
  main.wrap > * > :nth-child(n+6) { --sub: 650ms; }
  main.wrap > * > * :nth-child(1) { --step: 0ms; }
  main.wrap > * > * :nth-child(2) { --step: 110ms; }
  main.wrap > * > * :nth-child(3) { --step: 220ms; }
  main.wrap > * > * :nth-child(4) { --step: 330ms; }
  main.wrap > * > * :nth-child(5) { --step: 440ms; }
  main.wrap > * > * :nth-child(6) { --step: 550ms; }
  main.wrap > * > * :nth-child(7) { --step: 660ms; }
  main.wrap > * > * :nth-child(n+8) { --step: 770ms; }

  /* The ledger's campaign cards follow their label ("By campaign"), which shares their
     place in the section. */
  main.wrap > .views .rail-card { --lead: 130ms; }

  /* The units. Sections, records and lists are containers: their parts arrive, not the
     box. The ledger's view picker, and wide tables (below), are containers too. */
  main.wrap > :not(section, .record, .tiles, .steps, .pairs, .cards, .figures, .gallery, .plain, .flow, .views),
  main.wrap > :is(section, .record, .tiles, .steps, .pairs, .cards, .figures, .gallery, .plain, .flow, .views) > :not(.tiles, .steps, .pairs, .cards, .figures, .gallery, .plain, .flow, .facts, .view-group),
  main.wrap > * > :is(.tiles, .steps, .pairs, .cards, .figures, .gallery, .plain, .flow) > *,
  main.wrap > :is(section, .record) > * > :is(.tiles, .steps, .pairs, .cards, .figures, .gallery, .plain, .flow) > *,
  main.wrap > .views > .view-group > :not(.rail),
  main.wrap > .views .rail-card {
    animation: arrive 1100ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: calc(var(--after-splash, 0ms) + var(--base, 300ms) + var(--sub, 0ms) + var(--step, 0ms) + var(--lead, 0ms));
  }

  @supports (animation-timeline: view()) {
    main.wrap > :not(section, .record, .tiles, .steps, .pairs, .cards, .figures, .gallery, .plain, .flow, .views),
    main.wrap > :is(section, .record, .tiles, .steps, .pairs, .cards, .figures, .gallery, .plain, .flow, .views) > :not(.tiles, .steps, .pairs, .cards, .figures, .gallery, .plain, .flow, .facts, .view-group),
    main.wrap > * > :is(.tiles, .steps, .pairs, .cards, .figures, .gallery, .plain, .flow) > *,
    main.wrap > :is(section, .record) > * > :is(.tiles, .steps, .pairs, .cards, .figures, .gallery, .plain, .flow) > *,
    main.wrap > .views > .view-group > :not(.rail),
    main.wrap > .views .rail-card {
      animation-name: rise-slow, arrive;
      animation-duration: auto, 1100ms;
      animation-timing-function: linear, cubic-bezier(0.16, 1, 0.3, 1);
      animation-fill-mode: both, backwards;
      animation-timeline: view(), auto;
      animation-range: entry 0% entry min(100%, 160px);
      animation-delay: 0s, calc(var(--after-splash, 0ms) + var(--base, 300ms) + var(--sub, 0ms) + var(--step, 0ms) + var(--lead, 0ms));
    }
    /* Items side by side in a row reveal left to right as the row scrolls in. */
    main.wrap :is(.tiles, .pairs, .cards, .figures, .gallery, .flow, .rail-track) > :nth-child(2) { animation-range: entry 8% entry min(100%, 190px); }
    main.wrap :is(.tiles, .pairs, .cards, .figures, .gallery, .flow, .rail-track) > :nth-child(3) { animation-range: entry 16% entry min(100%, 220px); }
    main.wrap :is(.tiles, .pairs, .cards, .figures, .gallery, .flow, .rail-track) > :nth-child(4) { animation-range: entry 24% entry min(100%, 250px); }
    main.wrap :is(.tiles, .pairs, .cards, .figures, .gallery, .flow, .rail-track) > :nth-child(n+5) { animation-range: entry 32% entry min(100%, 280px); }

    /* Wide tables fit the page, so they need no sideways scroll box (which scroll-linked
       animation would measure against): the caption, the header row and then each row
       arrive and reveal in turn. Narrower, the table keeps its scroll box and arrives
       as one unit. */
    @media (min-width: 1100px) {
      html body main.wrap > .table-scroll { overflow-x: visible; animation: none; }
      html body main.wrap > .table-scroll > table > :is(caption, thead),
      html body main.wrap > .table-scroll > table > tbody > tr {
        animation-name: rise-slow, arrive;
        animation-duration: auto, 1100ms;
        animation-timing-function: linear, cubic-bezier(0.16, 1, 0.3, 1);
        animation-fill-mode: both, backwards;
        animation-timeline: view(), auto;
        animation-range: entry 0% entry 100%;
        animation-delay: 0s, calc(var(--after-splash, 0ms) + var(--base, 300ms) + var(--step, 0ms) + var(--row, 0ms));
      }
      html body main.wrap > .table-scroll > table > tbody > tr { --row: 220ms; }
    }
  }
}
@keyframes rise-slow { from { opacity: 0; transform: translateY(40px); } }
@keyframes arrive { from { filter: opacity(0); translate: 0 32px; } }

/* Only one or two campaigns: the row stands still and fills the width. One is a wide
   feature card (photo left, details right); two sit side by side. */
.rail-few { overflow: visible; margin: var(--space-3) 0 var(--space-5); }
.rail-few .rail-track { display: grid; gap: var(--space-5); }
.rail-few-2 .rail-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rail-few-1 .rail-link { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.rail-few-1 .rail-media { aspect-ratio: auto; min-height: 320px; height: 100%; }
.rail-few-1 .rail-body { padding: var(--space-6) var(--space-5); justify-content: center; }
.rail-few-1 .rail-title { font-size: clamp(26px, 2.6vw, 34px); }
.rail-few-2 .rail-media { aspect-ratio: 16 / 9; }
.rail-few-2 .rail-title { font-size: 24px; }
.rail-few .rail-fallback { font-size: 22px; padding: var(--space-4); }
@media (max-width: 760px) {
  .rail-few-2 .rail-track, .rail-few-1 .rail-link { grid-template-columns: 1fr; }
  .rail-few-1 .rail-media { min-height: 0; aspect-ratio: 8 / 5; }
}

/* ===== Taste pass (2026-09-29) ======================================================= */

/* Phones: the menu wraps onto rows so every page is visible, instead of scrolling off the
   edge with nothing to say there is more. */
@media (max-width: 860px) {
  .nav { flex-wrap: wrap; overflow-x: visible; column-gap: var(--space-3); row-gap: 0; }
  .nav a { padding-left: 0; padding-right: 0; }
}

/* Figures: the first is the lead number, larger, with the rest beside it. */
@media (min-width: 900px) {
  .figures:has(> .figure:nth-child(3):last-child) { grid-template-columns: 1.5fr 1fr 1fr; }
  .figures:has(> .figure:nth-child(4):last-child) { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .card-visual .figures:has(> .figure:nth-child(3):last-child) { grid-template-columns: 1.4fr 1fr 1fr; }
}
.figures > .figure:first-child .amount { font-size: clamp(40px, 4.2vw, 56px); }
.card-visual .figures > .figure:first-child .amount { font-size: clamp(32px, 3vw, 40px); }
.figures > .figure:not(:first-child) .amount { font-size: clamp(26px, 2.4vw, 32px); }
.head-figures .figures > .figure:first-child .amount { font-size: clamp(40px, 4.2vw, 56px); }

/* A campaign's status leads its meta line; partner and dates follow, quieter. */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-2); font-size: var(--type-small-font-size); color: var(--color-secondary); }
.meta .state { margin: 0; }
.page-head .meta { color: rgba(244, 241, 232, 0.88); }

/* Quiet normal-case subheads where a small uppercase label was only decoration. */
.subhead { font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-ink); margin: 0 0 var(--space-3); }
.flow .subhead { margin-bottom: var(--space-2); }

/* Partners: registrations as clean rows inside the partner's card, not cards in a card. */
.cred-tiles { gap: 0 var(--space-5); }
.cred-tiles .pair { background: none; border-radius: 0; padding: var(--space-3) 0; border-top: 1px solid var(--color-hairline); }

/* One corner system: 6px boxes, fully round controls and bars, circles for badges. */
.goal, .goal::-webkit-meter-bar, .goal::-webkit-meter-optimum-value, .goal::-webkit-meter-even-less-good-value, .goal::-moz-meter-bar { border-radius: 999px; }

/* A campaign Russco funded directly: the page says so plainly in place of the figures. */
.funded-note { display: flex; align-items: center; gap: var(--space-4); max-width: 72ch; padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-6); background: var(--color-surface-shaded); border-radius: 6px; border-top: 3px solid var(--color-primary); }
.funded-note p { line-height: 1.55; }
.funded-note p { margin: 0; }
.funded-line, .rail-funded { color: var(--color-secondary); font-size: var(--type-small-font-size); margin: var(--space-2) 0 0; }

/* A campaign's "About the project": comfortable reading measure, the first line larger. */
.story { max-width: 66ch; margin: 0 0 var(--space-6); }
.story p { margin: 0 0 var(--space-3); line-height: 1.7; }
.story p:first-child { font-size: 19px; color: var(--color-ink); }

/* Campaign photos are phone pictures, taller than wide: the gallery keeps them upright,
   and the hero's landscape frame favours the middle of the picture, where the people are. */
.gallery { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.gallery-item img { aspect-ratio: 4 / 3; }
.campaign-hero-media img { object-position: center 15%; }

/* The photo viewer. A gallery photo links to its full-screen slide (#photo-N); the slide
   shows while it is the page's target, over the page dimmed with black. Arrows move to the
   neighbouring slide, which fades in; the cross or a click on the dark backdrop goes back to the gallery. */
.gallery-open { display: block; border-radius: 6px; overflow: hidden; cursor: zoom-in; }
.gallery-open img { transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); }
.gallery-open:hover img { transform: scale(1.04); }
/* Every slide is always laid out, invisible until it is the target; moving between slides
   crossfades them (the old one fades out as the new one fades in). One shared shade dims
   the page while any slide is open, so it never flickers between photos. */
.lightbox-shade {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms ease, visibility 0s linear 500ms;
}
.lightbox:has(.lightbox-slide:target) .lightbox-shade {
  opacity: 1;
  visibility: visible;
  transition: opacity 500ms ease, visibility 0s;
}
.lightbox-slide {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 200;
  margin: 0;
  padding: var(--space-6) var(--space-7);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 500ms ease, visibility 0s linear 500ms;
}
.lightbox-slide:target {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 500ms ease, visibility 0s;
}
.lightbox-backdrop { position: absolute; inset: 0; }
.lightbox-slide img {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.lightbox-slide figcaption {
  position: relative;
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  color: rgba(244, 241, 232, 0.9);
  font-size: var(--type-small-font-size);
}
.lightbox-count { color: rgba(244, 241, 232, 0.6); }
.lightbox-arrow, .lightbox-close {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--color-surface);
  background: rgba(244, 241, 232, 0.08);
  border: 1px solid rgba(244, 241, 232, 0.25);
  transition: background-color 300ms ease-out, transform 300ms ease-out;
}
.lightbox-arrow:hover, .lightbox-close:hover { background: rgba(244, 241, 232, 0.18); }
.lightbox-arrow .icon, .lightbox-close .icon { width: 24px; height: 24px; }
.lightbox-prev { left: var(--space-4); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: var(--space-4); top: 50%; transform: translateY(-50%); }
.lightbox-close { top: var(--space-4); right: var(--space-4); }
@media (max-width: 640px) {
  .lightbox-slide { padding: var(--space-7) var(--space-3) var(--space-5); }
  .lightbox-arrow { top: auto; bottom: var(--space-3); transform: none; width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox-shade, .lightbox-slide, .lightbox:has(.lightbox-slide:target) .lightbox-shade,
  .lightbox-slide:target { transition: none; }
}

/* A school's own photo (the building) in place of the branded panel, with its credit. */
.school-photo { margin: 0; aspect-ratio: auto; overflow: visible; }
.school-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.school-photo figcaption { margin-top: var(--space-1); color: var(--color-secondary); }
@media (min-width: 761px) { .record-school:has(.school-photo) { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); } }

/* The campaign's main image cycles through its photos: each holds for six seconds and
   crossfades into the next over a little over a second, round and round. CSS only; with
   reduced motion only the first photo shows. */
.hero-cycle { position: relative; width: 100%; height: 100%; }
.hero-cycle .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.hero-cycle .hero-slide:not(:first-child) { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero-cycle .hero-slide { opacity: 0; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: both; }
  .hero-cycle-2 .hero-slide { animation-name: hero-cycle-2; animation-duration: 12s; }
  .hero-cycle-2 .hero-slide:nth-child(2) { animation-delay: 6s; }
  .hero-cycle-3 .hero-slide { animation-name: hero-cycle-3; animation-duration: 18s; }
  .hero-cycle-3 .hero-slide:nth-child(2) { animation-delay: 6s; }
  .hero-cycle-3 .hero-slide:nth-child(3) { animation-delay: 12s; }
  .hero-cycle-4 .hero-slide { animation-name: hero-cycle-4; animation-duration: 24s; }
  .hero-cycle-4 .hero-slide:nth-child(2) { animation-delay: 6s; }
  .hero-cycle-4 .hero-slide:nth-child(3) { animation-delay: 12s; }
  .hero-cycle-4 .hero-slide:nth-child(4) { animation-delay: 18s; }
  .hero-cycle-5 .hero-slide { animation-name: hero-cycle-5; animation-duration: 30s; }
  .hero-cycle-5 .hero-slide:nth-child(2) { animation-delay: 6s; }
  .hero-cycle-5 .hero-slide:nth-child(3) { animation-delay: 12s; }
  .hero-cycle-5 .hero-slide:nth-child(4) { animation-delay: 18s; }
  .hero-cycle-5 .hero-slide:nth-child(5) { animation-delay: 24s; }
  .hero-cycle-6 .hero-slide { animation-name: hero-cycle-6; animation-duration: 36s; }
  .hero-cycle-6 .hero-slide:nth-child(2) { animation-delay: 6s; }
  .hero-cycle-6 .hero-slide:nth-child(3) { animation-delay: 12s; }
  .hero-cycle-6 .hero-slide:nth-child(4) { animation-delay: 18s; }
  .hero-cycle-6 .hero-slide:nth-child(5) { animation-delay: 24s; }
  .hero-cycle-6 .hero-slide:nth-child(6) { animation-delay: 30s; }
  .hero-cycle-7 .hero-slide { animation-name: hero-cycle-7; animation-duration: 42s; }
  .hero-cycle-7 .hero-slide:nth-child(2) { animation-delay: 6s; }
  .hero-cycle-7 .hero-slide:nth-child(3) { animation-delay: 12s; }
  .hero-cycle-7 .hero-slide:nth-child(4) { animation-delay: 18s; }
  .hero-cycle-7 .hero-slide:nth-child(5) { animation-delay: 24s; }
  .hero-cycle-7 .hero-slide:nth-child(6) { animation-delay: 30s; }
  .hero-cycle-7 .hero-slide:nth-child(7) { animation-delay: 36s; }
  .hero-cycle-8 .hero-slide { animation-name: hero-cycle-8; animation-duration: 48s; }
  .hero-cycle-8 .hero-slide:nth-child(2) { animation-delay: 6s; }
  .hero-cycle-8 .hero-slide:nth-child(3) { animation-delay: 12s; }
  .hero-cycle-8 .hero-slide:nth-child(4) { animation-delay: 18s; }
  .hero-cycle-8 .hero-slide:nth-child(5) { animation-delay: 24s; }
  .hero-cycle-8 .hero-slide:nth-child(6) { animation-delay: 30s; }
  .hero-cycle-8 .hero-slide:nth-child(7) { animation-delay: 36s; }
  .hero-cycle-8 .hero-slide:nth-child(8) { animation-delay: 42s; }
}
@keyframes hero-cycle-2 { 0% { opacity: 0; } 10.000% { opacity: 1; } 50.000% { opacity: 1; } 60.000% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cycle-3 { 0% { opacity: 0; } 6.667% { opacity: 1; } 33.333% { opacity: 1; } 40.000% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cycle-4 { 0% { opacity: 0; } 5.000% { opacity: 1; } 25.000% { opacity: 1; } 30.000% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cycle-5 { 0% { opacity: 0; } 4.000% { opacity: 1; } 20.000% { opacity: 1; } 24.000% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cycle-6 { 0% { opacity: 0; } 3.333% { opacity: 1; } 16.667% { opacity: 1; } 20.000% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cycle-7 { 0% { opacity: 0; } 2.857% { opacity: 1; } 14.286% { opacity: 1; } 17.143% { opacity: 0; } 100% { opacity: 0; } }
@keyframes hero-cycle-8 { 0% { opacity: 0; } 2.500% { opacity: 1; } 12.500% { opacity: 1; } 15.000% { opacity: 0; } 100% { opacity: 0; } }

/* "What was given": two wide cards a row, each item on one line with its quantity kept
   inside the card; bracketed details sit under the item in smaller grey text. */
.given { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-4); margin: 0 0 var(--space-6); align-items: start; }
.given-group { padding: var(--space-4) var(--space-5); background: var(--color-surface-shaded); border-radius: 6px; border-top: 3px solid var(--color-primary); min-width: 0; }
.given-group .subhead { margin-bottom: var(--space-1); }
.given-note { margin: 0 0 var(--space-2); font-size: 13px; color: var(--color-secondary); }
.given-list { list-style: none; margin: 0; padding: 0; }
.given-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--color-hairline); font-size: var(--type-small-font-size); }
.given-list li:last-child { border-bottom: 0; }
.given-item { min-width: 0; }
.given-detail { display: block; margin-top: 2px; font-size: 13px; color: var(--color-secondary); }
.given-qty { color: var(--color-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Volunteer page: the sign-up button, green on the cream page. */
.volunteer-cta { margin: var(--space-5) 0; }
.volunteer-cta .button { background: var(--color-primary); color: var(--color-surface); }
.volunteer-cta .button:hover { background: #0a5a30; }

/* The hero's introduction can run to two paragraphs: a little air between them. */
.page-head-hero .lead + .lead { margin-top: var(--space-3); }

/* Volunteer now: a slow breathing glow and an occasional soft sheen, so it draws the eye
   without hurrying it. Off for anyone who asks for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .button-glow,
  .button.button-glow:hover {
    background-image: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%);
    background-size: 260% 100%;
    background-repeat: no-repeat;
    background-position: 140% 0;
  }
  .button-glow {
    animation:
      glow-breathe 3.6s cubic-bezier(0.22, 1, 0.36, 1) infinite,
      glow-sheen 7s cubic-bezier(0.45, 0, 0.25, 1) 1.2s infinite;
  }
}
@keyframes glow-breathe {
  0%   { box-shadow: 0 0 0 0 rgba(244, 241, 232, 0.5); }
  75%  { box-shadow: 0 0 0 12px rgba(244, 241, 232, 0); }
  100% { box-shadow: 0 0 0 12px rgba(244, 241, 232, 0); }
}
@keyframes glow-sheen {
  0%   { background-position: 140% 0; }
  30%  { background-position: -40% 0; }
  100% { background-position: -40% 0; }
}