/* =========================================================
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); }
.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 face in each corner of the homepage question, cycling slowly through the emotional states the
question is about. build.py (faces()) draws the resting face into the page; main.js (FACE_STATES) morphs
the brows, eyes and mouth through six expressions, each corner a step and a half apart so no two ever
match. The lines draw themselves on when the question reveals, one corner just after another. */
/* 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); opacity: .52; }
.face path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
/* The contour carries the weight and the features are drawn finer inside it, as a pen would: the group is
set at .76, so the 2.7 below lands at about 2.05 against the head's 3.3. Without that difference the
whole face reads as one flat printed symbol rather than something drawn. */
.face-head { stroke-width: 3.3; }
.face-head2 { stroke-width: 1.7; opacity: .7; }
.face-features path { stroke-width: 2.7; }
.face .face-eyes { fill: currentColor; stroke: none; }
.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 pen goes round the head, then the brows, then the eyes and mouth. --i staggers the four corners.
Each dash length has to clear the LONGEST version of that part across all six expressions (239.9, 97.6, 34.2
and 66.5 in viewBox units), or the pattern would repeat and leave a gap once the face morphs. The
resting shape the pen actually draws is shorter than that, so the middle keyframe is where the line
finishes; the rest of the travel is the offset settling to zero behind an already-solid stroke. */
.face-head { stroke-dasharray: 244; stroke-dashoffset: 244; }
.face-head2 { stroke-dasharray: 100; stroke-dashoffset: 100; }
.face-brows { stroke-dasharray: 36; stroke-dashoffset: 36; }
.face-mouth { stroke-dasharray: 70; stroke-dashoffset: 70; }
.face-eyes { opacity: 0; }
.q.is-visible ~ .face .face-head { animation: draw-head 1.1s var(--ease) calc(.15s + var(--i) * .14s) forwards; }
.q.is-visible ~ .face .face-head2 { animation: draw-head2 .55s var(--ease) calc(.72s + var(--i) * .14s) forwards; }
.q.is-visible ~ .face .face-brows { animation: draw-brows .5s var(--ease) calc(.95s + var(--i) * .14s) forwards; }
.q.is-visible ~ .face .face-eyes { animation: face-ink .5s ease calc(1.1s + var(--i) * .14s) forwards; }
.q.is-visible ~ .face .face-mouth { animation: draw-mouth .7s var(--ease) calc(1.2s + var(--i) * .14s) forwards; }
@keyframes draw-head { from { stroke-dashoffset: 244; } to { stroke-dashoffset: 0; } }
@keyframes draw-head2 { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes draw-brows { from { stroke-dashoffset: 36; } 88% { stroke-dashoffset: 4; } to { stroke-dashoffset: 0; } }
@keyframes draw-mouth { from { stroke-dashoffset: 70; } 58% { stroke-dashoffset: 31; } to { stroke-dashoffset: 0; } }
@keyframes face-ink { to { opacity: 1; } }
/* 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%; opacity: .42; } }
/* Reduced motion: the faces are simply there, drawn and resting. main.js leaves them alone too. */
@media (prefers-reduced-motion: reduce) {
.face-head, .face-head2, .face-brows, .face-mouth { stroke-dashoffset: 0; }
.face-eyes { opacity: 1; }
.q.is-visible ~ .face path { animation: none; }
}
.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 { 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,");
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 { 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,");
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 { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .09; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); }
.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); } }
/* Timeline */
.timeline { position: relative; display: grid; gap: 28px; padding-left: 34px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--green-200), var(--green-500)); }
.tl-item { position: relative; }
.tl-item::before { content: ""; position: absolute; left: -34px; top: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--bone); border: 4px solid var(--green-500); box-shadow: 0 0 0 4px var(--bone); }
.tl-item.is-visible::before { animation: pop .5s var(--ease); }
@keyframes pop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.tl-date { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green-500); }
.tl-item h3 { margin: 4px 0 6px; font-size: 1.3rem; }
.tl-item h3 a { color: inherit; text-decoration: none; }
.tl-item h3 a:hover { color: var(--green-600); }
.tl-item p { margin: 0; color: var(--ink-2); max-width: 62ch; }
.tl-item.future .tl-date { color: var(--amber-600); }
.tl-item.future::before { border-style: dashed; border-color: var(--amber-600); }
/* 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; }
.person--lead { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; text-align: left; cursor: default; }
.person--lead .photo { max-width: 220px; }
.person--lead .photo::after { display: none; }
.person--lead .bio { display: block; color: var(--ink-2); margin-top: 8px; }
.person--lead .name { font-size: 1.5rem; margin-top: 0; }
@media (max-width: 640px) { .person--lead { grid-template-columns: 1fr; } .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