/* Blue Lifeline: site styles
   Brand specification v1.3: cream canvas, navy ink, one accent blue.
   Source Serif 4 for display, Inter for text. No gradients, shadows or rounded corners. */

/* ---------- Fonts (self-hosted, subset, variable) ---------- */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-roman.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks, so text does not jump when the web fonts arrive */
@font-face {
  font-family: "BL Serif Fallback";
  src: local("Georgia");
  size-adjust: 96.5%;
  ascent-override: 96%;
  descent-override: 28%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "BL Sans Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  --cream: #FAFBF6;
  --navy: #001362;
  --blue: #1B30D9;
  --grey: #6B6B6B;
  --water: #5CCDEB;          /* the logo's own cyan, used only as a water fill in drawings */

  --serif: "Source Serif 4", "BL Serif Fallback", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: "Inter", "BL Sans Fallback", "Source Sans 3", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --t-hero: clamp(2.5rem, min(1rem + 4.7vw, 11.2vh), 5.5rem);
  --t-statement: clamp(2.25rem, 1rem + 4.6vw, 5.25rem);
  --t-h2: clamp(1.9rem, 1.25rem + 2.3vw, 3.4rem);
  --t-h3: clamp(1.35rem, 1.1rem + 0.8vw, 1.8rem);
  --t-lead: clamp(1.25rem, 1.05rem + 0.75vw, 1.7rem);
  --t-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-small: 0.875rem;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --col-gap: clamp(1rem, 2vw, 1.5rem);
  --section: clamp(4.5rem, 9.5vw, 9rem);
  --header-h: 4.5rem;
  --rule: 1px solid var(--grey);
  --rule-ink: 1px solid var(--navy);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
abbr[title] { text-decoration: none; }
::selection { background: var(--blue); color: var(--cream); }

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

.wrap {
  width: 100%;
  max-width: 85rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -6rem;
  z-index: 30;
  padding: 0.75rem 1rem;
  background: var(--navy);
  color: var(--cream);
  text-decoration: none;
  font-weight: 500;
}
.skip:focus { top: 0.75rem; }

/* ---------- Type ---------- */
.h2__mark { color: var(--blue); }
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
  max-width: 21ch;
}
.body {
  max-width: 38rem;
  text-wrap: pretty;
}
.body + .body { margin-top: 1rem; }
.body--small { font-size: 1rem; }

a:not([class]), .sources a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.15s var(--ease);
}
a:not([class]):hover, .sources a:hover { color: var(--blue); }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--navy);
  border-radius: 0;
  background: var(--navy);
  color: var(--cream);
  font: 500 1.0625rem/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn:hover { background: var(--blue); border-color: var(--blue); }
.btn:active { background: var(--navy); border-color: var(--navy); }

.textlink {
  display: inline-flex;
  align-items: center;
  min-height: 3.25rem;
  font-weight: 500;
  font-size: 1.0625rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: color 0.15s var(--ease);
}
.textlink:hover { color: var(--blue); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--navy); }
.site-header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
.lockup img { flex: none; }
.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.9875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.site-nav a:hover { color: var(--blue); }
.site-nav a[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--blue); }
.site-nav .site-nav__cta {
  padding: 0 1.1rem;
  border: 1px solid var(--navy);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.site-nav .site-nav__cta:hover,
.site-nav .site-nav__cta[aria-current="true"] { background: var(--navy); color: var(--cream); box-shadow: none; }
.nav-toggle { display: none; }

@media (max-width: 56rem) {
  /* Without JavaScript the links simply wrap under the logo. */
  .site-header__in { flex-wrap: wrap; padding-block: 0.6rem; row-gap: 0.25rem; }
  .site-nav ul { flex-wrap: wrap; gap: 0 1.25rem; }

  .js .site-header__in { flex-wrap: nowrap; padding-block: 0; }
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 1rem;
    border: 1px solid var(--navy);
    border-radius: 0;
    background: transparent;
    color: var(--navy);
    font: 500 1rem/1 var(--sans);
    cursor: pointer;
  }
  .js .nav-toggle[aria-expanded="true"] { background: var(--navy); color: var(--cream); }
  .js .site-nav:not(.site-nav--plain) {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    padding: 0.5rem var(--gutter) 1.75rem;
    background: var(--cream);
    border-bottom: var(--rule-ink);
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .js .site-nav:not(.site-nav--plain).is-open { display: block; }
  .js .site-nav:not(.site-nav--plain) ul { display: block; }
  .js .site-nav:not(.site-nav--plain) li + li { border-top: var(--rule); }
  .js .site-nav:not(.site-nav--plain) a {
    display: flex;
    min-height: 3.5rem;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.5rem;
    box-shadow: none;
  }
  .js .site-nav:not(.site-nav--plain) .site-nav__cta { padding: 0; border: 0; }
  .js .site-nav:not(.site-nav--plain) .site-nav__cta:hover,
  .js .site-nav:not(.site-nav--plain) .site-nav__cta[aria-current="true"] { background: none; color: var(--blue); }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(3.5rem, 7vw, 6.5rem); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem var(--col-gap);
  align-items: center;
}
.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-hero);
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.hero__turn { display: block; color: var(--blue); }
.hero__sub {
  text-wrap: pretty;
  max-width: 33rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--serif);
  font-size: var(--t-lead);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.hero__body { margin-top: 0.6rem; max-width: 31rem; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.hero__member {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 1rem;
  border-top: var(--rule);
  max-width: 31rem;
  font-size: var(--t-small);
  color: var(--grey);
}
.hero__map { min-width: 0; }
.hero__map .basin { width: 100%; max-width: 34rem; margin-inline: auto; }
.hero__caption {
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--grey);
}
.legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; margin-bottom: 0.5rem; color: var(--navy); }
.legend li { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.legend svg { width: 2.125rem; height: 0.5rem; flex: none; overflow: visible; }
.legend path { fill: none; }
.k-divide { stroke: var(--navy); stroke-width: 1.3; stroke-dasharray: 9 3 1.5 3; }
.k-stream { stroke: var(--blue); stroke-width: 2.2; }
.k-dry { stroke: var(--blue); stroke-width: 1.2; stroke-dasharray: 3 3.2; }
.k-contour { stroke: var(--grey); stroke-width: 0.7; }

@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 13fr) minmax(0, 11fr); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .hero__map .basin { max-width: none; }
  .hero { min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; }
  .hero > .wrap { flex: 1; }
}

/* The basin drawing */
.basin { overflow: visible; }
.basin__contours path { stroke: var(--grey); stroke-width: 0.55; }
.basin__divide { stroke: var(--navy); stroke-width: 1.25; stroke-dasharray: 9 3 1.5 3; }
.basin__dry path { stroke: var(--blue); stroke-width: 1.05; stroke-dasharray: 3 3.2; }
.basin__wet path, .basin__ebb path { stroke: var(--blue); stroke-linecap: round; stroke-linejoin: round; }
.basin .o1 { stroke-width: 1.15; }
.basin .o2 { stroke-width: 1.9; }
.basin .o3 { stroke-width: 2.9; }
.basin .o4 { stroke-width: 3.6; }
.basin__dry .o1, .basin__dry .o2, .basin__dry .o3 { stroke-width: 1.05; }
/* At rest the headwaters have run dry: the solid "ebb" strokes are hidden and the dashed ones show. */
.basin__ebb path { stroke-dasharray: 1 2; stroke-dashoffset: -1.5; }
/* While the opening sequence is pending or playing (set by head.js / site.js) */
.anim .basin:not(.is-done) .basin__wet path { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; }
.anim .basin:not(.is-done) .basin__ebb path { stroke-dashoffset: 1.02; }
.basin__dry { transition: opacity 0.6s linear; }
.anim .basin:not(.is-done) .basin__dry { opacity: 0; }
.anim .basin.is-ebbing .basin__dry { opacity: 1; }

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section > .wrap { position: relative; }
.section > .wrap::before {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: calc(var(--section) * -0.5);
  border-top: var(--rule-ink);
}
.section--tight { padding-top: 0; }
.section--tight > .wrap::before { display: none; }

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem var(--col-gap); }
.split__main > .h2 + .body { margin-top: clamp(1.5rem, 2.5vw, 2.25rem); }
.aside + .sources { margin-top: 1.5rem; }
@media (min-width: 62rem) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .split__main { grid-column: 1 / span 7; }
  .split__main--wide { grid-column: 1 / span 8; }
  .split--fig { align-items: center; }
  .split--top { align-items: start; }
  .split--fig .split__main { grid-column: 1 / span 6; }
  .split__fig { grid-column: 8 / span 5; }
}

/* Line drawings share one treatment */
.linework { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; overflow: visible; }
.linework--dashed { stroke-dasharray: 4 4; }
.linework .fill-navy { fill: var(--navy); stroke: none; }
.linework .fill-water { fill: var(--water); stroke: none; }
.linework text { fill: var(--navy); stroke: none; font-family: var(--sans); font-size: 12px; }
.linework .map-label { font-family: var(--serif); font-style: italic; font-size: 19px; }
.linework .map-label--pin { font-style: normal; font-family: var(--sans); font-weight: 600; font-size: 13px; }
.linework .map-note { font-family: var(--serif); font-style: italic; font-size: 14px; fill: var(--navy); }
.linework .pin { fill: var(--blue); stroke: none; }
.linework .pin-ring { stroke: var(--blue); stroke-width: 1.25; }
.linework .dim path { stroke-width: 0.9; }
.linework .dim text { font-size: 13px; }
.linework .rain { stroke: var(--blue); stroke-width: 1.2; }
.linework .leader { stroke-width: 0.9; }
figcaption { margin-top: 0.9rem; font-size: 0.8125rem; line-height: 1.45; color: var(--grey); }

/* ---------- From proof to finance: the loop ---------- */
.kicker { margin-bottom: 0.9rem; font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.flow { margin: clamp(2.5rem, 5vw, 4rem) auto 0; max-width: 30rem; }
.flow__svg { width: 100%; height: auto; overflow: visible; }
.flow__svg--wide { display: none; }
.flow__water, .flow__money { fill: none; stroke-width: 4; }
.flow__water { stroke: var(--blue); }
.flow__money { stroke: var(--navy); }
.flow__node { fill: var(--navy); }
.flow__label { font-family: var(--serif); font-size: 32px; fill: var(--navy); }
.flow__num { fill: var(--blue); font-feature-settings: "lnum"; }
.flow__party { font-family: var(--sans); font-size: 15px; fill: var(--grey); }
.flow__word { font-family: var(--serif); font-style: italic; font-size: 30px; fill: var(--navy); }
.flow__word--water { fill: var(--blue); }
.flow figcaption { text-align: center; }
#proof-to-finance .steps { margin-top: clamp(3rem, 6vw, 5rem); }
@media (max-width: 48rem) {
  .flow__party { display: none; }
  .flow__label { font-size: 30px; }
}
@media (min-width: 62rem) {
  .flow { margin-inline: 0; max-width: 68rem; }
  .flow__svg--tall { display: none; }
  .flow__svg--wide { display: block; }
  .flow figcaption { text-align: left; }
}

/* ---------- Introducing the certificate: a deck in four parts ----------
   On wide screens the four parts sit side by side and scroll horizontally, one at a time.
   On small screens they stack and read top to bottom. Nothing moves on its own. */
.h2--wide { max-width: 26ch; }
.deck-lead {
  margin-top: 1.1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-lead);
  line-height: 1.25;
  color: var(--blue);
  text-wrap: balance;
}
.deck { margin-top: clamp(2rem, 4vw, 3.25rem); }
.deck__bar { display: none; }
.slide {
  padding-block: clamp(2rem, 6vw, 3rem);
  border-top: var(--rule-ink);
}
.slide:focus { outline: none; }
.slide__kicker { margin-bottom: 0.9rem; font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.slide__n { margin-right: 0.9rem; font-weight: 400; color: var(--grey); font-feature-settings: "tnum"; }
.slide__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.014em;
  text-wrap: balance;
  max-width: 21ch;
}
.slide__title span { display: block; color: var(--blue); }
.slide__body { margin-top: 1.25rem; max-width: 38rem; font-size: 1.0625rem; line-height: 1.5; }
.slide__body p + p { margin-top: 0.85rem; }
.slide__band { margin-top: 2.25rem; }
.slide .tiles, .slide .buyables, .slide .objectives, .slide .steps { margin-top: 0; }
.slide .tiles li { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem); }
.band--what { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem var(--col-gap); }
.band--what .cube svg { max-width: 15rem; }
.band--what .dim text { font-size: 18px; }
.slide__note { margin-top: 1.5rem; padding-top: 1rem; border-top: var(--rule); }

/* Why it exists: what one shared proof of results makes possible.
   The solid cube answers the dashed one above it; the three outcomes follow on a blue rule. */
.outcomes { margin-top: 2.5rem; }
.outcomes__lead {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--blue);
  text-wrap: balance;
}
.outcomes__lead svg { flex: none; width: 2.75rem; height: auto; }
.outcomes__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--col-gap); margin-top: 1.25rem; }
.outcomes__list li { padding-block: 1rem 1.4rem; border-top: 2px solid var(--blue); }
.outcomes__list h4 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.2; text-wrap: balance; }
.outcomes__list p { margin-top: 0.45rem; max-width: 30rem; font-size: 1rem; line-height: 1.45; text-wrap: pretty; }
@media (min-width: 48rem) {
  .outcomes__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .outcomes__list li { padding-bottom: 0; }
}
.slide__gov { display: block; font-family: var(--serif); font-size: 1.125rem; line-height: 1.35; }
.slide__src {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--grey);
}
.slide__src a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.slide__src a:hover { color: var(--blue); }
.deck + .finance { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

@media (min-width: 72rem) {
  .deck__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    border-bottom: var(--rule-ink);
  }
  .deck__tabs ol { display: flex; gap: clamp(1.25rem, 2.6vw, 2.75rem); }
  .deck__tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 3.25rem;
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: inset 0 -3px 0 transparent;
    transition: color 0.15s var(--ease), box-shadow 0.15s var(--ease);
  }
  .deck__tabs a:hover { color: var(--blue); }
  .deck__tabs a[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--blue); }
  .deck__step { display: none; }
  .js .deck__step { display: flex; gap: 0.5rem; }
  .deck__btn {
    min-height: 2.75rem;
    padding: 0 1.1rem;
    border: 1px solid var(--navy);
    border-radius: 0;
    background: transparent;
    color: var(--navy);
    font: 500 0.9375rem/1 var(--sans);
    cursor: pointer;
    transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
  }
  .deck__btn:hover { background: var(--navy); color: var(--cream); }
  .deck__btn[aria-disabled="true"],
  .deck__btn[aria-disabled="true"]:hover { border-color: var(--grey); background: transparent; color: var(--grey); cursor: default; }

  .deck__track {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 91%;
    gap: var(--col-gap);
    margin-top: 1.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .deck__track::-webkit-scrollbar { display: none; }
  .slide {
    scroll-snap-align: start;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 2.25rem;
    padding: clamp(1.5rem, 2.2vw, 2.25rem) clamp(1.75rem, 2.6vw, 2.75rem);
    border: 1px solid var(--navy);
  }
  .slide__head {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: start;
  }
  .slide__body { margin-top: 2.05rem; }
  .slide__band { margin-top: 0; align-self: end; }
  .band--what { grid-template-columns: 19rem minmax(0, 1fr); align-items: end; column-gap: clamp(2rem, 4vw, 4rem); }
  .band--what .cube svg { max-width: 19rem; }
  .band--what .cube figcaption { text-align: left; }
  .slide .objectives li { padding-top: 1.25rem; }
  .slide .objectives svg { margin-bottom: 1rem; }
  .slide .objectives h4 { font-size: 1.125rem; margin-bottom: 0.4rem; }
  .slide .objectives p { font-size: 0.9375rem; line-height: 1.4; }
  .slide .steps li { padding-top: 3.5rem; }
  .slide .steps li::before { top: 1rem; font-size: 2.1rem; }
  .slide .steps h4 { font-size: 1.25rem; }
  .slide .steps p { font-size: 1rem; line-height: 1.45; margin-top: 0.45rem; }
  .slide .buyables li { padding-top: 1rem; }
  .slide .buyables svg { max-width: 8.75rem; }
  .slide .buyables span { margin-top: 0.5rem; font-size: 1.125rem; }
  /* the outcomes sit on the same four columns as the drawings above them */
  .outcomes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--col-gap); margin-top: 1.75rem; }
  .outcomes__lead { flex-direction: column; align-items: flex-start; gap: 0.7rem; padding-top: 1rem; border-top: 2px solid var(--blue); font-size: 1.125rem; }
  .outcomes__lead svg { width: 2.5rem; }
  .outcomes__list { grid-column: 2 / -1; margin-top: 0; }
  .outcomes__list h4 { font-size: 1.1875rem; }
  .outcomes__list p { font-size: 0.9375rem; line-height: 1.4; }
  .slide__note { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; margin-top: 1.25rem; padding-top: 0.9rem; }
  .slide__src { margin-top: 0.15rem; }
  .band--what .dim text { font-size: 15px; }
}
@media (min-width: 72rem) and (prefers-reduced-motion: no-preference) {
  .deck__track { scroll-behavior: smooth; }
}

/* ---------- Why now: the facts ----------
   Eight square tiles. One column on phones, two from 40rem, three from 62rem, where the
   last tile (the one that leads into the map) takes the two spare cells. A tile grows
   past square only if its text needs the room. */
.facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  justify-items: stretch;
  gap: var(--col-gap);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.fact {
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: var(--rule-ink);
  text-wrap: pretty;
}
.fact__big {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 2rem + 1.5vw, 4.5rem);
  font-size: clamp(2.5rem, 17.5cqi, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--blue);
  text-wrap: balance;
}
.fact__text { margin-top: 1rem; max-width: 30rem; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); line-height: 1.45; }
.fact__src { margin-top: auto; padding-top: 1.25rem; font-size: 0.8125rem; line-height: 1.45; color: var(--grey); }
.fact--ink { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.fact--ink .fact__big, .fact--ink .fact__src { color: var(--cream); }
.fact--ink .fact__src a:hover { color: var(--cream); text-decoration-thickness: 2px; }
.fact--ink :focus-visible { outline-color: var(--cream); }
@media (min-width: 40rem) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact { aspect-ratio: 1 / 1; }
}
@media (min-width: 62rem) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fact:last-child { grid-column: span 2; aspect-ratio: auto; }
  .fact:last-child .fact__text { max-width: 34rem; }
}

/* ---------- Why now: the priority basins map ----------
   The map is a component from the basin data chat: assets/css/basin-map.css, assets/js/basin-map.js
   and the section in index.html whose id is basin-map. Its own stylesheet loads first; the rules
   here fit it to the page through its variables and a few type overrides. */
.blm {
  --blm-bg: var(--cream);
  --blm-ink: var(--navy);
  --blm-accent: var(--blue);
  --blm-muted: var(--grey);
  --blm-rule: var(--grey);
  --blm-serif: var(--serif);
  --blm-sans: var(--sans);
  max-width: none;
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0 0;
  border-top: var(--rule);
}
.blm-eyebrow { margin: 0 0 0.9rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--navy); }
.blm-title { margin: 0 0 1.25rem; max-width: 24ch; font-weight: 400; font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.5rem); line-height: 1.1; letter-spacing: -0.012em; text-wrap: balance; }
.blm-lead { margin: 0 0 2rem; max-width: 38rem; font-size: var(--t-body); line-height: 1.55; text-wrap: pretty; }
.blm a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.blm a:hover { color: var(--blue); }
.blm-link-btn { color: var(--navy); }
.blm-link-btn:hover { color: var(--blue); }
.blm-p-name, .blm-hint { font-weight: 400; }
.blm :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.blm-chip input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 3px; }
.blm-stage { border-color: var(--navy); }
.blm-p-region, .blm-p-facts dt, .blm-table thead th { letter-spacing: 0; text-transform: none; }
.blm-notes { list-style: disc; }
.blm-panel:focus, .blm-panel:focus-visible { outline: none; }

.sources {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  max-width: 44rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--grey);
}

/* ---------- The wait ---------- */
.waits {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 0.9rem + 3.1vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.waits li { padding-block: 0.42em; border-top: var(--rule); }
.waits li:last-child { border-bottom: var(--rule); }
.waits__verb { font-style: italic; color: var(--grey); }
@media (min-width: 48rem) {
  .waits { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); column-gap: 0.9em; }
  .waits li { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; }
}
.waits__close {
  margin-top: clamp(2rem, 4vw, 3.25rem);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-lead);
  line-height: 1.25;
  color: var(--blue);
  text-wrap: balance;
}

/* ---------- What money can buy ---------- */
.buyables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem var(--col-gap);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.buyables li { border-top: var(--rule-ink); padding-top: 1.5rem; }
.buyables svg { width: 100%; max-width: 11rem; height: auto; }
.buyables span { display: block; margin-top: 1rem; font-family: var(--serif); font-size: var(--t-h3); line-height: 1.2; }
.buyables__missing { border-top-style: dashed !important; }
.buyables__missing span { font-style: italic; color: var(--blue); }
.buyables__missing svg { stroke: var(--blue); }
@media (min-width: 48rem) { .buyables { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- The certificate ---------- */
.cube svg { width: 100%; max-width: 24rem; margin-inline: auto; }
.cube figcaption { text-align: center; }
.tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--col-gap);
  margin-top: clamp(3rem, 6vw, 5.5rem);
}
.tiles li {
  padding-block: 1.25rem 1.5rem;
  border-top: 2px solid var(--blue);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
@media (min-width: 48rem) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- What water security is made of ---------- */
.h2--pair { max-width: 24ch; }
.h2--pair span { display: block; margin-top: 0.18em; }
.objectives {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--col-gap);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.objectives li {
  display: grid;
  grid-template-columns: clamp(6.5rem, 30%, 10rem) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0.35rem 1.25rem;
  padding-block: 1.5rem 1.6rem;
  border-top: var(--rule-ink);
}
.objectives svg { grid-row: 1 / span 2; width: 100%; height: auto; overflow: hidden; }
.objectives h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.45rem);
  line-height: 1.18;
  letter-spacing: -0.005em;
}
.objectives p { font-size: 1.0625rem; line-height: 1.45; }
.linework .w { stroke: var(--blue); }
.linework .w--dash { stroke-dasharray: 3 3.5; }
@media (min-width: 62rem) {
  .objectives { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .objectives li { display: block; padding: 1.75rem 0.75rem 0 0; }
  /* side by side, the five ground lines join into one landscape */
  .objectives svg { width: calc(100% + 0.75rem); max-width: none; margin-bottom: 1.4rem; overflow: visible; }
  .objectives h4 { margin-bottom: 0.6rem; text-wrap: balance; }
}

/* ---------- For you ---------- */
.readers { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.reader {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem var(--col-gap);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-top: var(--rule);
}
.reader:last-child { border-bottom: var(--rule); }
.reader h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.reader p { max-width: 36rem; text-wrap: pretty; }
@media (min-width: 48rem) {
  .reader { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: baseline; }
  .reader h3 { grid-column: 1 / span 6; }
  .reader p { grid-column: 7 / span 6; }
}

/* ---------- How it works ---------- */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--col-gap);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 1.5rem 0 2rem 3.25rem;
  border-top: var(--rule-ink);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1.15rem;
  font-family: var(--serif);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--blue);
  font-feature-settings: "lnum";
}
.steps h3, .steps h4 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); line-height: 1.2; }
.steps p { margin-top: 0.6rem; font-size: 1.0625rem; max-width: 30rem; text-wrap: pretty; }
@media (min-width: 62rem) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps li { padding: 4.25rem 1rem 0 0; }
  .steps li::before { top: 1.25rem; font-size: 2.5rem; }
  /* a node on the line for each stage */
  .steps li::after {
    content: "";
    position: absolute;
    left: 0;
    top: -5px;
    width: 9px;
    height: 9px;
    background: var(--navy);
  }
}
.finance, .aside {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: var(--rule);
  max-width: 44rem;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.5rem);
  line-height: 1.4;
  text-wrap: pretty;
}
.roles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--col-gap);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font-family: var(--serif);
  font-size: var(--t-h3);
  line-height: 1.2;
}
.roles span { padding-block: 1.1rem 1.25rem; border-top: var(--rule-ink); }
@media (min-width: 48rem) { .roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Contact ----------
   No form. The heading leads; the address sits on a ruled line at reading size, as a mail
   link, with a copy button at the end of the line for readers whose mail does not open
   from a link. */
.contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem var(--col-gap); align-items: center; }
.contact__lead { margin-top: clamp(0.9rem, 1.6vw, 1.25rem); font-family: var(--serif); font-size: var(--t-lead); line-height: 1.3; }
.contact__lead span { display: inline-block; }   /* each sentence stays whole when the line wraps */
.contact__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  max-width: 38rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-block: 1.1rem;
  border-block: var(--rule-ink);
}
.contact__mail {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.contact__mail a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.15s var(--ease);
}
.contact__mail a:hover { color: var(--navy); }
.contact__btn {
  min-width: 9.75rem;      /* wide enough for "Address copied", so the label can change without the button moving */
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 1px solid var(--navy);
  border-radius: 0;
  background: transparent;
  color: var(--navy);
  font: 500 0.9375rem/1 var(--sans);
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.contact__btn:hover, .contact__btn.is-done { background: var(--navy); color: var(--cream); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.yours { width: 100%; max-width: 20rem; height: auto; overflow: visible; }
.yours__streams path { stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; }
.yours__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 34px;
  fill: var(--navy);
  stroke: var(--cream);
  stroke-width: 9px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
@media (min-width: 62rem) {
  .contact { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .contact__main { grid-column: 1 / span 7; }
  .yours { grid-column: 9 / span 4; max-width: none; justify-self: end; }
}
[hidden] { display: none !important; }

/* ---------- Footer ---------- */
.site-footer { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); border-top: var(--rule-ink); }
.site-footer__boundary {
  max-width: 44rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1.4;
  text-wrap: pretty;
}
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.5rem;
  margin-top: clamp(3rem, 7vw, 6rem);
}
.lockup--footer { font-size: 1.6rem; margin-right: auto; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; }
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.site-footer__links a:hover { color: var(--blue); }
.site-footer__legal { font-size: 0.9375rem; color: var(--grey); }

/* ---------- Plain pages (privacy, not found) ---------- */
.page { padding-block: clamp(3rem, 7vw, 6rem) var(--section); }
.page h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-statement);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 16ch;
}
.page__lead { margin-top: 1.75rem; font-family: var(--serif); font-size: var(--t-lead); line-height: 1.3; max-width: 36rem; }
.page__actions { margin-top: 2.5rem; }
.prose { margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 42rem; }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); line-height: 1.2; margin: 2.75rem 0 0.75rem; padding-top: 1.25rem; border-top: var(--rule); }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 1rem; }
.prose ul { list-style: disc; padding-left: 1.25rem; }
.prose li + li { margin-top: 0.4rem; }
.prose__meta { margin-top: 3rem; font-size: var(--t-small); color: var(--grey); }

/* ---------- High contrast mode ---------- */
@media (forced-colors: active) {
  .btn, .contact__btn { border: 1px solid ButtonText; }
}

/* ---------- Motion preferences and print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media print {
  .site-header { position: static; }
  .nav-toggle, .site-nav, .skip, .contact__copy, .hero__actions { display: none !important; }
  .section { padding-block: 2rem; break-inside: avoid; }
}