/* =========================================================
   Foundation for Evolution and Mental Health — site styles
   Plain CSS, no build step. Edit freely.
   ========================================================= */

:root {
  /* Brand palette (green sampled from the logo) */
  --green-950: #071910;
  --green-900: #0b2318;
  --green-800: #123524;   /* brand green */
  --green-700: #1c4a33;
  --green-600: #256343;
  --green-500: #2f7a52;
  --green-200: #b9d3c1;
  --green-100: #dce9df;
  --green-050: #eef4ef;

  --bone: #f6f2ea;        /* warm paper background */
  --bone-2: #ece6d9;
  --bone-3: #ded6c4;
  --white: #ffffff;

  --ink: #131a16;
  --ink-2: #2b3630;
  --muted: #5b665f;

  --amber: #d9a441;       /* call-to-action accent */
  --amber-600: #b8862b;
  --amber-100: #f7ecd2;

  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px -12px rgba(11, 35, 24, .35);
  --shadow-sm: 0 4px 14px -6px rgba(11, 35, 24, .25);
  --container: 1180px;
  --gutter: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 76px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--green-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-800); }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 500; line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
h4 { font-size: 1.15rem; font-family: var(--font-body); font-weight: 700; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.5; color: var(--ink-2); }
.eyebrow {
  display: inline-block; font-size: .86rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green-500); margin-bottom: 1.1rem;
}
/* Short amber rule above the label, the same accent the Darwin quote's attribution carries */
.eyebrow::before { content: ""; display: block; width: 40px; height: 2px; background: var(--amber); margin-bottom: 14px; }
.statement .eyebrow::before { margin-inline: auto; }   /* this section is centred */
.eyebrow--plain::before { display: none; }   /* for labels that aren't section titles: a number, the charity registration */
.on-dark .eyebrow, .on-darker .eyebrow { color: var(--amber); }
.muted { color: var(--muted); }
.no-lig { font-feature-settings: "liga" 0, "calt" 0, "dlig" 0; } /* Manrope turns (c) into © otherwise */
.serif { font-family: var(--font-head); }
em.accent { font-style: italic; color: var(--amber); }
.hl { color: var(--amber); } /* highlighted closing phrase inside a heading, as on the old site */

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container--narrow { width: min(780px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.container--wide { width: min(1400px, 100% - 2 * var(--gutter)); margin-inline: auto; }

section { padding-block: clamp(56px, 9vw, 120px); }
section.tight { padding-block: clamp(36px, 5vw, 64px); }
.on-dark { background: var(--green-800); color: var(--bone); }
.on-dark a { color: var(--green-200); }
.on-dark a:hover { color: var(--white); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); }
.on-dark .lead { color: var(--green-100); }
.on-darker { background: var(--green-900); color: var(--bone); }
.on-darker h1, .on-darker h2, .on-darker h3 { color: var(--white); }
.on-darker .lead { color: var(--green-100); }
.on-bone-2 { background: var(--bone-2); }
.on-white { background: var(--white); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--amber); color: var(--ink); padding: 8px 12px; border-radius: 6px; z-index: 1000; }
.skip-link:focus { left: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  padding: .85em 1.5em; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; line-height: 1;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--green-800); color: var(--white); }
.btn-primary:hover { background: var(--green-700); color: var(--white); }
.btn-donate { background: var(--amber); color: var(--green-900); }
.btn-donate:hover { background: #e3b356; color: var(--green-900); }
.on-dark .btn-donate, .on-darker .btn-donate, .page-hero .btn-donate, .hero .btn-donate, .on-dark .btn-donate:hover, .on-darker .btn-donate:hover { color: var(--green-900); } /* dark-section link colour must not override the amber button's dark text */
.btn-outline { border-color: currentColor; color: var(--green-800); background: transparent; }
.btn-outline:hover { background: var(--green-800); color: var(--white); border-color: var(--green-800); }
.on-dark .btn-outline, .on-darker .btn-outline { color: var(--white); }
.on-dark .btn-outline:hover, .on-darker .btn-outline:hover { background: var(--white); color: var(--green-900); border-color: var(--white); }
.btn-lg { font-size: 1.05rem; padding: 1em 1.8em; }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246, 242, 234, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(19, 26, 22, .08);
  transition: background .3s, box-shadow .3s;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px -14px rgba(11, 35, 24, .35); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 60px; height: 60px; flex: none; border-radius: 50%; transition: transform .5s var(--ease); transform-origin: center; }
.brand:hover .brand-mark, .brand:focus-visible .brand-mark { transform: scale(1.35); } /* enlarge so the ring of text can be read */
.brand-text { font-family: var(--font-head); font-size: 1.05rem; line-height: 1.15; letter-spacing: -.01em; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .93rem; padding: 10px 12px; border-radius: 999px; position: relative; white-space: nowrap; }
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--green-500);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .btn { margin-left: 10px; padding: .7em 1.3em; }
.nav-toggle { display: none; background: none; border: 2px solid var(--green-800); border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 700; color: var(--green-800); cursor: pointer; }

/* Transparent header over the dark homepage hero */
.site-header.is-transparent:not(.is-scrolled) { background: transparent; border-bottom-color: rgba(255, 255, 255, .12); backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header.is-transparent:not(.is-scrolled) .brand, .site-header.is-transparent:not(.is-scrolled) .nav a:not(.btn) { color: var(--bone); }
.site-header.is-transparent:not(.is-scrolled) .nav a:not(.btn)::after { background: var(--amber); }
.site-header.is-transparent:not(.is-scrolled) .nav-toggle { color: var(--bone); border-color: var(--bone); }

@media (max-width: 1150px) {   /* below this the full nav no longer fits beside the brand without wrapping */
  .nav-toggle { display: inline-block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch;
    background: var(--bone); border-bottom: 1px solid rgba(19, 26, 22, .1); padding: 12px var(--gutter) 20px;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 8px; font-size: 1.05rem; color: var(--ink-2) !important; }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin: 10px 0 0; justify-content: center; }
  .brand-text { font-size: .95rem; max-width: 190px; }
}
/* Very narrow screens (fold phones, narrow panes): let the brand shrink, then drop to mark only */
@media (max-width: 480px) {
  .nav-wrap { gap: 12px; }
  .brand { min-width: 0; flex: 1; gap: 10px; }
  .brand-mark { width: 44px; height: 44px; }
  .brand-text { font-size: .85rem; max-width: none; }
  .nav-toggle { padding: 7px 12px; }
}
@media (max-width: 340px) { .brand-text { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 80% 10%, var(--green-700) 0%, var(--green-800) 45%, var(--green-950) 100%);
  color: var(--bone);
  margin-top: calc(-1 * var(--header-h) - 1px); padding-top: calc(var(--header-h) + clamp(56px, 9vw, 120px));
  min-height: 92vh; display: flex; align-items: center;
}
.hero { --rail-w: 130px; --rail-x: 6px; }   /* the icon rail hangs right on the edge of the screen */
.hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 80px); align-items: center;
  /* shift the text right of the rail only when the rail would otherwise overlap it */
  padding-left: clamp(0px, calc(var(--rail-w) + var(--rail-x) + 72px - (100vw - var(--container)) / 2), calc(var(--rail-w) + var(--rail-x) + 72px - var(--gutter))); } /* keeps a 72px channel between the icon rail and the text */
.hero h1 { color: var(--white); margin-bottom: .4em; }
.hero .lead { color: var(--green-100); max-width: 40ch; }
/* Large faint symbol used as background texture, as in the inaugural report */
.watermark { position: absolute; z-index: 0; right: -6vw; top: 50%; transform: translateY(-50%); width: min(44vw, 620px); opacity: .07; pointer-events: none; user-select: none; }
.watermark--left { right: auto; left: -8vw; }
.hero .watermark { opacity: .03; }   /* fainter still behind the Darwin quote, which sits over it */
.has-watermark { position: relative; overflow: hidden; }
.has-watermark > .container, .has-watermark > .container--narrow, .has-watermark > .container--wide { position: relative; z-index: 1; }
.hero-rail { position: absolute; z-index: 1; left: var(--rail-x); top: calc(var(--header-h) + 20px); bottom: 20px; width: var(--rail-w); pointer-events: none; }
.hero-quote { position: relative; max-width: min(100%, 460px); justify-self: end; }
.hero-quote::before { content: "\201C"; display: block; font-family: var(--font-head); font-size: clamp(5rem, 7vw, 7.5rem); line-height: .55; height: .5em; color: var(--amber); }
.hero-quote blockquote { margin: 0; font-family: var(--font-head); font-style: italic; font-weight: 400; font-size: clamp(1.45rem, 2.3vw, 2rem); line-height: 1.3; color: var(--white); text-wrap: pretty; }
.hero-quote cite { display: block; margin-top: 22px; font-style: normal; font-size: .92rem; color: var(--green-200); }
.hero-quote cite::before { content: ""; display: block; width: 44px; height: 2px; background: var(--amber); margin-bottom: 12px; }
.hero-quote cite strong { display: block; font-family: var(--font-body); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; color: var(--amber); margin-bottom: 2px; }
.hero-quote cite em { font-family: var(--font-head); font-style: italic; color: var(--bone); }
.scroll-cue { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 2; color: var(--green-200); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scroll-cue span { width: 1px; height: 46px; background: linear-gradient(var(--amber), transparent); animation: cue 2s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; padding-left: calc(var(--rail-w) + var(--rail-x) + 10px - var(--gutter)); }
  .hero { min-height: auto; padding-bottom: 90px; --rail-w: 48px; --rail-x: 2px; }
  .hero-quote { max-width: none; justify-self: stretch; }
  .scroll-cue { display: none; }
  .hero .btn-lg { font-size: .95rem; padding: .9em 1.35em; }
  .watermark { width: 80vw; right: -30vw; opacity: .05; } .watermark--left { left: -30vw; }
}

.hero .btn-outline { color: var(--white); border-color: rgba(255,255,255,.7); }
.hero .btn-outline:hover { background: var(--white); color: var(--green-900); border-color: var(--white); }

/* Inner-page hero */
.page-hero { position: relative; overflow: hidden; padding-block: clamp(56px, 8vw, 110px) clamp(48px, 6vw, 80px); background: radial-gradient(120% 90% at 80% 10%, var(--green-700) 0%, var(--green-800) 45%, var(--green-950) 100%); color: var(--bone); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { max-width: 16ch; color: var(--white); }
.page-hero .lead { max-width: 60ch; color: var(--green-100); }
.page-hero .eyebrow { color: var(--amber); }
.page-hero a { color: var(--green-200); }
.page-hero--image { position: relative; isolation: isolate; color: var(--bone); min-height: 48vh; display: flex; align-items: flex-end; }
.page-hero--image img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-hero--image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 25, 16, .25), rgba(7, 25, 16, .85)); }
.page-hero--image h1 { color: var(--white); }
.page-hero--image .lead { color: var(--green-100); }
.page-hero--image .eyebrow { color: var(--amber); }

/* ---------- Story / statement sections ---------- */
.statement { text-align: center; }
.statement h2, .statement h3 { max-width: 22ch; margin-inline: auto; }
.statement .lead { max-width: 60ch; margin-inline: auto; }
.statement h2.q { font-weight: 400; max-width: 30ch; }

/* A small ink drawing of a face beside each corner of the homepage question. The page carries four empty
   SVGs; main.js draws the faces into them stroke by stroke, as if with a pen, has each act its expression
   out, and every few seconds lifts one expression off a face and draws another - see "The question's
   corner faces" there. */
/* The question keeps the measure and line breaks it had before, so the faces are anchored to the text
   rather than to the container: the heading is capped at 30ch, so its edge sits calc(50% - 15ch) either
   side of centre. That only holds if this wrapper measures ch in the same font the heading does, which is
   why the font is restated here - it has nothing visible to draw (the wrapper holds only the heading and
   four absolutely positioned SVGs) and the zero line-height stops the whitespace between them opening a
   line box. Keep it in step with the h2 rule near the top of this file. Below about 1000px the heading
   fills the container and there is no room beside it, so the faces move up and down into the section's
   own padding instead. Each is turned a few degrees, as if set down by hand rather than placed. */
.q-wrap { position: relative; font: 400 clamp(1.9rem, 3.8vw, 3rem)/0 var(--font-head); }
.face { --sz: clamp(44px, 5.3vw, 76px); --out: clamp(100px, calc(50vw - 509px), 232px); --up: 95%; --upx: 1;
  position: absolute; width: var(--sz); height: var(--sz);
  overflow: visible; color: var(--green-800); }
/* nothing is drawn before the question has started to fade in */
.q:not(.is-visible) ~ .face { visibility: hidden; }
.face--tl, .face--bl { left: max(0px, calc(50% - 15ch)); }
.face--tr, .face--br { right: max(0px, calc(50% - 15ch)); }
/* Each corner is carried out and up (or down) from the corner of the text, far enough to sit in the margin
   as artwork beside the question rather than as a frame around it. --upx lifts each corner a different
   amount, so the pairs are not level with each other and the four do not read as a rank. Only the height
   varies: a face sitting visibly further from the edge of the page on one side than the other reads as a
   mistake rather than as something placed by hand.

   How far out it can go depends on how much page there is, not on how big the face is, so --out is a
   length off the viewport rather than a percentage of the drawing. Above 1024px the question settles at
   its full 30ch, which leaves (50vw - 459px) of margin either side; taking off the width of a face and a
   little air gives the 509px below, so the faces sit a constant ~40px from the edge of the page and the
   gap to the text simply opens up as the screen widens. The cap stops them stranding themselves out in
   the far margin on very wide screens. */
.face--tl { top: 0; transform: translate(calc(-1 * var(--out)), calc(-1 * var(--up))) rotate(-8deg); }
.face--tr { top: 0; --upx: 1.2; transform: translate(var(--out), calc(-1 * var(--up) * var(--upx))) rotate(7deg); }
.face--bl { bottom: 0; --upx: 1.12; transform: translate(calc(-1 * var(--out)), calc(var(--up) * var(--upx))) rotate(6deg); }
.face--br { bottom: 0; --upx: .96; transform: translate(var(--out), calc(var(--up) * var(--upx))) rotate(-7deg); }

/* The ink. main.js draws every line as a filled outline, so the swell and taper of the pen are in the shape
   itself and all CSS decides is the colour. Fresh ink goes down darker and dries back to the brand green,
   and it is a little translucent, so where two strokes cross the ink doubles up as it does on paper. The
   second pass round the underside of the head is lighter. */
.face .ink { fill: currentColor; fill-opacity: .78; transition: fill 1.8s ease-out, fill-opacity 1.8s ease-out; }
.face .ink.is-wet { fill: var(--green-900); fill-opacity: .94; transition: none; }
.face .ink--light { fill-opacity: .36; }
.face .ink--light.is-wet { fill-opacity: .55; }
/* An expression that has been replaced is lifted to a faint smudge (the blur is an SVG filter main.js puts
   on it) while the new one is drawn over it, and then it fades away. */
.face-expr { transition: opacity .5s ease-out; }
.face-expr.is-ghost { opacity: .16; }
.face-expr.is-gone { opacity: 0; transition-duration: 1.6s; }
/* A blink: the eye dots close to a line for a moment. */
.face .eye { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .07s ease-in; }
.face-expr.is-blinking .eye { transform: scaleY(.18); transition-duration: .05s; }
.face-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* As the room beside the question runs out, the faces swing from beside it to above and below it. Between
   about 1000 and 1200 there is neither enough width to stand one beside the text nor enough of the
   section's padding to lift a full-sized one over it, so they come down a size through that band and clear
   the first and last lines on height alone. */
@media (max-width: 1200px) { .face { --sz: clamp(38px, 4.1vw, 50px); --out: 30%; --up: 128%; } }
/* Once they are stacked over and under the question there is only the section's padding to sit in, and on
   a phone that is 56px. The lift has to stay big enough that the least-raised corner still clears the last
   line, so what gives instead is the spread between the corners: they come nearly level with each other
   rather than one of them climbing into the band above. */
@media (max-width: 1000px) {
  .face { --out: 10%; --up: 124%; }
  .face--tr { --upx: 1.08; }
  .face--bl { --upx: 1.05; }
  .face--br { --upx: 1; }
}
/* Around 600px the section's padding has bottomed out at 56px while the face is still growing, so the cap
   comes down to 36px: that is what keeps the raised corner from climbing into the dark band above. */
@media (max-width: 720px) { .face { --sz: clamp(30px, 8.5vw, 36px); --out: 2%; --up: 122%; } }

.split { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.split.reverse > :first-child { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.reverse > :first-child { order: 0; } }
.frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 1.2s var(--ease); }
.frame:hover img { transform: scale(1.04); }
.caption { font-size: .85rem; color: var(--muted); margin-top: 10px; }

/* Big cinematic photo banner with text */
.banner { position: relative; isolation: isolate; color: var(--white); min-height: 70vh; display: grid; place-items: center; text-align: center; padding-block: clamp(56px, 9vw, 120px); }
.banner img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 25, 16, .55), rgba(7, 25, 16, .72)); }
.banner h2 { max-width: 24ch; color: var(--white); font-weight: 400; margin-inline: auto; }
.banner .lead { color: var(--green-100); max-width: 50ch; margin-inline: auto; }
.banner p.big { font-family: var(--font-head); font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.35; max-width: 28ch; margin: 0 auto; }
.banner p.big + p.big { margin-top: 1.2em; }
.banner p.big strong { font-weight: 600; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: .08em; text-underline-offset: .14em; }
.banner .eyebrow { color: var(--amber); }

/* Claims section, laid out as on the original site: photo on the left, one block of four short statements on the right,
   the key phrases bold with an amber underline that draws itself in. Sits on the paper background between the photo split and the dark section. */
.claims-grid { display: grid; grid-template-columns: minmax(240px, 400px) 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.claims-photo { margin: 0; width: 100%; position: relative; isolation: isolate; }
.claims-photo::before { content: ""; position: absolute; inset: 20px -20px -20px 20px; background: var(--green-800); border-radius: var(--radius); z-index: -1; }
.claims-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); box-shadow: 0 24px 50px -24px rgba(11, 35, 24, .6); }
.claims { margin: 0; font-family: var(--font-head); font-weight: 400; font-size: clamp(1.5rem, 2.5vw, 2.1rem); line-height: 1.32; color: var(--green-900); max-width: 26ch; }
.claims strong, .mission-point strong { font-weight: 600; color: var(--green-950); text-decoration: none; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M1 7 C 20 3, 40 8, 60 5 S 90 4, 99 6' fill='none' stroke='%23d9a441' stroke-width='3.2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% .34em; padding-bottom: .06em;
  transition: background-size .8s var(--ease); }
.claims--close { margin-top: clamp(18px, 2.2vw, 30px); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 500; line-height: 1.2; color: var(--green-950); transition-delay: 1.7s; } /* the conclusion: set down from the block, larger, and arriving after the last underline */
.claims.is-visible strong { background-size: 100% .34em; }
.claims.is-visible strong:nth-of-type(1) { transition-delay: .5s; }
.claims.is-visible strong:nth-of-type(2) { transition-delay: .9s; }
.claims.is-visible strong:nth-of-type(3) { transition-delay: 1.3s; }
@media (max-width: 860px) { .claims-grid { grid-template-columns: 1fr; } .claims-photo { max-width: 320px; } .claims { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .claims strong, .mission-point strong { background-size: 100% .34em; } }

/* Links on light surfaces that sit inside dark sections (white cards, quote cards):
   inherit dark-section link colours would be pale green, and white on hover. */
.on-dark .donate-box a, .on-darker .donate-box a, .on-dark .quote-card a, .on-dark .card a, .on-darker .card a { color: var(--green-600); }
.on-dark .donate-box a:hover, .on-darker .donate-box a:hover, .on-dark .quote-card a:hover, .on-dark .card a:hover, .on-darker .card a:hover { color: var(--green-500); text-decoration-thickness: 2px; }
.page-hero a:hover, .page-hero--image a:hover { color: var(--white); }
.on-dark .stat-row a, .on-dark .finding a { color: var(--amber); }
.on-dark .stat-row a:hover, .on-dark .finding a:hover { color: var(--white); }
.cta-strip a:not(.btn) { color: var(--green-900); text-decoration-color: rgba(11, 35, 24, .5); }
.cta-strip a:not(.btn):hover { color: var(--green-700); }

/* Mismatch, stacked like the original site: the classroom photo fills the top of the section and the forest
   sits underneath, so the section is about one and a half screens tall - you meet the classroom, then scroll
   down into the forest. They meet along a soft hand-drawn curve which drifts slowly up and down for ever.
   All CSS, no script: .mismatch-forest is masked to the curve and slides on --swing, and the photo inside it
   slides the opposite way by the same amount so the forest itself stays pinned to the section while its
   top edge travels. --cut is where the curve rests, measured down from the top of the section. */
.mismatch { position: relative; width: 100%; padding: 0; overflow: hidden; background: var(--green-900);
  --h: clamp(720px, 150vh, 1400px); --cut: calc(var(--h) * .45); --swing: clamp(52px, 10vh, 124px); --curve-h: clamp(112px, 13vw, 250px);
  --curve: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='200' viewBox='0 0 1200 200' preserveAspectRatio='none'><path d='M0 24C250 -6 430 76 700 98C930 116 1050 178 1200 168L1200 460L0 460Z' fill='%23fff'/></svg>");
  height: var(--h); }
.mismatch img { position: absolute; left: 0; width: 100%; object-fit: cover; }
.mismatch-room { top: 0; height: 100%; }
/* The forest: everything from the curve down. Two mask layers - the curve itself along the top edge, then a
   solid block filling the rest - so only the curve's own band is feathered. */
.mismatch-forest { position: absolute; left: 0; right: 0; top: var(--cut); height: calc(var(--h) - var(--cut) + 2 * var(--swing));
  -webkit-mask-image: var(--curve), linear-gradient(#000, #000);
          mask-image: var(--curve), linear-gradient(#000, #000);
  -webkit-mask-size: 100% var(--curve-h), 100% calc(100% - var(--curve-h) + 1px);
          mask-size: 100% var(--curve-h), 100% calc(100% - var(--curve-h) + 1px);
  -webkit-mask-position: center top, center bottom; mask-position: center top, center bottom;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  will-change: transform; animation: mismatch-drift 11s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.mismatch-forest img { top: calc(-1 * var(--cut)); height: var(--h);
  will-change: transform; animation: mismatch-hold 11s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes mismatch-drift { from { transform: translate3d(0, calc(-1 * var(--swing)), 0); } to { transform: translate3d(0, var(--swing), 0); } }
@keyframes mismatch-hold  { from { transform: translate3d(0, var(--swing), 0); } to { transform: translate3d(0, calc(-1 * var(--swing)), 0); } }
@media (prefers-reduced-motion: reduce) { .mismatch-forest, .mismatch-forest img { animation: none; } }
/* The two statements: large, set straight on the photographs, with a drawn swoosh under the pivotal word */
.mismatch-label { position: absolute; z-index: 2; margin: 0; max-width: calc(100% - 2 * var(--gutter));
  color: var(--white); font-family: var(--font-head); font-weight: 600; letter-spacing: -.015em;
  font-size: clamp(1.6rem, 3.9vw, 3.9rem); line-height: 1.1;
  text-shadow: 0 2px 30px rgba(7, 25, 16, .5), 0 1px 4px rgba(7, 25, 16, .45); pointer-events: none; }
.mismatch-label--top { top: calc(var(--header-h) + clamp(18px, 4vh, 56px)); right: var(--gutter); text-align: right; } /* clears the sticky header */
.mismatch-label--bottom { bottom: clamp(64px, 21vh, 250px); left: var(--gutter); }
.mismatch-label .mark { position: relative; font-weight: 700; white-space: nowrap; }
.mismatch-label .swoosh { position: absolute; left: -.08em; right: -.08em; top: .97em; height: .3em; overflow: visible;
  fill: none; stroke: var(--amber); stroke-width: 2.5; stroke-linecap: round; }
@media (max-width: 700px) { .mismatch { --h: clamp(700px, 145vh, 1300px); --cut: calc(var(--h) * .5); --swing: 40px; --curve-h: 96px; } }

/* Problem section: heading, then the animation in a centred panel, then the Insel quote, all stacked */
.problem { display: grid; grid-template-columns: 1fr; justify-items: center; gap: clamp(28px, 4vw, 48px); }
.problem h2 { text-align: center; max-width: 24ch; margin: 0; text-wrap: balance; }
.problem .flow { width: min(100%, 900px); }
.problem .quote-card { width: min(100%, 820px); }
.stat-list { margin: clamp(24px, 3vw, 36px) 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.stat-row { display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.stat-row .num { font-family: var(--font-head); font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; color: var(--amber); letter-spacing: -.02em; white-space: nowrap; }
.stat-row .num small { font-size: .5em; color: var(--green-200); margin-left: .1em; }
.stat-row p { margin: 0; color: var(--green-100); font-size: .95rem; }
/* Pull-quote treatment for the Insel card: paper grain, big amber quote mark, faint symbol, ringed portrait */
/* Paper quote cards: a light, grained card that sits on the dark green sections, with an amber-ringed
   portrait and an oversized opening quote. The homepage's keeps the default side-by-side layout;
   --feature is the mission page's sidebar, which is narrow, so it stacks a much larger portrait on top.
   The base .quote-card rules live further down the file, hence the doubled class on the size overrides. */
.quote-card.quote-card--paper { position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #fbf9f4 0%, var(--bone) 55%, #efe9dc 100%);
  border: 1px solid rgba(19, 26, 22, .08); border-radius: var(--radius); }
.quote-card--paper::before, .person--lead::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .09; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.2 0 0 0 0 0.15 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.quote-card--paper::after { content: ""; position: absolute; right: -38px; bottom: -48px; width: 200px; height: 200px; z-index: -1; opacity: .07; pointer-events: none; background: url("/assets/img/logo-symbol-forest.png") center / contain no-repeat; }
.quote-card--paper img { border: 3px solid var(--amber); box-shadow: 0 8px 18px -8px rgba(11, 35, 24, .45); align-self: start; margin-top: 6px; }
.quote-card--paper > div { position: relative; }
.quote-card--paper > div::before { content: "“"; position: absolute; left: -10px; top: -34px; font-family: var(--font-head); font-size: 6.5rem; line-height: 1; color: var(--amber); opacity: .55; pointer-events: none; }
.quote-card--paper blockquote { position: relative; font-size: 1.05rem; padding-top: 8px; }
.quote-card--paper cite { font-size: .8rem; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(19, 26, 22, .12); display: block; }
.quote-card--paper cite strong { display: block; font-family: var(--font-body); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; color: var(--green-600); margin-bottom: 4px; }
.quote-card.quote-card--feature { grid-template-columns: 1fr; gap: 22px; padding: 36px 32px 30px 34px; align-items: start; }
.quote-card.quote-card--feature img { width: 148px; height: 148px; margin-top: 0; }
.quote-card--feature > div::before { left: auto; right: 8px; top: -106px; font-size: 8rem; opacity: .4; }   /* up beside the portrait, which now sits above the text */
.quote-card--feature blockquote { font-size: 1.1rem; padding-top: 0; }
@media (max-width: 480px) { .stat-row { grid-template-columns: 1fr; gap: 6px; } }

/* Money-into-research animation */
.flow { position: relative; overflow: hidden; min-height: 640px; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, .09);
  background:
    radial-gradient(60% 22% at 50% 0%, rgba(217, 164, 65, .16), transparent 70%),
    radial-gradient(80% 40% at 50% 100%, rgba(0, 0, 0, .35), transparent 70%),
    linear-gradient(180deg, var(--green-900), var(--green-950));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -30px rgba(0, 0, 0, .6);
  display: grid; grid-template-rows: auto minmax(110px, 1fr) auto auto 14px auto auto; gap: 10px; padding: 28px clamp(16px, 3vw, 40px) 28px; }
.flow-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.flow-source { grid-row: 1; }
.flow-band { grid-row: 3; }
.flow-note { grid-row: 4; align-self: start; position: relative; z-index: 2; margin: 32px auto 0; text-align: center; padding: 0 12px; max-width: 44ch; font-family: var(--font-head); font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.3; }
.flow-note p { margin: 0; text-wrap: balance; }
.flow-note-impact { font-style: italic; color: rgba(220, 233, 223, .7); }
.flow-note .flow-note-main { color: var(--white); margin-top: 30px; }   /* selector outranks the .flow-note p reset above */
.flow-crowd { grid-row: 6 / span 2; }
.flow-source { position: relative; z-index: 2; text-align: center; }
.flow-dest { position: relative; z-index: 3; text-align: center; }
.flow-num { display: block; font-family: var(--font-head); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.1; color: var(--amber); }
.flow-sub { display: block; font-size: .82rem; color: var(--green-200); margin-top: 4px; }
.flow-slot { display: block; width: 150px; height: 6px; margin: 16px auto 0; border-radius: 3px; background: linear-gradient(90deg, transparent, rgba(217, 164, 65, .9), transparent); box-shadow: 0 0 18px rgba(217, 164, 65, .5); }
.flow-dest .flow-num { color: var(--green-200); }
.flow-band { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 18px); align-self: center; align-items: stretch; width: min(100%, 640px); margin: 0 auto; } /* minmax(0,1fr) keeps the boxes equal whatever the label length */
.flow-node { --heat: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 8px 16px; border-radius: 12px; background: rgba(7, 25, 16, .9); border: 1px solid rgba(217, 164, 65, calc(.28 + var(--heat) * .7)); box-shadow: 0 0 calc(34px * var(--heat)) rgba(217, 164, 65, calc(var(--heat) * .45)), inset 0 0 calc(24px * var(--heat)) rgba(217, 164, 65, calc(var(--heat) * .18)); text-align: center; font-size: .74rem; line-height: 1.25; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-100); }
.flow-node svg { width: 38px; height: 38px; margin: 0 auto; stroke: var(--amber); flex: none; }
/* The station that gets nothing */
.flow-node--empty { border: 1px dashed rgba(220, 233, 223, .4); background: rgba(7, 25, 16, .45); color: rgba(220, 233, 223, .7); box-shadow: none; }
.flow-node--empty svg { stroke: rgba(220, 233, 223, .6); }
.flow-zero { display: block; margin-top: 2px; font-family: var(--font-head); font-size: 1.35rem; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--amber); }
.flow-sub--cost { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); color: var(--green-200); font-size: .86rem; line-height: 1.4; }
.flow-sub--cost strong { font-family: var(--font-head); font-weight: 500; font-size: 1.4rem; line-height: 1; color: var(--amber); margin: 0 .12em; vertical-align: -.06em; white-space: nowrap; }
/* The crowd surrounds the count rather than standing over it: the figures fill the whole block and the
   text lies in the middle of them. space-between spreads however many rows main.js decided on evenly
   down the block, so the field stays even whatever height it ends up with. */
.flow-crowd { position: relative; display: grid; place-items: center; min-height: 300px; }
.flow-people { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  justify-content: space-between; align-items: center;
  /* the top and bottom rows fade out, so the field reads as part of a larger crowd rather than as a block
     of figures that stops on a hard edge */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
/* --fig is the figure width and the row gap is 3px, so the pitch is --fig + 3. buildCrowd in main.js
   reads --fig off this element to work out how many will fit across, which is why the size lives here as
   a variable rather than only on the svg: change it in one place and the crowd refills to match. */
.flow-people { --fig: 9px; }
.flow-people .row { display: flex; justify-content: center; gap: 3px; }
.flow-people .row:nth-child(even) { transform: translateX(calc((var(--fig) + 3px) / 2)); }
.flow-people svg { width: var(--fig); height: auto; fill: #dce9df; opacity: var(--o, .22); }
/* Only some of them breathe - see buildCrowd in main.js. The rest hold the random opacity they were given. */
.flow-people svg.gloom { animation: gloom 8s ease-in-out infinite; }
.flow-people svg.low { animation-name: gloom-low; }
/* The pool of shadow the text reads out of. It is the panel's own darkest green, so it passes for depth in
   the crowd rather than for a panel laid over it. */
.flow-dest { width: min(100%, 430px); padding: 26px 10px; }
/* closest-side puts the gradient's last stop exactly on the edge of this box, so the shadow is fully gone
   by the time it gets there and leaves no rectangle behind. It does not quite clear the figures either -
   a few stay faintly visible through it, which is the point: the count is standing in the crowd. */
.flow-dest::before { content: ""; position: absolute; z-index: -1; inset: -30px -9%;
  background: radial-gradient(closest-side ellipse at 50% 50%, rgba(7, 25, 16, .93) 0%,
    rgba(7, 25, 16, .9) 42%, rgba(7, 25, 16, .6) 72%, rgba(7, 25, 16, 0) 100%); }
@keyframes gloom { 0%, 100% { opacity: .18; } 50% { opacity: .42; } }
@keyframes gloom-low { 0%, 100% { opacity: .3; } 50% { opacity: .07; } }
/* The field is a few hundred figures now, so it holds still for anyone who has asked it to. */
@media (prefers-reduced-motion: reduce) { .flow-people svg.gloom { animation: none; } }
@media (max-width: 700px) { .flow { min-height: 540px; } .flow-people { --fig: 7px; } .flow-crowd { min-height: 250px; } .flow-dest { padding: 22px 6px; } .flow-node { font-size: .62rem; letter-spacing: .05em; gap: 8px; padding: 14px 6px 12px; } .flow-node svg { width: 30px; height: 30px; } }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(20px, 3vw, 40px); }
.stat { padding: clamp(22px, 3vw, 36px); border-radius: var(--radius); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.stat .num { font-family: var(--font-head); font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; color: var(--amber); font-weight: 500; letter-spacing: -.02em; }
.stat .num small { font-size: .5em; color: var(--green-200); margin-left: .1em; }
.stat p { margin: 12px 0 0; color: var(--green-100); font-size: .98rem; }
.stat--wide { grid-column: 1 / -1; padding: 0; background: none; border: 0; }

/* Quote block */
.quote-card { display: grid; grid-template-columns: 120px 1fr; gap: 28px; align-items: center; background: var(--white); color: var(--ink); border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); box-shadow: var(--shadow); }
.quote-card img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.quote-card blockquote { margin: 0; font-family: var(--font-head); font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.4; }
.quote-card cite { display: block; margin-top: 12px; font-style: normal; font-size: .9rem; color: var(--muted); }
@media (max-width: 600px) { .quote-card { grid-template-columns: 1fr; } .quote-card img { justify-self: center; } }

/* Pillars / cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(18px, 2.5vw, 30px); }
.card {
  background: var(--white); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow-sm);
  border: 1px solid rgba(19, 26, 22, .06); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  display: flex; flex-direction: column; gap: 12px;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card .icon { width: 56px; height: 56px; border-radius: 14px; background: var(--green-050); color: var(--green-700); display: grid; place-items: center; }
.card .icon svg { width: 28px; height: 28px; }
.card h3 { font-size: 1.35rem; margin-bottom: .1em; }
.card p { margin: 0; color: var(--ink-2); }
.card .num { font-family: var(--font-head); font-size: 2.6rem; color: var(--green-200); line-height: 1; }
.on-dark .card, .on-darker .card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: var(--bone); }
.on-dark .card p, .on-darker .card p { color: var(--green-100); }
.on-dark .card h3, .on-darker .card h3 { color: var(--white); }
.on-dark .card .icon, .on-darker .card .icon { background: rgba(255, 255, 255, .1); color: var(--amber); }
.on-dark .section-head p.lead, .on-darker .section-head p.lead { color: var(--green-100); }
.on-dark .person .name, .on-dark .person .aff { color: var(--bone); }
.on-dark .person .aff { color: var(--green-200); }
.on-dark .person .role { color: var(--amber); }
.on-dark .frame, .on-darker .frame { box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6); }

/* Section header row */
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head h2 { margin: 0; max-width: 22ch; }
.section-head p { margin: 0; max-width: 52ch; }
@media (max-width: 760px) { .section-head { flex-direction: column; align-items: start; } }

/* Video */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--green-900); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-facade { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; background: var(--green-900); }
.video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .3s, transform 1s var(--ease); }
.video-facade:hover img { opacity: 1; transform: scale(1.03); }
.video-facade .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; background: var(--amber); display: grid; place-items: center; box-shadow: 0 0 0 0 rgba(217, 164, 65, .5); animation: pulse 2.4s infinite; }
.video-facade .play svg { width: 30px; height: 30px; margin-left: 5px; fill: var(--green-900); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 164, 65, .55); } 70% { box-shadow: 0 0 0 24px rgba(217, 164, 65, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 164, 65, 0); } }

/* People */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: clamp(16px, 2.5vw, 28px); }
.person { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; border-radius: var(--radius); } /* buttons centre their content vertically by default, which floated shorter cards down when a neighbour wrapped onto two lines */
.person:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
.person .photo { aspect-ratio: 1; width: 100%; flex: none; border-radius: var(--radius); overflow: hidden; background: var(--green-100); position: relative; box-shadow: var(--shadow-sm); }
.person .photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transition: transform .8s var(--ease), filter .5s; }
.person:hover .photo img { transform: scale(1.06); filter: saturate(1.05); }
.person .photo .initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-head); font-size: 3rem; color: var(--green-700); background: linear-gradient(135deg, var(--green-100), var(--green-200)); }
.person .photo::after { content: "Read bio"; position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: var(--amber); color: var(--green-900); font-size: .75rem; font-weight: 700; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease); }
.person:hover .photo::after, .person:focus-visible .photo::after { opacity: 1; transform: translateY(0); }
.person .name { margin: 12px 0 2px; font-family: var(--font-head); font-size: 1.15rem; font-weight: 500; line-height: 1.2; }
.person .role { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-500); }
.person .aff { font-size: .88rem; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.person .bio { display: none; }
/* The two leaders each have a card of their own, in the same grained paper as the Insel quote on the homepage
   (the grain is shared with .quote-card--paper::before): the portrait set on an offset block of brand green,
   as the photograph beside the claims on the homepage is; the role as a small pill; a short amber rule; and the
   biography held to a comfortable measure, with its first sentence (bio-lead, split off by build.py) set in
   the heading face as a way in. */
.person--lead { display: grid; grid-template-columns: minmax(140px, 240px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start;
  position: relative; isolation: isolate; overflow: hidden; text-align: left; cursor: default;
  background: #fffdf8; padding: clamp(24px, 4vw, 52px);   /* a warm white, so the grain reads as paper rather than grey */
  box-shadow: 0 1px 2px rgba(11, 35, 24, .06), 0 24px 48px -30px rgba(11, 35, 24, .45); }
.person--lead .photo { max-width: 240px; box-shadow: 12px 12px 0 var(--green-800); transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
.person--lead .photo::after { display: none; }
.person--lead .photo img { transition: transform 1.4s var(--ease), filter .7s; }
.person--lead:hover .photo img { transform: none; filter: saturate(.9); }   /* reading the biography leaves the portrait still */
/* Hovering the portrait itself lifts it off its green block, as a print lifts from its mount: it rises up and to
   the left while the shadow lengthens by the same amount, so the block stays where it was. The picture inside
   warms and drifts slowly closer, at the pace of the photographs on the homepage. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .person--lead .photo:hover { transform: translate(-6px, -6px); box-shadow: 18px 18px 0 var(--green-800); }
  .person--lead .photo:hover img { transform: scale(1.04); filter: saturate(1.05); }
}
.person--lead .name { font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 2px 0 10px; }
.person--lead .role { display: inline-block; padding: 5px 12px 4px; border-radius: 999px; background: var(--green-050); color: var(--green-600); font-size: .7rem; letter-spacing: .12em; }
.person--lead .aff { margin-top: 10px; font-size: .95rem; }
.person--lead .bio { display: block; max-width: 68ch; color: var(--ink-2); }
.person--lead .bio::before { content: ""; display: block; width: 44px; height: 2px; margin: 24px 0 22px; background: var(--amber); }
.person--lead .bio-lead { font-family: var(--font-head); font-size: clamp(1.15rem, 1.6vw, 1.32rem); line-height: 1.45; color: var(--ink); margin-bottom: .8em; }
.person--lead .bio p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .person--lead { grid-template-columns: 1fr; }
  .person--lead .photo { max-width: 200px; }
  .people-grid { grid-template-columns: repeat(2, 1fr); }
}

dialog.bio-dialog { border: 0; border-radius: var(--radius); padding: 0; width: min(760px, 92vw); max-height: 88vh; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); background: var(--white); color: var(--ink); }
dialog.bio-dialog::backdrop { background: rgba(7, 25, 16, .6); backdrop-filter: blur(4px); }
.bio-inner { padding: clamp(24px, 4vw, 44px); display: grid; grid-template-columns: 160px 1fr; gap: 28px; }
.bio-inner img, .bio-inner .initials { width: 160px; height: 160px; border-radius: var(--radius); object-fit: cover; display: grid; place-items: center; font-family: var(--font-head); font-size: 2.6rem; color: var(--green-700); background: var(--green-100); }
.bio-inner h3 { margin-bottom: 2px; }
.bio-inner .role { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-500); }
.bio-inner .aff { color: var(--muted); margin-bottom: 14px; }
.bio-inner .bio p { margin-bottom: .8em; }
.bio-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bone-2); font-size: 1.3rem; cursor: pointer; }
@media (max-width: 600px) { .bio-inner { grid-template-columns: 1fr; } }

/* Report section: the report's title page as a framed link */
.report-frame { display: block; }
.report-frame img { aspect-ratio: 1600 / 949; }   /* the report capture's own proportions, so nothing is cropped */

/* Videos section: the trailer, then a rolling strip of interview cards that scrolls continuously,
   pauses on hover, and fades at both edges */
.videos-section { overflow: hidden; }
.video--trailer { max-width: 880px; margin: 0 auto; }
.vid-strip { overflow: hidden; margin-top: clamp(28px, 4vw, 44px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.vid-track { display: flex; gap: 18px; width: max-content; animation: vid-roll 70s linear infinite; }
.vid-strip:hover .vid-track, .vid-strip:focus-within .vid-track { animation-play-state: paused; }
.vid { position: relative; flex: none; width: clamp(240px, 26vw, 340px); aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--green-800); box-shadow: var(--shadow); text-decoration: none; color: var(--white); isolation: isolate; }
.vid img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.vid:hover img { transform: scale(1.04); }
.vid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 25, 16, 0) 45%, rgba(7, 25, 16, .88)); }
.vid-play { position: absolute; top: 12px; right: 12px; z-index: 1; width: 38px; height: 38px; border-radius: 50%; background: rgba(7, 25, 16, .6); display: grid; place-items: center; transition: background .3s; }
.vid-play svg { width: 16px; height: 16px; fill: var(--white); margin-left: 2px; transition: fill .3s; }
.vid:hover .vid-play { background: var(--amber); }
.vid:hover .vid-play svg { fill: var(--green-900); }
.vid-meta { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.vid-meta strong { font-family: var(--font-head); font-weight: 500; font-size: 1.15rem; line-height: 1.2; }
.vid-meta span { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
@keyframes vid-roll { to { transform: translateX(calc(-50% - 9px)); } }   /* one full copy of the cards plus half a gap */

/* Resources */
.res-featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); margin-top: 8px; }
.res-tile { position: relative; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; color: var(--white); text-decoration: none; background: var(--green-900); border: 1px solid rgba(255, 255, 255, .1); box-shadow: var(--shadow); transition: transform .35s var(--ease), border-color .3s; }
.res-tile:hover { transform: translateY(-6px); color: var(--white); border-color: rgba(255, 255, 255, .25); }
.res-tile .pic { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--green-800); }
.res-tile .pic img.bg { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.res-tile:hover .pic img.bg { transform: scale(1.05); }
.res-tile .pic .watermark { right: -20%; top: 55%; width: 90%; opacity: .16; }
.res-tile .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.res-tile .kind { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.res-tile h3 { color: var(--white); font-size: 1.4rem; margin-bottom: 2px; }
.res-tile p { margin: 0; color: var(--green-100); font-size: .93rem; }
.res-tile .go { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(7, 25, 16, .6); backdrop-filter: blur(4px); display: grid; place-items: center; font-size: 1.1rem; transition: background .3s, color .3s, transform .3s var(--ease); z-index: 2; }
.res-tile:hover .go { background: var(--amber); color: var(--green-900); transform: rotate(-45deg); }
@media (max-width: 860px) { .res-featured { grid-template-columns: 1fr; } }

.res-cat { padding-block: clamp(40px, 6vw, 80px); }
.res-cat + .res-cat { border-top: 1px solid rgba(19, 26, 22, .1); }
.res-strip { position: relative; height: clamp(160px, 22vw, 260px); border-radius: var(--radius); overflow: hidden; display: flex; align-items: flex-end; padding: 26px clamp(20px, 3vw, 36px); color: var(--white); box-shadow: var(--shadow); isolation: isolate; margin-bottom: clamp(20px, 3vw, 32px); }
.res-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.res-strip::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 25, 16, .85), rgba(7, 25, 16, .2)); }
.res-strip .eyebrow { color: var(--amber); margin-bottom: 4px; }
.res-strip h2 { color: var(--white); margin: 0; }
.res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.5vw, 26px); }
.res-card { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; padding: clamp(20px, 2.5vw, 28px); border-radius: var(--radius); background: var(--white); border: 1px solid rgba(19, 26, 22, .07); text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s; }
.res-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: inherit; }
.res-card .kind { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green-500); margin-bottom: 6px; }
.res-card h3 { font-size: 1.3rem; margin-bottom: 6px; color: var(--green-800); }
.res-card p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.res-card .go { width: 40px; height: 40px; border-radius: 50%; background: var(--green-050); color: var(--green-700); display: grid; place-items: center; font-size: 1.1rem; flex: none; transition: background .3s, color .3s, transform .3s var(--ease); }
.res-card:hover .go { background: var(--green-800); color: var(--white); transform: rotate(-45deg); }
@media (max-width: 760px) { .res-grid { grid-template-columns: 1fr; } }

/* News / activities */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(20px, 3vw, 32px); }
.news-card { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform .35s var(--ease), box-shadow .35s; }
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); color: inherit; }
.news-card .thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--green-100); }
.news-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.news-card:hover .thumb img { transform: scale(1.05); }
.news-card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.news-card .date { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-500); }
.news-card h3 { font-size: 1.3rem; margin: 0; }
.news-card p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.news-card .more { margin-top: auto; padding-top: 10px; font-weight: 700; color: var(--green-700); font-size: .9rem; }
.news-card--featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; }
.news-card--featured .thumb { aspect-ratio: auto; min-height: 320px; }
.news-card--featured h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.news-card--featured .body { padding: clamp(28px, 4vw, 48px); justify-content: center; }
@media (max-width: 760px) { .news-card--featured { grid-template-columns: 1fr; } .news-card--featured .thumb { min-height: 0; aspect-ratio: 2 / 1; } } /* 2:1 matches the prospectus capture so its text is not cropped */

/* Article */
.article { padding-block: clamp(36px, 5vw, 64px) clamp(56px, 8vw, 100px); }
.article-head { margin-bottom: clamp(24px, 3vw, 40px); }
.article-head h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); max-width: 20ch; }
.article-meta { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: .92rem; }
.article-meta img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.article-hero { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: clamp(28px, 4vw, 48px); }
.article-hero img { width: 100%; max-height: 520px; object-fit: cover; }
.prose { font-size: 1.08rem; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 1.8em; }
.prose h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .5em; }
.prose figure { margin: 2em 0; }
.prose figure img { border-radius: var(--radius); box-shadow: var(--shadow); }
.prose figcaption { font-size: .85rem; color: var(--muted); margin-top: 10px; }
.prose .callout { background: var(--green-050); border-left: 4px solid var(--green-500); padding: 18px 22px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1.6em 0; }
.prose .callout p:last-child { margin-bottom: 0; }
.pagination { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(36px, 5vw, 64px); padding-top: 28px; border-top: 1px solid rgba(19, 26, 22, .1); }
.pagination a { text-decoration: none; color: inherit; padding: 18px 20px; border-radius: var(--radius-sm); background: var(--white); border: 1px solid rgba(19, 26, 22, .08); transition: transform .3s var(--ease); }
.pagination a:hover { transform: translateY(-3px); }
.pagination a.next { text-align: right; grid-column: 2; }
.pagination .lbl { display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green-500); font-weight: 700; margin-bottom: 4px; }
.pagination .ttl { font-family: var(--font-head); font-size: 1.05rem; }
@media (max-width: 600px) { .pagination { grid-template-columns: 1fr; } .pagination a.next { text-align: left; grid-column: auto; } }

/* Forms */
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
input[type="text"], input[type="email"], select, textarea {
  width: 100%; font: inherit; padding: 14px 16px; border-radius: var(--radius-sm); border: 1.5px solid rgba(19, 26, 22, .18); background: var(--white); color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 4px rgba(47, 122, 82, .15); }
textarea { min-height: 160px; resize: vertical; }
.form-note { font-size: .88rem; color: var(--muted); }
.form-status { display: none; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--green-050); color: var(--green-800); font-weight: 600; }
.form-status.is-visible { display: block; }

/* Donate panel */
.donate-panel { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .donate-panel { grid-template-columns: 1fr; } }
.donate-box { background: var(--white); color: var(--ink); border-radius: var(--radius); padding: clamp(24px, 3.5vw, 40px); box-shadow: var(--shadow); }
.donate-box h3 { margin-bottom: 6px; color: var(--ink); }
.donate-box ul { padding-left: 1.2em; margin: 14px 0 22px; color: var(--ink-2); }
.donate-box li { margin-bottom: 8px; }
.donate-box a { color: var(--green-600); }
.donate-box .btn-donate, .on-dark .donate-box .btn-donate, .on-darker .donate-box .btn-donate, .on-dark .donate-box .btn-donate:hover, .on-darker .donate-box .btn-donate:hover { color: var(--green-900); }
.giftaid { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 700; color: var(--green-700); background: var(--green-050); padding: 6px 12px; border-radius: 999px; }

/* CTA strip */
.cta-strip { background: var(--amber); color: var(--green-900); }
.cta-strip .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-strip h2 { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2.2rem); color: var(--green-900); }
.cta-strip p { margin: 4px 0 0; color: var(--green-900); opacity: .85; }
.cta-strip .btn-primary { background: var(--green-900); }
.on-dark .cards .card, .on-darker .cards .card { backdrop-filter: blur(4px); }
.on-dark .card .num { color: var(--amber); }

/* Contact info list */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.contact-list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.contact-list .icon { width: 44px; height: 44px; border-radius: 12px; background: var(--green-050); color: var(--green-700); display: grid; place-items: center; }
.contact-list .icon svg { width: 22px; height: 22px; }
.contact-list strong { display: block; }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-950); color: var(--green-100); padding-block: clamp(48px, 7vw, 80px) 32px; font-size: .93rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); margin-bottom: 40px; }
.site-footer h4 { color: var(--white); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer a { color: var(--green-100); text-decoration: none; }
.site-footer a:hover { color: var(--amber); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.footer-brand img { width: 76px; height: 76px; border-radius: 50%; }
.footer-brand span { font-family: var(--font-head); font-size: 1.15rem; line-height: 1.2; color: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: var(--green-200); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--fade { transform: none; transition: opacity 1.4s ease; } /* a plain, slower fade with no rise, for big standalone statements */
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }
.reveal[data-delay="4"] { transition-delay: .48s; }
.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > :nth-child(2) { transition-delay: .1s; }
.reveal-stagger.is-visible > :nth-child(3) { transition-delay: .2s; }
.reveal-stagger.is-visible > :nth-child(4) { transition-delay: .3s; }
.reveal-stagger.is-visible > :nth-child(5) { transition-delay: .4s; }
.reveal-stagger.is-visible > :nth-child(6) { transition-delay: .5s; }
.reveal-stagger.is-visible > :nth-child(n+7) { transition-delay: .6s; }

/* Word-by-word headline reveal */
.words .w { display: inline-block; opacity: 0; transform: translateY(.4em) rotate(2deg); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.words.is-visible .w { opacity: 1; transform: none; }

/* Icon mosaic down the left of the hero: very faint outline icons in three staggered columns, each glowing amber
   and coming forward for a moment on its own cycle. Icons are <use> references to the sprite emitted by build.py. */
.icon-rail { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; justify-items: center; align-items: center; }
.icon-rail .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon-rail .ico { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  color: var(--green-200); opacity: .16; animation: ico-glow var(--p, 24s) ease-in-out infinite; animation-delay: var(--d, 0s); }
.icon-rail .ico--fill { fill: currentColor; stroke: none; }   /* filled icons (the lion) take the colour as a fill, with no added stroke */
.icon-rail .ico:nth-child(3n) { translate: 0 50%; }   /* middle column sits half a row lower, for a mosaic rather than a grid */
@keyframes ico-glow {
  0%, 86%, 100% { opacity: .16; color: var(--green-200); scale: 1; filter: none; }
  93% { opacity: 1; color: var(--amber); scale: 1.28; filter: drop-shadow(0 0 8px rgba(217, 164, 65, .75)); }
}
/* On a narrow screen the rail is one column of a dozen icons (every third one, marked ico--narrow by build.py).
   With so few, their separate cycles would often leave none lit, so here they take turns instead: all share
   one 18s cycle, each offset by its turn in the relay (--r, 1.5s apart, in an order build.py shuffles so the
   glow jumps about the column). Each is held lit for 1.6s, a shade longer than a turn, so there is always one
   fully lit, with the next brightening as it fades. Twelve turns of 1.5s make the 18s; if the number of
   icons or RELAY_STEP in build.py changes, change the duration and these percentages with them. */
@media (max-width: 900px) {
  .icon-rail { grid-template-columns: 1fr; }
  .icon-rail .ico { width: 24px; height: 24px; translate: none; animation: ico-relay 18s ease-in-out infinite; animation-delay: var(--r, 0s); }
  .icon-rail .ico:not(.ico--narrow) { display: none; }
}
@keyframes ico-relay {
  0%, 15.6%, 100% { opacity: .16; color: var(--green-200); scale: 1; filter: none; }
  3.3%, 12.2% { opacity: 1; color: var(--amber); scale: 1.28; filter: drop-shadow(0 0 8px rgba(217, 164, 65, .75)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .reveal, .reveal-stagger > *, .words .w { opacity: 1; transform: none; }
  .icon-rail .ico { animation: none; opacity: .3; }
  .vid-track { animation: none; }
  .vid-strip { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}


/* ---------- Prospectus-style folder drawer (mirrors prospectus.femh.foundation) ---------- */
.drawer { --tab-h: 22px; --overlap: 2px; display: block; }
.folder { position: relative; display: block; text-decoration: none; color: inherit; margin-top: calc(var(--tab-h) - var(--overlap)); }
.folder:first-child { margin-top: var(--tab-h); }
/* --i steps each tab to the right; --tab-w is that tab's rendered width, used to stop it passing the folder's right edge */
.drawer > .folder:nth-child(1) { z-index: 1; --i: 0; --tab-w: 84px; } .drawer > .folder:nth-child(2) { z-index: 2; --i: 1; --tab-w: 143px; } .drawer > .folder:nth-child(3) { z-index: 3; --i: 2; --tab-w: 143px; }
.drawer > .folder:nth-child(4) { z-index: 4; --i: 3; --tab-w: 84px; } .drawer > .folder:nth-child(5) { z-index: 5; --i: 4; --tab-w: 141px; } .drawer > .folder:nth-child(6) { z-index: 6; --i: 5; --tab-w: 152px; } .drawer > .folder:nth-child(7) { z-index: 7; --i: 6; --tab-w: 121px; }
.folder:hover { z-index: 20; }
.folder-tab { position: absolute; top: calc(var(--tab-h) * -1); left: min(calc(14px + var(--i) * var(--tab-step, 13%)), calc(100% - 14px - var(--tab-w, 160px))); height: var(--tab-h); padding: 0 14px; display: flex; align-items: center; gap: 8px; background: #eddcc0; color: #0b2a26; font-family: var(--font-head); font-weight: 600; font-size: 11px; letter-spacing: .04em; line-height: 1; clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 100%, 0 100%); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18); transition: background .16s; }
.folder-tab .num { font-variant-numeric: tabular-nums; }
.folder-tab .cat { font-family: var(--font-body); font-size: 8.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .72; }
.folder-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: 58px; padding: 12px 22px; background: #f7f4ec; color: #0b2a26; border-top: 1px solid rgba(11, 42, 38, .1); box-shadow: 0 1px 0 rgba(11, 42, 38, .07), 0 6px 10px -10px rgba(11, 42, 38, .3); transition: background .16s, transform .26s var(--ease), box-shadow .22s; }
.folder-title { font-family: var(--font-head); font-weight: 600; font-size: 16px; line-height: 1.2; }
.folder-meta { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.folder-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .35; display: inline-block; transform: translateY(-2px); }
.folder-meta .cost { font-size: 13px; font-weight: 700; }
.folder-meta .term { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #3d6b5e; }
.folder:hover .folder-body { background: #faf8f1; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(11, 42, 38, .07), 0 22px 38px -22px rgba(0, 0, 0, .6), 0 8px 14px -10px rgba(0, 0, 0, .3); }
.folder--project:hover .folder-tab { background: #ddc59e; }
.folder--person .folder-body, .folder--all .folder-body { background: #0b2a26; color: #f7f4ec; border-top-color: rgba(247, 244, 236, .1); }
.folder--person .folder-tab, .folder--all .folder-tab { background: #0f4a44; color: #f7f4ec; }
.folder--person .folder-meta .term, .folder--all .folder-meta .term { color: rgba(247, 244, 236, .65); }
.folder--person:hover .folder-body, .folder--all:hover .folder-body { background: #0e3531; }
.folder--person:hover .folder-tab, .folder--all:hover .folder-tab { background: #1e8f7e; color: #fff; }
.folder--all .folder-tab { background: var(--amber); color: var(--green-900); }
.folder--all:hover .folder-tab { background: #e3b356; color: var(--green-900); }
.folder--all .folder-title { font-size: 15px; font-weight: 500; }
@media (max-width: 640px) { .drawer { --tab-step: 9%; } .folder-body { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; } }

/* ---------- Findings tiles (mission page) ---------- */
.findings { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); }
.finding { padding: clamp(20px, 2.5vw, 30px); border-radius: var(--radius); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.finding .num { font-family: var(--font-head); font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; color: var(--amber); letter-spacing: -.02em; margin-bottom: 12px; }
.finding p { margin: 0; color: var(--green-100); font-size: .95rem; }
@media (max-width: 800px) { .findings { grid-template-columns: 1fr; } }
.mission-statement { position: relative; }
/* The mission as one paragraph in three clauses, each a little apart, underlining their key phrases in turn as the
   paragraph arrives (the claims' amber underline, above). */
.mission-points { margin-bottom: clamp(8px, 2vw, 24px); }
.mission-point { margin: 0; font-family: var(--font-head); font-weight: 400; font-size: clamp(1.25rem, 2.1vw, 1.65rem); line-height: 1.42; color: var(--green-900); text-wrap: pretty; }
.mission-point + .mission-point { margin-top: .6em; }
.mission-points.is-visible .mission-point strong { background-size: 100% .34em; }
.mission-points.is-visible .mission-point:nth-child(1) strong { transition-delay: .5s; }
.mission-points.is-visible .mission-point:nth-child(2) strong { transition-delay: .85s; }
.mission-points.is-visible .mission-point:nth-child(3) strong { transition-delay: 1.2s; }

/* The timeline under the mission statement: lines of ink from Darwin to the Foundation, and on into its aims,
   drawn by main.js ("The mission timeline"). The drawing is an SVG, with a canvas over it for the glow at the
   pens' tips and the light on the threads; main.js sets the aspect ratio for whichever layout it is using, and
   places the labels. */
.timeline { position: relative; max-width: 1200px; margin: clamp(40px, 6vw, 72px) auto 0; aspect-ratio: 1200 / 500; }
.timeline.is-tall { max-width: 430px; }   /* the column a phone or a small tablet gets (main.js switches under 780px); kept to a phone's width */
.timeline-ink, .timeline-sky { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.timeline-sky { pointer-events: none; }
.timeline .ink, .aim-art .ink { fill: var(--green-800); fill-opacity: .86; transition: fill 1.8s ease-out, fill-opacity 1.8s ease-out; }
.timeline .ink.is-wet, .aim-art .ink.is-wet { fill: var(--green-900); fill-opacity: .96; transition: none; }
/* the Foundation's mark, which floods with ink once the pen has been round it */
.timeline-mark { fill: var(--green-800); opacity: 0; transition: opacity 1.2s ease; }
.timeline-mark.is-inked { opacity: 1; }
/* the labels: each fades up beside its drawing as that is finished, on the side of its point main.js gives
   (data-side), with a halo of paper round the letters so that they read over a passing line */
.timeline-steps { list-style: none; margin: 0; padding: 0; }
/* --tl-k is the drawing's scale, in CSS pixels to its units, set by main.js: on a narrower screen the drawing is smaller,
   so the labels come down with it, as far as stays legible */
.timeline-steps li { position: absolute; width: max-content; max-width: 13em; text-align: center;
  --tx: -50%; --ty: 0%; --ox: 0px; --oy: 8px; transform: translate(calc(var(--tx) + var(--ox)), calc(var(--ty) + var(--oy)));
  font-size: clamp(8px, calc(var(--tl-k, .9) * 12px), 11px); font-weight: 700; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; color: var(--green-600);
  text-shadow: 0 0 2px var(--bone), 0 0 5px var(--bone), 0 0 9px var(--bone);
  opacity: 0; transition: opacity .9s ease, transform .9s var(--ease); }
.timeline-steps li[data-side="above"] { --ty: -100%; }
.timeline-steps li[data-side="left"] { --tx: -100%; --ty: -50%; --ox: 8px; --oy: 0px; text-align: right; }
.timeline-steps li[data-side="right"] { --tx: 0%; --ty: -50%; --ox: -8px; --oy: 0px; text-align: left; }
.timeline-steps li.is-shown { opacity: 1; --ox: 0px; --oy: 0px; }
.timeline-steps b { display: block; margin-bottom: 1px; font-family: var(--font-head); font-size: clamp(14px, calc(var(--tl-k, .9) * 24px), 22px); font-weight: 500; line-height: 1.1;
  letter-spacing: 0; text-transform: none; color: var(--amber-600); }
.timeline-steps i { font-style: normal; }
/* the note that what follows the Foundation's mark is what it aims to do: a heading like the years, and a line
   in italic, as a note in the margin would be */
.timeline-steps li.is-note i { display: block; margin-top: 3px; font-family: var(--font-head); font-style: italic; font-weight: 400; line-height: 1.2;
  font-size: clamp(12px, calc(var(--tl-k, .9) * 17px), 16px); letter-spacing: 0; text-transform: none; color: var(--green-700); }
/* in the column the labels sit in the margins beside the drawings */
.timeline.is-tall .timeline-steps li { max-width: 10em; font-size: clamp(8.5px, calc(var(--tl-k, .9) * 12px), 10px); }
.timeline.is-tall .timeline-steps b { font-size: clamp(16px, calc(var(--tl-k, .9) * 22px), 20px); }
.timeline-steps li.is-note { max-width: 15em; }   /* room for the note's line in italic */
.timeline.is-tall .timeline-steps li.is-note { max-width: 11em; }
.timeline.is-tall .timeline-steps li.is-note i { font-size: clamp(11px, calc(var(--tl-k, .9) * 14px), 14px); }

/* The Foundation's three aims, under the timeline, whose last threads run down into them. Each has a drawing
   that main.js makes when its thread arrives and that then acts the aim out (see "The mission timeline"), a
   number, a title and its points. They sit side by side under the wide drawing, and one under another under
   the column (.is-stacked, set by main.js with the timeline's layout). Until a drawing starts, its words wait
   (.is-live is only set when the script runs, so without it they simply show). */
.aims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3.4%; max-width: 1200px; margin: 0 auto; }
.aims.is-stacked { grid-template-columns: minmax(0, 1fr); max-width: 430px; row-gap: clamp(30px, 7vw, 48px); }
.aim { text-align: center; }
.aim-art { display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 300 / 190; margin: 0 auto; overflow: visible; }
.aim-text { margin-top: 4px; }
.aims.is-live .aim-text { opacity: 0; transform: translateY(10px); transition: opacity .9s ease .35s, transform .9s var(--ease) .35s; }
.aims.is-live .aim.is-shown .aim-text { opacity: 1; transform: none; }
.aim-num { display: block; font-family: var(--font-head); font-size: 1.05rem; letter-spacing: .06em; color: var(--amber-600); }
.aim h3 { margin: .12em 0 .7em; font-size: clamp(1.3rem, 1.9vw, 1.6rem); color: var(--green-800); }
.aim ul { list-style: none; margin: 0 auto; padding: 0; max-width: 31ch; text-align: left; }
.aim li { position: relative; padding-left: 1.35em; margin: 0 0 .55em; line-height: 1.5; color: var(--ink); }
.aim li::before { content: ""; position: absolute; left: .25em; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, .2); }
.aims-more { justify-content: center; margin-top: clamp(30px, 4vw, 52px); }
/* the drawings acting their aims out: the seedling sways and its flower opens, glowing when light arrives; the
   glass shows the tree larger and the strengths in it flare; the book's pages turn, the speaker plays and the
   video runs */
.aim-flower { fill: var(--amber); opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center;
  transition: opacity .6s ease, transform 1.1s var(--ease), filter .5s ease; }
.aim-flower.is-open { opacity: .95; transform: scale(1); }
.aim-flower.is-glowing { filter: drop-shadow(0 0 5px rgba(217, 164, 65, .95)); }
.aim-flower-heart { fill: var(--amber-600); }
.aim-plant.is-alive { transform-box: view-box; transform-origin: 148px 142px; animation: aim-sway 4.8s ease-in-out infinite alternate; }
@keyframes aim-sway { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
.aim-gem, .aim-gem-halo { fill: var(--amber); }
.aim-glass-disc { fill: var(--bone); }
.aim-glass-disc, .aim-glass-view, .aim-glint { opacity: 0; transition: opacity .7s ease; }
.aim-art.is-looking .aim-glass-disc, .aim-art.is-looking .aim-glass-view { opacity: 1; }
.aim-glint { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.aim-art.is-looking .aim-glint { opacity: .8; }
.aim-leaf { fill: var(--bone); stroke: var(--green-800); stroke-opacity: .86; stroke-width: 1.6px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.aim-ripple { fill: none; stroke: var(--green-800); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.aim-play, .aim-track, .aim-progress, .aim-head { opacity: 0; transition: opacity .7s ease; }
.aim-art.is-playing .aim-play { opacity: .9; }
.aim-art.is-playing .aim-track { opacity: .3; }
.aim-art.is-playing .aim-progress, .aim-art.is-playing .aim-head { opacity: 1; }
.aim-play { fill: var(--amber); }
.aim-track, .aim-progress { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.aim-track { stroke: var(--green-800); stroke-width: 1.4px; }
.aim-progress { stroke: var(--amber); stroke-width: 2px; }
.aim-head { fill: var(--amber-600); }
.aim-spark { fill: var(--amber); }
@media (prefers-reduced-motion: reduce) { .aim-plant.is-alive { animation: none; } }