/* =========================================================
   Growth Through Learning — "Composition Book"

   Structure comes from the object at the centre of the story:
   a schoolgirl's exercise book. An indigo margin rule runs down
   the page; eyebrows and indices live in that margin, the way a
   teacher's notes do. Ruled baselines appear once, where the
   mission is stated. The yellow scribble from the GTL mark is
   reused as a hand-drawn highlight.

   Brand: red #e42323  indigo #2530c2  yellow #ffbd59
   ========================================================= */

:root {
	/* Brand — from the GTL mark */
	--red: #e42323;
	--red-deep: #b81a1a;
	--indigo: #2530c2;
	--yellow: #ffbd59;
	--yellow-soft: #ffe6bd;

	/* Derived neutrals: the ink is the logo figure's indigo, deepened
	   until it is comfortable to read at length. */
	--ink: #171a45;
	--ink-soft: #414678;
	--muted: #6e739b;
	--night: #101335;
	--paper: #fffdf8;
	--paper-deep: #fdf4e6;
	--rule: rgba(23, 26, 69, 0.14);

	/* Semantic roles — red means act or alarm, and nothing else.
	   Yellow carries warmth and highlight. Indigo carries structure. */
	--accent: var(--indigo);
	--cta: var(--red);

	--font-display: "Fraunces", Georgia, serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--container: 1240px;
	--rail: 8.5rem;   /* the notebook margin */
	--rhythm: 2.1rem; /* ruled-line spacing */

	/* The scribble from the logo, as a stretchable highlight. Strokes
	   overlap so it fills as one hand-drawn patch — spaced out it reads
	   as a strike-through, which is the opposite of the intended meaning. */
	--scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 64' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ffbd59' stroke-width='15' stroke-linecap='round'%3E%3Cpath d='M10 11 C68 5 132 15 191 8'/%3E%3Cpath d='M7 19 C74 13 128 23 194 16'/%3E%3Cpath d='M11 27 C66 21 136 30 190 24'/%3E%3Cpath d='M8 35 C78 29 124 39 193 32'/%3E%3Cpath d='M12 43 C70 37 134 46 189 40'/%3E%3Cpath d='M9 51 C76 45 126 54 192 48'/%3E%3Cpath d='M13 57 C72 52 130 60 187 55'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
	scroll-behavior: smooth;
	/* iOS Safari otherwise inflates body copy when a phone is turned
	   sideways, which breaks every measure set in ch below. */
	-webkit-text-size-adjust: 100%;
}
/* The header is sticky, so an anchor jump would otherwise land the section
   title underneath it. Clears the tallest header state at each width. */
section[id] { scroll-margin-top: 6rem; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}
/* paper grain — the cream must read as stock, not as #eee */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.34; /* lighter than the warm-brown build — grain greys a blue paper faster */
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.02;
	margin: 0 0 0.5em;
	color: var(--ink);
	letter-spacing: -0.022em;
}
p { margin: 0 0 1em; }
a { color: var(--indigo); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 2rem; }
.container--narrow { max-width: 700px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px;
	width: auto; height: auto; clip: auto;
	background: var(--ink); color: var(--paper);
	padding: 0.6rem 1rem; z-index: 10000;
}
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }

/* ---- Scribble highlight ----
   The yellow scribble from the GTL mark, stretched behind a word.
   Reserved for one word per page: any more and it stops meaning
   "this is the point". */
.scribble {
	background-image: var(--scribble);
	background-repeat: no-repeat;
	/* Sized in em, not %: percentages resolve against the font's content
	   area (~1.23em here), which is taller than the 0.95 line-height, so
	   the patch bled into the line above. */
	background-size: 100% 0.88em;
	background-position: 0 0.17em;
	padding: 0 0.13em;
	margin: 0 -0.03em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ---- Eyebrow / label type ---- */
.label {
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--indigo);
	margin: 0;
}

/* ---- Buttons: squared, wipe-fill on hover ---- */
.button {
	position: relative;
	display: inline-block;
	padding: 1rem 2.1rem;
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1.5px solid transparent;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.35s ease;
}
.button::before {
	content: "";
	position: absolute; inset: 0;
	z-index: -1;
	transform: scaleX(1);
	transform-origin: left;
	transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.button::after {
	content: "";
	position: absolute; inset: 0;
	z-index: -2;
}
.button--primary { color: #fff; border-color: var(--cta); }
.button--primary::before { background: var(--cta); }
.button--primary::after { background: transparent; }
.button--primary:hover { color: var(--red-deep); }
.button--primary:hover::before { transform: scaleX(0); transform-origin: right; }

.button--ghost { color: var(--paper); border-color: rgba(255, 253, 248, 0.45); }
.button--ghost::before { background: var(--paper); transform: scaleX(0); }
.button--ghost:hover { color: var(--ink); }
.button--ghost:hover::before { transform: scaleX(1); }

.button--ink { color: var(--paper); border-color: var(--ink); }
.button--ink::before { background: var(--ink); }
.button--ink:hover { color: var(--ink); }
.button--ink:hover::before { transform: scaleX(0); transform-origin: right; }

/* inline editorial link with rule + arrow */
.text-link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.55rem;
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--rule);
	transition: color 0.25s ease, border-color 0.25s ease;
}
.text-link::after { content: "→"; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.text-link:hover { color: var(--indigo); border-color: var(--indigo); }

/* "Source" citation link after a statistic — reads as a link, not a
   footnote mark, so the sourcing is visible without hovering. Set in
   the body face at label scale so it never competes with the figure
   it follows. */
.src {
	display: inline-block;
	margin-left: 0.3rem;
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: middle;
	color: var(--indigo);
	text-decoration: none;
	border-bottom: 1px solid rgba(37, 48, 194, 0.35);
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.src:hover, .src:focus-visible {
	/* the brand yellow, used the way a highlighter would be */
	background: var(--yellow-soft);
	border-color: var(--indigo);
}

/* In the bar chart the link sits on the uppercase meta line under the
   label, not beside the big number — a 1.5rem display figure has no
   room next to it. */
.bar-row__note .src { margin-left: 0.35rem; font-size: inherit; letter-spacing: inherit; }
.bar-row__note .src::before { content: "·"; margin-right: 0.45rem; border: 0; }

/* Inside running prose the all-caps treatment is too loud; keep it as a
   plain small link on the baseline. */
.principle__text .src, .section__lede .src, .country__prose .src, .mission__text .src {
	font-size: 0.7rem;
	vertical-align: baseline;
}
.text-link:hover::after { transform: translateX(5px); }

/* ---- Top banner: standing trust statement, not an announcement ---- */
.topbar {
	background: var(--yellow);
	color: rgba(23, 26, 69, 0.82);
	font-size: 0.78rem;
	letter-spacing: 0.01em;
}
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 40px;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.topbar__text { margin: 0; }
.topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}
.topbar__link > span:last-child { border-bottom: 1px solid rgba(23, 26, 69, 0.45); padding-bottom: 1px; }
.topbar__link:hover { color: var(--indigo); }
.topbar__link:hover > span:last-child { border-color: var(--indigo); }
.topbar__id { color: rgba(23, 26, 69, 0.58); }

/* ---- Header ---- */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255, 253, 248, 0.93);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--rule);
	transition: border-color 0.3s ease;
}
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 2rem; min-height: 88px;
	transition: min-height 0.3s ease;
}
.site-header.is-scrolled .site-header__inner { min-height: 62px; }
.site-branding__text { text-decoration: none; display: block; }
.site-branding__name {
	display: block;
	font-family: var(--font-display);
	font-weight: 700; font-size: 1.22rem;
	color: var(--ink); letter-spacing: -0.02em; line-height: 1.1;
}
.site-branding__tagline {
	display: block; font-size: 0.64rem;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--muted); margin-top: 0.2rem;
	transition: opacity 0.25s ease, max-height 0.25s ease;
	max-height: 2rem; overflow: hidden;
}
.site-header.is-scrolled .site-branding__tagline { opacity: 0; max-height: 0; }
/* The mark is a tall-ish illustration, so it needs more height than a
   wordmark would. Shrinks with the header on scroll. */
.custom-logo-link { display: block; }
.custom-logo { max-height: 62px; width: auto; transition: max-height 0.3s ease; }
.site-header.is-scrolled .custom-logo { max-height: 44px; }

.site-nav { display: flex; align-items: center; gap: 2.25rem; }
.nav-menu { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav-menu a {
	position: relative;
	text-decoration: none;
	color: var(--ink-soft);
	font-weight: 500; font-size: 0.88rem;
	letter-spacing: 0.02em;
	padding: 0.4rem 0;
	transition: color 0.2s ease;
}
.nav-menu a::after {
	content: ""; position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1.5px; background: var(--indigo);
	transform: scaleX(0); transform-origin: right;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-menu a:hover { color: var(--ink); }
.nav-menu a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-menu .current-menu-item > a, .nav-menu .current_page_item > a { color: var(--ink); }
.nav-menu .current-menu-item > a::after, .nav-menu .current_page_item > a::after { transform: scaleX(1); }
.site-nav__donate { padding: 0.75rem 1.6rem; font-size: 0.78rem; }

.nav-menu li { position: relative; }
.nav-menu .sub-menu {
	position: absolute; top: 100%; left: -1rem;
	min-width: 220px; background: var(--paper);
	border: 1px solid var(--rule); list-style: none;
	margin: 0; padding: 0.5rem 0;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease;
	box-shadow: 0 16px 40px rgba(23, 26, 69, 0.1);
}
.nav-menu li:hover > .sub-menu, .nav-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu .sub-menu a { display: block; padding: 0.55rem 1.1rem; }
.nav-menu .sub-menu a::after { display: none; }
.nav-menu .sub-menu a:hover { background: var(--paper-deep); }

.nav-toggle { display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer; }
.nav-toggle__bar { display: block; width: 26px; height: 1.5px; background: var(--ink); margin: 6px 0; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
	position: relative;
	/* Top-anchored: the text sits in the sky and treeline so the group
	   photograph below it stays unobstructed. */
	display: flex; align-items: stretch;
	min-height: min(94vh, 900px);
	background: var(--night);
	color: var(--paper);
	overflow: hidden;
	padding-bottom: 9rem; /* room for the overlapping ledger */
}
.hero__media, .hero__media video, .hero__media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
}
/* Scrim for type contrast. Top wash is a full-width band that clears
   before the face row (~26%); bottom wash still carries the CTA row.
   Applied to the media layer so there is no box edge across the photograph. */
.hero__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.42) 0%,
		rgba(0, 0, 0, 0.28) 10%,
		rgba(0, 0, 0, 0.1) 18%,
		rgba(0, 0, 0, 0) 26%,
		rgba(0, 0, 0, 0) 60%,
		rgba(0, 0, 0, 0.28) 70%,
		rgba(0, 0, 0, 0.55) 80%,
		rgba(0, 0, 0, 0.62) 100%
	);
}
.hero--empty { background: radial-gradient(130% 100% at 78% 8%, #4a3a1e 0%, var(--night) 62%); }

/* Desktop: give the landscape frame vertical room so faces sit below the
   headline. (Phones already set their own crop in the 760px query.) */
@media (min-width: 761px) {
	.hero__media picture {
		position: absolute; inset: 0; display: block;
	}
	.hero__media img, .hero__media video {
		height: 120%;
		width: 100%;
		inset: auto;
		left: 0; right: 0;
		top: 0;
		object-fit: cover;
		object-position: center 18%;
	}
}

.hero__inner {
	position: relative; z-index: 1; width: 100%;
	/* Kept short so the headline sits in sky/treeline above the faces,
	   and the shortened top wash does not need to reach them. */
	padding-top: 1.5rem;
	display: flex; flex-direction: column;
}
/* Single column: the hero rail is empty (501(c)(3) lives in the topbar),
   and a left track shoved the centered headline off the true middle. */
.hero__grid { display: grid; grid-template-columns: 1fr; flex: 1; }
.hero__margin { display: none; }
/* Headline pinned top, supporting text and buttons pinned bottom, so the
   middle of the frame — the group itself — is left uncovered. */
.hero__body {
	padding-left: 0;
	display: flex; flex-direction: column; justify-content: space-between;
	align-items: center;
}

.hero__title {
	color: var(--paper);
	font-size: clamp(2.9rem, 8.2vw, 6.6rem);
	font-weight: 600;
	/* 1.1, not the tighter 0.95 this started at: descenders on one line
	   (the y in "Every") hung into the next line's box and were painted
	   over by the scribble highlight. Tighter than this and no highlight
	   can cover the ascenders of "finish" without clipping that tail. */
	line-height: 1.1;
	letter-spacing: -0.035em;
	margin: 0 auto 1.75rem;
	max-width: 14ch;
	text-align: center;
	/* Carries white type once the top photo wash is cut short of the faces.
	   Soft, short shadow — a large blur reads as another dark slab. */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 3px 16px rgba(0, 0, 0, 0.25);
}
.hero__title em {
	font-style: normal; font-weight: 600;
	color: var(--ink);
	background-image: var(--scribble);
	background-repeat: no-repeat;
	/* Sized in em, not %: percentages resolve against the font's content
	   area (~1.23em here), which is taller than the 0.95 line-height, so
	   the patch bled into the line above. */
	background-size: 100% 0.88em;
	background-position: 0 0.17em;
	padding: 0 0.13em;
	margin: 0 -0.03em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	text-shadow: none; /* scribble patch already supplies contrast */
}
.hero__meta {
	display: flex;
	gap: 3.5rem;
	align-items: flex-start;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}
.hero__subtitle {
	font-size: 1.08rem; line-height: 1.6;
	color: var(--yellow);
	max-width: 38ch; margin: 0;
	border-left: 1px solid rgba(255, 189, 89, 0.35);
	padding-left: 1.4rem;
}
.hero__actions {
	display: flex;
	gap: 0.9rem;
	flex-wrap: wrap;
	padding-top: 0.2rem;
}

/* ---- Ledger: stats card overlapping the hero edge ---- */
.ledger { position: relative; z-index: 2; margin-top: -7rem; }
.ledger--flat { margin-top: 0; }
.ledger--flat .ledger__card { box-shadow: none; }
.ledger__card {
	background: var(--paper);
	border: 1px solid var(--rule);
	box-shadow: 0 32px 70px rgba(25, 20, 16, 0.22);
	display: grid;
	grid-template-columns: var(--rail) 1fr;
}
.ledger__margin {
	border-right: 1px solid rgba(37, 48, 194, 0.35);
	padding: 2.5rem 1.25rem;
	display: flex; align-items: flex-start; justify-content: flex-end;
}
.ledger__margin .label { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.ledger__stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat { padding: 2.75rem 2.25rem; border-right: 1px solid var(--rule); }
.stat:last-child { border-right: 0; }
.stat__number {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.8rem, 5.4vw, 4.6rem);
	font-weight: 700; line-height: 0.9;
	letter-spacing: -0.045em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	margin-bottom: 1rem;
}
.stat__label {
	display: block; font-size: 0.86rem; line-height: 1.5;
	color: var(--muted); max-width: 20ch;
}

/* =========================================================
   SECTIONS — the ruled page
   ========================================================= */
.section { padding: 7rem 0; }
.section--tight { padding: 4.5rem 0; }
.section--alt { background: var(--paper-deep); }

/* two-column: notebook margin + content */
.ruled { display: grid; grid-template-columns: var(--rail) 1fr; align-items: start; }
.ruled__margin {
	position: relative;
	align-self: stretch;
	border-right: 1px solid rgba(37, 48, 194, 0.32);
	padding: 0.4rem 1.5rem 0 0;
	display: flex; justify-content: flex-end; align-items: flex-start;
}
.ruled__margin .label { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.ruled__body { padding-left: 3rem; min-width: 0; }

.section__title {
	font-size: clamp(2.1rem, 5vw, 3.7rem);
	max-width: 17ch; margin-bottom: 0.6em;
}
.section__lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 52ch; }

/* ---- Mission: actual ruled paper, written on ---- */
.mission { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4rem; align-items: start; }
.mission__text {
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent calc(var(--rhythm) - 1px),
		rgba(23, 26, 69, 0.085) calc(var(--rhythm) - 1px),
		rgba(23, 26, 69, 0.085) var(--rhythm)
	);
	background-position: 0 0.55rem;
	padding-bottom: 0.5rem;
}
.mission__text .section__title { line-height: calc(var(--rhythm) * 1.5); margin-bottom: var(--rhythm); }
.mission__text p { line-height: var(--rhythm); margin-bottom: var(--rhythm); color: var(--ink-soft); }
.mission__text p:last-of-type { margin-bottom: calc(var(--rhythm) * 1.5); }
.mission__media { position: relative; }
.mission__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.mission__media figcaption {
	font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--muted); margin-top: 0.9rem; padding-left: 0.1rem;
}
.mission__placeholder {
	aspect-ratio: 4 / 5;
	background: radial-gradient(circle at 32% 26%, rgba(255, 189, 89, 0.35), transparent 58%), var(--paper-deep);
	border: 1px solid var(--rule);
}

/* =========================================================
   PROGRAMS — editorial rows, not a card deck
   ========================================================= */
.programs { border-top: 1px solid var(--rule); }
.program {
	display: grid;
	grid-template-columns: var(--rail) 1.35fr 1fr auto;
	gap: 2.5rem;
	align-items: baseline;
	padding: 2.9rem 0;
	border-bottom: 1px solid var(--rule);
	text-decoration: none;
	color: inherit;
	transition: background 0.35s ease, padding 0.35s ease;
}
/* Touch devices emulate :hover on the last thing tapped, so a row stays
   highlighted after the tap. Fine on a pointer, misleading on a phone. */
@media (hover: hover) {
	.program:hover { background: rgba(255, 189, 89, 0.07); }
}
.program__index {
	font-family: var(--font-display);
	font-size: 0.78rem; font-weight: 600;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--indigo);
	padding-right: 1.5rem;
	text-align: right;
	border-right: 1px solid rgba(37, 48, 194, 0.32);
	align-self: stretch;
}
.program__headline { padding-left: 0.5rem; }
.program__country {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 2.9vw, 2.35rem);
	font-weight: 600; letter-spacing: -0.03em;
	line-height: 1.05; margin: 0 0 0.6rem;
	color: var(--ink);
	max-width: 15ch;
	transition: color 0.3s ease;
}
.program:hover .program__country { color: var(--indigo); }
.program__sub {
	display: block;
	font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--muted); margin: 0;
}
.program__text { font-size: 0.95rem; color: var(--ink-soft); margin: 0; max-width: 38ch; }
.program__figure { text-align: right; min-width: 13rem; }
.program__stat {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 4.6vw, 3.6rem);
	font-weight: 700; line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.program__stat-label {
	display: block; font-size: 0.78rem; line-height: 1.5;
	color: var(--muted); margin-top: 0.8rem; max-width: 26ch;
	margin-left: auto;
}

/* Attribution under the figure. Not a link — the card itself is one —
   so it carries none of .src's link affordances, only its small-caps
   voice, and stays quiet enough that the figure still leads. */
.program__src {
	display: block;
	margin-top: 0.6rem;
	margin-left: auto;
	max-width: 26ch;
	font-family: var(--font-body);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--muted);
}

/* =========================================================
   SPOTLIGHT — dark, portrait bleeding past the margin
   ========================================================= */
.spotlight { background: var(--night); color: var(--paper); padding: 8rem 0; overflow: hidden; }
.spotlight__grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 5rem; align-items: center;
}
.spotlight__media { position: relative; margin-left: -6rem; }
.spotlight__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.spotlight__media::after {
	content: ""; position: absolute;
	inset: 1.5rem -1.5rem -1.5rem 1.5rem;
	border: 1px solid rgba(255, 189, 89, 0.4);
	pointer-events: none;
}
.spotlight__media .mission__placeholder { background: rgba(255, 253, 248, 0.06); border-color: rgba(255, 253, 248, 0.12); }
.spotlight .label { color: var(--yellow); margin-bottom: 2rem; }
.spotlight__quote {
	font-family: var(--font-display);
	font-style: italic; font-weight: 400;
	font-size: clamp(1.6rem, 3.5vw, 2.75rem);
	line-height: 1.28; letter-spacing: -0.02em;
	color: var(--paper);
	margin: 0 0 2.25rem;
}
.spotlight__quote .line { display: block; }
.spotlight__cite {
	font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: rgba(255, 253, 248, 0.55); margin: 0 0 2.5rem;
}
.spotlight__cite strong { color: var(--yellow); font-weight: 600; }
.spotlight .text-link { color: var(--paper); border-color: rgba(255, 253, 248, 0.3); }
.spotlight .text-link:hover { color: var(--yellow); border-color: var(--yellow); }

/* =========================================================
   STORIES — asymmetric: one lead, two stacked
   ========================================================= */
.stories { display: grid; grid-template-columns: 1.25fr 1fr; gap: 3.5rem; }
.stories__rest { display: flex; flex-direction: column; gap: 2.5rem; }
.story { text-decoration: none; color: inherit; display: block; }
.story__media { overflow: hidden; margin-bottom: 1.25rem; background: var(--paper-deep); }
.story__media img { width: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) {
	.story:hover .story__media img { transform: scale(1.04); }
}
.story--lead .story__media img {
	aspect-ratio: 5 / 4;
	/* Senior-class photos frame faces high; anchor toward the top so cover crop keeps heads in view. */
	object-position: center 5%;
}
.story__title {
	font-size: 1.35rem; margin: 0 0 0.5rem;
	transition: color 0.25s ease;
}
.story--lead .story__title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.story:hover .story__title { color: var(--indigo); }
.story__text { color: var(--muted); font-size: 0.95rem; margin: 0; max-width: 46ch; }
.story--small { display: grid; grid-template-columns: 8rem 1fr; gap: 1.5rem; align-items: start; }
.story--small .story__media { margin-bottom: 0; }
.story--small .story__media img { aspect-ratio: 1 / 1; }
.story--small .story__title { font-size: 1.12rem; }

/* card grid retained for archives */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; }
.card { display: flex; flex-direction: column; }
.card__media { display: block; overflow: hidden; margin-bottom: 1.1rem; background: var(--paper-deep); }
.card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.5s ease; }
@media (hover: hover) {
	.card:hover .card__media img { transform: scale(1.04); }
}
.card__title { font-size: 1.28rem; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--indigo); }
.card__text { color: var(--muted); font-size: 0.95rem; flex: 1; margin: 0; }

/* film cards: 16/9 poster frame with a play badge */
.card__media--film { position: relative; }
.card__media--film img { aspect-ratio: 16 / 9; }
.card__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 50%;
	background: rgba(23, 26, 69, 0.72);
	border: 1px solid rgba(255, 253, 248, 0.5);
	transition: background 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.card__play::after {
	content: "";
	position: absolute;
	left: 55%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 0.52rem 0 0.52rem 0.88rem;
	border-color: transparent transparent transparent var(--paper);
}
@media (hover: hover) {
	.card:hover .card__play { background: var(--indigo); transform: translate(-50%, -50%) scale(1.08); }
}

/* ---- Video embed ---- */
.video-embed { position: relative; aspect-ratio: 16 / 9; margin-bottom: 2.5rem; background: var(--paper-deep); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Gallery ---- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; }
.gallery-item { margin: 0; }
.gallery-item__link {
	display: block; overflow: hidden; cursor: zoom-in;
	background: var(--paper-deep);
}
.gallery-item__link img {
	display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	/* Faces sit high in these frames — same top anchor as the card grid. */
	object-position: center 20%;
	transition: transform 0.5s ease;
}
@media (hover: hover) {
	.gallery-item__link:hover img { transform: scale(1.04); }
}
.gallery-item__link:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }
.gallery-item__caption { color: var(--muted); font-size: 0.88rem; margin-top: 0.6rem; }

/* ---- Lightbox ---- */
body.has-lightbox { overflow: hidden; }
.lightbox {
	position: fixed; inset: 0; z-index: 200;
	display: none; align-items: center; justify-content: center;
	padding: clamp(1rem, 5vw, 4rem);
	background: rgba(16, 19, 53, 0.94);
}
.lightbox.is-open { display: flex; }
.lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lightbox__image {
	display: block; margin: 0 auto;
	max-width: 100%; max-height: 78vh; width: auto; height: auto;
}
.lightbox__caption { color: rgba(255, 253, 248, 0.78); font-size: 0.9rem; margin-top: 1rem; }
.lightbox__close, .lightbox__nav {
	/* Above the figure: both are absolutely positioned, and the figure comes
	   later in the DOM, so without this it paints over the arrows. */
	position: absolute; z-index: 1;
	border: 0; background: none; cursor: pointer;
	color: var(--paper); line-height: 1;
	padding: 0.5rem 0.9rem;
	transition: opacity 0.2s ease;
}
.lightbox__close:hover, .lightbox__nav:hover { opacity: 0.6; }
.lightbox__close { top: 1rem; right: 1.25rem; font-size: 2.4rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 3.4rem; }
.lightbox__nav--prev { left: 0.25rem; }
.lightbox__nav--next { right: 0.25rem; }
.lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* ---- Trust badges ---- */
/* One per row, full width. Three of the four marks are square seals with type
   set inside them — GuideStar's reads around the rim — so anything narrower
   than this shrinks them to a shape you recognise rather than a seal you can
   actually read. */
.badges {
	list-style: none; margin: 2.5rem 0 0; padding: 0;
	display: grid; grid-template-columns: 1fr;
	gap: 0; border-top: 1px solid var(--rule);
}
.badge {
	display: grid; grid-template-columns: 260px 1fr;
	gap: 2.75rem; align-items: center;
	padding: 2.75rem 0;
	border-bottom: 1px solid var(--rule);
}
/* A fixed box the marks are contained in: the square seals fill its height,
   the Together Women Rise wordmark (3.4:1) fills its width, and both land
   optically the same size instead of one dwarfing the other. */
.badge__mark {
	display: flex; align-items: center; justify-content: flex-start;
	height: 160px;
}
.badge__mark img {
	max-height: 100%; max-width: 100%;
	width: auto; height: auto; object-fit: contain;
}
.badge__body { display: block; }
.badge__name {
	display: block;
	font-family: var(--font-display); font-size: 1.35rem;
	font-weight: 600; margin-bottom: 0.5rem;
}
/* Measure, not column width — a full-width row would otherwise set these
   three lines across 700px. */
.badge__text { display: block; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; max-width: 58ch; }

/* ---- Marquee ---- */
.marquee {
	overflow: hidden;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	padding: 1.5rem 0;
	background: var(--paper);
}
.marquee__track { display: flex; gap: 3.25rem; width: max-content; animation: marquee 52s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
	white-space: nowrap;
	font-family: var(--font-display);
	font-size: 1rem; color: var(--ink-soft);
	display: inline-flex; align-items: baseline; gap: 0.65rem;
}
.marquee__item em {
	font-style: normal; color: var(--indigo);
	font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
	font-family: var(--font-body); font-weight: 600;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Team ---- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem 2rem; margin-bottom: 4rem; }
.team-card__media { display: block; overflow: hidden; margin-bottom: 1rem; background: var(--paper-deep); }
.team-card__media img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; transition: transform 0.5s ease; }
@media (hover: hover) {
	.team-card__media:hover img { transform: scale(1.04); }
}
.team-card__placeholder { display: block; aspect-ratio: 4 / 5; background: var(--paper-deep); border: 1px solid var(--rule); }
.team-card__name { font-size: 1.08rem; margin-bottom: 0.15em; }
.team-card__name a { color: inherit; text-decoration: none; }
.team-card__role { font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0; }

/* ---- School columns (archive fallback) ---- */
.school-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.school-columns__country { font-size: 1.15rem; border-bottom: 1px solid var(--indigo); padding-bottom: 0.5rem; }
.school-columns__list { list-style: none; margin: 0; padding: 0; }
.school-columns__list li { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); font-size: 0.95rem; }
.school-columns__where { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.15rem; }

/* ---- Interior page hero ---- */
.page-hero { padding: 6rem 0 3rem; }
.page-hero .ruled__body { padding-left: 3rem; }
.page-hero__title { font-size: clamp(2.3rem, 5.5vw, 4rem); margin: 0; max-width: 18ch; }
.page-hero__meta { color: var(--muted); margin: 1rem 0 0; max-width: 54ch; }
.page-featured { margin-bottom: 2.5rem; }
.entry-content h2 { margin-top: 1.7em; font-size: 1.6rem; }
.entry-content { font-size: 1.08rem; }

/* ---- CTA ---- */
.cta-band { background: var(--yellow); padding: 6rem 0; }
.cta-band__inner { display: grid; grid-template-columns: var(--rail) 1.4fr auto; gap: 3rem; align-items: center; }
.cta-band__margin {
	align-self: stretch;
	border-right: 1px solid rgba(23, 26, 69, 0.28);
	display: flex; justify-content: flex-end; padding-right: 1.5rem;
}
.cta-band__margin .label { color: rgba(23, 26, 69, 0.65); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.cta-band__body { padding-left: 0.5rem; }
.cta-band__title { font-size: clamp(2rem, 4.4vw, 3.2rem); color: var(--ink); margin-bottom: 0.4em; max-width: 16ch; }
.cta-band__text { color: rgba(23, 26, 69, 0.72); max-width: 44ch; margin: 0; }
/* red on yellow needs a hard edge to separate the two brand colours */
.cta-band .button--primary { border-color: var(--ink); }
.cta-band .button--primary:hover { color: var(--ink); }
.cta-band .button--primary::after { background: var(--yellow); }

/* ---- Footer ---- */
.site-footer { background: var(--night); color: rgba(255, 253, 248, 0.68); font-size: 0.92rem; }
.site-footer a { color: rgba(255, 253, 248, 0.82); text-decoration: none; transition: color 0.2s ease; }
.site-footer a:hover { color: var(--yellow); }
.site-footer__grid {
	display: grid; grid-template-columns: 2.4fr 1fr 1fr 1fr;
	gap: 3.5rem; padding-top: 5rem; padding-bottom: 4rem;
}
.footer-widget__title {
	color: var(--paper); font-size: 0.72rem;
	letter-spacing: 0.16em; text-transform: uppercase;
	font-family: var(--font-body); font-weight: 600;
	margin-bottom: 1.4rem;
}
.site-footer__brand {
	font-family: var(--font-display); font-size: 1.5rem;
	color: var(--paper); letter-spacing: -0.02em;
	margin-bottom: 1rem; line-height: 1.15; max-width: 14ch;
}
.site-footer__meta { font-size: 0.85rem; line-height: 1.9; color: rgba(255, 253, 248, 0.55); }
.footer-menu, .social-links, .footer-list { list-style: none; margin: 0; padding: 0; }
.footer-menu li, .social-links li, .footer-list li { padding: 0.35rem 0; }
.site-footer__bottom {
	border-top: 1px solid rgba(255, 253, 248, 0.1);
	padding: 1.5rem 0; font-size: 0.78rem;
	color: rgba(255, 253, 248, 0.45);
}
.site-footer__bottom .container { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.site-footer__bottom p { margin: 0; }

/* ---- Pagination ---- */
.pagination { margin-top: 3.5rem; }
.pagination .nav-links { display: inline-flex; gap: 0.5rem; }
.pagination .page-numbers {
	display: inline-block; padding: 0.6rem 1rem;
	border: 1px solid var(--rule); text-decoration: none; color: var(--ink);
	font-size: 0.85rem;
}
.pagination .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* =========================================================
   INTERIOR PAGES
   ========================================================= */

/* ---- Long-form prose ---- */
.article-body { font-size: 1.08rem; max-width: 68ch; }
.article-body > *:first-child { margin-top: 0; }
.article-body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2.2em 0 0.6em; }
.article-body h3 { font-size: 1.25rem; margin: 1.8em 0 0.5em; }
.article-body p { margin-bottom: 1.35em; color: var(--ink-soft); }
.article-body ul, .article-body ol { color: var(--ink-soft); padding-left: 1.2em; margin-bottom: 1.35em; }
.article-body li { margin-bottom: 0.5em; }
.article-body blockquote {
	margin: 2em 0; padding-left: 1.5rem;
	border-left: 2px solid var(--indigo);
	font-family: var(--font-display); font-style: italic;
	font-size: 1.3rem; line-height: 1.4; color: var(--ink);
}
.article-body a { color: var(--indigo); text-underline-offset: 3px; }
.article-kicker {
	font-size: 0.72rem; font-weight: 600;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--indigo); margin: 0 0 1rem;
}
.back-link { margin-top: 3rem; }
.empty-note { color: var(--muted); }
.link-list { list-style: none; padding: 0; margin: 2rem 0 0; }
.link-list li { padding: 0.7rem 0; border-bottom: 1px solid var(--rule); }
.link-list a { color: var(--ink); text-decoration: none; font-weight: 500; }
.link-list a:hover { color: var(--indigo); }

/* ---- Jump nav (Programs) ---- */
.jump-nav { display: flex; gap: 1.75rem; margin-top: 2rem; flex-wrap: wrap; }
.jump-nav a {
	font-size: 0.78rem; font-weight: 600;
	letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--ink-soft); text-decoration: none;
	padding-bottom: 0.4rem; border-bottom: 1px solid var(--rule);
	transition: color 0.2s ease, border-color 0.2s ease;
}
.jump-nav a:hover { color: var(--indigo); border-color: var(--indigo); }

/* ---- Principles / value grid ---- */
.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; margin-top: 2.5rem; }
.principle__title { font-size: 1.25rem; margin-bottom: 0.4em; }
.principle__text { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }

/* ---- Timeline ---- */
.timeline { list-style: none; margin: 3rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.timeline__item {
	display: grid; grid-template-columns: 8rem 1fr;
	gap: 2.5rem; padding: 2.25rem 0;
	border-bottom: 1px solid var(--rule);
}
.timeline__year {
	font-family: var(--font-display);
	font-size: 1.5rem; font-weight: 700;
	letter-spacing: -0.02em; color: var(--indigo);
	line-height: 1;
}
.timeline__title { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; margin-bottom: 0.4rem; }
.timeline__text { display: block; color: var(--ink-soft); font-size: 0.98rem; max-width: 60ch; }

/* ---- Country sections (Programs) ---- */
.country__cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3.5rem; margin-top: 1.5rem; }
.country__prose p { color: var(--ink-soft); }
.country__figures { display: flex; flex-direction: column; gap: 2rem; }
.figure { border-left: 3px solid var(--yellow); padding-left: 1.25rem; }
.figure__value {
	display: block; font-family: var(--font-display);
	font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700;
	line-height: 0.95; letter-spacing: -0.04em; color: var(--ink);
}
.figure__label { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 0.6rem; }

/* ---- Covers list ---- */
.covers { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.covers li {
	padding: 1rem 0; border-bottom: 1px solid var(--rule);
	font-size: 0.98rem; display: flex; align-items: baseline; gap: 0.75rem;
}
.covers li::before { content: "—"; color: var(--indigo); }
.covers--tight { grid-template-columns: 1fr; margin-top: 1rem; border-top: 0; }
.covers--tight li { padding: 0.5rem 0; font-size: 0.92rem; border-bottom: 1px solid var(--rule); }

/* ---- Criteria ---- */
.criteria { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: crit; }
.criteria li {
	counter-increment: crit;
	padding: 1.1rem 0 1.1rem 3rem;
	border-bottom: 1px solid var(--rule);
	position: relative; color: var(--ink-soft);
}
.criteria li::before {
	content: counter(crit, decimal-leading-zero);
	position: absolute; left: 0; top: 1.15rem;
	font-family: var(--font-display); font-size: 0.85rem;
	font-weight: 600; color: var(--indigo);
}

/* ---- Bar chart (Impact) ---- */
.bars { margin-top: 2.5rem; }
.bar-row {
	display: grid; grid-template-columns: 1fr 2fr auto;
	gap: 1.75rem; align-items: center;
	padding: 1.4rem 0; border-bottom: 1px solid var(--rule);
}
.bar-row:first-child { border-top: 1px solid var(--rule); }
.bar-row__head { min-width: 0; }
.bar-row__label { display: block; font-size: 0.95rem; line-height: 1.4; }
.bar-row__note {
	display: block; font-size: 0.68rem; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--muted); margin-top: 0.35rem;
}
.bar-track { height: 10px; background: rgba(23, 26, 69, 0.08); position: relative; }
.bar-fill {
	position: absolute; inset: 0 auto 0 0;
	width: 0; background: var(--red);
	transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.bar-row--good .bar-fill { background: var(--indigo); }
.bar-row__value {
	font-family: var(--font-display); font-size: 1.5rem;
	font-weight: 700; letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right;
}
.bars__caption { margin-top: 1.75rem; font-size: 0.95rem; color: var(--muted); max-width: 62ch; }

/* ---- Contrast: one question, two answers ----
   The two Kenya child-marriage figures are a single comparison. Listed
   as two bar rows they read as the same row twice, because the shared
   half of each label ("girls … married before 18") is longer than the
   half that differs. Here the shared part is the heading, stated once,
   and each side carries only what changes. */
.contrast {
	margin-top: 2.5rem;
	padding: 1.9rem 2rem;
	background: var(--paper-deep);
	border-top: 2px solid var(--ink);
}
.contrast__question {
	font-family: var(--font-display);
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0 0 1.35rem;
}
/* Both sides share the grid's rows rather than each stacking its own, so
   the two figures stay on one baseline even when the longer condition
   wraps. Reserving a fixed two-line height instead would pay for the
   wrap at every width, including the ones where it never happens. */
.contrast__pair {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: auto auto auto;
	align-items: start;
	column-gap: 2rem;
	row-gap: 0.6rem;
}
.contrast__side { display: contents; }
.contrast__side > .contrast__cond   { grid-row: 1; }
.contrast__side > .contrast__figure { grid-row: 2; }
.contrast__side > .contrast__meter  { grid-row: 3; }
.contrast__side > * { grid-column: 1; }
.contrast__side--good > * { grid-column: 3; }
.contrast__cond {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	align-self: end;
}
/* Figure and gloss share a baseline, so the plain-language reading sits
   beside the percentage instead of adding a row under it. */
.contrast__figure { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.contrast__value {
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 5.5vw, 3.4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--red);
}
.contrast__pc { font-size: 0.45em; margin-left: 0.1em; vertical-align: 0.55em; }
.contrast__side--good .contrast__value { color: var(--indigo); }
.contrast__meter {
	display: block;
	height: 9px;
	margin-top: 0.25rem;
	background: rgba(23, 26, 69, 0.08);
}
.contrast__meter > span { display: block; height: 100%; background: var(--red); }
.contrast__side--good .contrast__meter > span { background: var(--indigo); }
.contrast__gloss { font-size: 0.88rem; color: var(--muted); }
/* Row 2 is the figures' row, so the arrow points between them without
   being nudged into place by hand. */
.contrast__arrow {
	grid-column: 2;
	grid-row: 2;
	align-self: center;
	font-size: 1.4rem;
	color: var(--muted);
}
.contrast__note {
	margin: 1.5rem 0 0;
	font-size: 0.92rem;
	color: var(--muted);
	max-width: 62ch;
}

@media (max-width: 760px) {
	.contrast { padding: 1.5rem 1.25rem; }
	.contrast__pair { display: block; }
	/* Stacked, each side owns its own box again — the shared-row alignment
	   is meaningless once the two are one above the other. */
	.contrast__side { display: flex; flex-direction: column; gap: 0.4rem; }
	/* align-self:end bottom-aligns the label in its grid row; in a flex
	   column the cross axis is horizontal, so left unchanged it would
	   right-align the label instead. */
	.contrast__cond { align-self: auto; }
	.contrast__arrow {
		display: block;
		/* Width must match the glyph. Rotating a full-width block turns a
		   292px-wide box into a 292px-tall one and tears a hole in the
		   layout, since the untransformed box is what gets reserved. */
		width: 1em;
		margin: 1.1rem 0;
		transform: rotate(90deg);
	}
}

/* ---- Annual report card ---- */
.report {
	display: grid; grid-template-columns: 8.5rem 1fr;
	gap: 2rem; align-items: center;
	margin: 2.5rem 0 3rem;
	padding: 1.75rem; text-decoration: none; color: inherit;
	background: var(--paper-deep);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--yellow);
	transition: border-color 0.2s ease, transform 0.3s ease;
}
@media (hover: hover) {
	.report:hover { border-color: var(--indigo); border-left-color: var(--yellow); transform: translateY(-2px); }
}
.report__cover { display: block; background: var(--paper); border: 1px solid var(--rule); }
.report__cover img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
/* No cover uploaded — the year set large stands in for one. */
.report__cover-fallback {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 3 / 4;
	font-family: var(--font-display); font-size: 1.9rem; font-weight: 700;
	letter-spacing: -0.03em; color: var(--indigo);
}
.report__body { display: block; }
.report__title { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin: 0.5rem 0 0.4rem; }
.report__text { display: block; color: var(--ink-soft); font-size: 0.98rem; max-width: 56ch; }
.report__cue {
	display: inline-block; margin-top: 0.9rem;
	font-size: 0.78rem; font-weight: 600;
	letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--indigo); border-bottom: 1px solid var(--indigo);
	padding-bottom: 0.2rem;
}

/* ---- Filings table ---- */
.filings { margin-top: 2.5rem; overflow-x: auto; }
.filing-table__pending { color: var(--muted); font-style: italic; }
.filing-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.filing-table th, .filing-table td { text-align: left; padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--rule); }
.filing-table thead th {
	font-family: var(--font-body); font-size: 0.68rem; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
	border-bottom-color: var(--ink);
}
.filing-table tbody th { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; width: 8rem; }
.filing-table td a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.filing-table td a:hover { color: var(--indigo); border-color: var(--indigo); }

/* ---- Blog list ---- */
.post-list { border-top: 1px solid var(--rule); }
.post-row {
	display: grid; grid-template-columns: 10rem 1fr;
	gap: 2.5rem; padding: 2.25rem 0;
	border-bottom: 1px solid var(--rule);
}
.post-row__meta { font-size: 0.78rem; color: var(--muted); }
.post-row__cat {
	display: block; margin-top: 0.5rem;
	font-size: 0.66rem; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--indigo);
}
.post-row__title { font-size: 1.5rem; margin-bottom: 0.4rem; }
.post-row__title a { color: inherit; text-decoration: none; }
.post-row__title a:hover { color: var(--indigo); }
.post-row__excerpt { color: var(--ink-soft); font-size: 0.98rem; max-width: 62ch; margin-bottom: 1rem; }

.related { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); }
.related__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 1.25rem; }
.related__item { text-decoration: none; display: block; }
.related__date { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.related__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.related__item:hover .related__title { color: var(--indigo); }

/* ---- Team blocks ---- */
.team-block { margin-bottom: 3.5rem; }

/* ---- Profile ---- */
.profile { display: grid; grid-template-columns: 300px 1fr; gap: 3rem; align-items: start; }
.profile__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* =========================================================
   DONATE
   ========================================================= */
.donate { display: grid; grid-template-columns: 1.6fr 1fr; gap: 4rem; align-items: start; }

.give-picker__group { border: 0; padding: 0; margin: 0 0 2.5rem; }
.give-picker__group legend { padding: 0; margin-bottom: 1rem; }

/* frequency segmented control */
.segmented { display: inline-flex; border: 1px solid var(--ink); flex-wrap: wrap; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented label {
	padding: 0.75rem 1.4rem;
	font-size: 0.82rem; font-weight: 600;
	letter-spacing: 0.05em; text-transform: uppercase;
	cursor: pointer; color: var(--ink-soft);
	border-right: 1px solid var(--rule);
	transition: background 0.2s ease, color 0.2s ease;
}
.segmented label:last-of-type { border-right: 0; }
.segmented input:checked + label { background: var(--ink); color: var(--paper); }
.segmented input:focus-visible + label { outline: 2px solid var(--indigo); outline-offset: 2px; }
@media (hover: hover) {
	.segmented label:hover { background: rgba(23, 26, 69, 0.06); }
	.segmented input:checked + label:hover { background: var(--ink); }
}

/* tier cards */
.tiers { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.tier__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tier {
	display: grid;
	grid-template-columns: 8.5rem 1fr;
	gap: 1.5rem;
	align-items: baseline;
	padding: 1.6rem 1.25rem 1.6rem 0;
	border-bottom: 1px solid var(--rule);
	cursor: pointer;
	position: relative;
	transition: background 0.25s ease, padding-left 0.25s ease;
}
.tier::before {
	content: "";
	position: absolute; left: 0; top: 0; bottom: -1px;
	width: 3px; background: transparent;
	transition: background 0.25s ease;
}
/* Same reason as .program, and worse here: a stuck hover on a tier is
   indistinguishable from the selected state below it. */
@media (hover: hover) {
	.tier:hover { background: rgba(255, 189, 89, 0.07); }
}
.tier__input:checked + .tier { background: rgba(255, 189, 89, 0.12); padding-left: 1.25rem; }
.tier__input:checked + .tier::before { background: var(--cta); }
.tier__input:focus-visible + .tier { outline: 2px solid var(--indigo); outline-offset: 2px; }
.tier__amount {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 700; letter-spacing: -0.035em;
	color: var(--ink); font-variant-numeric: tabular-nums;
	line-height: 1;
}
.tier__body { min-width: 0; }
.tier__title { display: block; font-weight: 600; font-size: 1rem; margin-bottom: 0.3rem; }
.tier__desc { display: block; font-size: 0.92rem; color: var(--muted); max-width: 48ch; }
.tier--custom { align-items: center; }
.tier__field { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.75rem; }
.tier__currency { font-family: var(--font-display); font-size: 1.2rem; color: var(--muted); }
.tier__field input {
	font-family: var(--font-body); font-size: 1rem;
	padding: 0.6rem 0.75rem; width: 10rem;
	border: 1px solid var(--rule); background: var(--paper);
	color: var(--ink);
}
.tier__field input:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }

.give-picker__submit { margin-top: 2.25rem; }
.give-picker__note { margin-top: 1rem; font-size: 0.82rem; color: var(--muted); max-width: 48ch; }

.donate__panel { padding: 1.75rem 0; border-top: 1px solid var(--rule); }
.donate__panel:first-child { padding-top: 0; border-top: 0; }
.donate__fine { font-size: 0.88rem; color: var(--muted); line-height: 1.7; }

/* DAF Direct renders its own markup; we only give it room and keep it from
   overflowing the narrow aside column. */
.dafdirect { margin-top: 1.25rem; max-width: 26rem; }
.dafdirect img { max-width: 100%; height: auto; }
.dafdirect select,
.dafdirect input { max-width: 100%; }
/* DAF Direct's own stylesheet hardcodes these children wider (202–210px) than
   the 174px content column inside its 212px box, so they hang over the border.
   Letting them size to the column fixes both the collapsed and expanded states. */
.dafdirect #showwhatisthis,
.dafdirect #closewhatisthis,
.dafdirect .dafdirectscroll { width: auto; max-width: 100%; }

/* =========================================================
   MOTION
   ========================================================= */
@keyframes gtl-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero [data-hero-fade] { animation: gtl-rise 0.95s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero [data-hero-fade]:nth-child(2) { animation-delay: 0.1s; }
.hero [data-hero-fade]:nth-child(3) { animation-delay: 0.2s; }
.hero__grid [data-hero-fade] { animation-delay: 0.15s; }

.js [data-reveal] {
	opacity: 0; transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

.js [data-quote-lines] .line {
	opacity: 0; transform: translateY(18px);
	transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.js [data-quote-lines].is-revealed .line { opacity: 1; transform: none; }
.js [data-quote-lines].is-revealed .line:nth-child(2) { transition-delay: 0.2s; }
.js [data-quote-lines].is-revealed .line:nth-child(3) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.marquee__track { animation: none; flex-wrap: wrap; width: auto; }
	.hero [data-hero-fade] { animation: none; }
	.js [data-reveal], .js [data-quote-lines] .line { opacity: 1; transform: none; }
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px) {
	:root { --rail: 5.5rem; }
	.ruled__body { padding-left: 2rem; }
	.hero__body { padding-left: 0; } /* centered headline — no rail offset */
	.mission { grid-template-columns: 1fr; gap: 3rem; }
	.mission__media { max-width: 460px; }
	.spotlight__grid { grid-template-columns: 1fr; gap: 3rem; }
	.spotlight__media { margin-left: 0; max-width: 420px; }
	.spotlight__media::after { inset: 1rem -1rem -1rem 1rem; }
	.stories { grid-template-columns: 1fr; gap: 3rem; }
	.card-grid, .school-columns, .gallery-grid { grid-template-columns: repeat(2, 1fr); }
	.team-grid { grid-template-columns: repeat(3, 1fr); }
	.program { grid-template-columns: var(--rail) 1fr auto; gap: 1.75rem; }
	.program__text { display: none; }
	.principles, .related__list { grid-template-columns: 1fr; }
	.country__cols { grid-template-columns: 1fr; gap: 2.5rem; }
	.country__figures { flex-direction: row; gap: 2.5rem; }
	.covers { grid-template-columns: repeat(2, 1fr); }
	.badge { grid-template-columns: 200px 1fr; gap: 2rem; padding: 2.25rem 0; }
	.badge__mark { height: 128px; }
	.donate { grid-template-columns: 1fr; gap: 3rem; }
	.profile { grid-template-columns: 1fr; gap: 2rem; }
	.profile__media { max-width: 300px; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.cta-band__inner { grid-template-columns: var(--rail) 1fr; }
	.cta-band__action { grid-column: 2; }
}

@media (max-width: 760px) {
	:root { --rail: 0px; }
	.container { padding: 0 1.35rem; }
	.nav-toggle { display: block; }
	.site-header__inner { min-height: 64px; }
	/* The desktop mark is 62px, which in a 64px bar left a single pixel of air
	   above and below it — the logo read as stuck to the banner. Sized so the
	   header holds it rather than the other way round. The is-scrolled pair
	   needs the same specificity as the base rules or the mark grows on
	   scroll instead of shrinking. */
	.custom-logo { max-height: 42px; }
	.site-header.is-scrolled .site-header__inner { min-height: 54px; }
	.site-header.is-scrolled .custom-logo { max-height: 34px; }
	.site-branding__name { font-size: 1.02rem; }
	.site-branding__tagline { display: none; }
	.site-nav {
		display: none;
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--paper); border-bottom: 1px solid var(--rule);
		flex-direction: column; align-items: stretch;
		padding: 1rem 1.35rem 1.75rem; gap: 1rem;
		box-shadow: 0 20px 40px rgba(23, 26, 69, 0.14);
		/* A menu with sub-items can outgrow a short phone in landscape;
		   without this the last items are unreachable. */
		max-height: calc(100dvh - 4rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.site-nav.is-open { display: flex; }
	.nav-menu { flex-direction: column; gap: 0; }
	.nav-menu a { display: block; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
	.nav-menu a::after { display: none; }
	.nav-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding-left: 1rem; }
	.site-nav__donate { text-align: center; }

	/* Soft full-frame wash; the typed bands below do the real contrast work
	   so the mid-frame subjects stay readable as a photograph. */
	.hero__media::after {
		background: linear-gradient(to bottom,
			rgba(0, 0, 0, 0.52) 0%,
			rgba(0, 0, 0, 0.25) 14%,
			rgba(0, 0, 0, 0.08) 24%,
			rgba(0, 0, 0, 0) 36%,
			rgba(0, 0, 0, 0) 64%,
			rgba(0, 0, 0, 0.22) 80%,
			rgba(0, 0, 0, 0.58) 100%);
	}
	/* Portrait crop is wider than the tall phone frame, so object-position
	   alone cannot move faces. Oversizing the image gives a vertical slice
	   we can choose — subjects land in the open band between title and CTAs. */
	.hero__media picture {
		position: absolute; inset: 0; display: block;
	}
	.hero__media img, .hero__media video {
		height: 132%;
		width: 100%;
		inset: auto;
		left: 0; right: 0;
		top: 0;
		object-fit: cover;
		object-position: center 20%;
	}
	/* Scrims attached to the two type elements rather than to percentage
	   stops on the section — the hero's height varies with the viewport, and
	   a stop that sat under the headline on one phone sat above it on
	   another. Each band fades out in rem, so it stays sized to its text and
	   leaves the middle of the frame — the faces — untouched. */
	.hero__title, .hero__actions { position: relative; }
	.hero__title::before, .hero__actions::before {
		content: "";
		position: absolute;
		/* Full viewport width: the title is only ~14ch, so left/right
		   padding offsets left a bright strip down the side. Center a
		   100vw band on the (now centered) type instead. */
		left: 50%;
		width: 100vw;
		margin-left: -50vw;
		right: auto;
		z-index: -1; /* inside .hero__inner's stacking context: over the photo, under the type */
	}
	/* Headline band: reaches up through the header, cuts off quickly below
	   the last line so the scribble does not cast a dark slab over faces. */
	.hero__title::before {
		top: -5.5rem; bottom: -1.35rem;
		background: linear-gradient(to bottom,
			rgba(0, 0, 0, 0.74) 0,
			rgba(0, 0, 0, 0.6) calc(100% - 1.35rem),
			rgba(0, 0, 0, 0) 100%);
	}
	/* Button band: shallower, and carried down through the hero's bottom
	   padding so it meets the ledger card rather than stopping short. */
	.hero__actions::before {
		top: -2.25rem; bottom: -6.5rem;
		background: linear-gradient(to top,
			rgba(0, 0, 0, 0.7) 0,
			rgba(0, 0, 0, 0.62) 55%,
			rgba(0, 0, 0, 0) 100%);
	}
	.hero {
		/* svh, not vh: on iOS vh counts the retracted browser chrome, which
		   pushed the buttons under the address bar on first paint. */
		min-height: 84svh;
		/* 5rem left the ledger card's top edge sitting on the CTA row once it
		   pulled up by 4rem. */
		padding-bottom: 6.5rem;
	}
	/* Title tucked into the sky/treeline rather than dropped mid-frame onto
	   faces. The band still reaches the header via the ::before overhang. */
	.hero__inner { padding-top: 0.85rem; }
	.hero__body {
		align-items: center;
		text-align: center;
	}
	.hero__title {
		font-size: clamp(1.9rem, 8.5vw, 2.5rem);
		margin-bottom: 0.7rem;
		margin-left: auto;
		margin-right: auto;
		max-width: 14ch;
		line-height: 1.12;
		text-align: center;
	}
	/* stretch, not the desktop flex-start: the actions row shrank to its
	   content, and its scrim band stopped 30px short of the right edge. */
	.hero__meta {
		flex-direction: column-reverse;
		gap: 1.75rem;
		align-items: stretch;
		width: 100%;
	}
	/* Dropped, not restyled: on a phone the headline and the two buttons are
	   the whole job, and the lede's four lines were the block that covered
	   the group. It still runs at every width above this. */
	.hero__subtitle { display: none; }
	.hero__actions {
		gap: 0.75rem;
		justify-content: center;
		width: 100%;
	}
	.hero__actions .button { flex: 1 1 auto; text-align: center; padding: 0.9rem 1.2rem; }
	.hero__grid, .ruled, .ledger__card, .cta-band__inner { grid-template-columns: 1fr; }
	/* Left over from the 1080 layout. Against a single explicit track it
	   forces an implicit second column, which collapsed the label rail to a
	   34px stub with a stray rule under it and pushed the copy off-grid. */
	.cta-band__action { grid-column: auto; }
	.hero__margin, .ruled__margin, .ledger__margin, .cta-band__margin {
		border-right: 0; border-bottom: 1px solid rgba(37, 48, 194, 0.3);
		padding: 0 0 0.75rem; margin-bottom: 1.25rem; justify-content: flex-start;
	}
	.hero__margin { display: none; } /* empty rail — nothing to annotate at this width */
	/* The rail reset above is written for full-bleed sections, where the label
	   starts at the container edge. Inside the ledger card that put it hard
	   into the corner under the border, then left a dead band above the first
	   stat. Take the card's own inset instead, and let the rule divide. */
	.ledger__margin { padding: 1.35rem 1.35rem 0.85rem; margin-bottom: 0; }
	.hero__margin .label, .ruled__margin .label, .ledger__margin .label, .cta-band__margin .label {
		writing-mode: horizontal-tb; transform: none;
	}
	.hero__body, .ruled__body, .cta-band__body { padding-left: 0; }
	.hero__meta { gap: 2rem; }

	/* banner: keep the statement, drop the secondary link */
	.topbar__inner {
		justify-content: center; text-align: center; min-height: 0;
		/* Longhand, and after .container: the mobile .container shorthand
		   above resets vertical padding to 0, which left the statement
		   pressed against both edges of the yellow band. */
		padding-top: 0.6rem; padding-bottom: 0.6rem;
	}
	.topbar__link { display: none; }
	.topbar { font-size: 0.72rem; line-height: 1.55; }

	/* Desktop's 7rem gutters read as dead screens on a phone: a page opened
	   on ~200px of empty paper before its first word. */
	.section { padding: 3.5rem 0; }
	.section--tight { padding: 2.75rem 0; }
	.spotlight { padding: 3.5rem 0; }
	.page-hero { padding: 2.25rem 0 1.25rem; }
	section[id] { scroll-margin-top: 4.5rem; }

	/* :not() — the flat variant sits under a light page hero, not over the
	   photograph, and pulling it up covers that hero's own lede. */
	.ledger:not(.ledger--flat) { margin-top: -4rem; }
	.ledger__stats { grid-template-columns: 1fr; }
	.stat { padding: 1.6rem 1.35rem; border-right: 0; border-bottom: 1px solid var(--rule); }
	.stat:last-child { border-bottom: 0; }

	.program { grid-template-columns: 1fr; gap: 1rem; padding: 2.2rem 0; }
	.program__index { border-right: 0; text-align: left; padding-right: 0; }
	.program__headline { padding-left: 0; }
	.program__figure { text-align: left; }
	.program__stat-label, .program__src { margin-left: 0; }

	.story--small { grid-template-columns: 6rem 1fr; gap: 1.1rem; }
	.card-grid, .school-columns { grid-template-columns: 1fr; }
	/* The gallery stays two-up on a phone — these are photographs to scan,
	   not cards with text under them. */
	.gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0.9rem; }
	.team-grid { grid-template-columns: repeat(2, 1fr); }

	/* interior pages */
	.timeline__item, .post-row { grid-template-columns: 1fr; gap: 0.75rem; }
	.bar-row { grid-template-columns: 1fr auto; gap: 0.75rem 1rem; }
	.bar-track { grid-column: 1 / -1; order: 3; }
	.covers { grid-template-columns: 1fr; }
	.tier { grid-template-columns: 1fr; gap: 0.5rem; }
	.filing-table tbody th { width: 5.5rem; }
	.report { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem; }
	.report__cover { max-width: 7.5rem; }
	/* Phone: the mark stacks above its blurb rather than eating half the row. */
	.badge { grid-template-columns: 1fr; gap: 1.1rem; justify-items: start; padding: 1.75rem 0; }
	/* Capped, or the 3.4:1 wordmark runs the full column width and dwarfs the
	   square seals stacked above and below it. */
	.badge__mark { height: 96px; max-width: 240px; justify-content: flex-start; }
	/* even 2x2 instead of a ragged wrap */
	.segmented { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
	.segmented label { text-align: center; border-bottom: 1px solid var(--rule); }
	.segmented label:nth-of-type(2n) { border-right: 0; }
	.segmented label:nth-last-of-type(-n+2) { border-bottom: 0; }
	.site-footer__grid { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 3rem; padding-bottom: 2.5rem; }
	.cta-band { padding: 3.5rem 0; }

	/* ---- Touch targets ----
	   Every one of these is a comfortable click with a mouse and an 18px
	   sliver under a thumb. The type stays the size it was; only the box
	   around it grows, so nothing about the page reads differently. */
	.footer-menu li, .social-links li, .footer-list li { padding: 0; }
	.footer-menu a, .social-links a, .footer-list a { display: block; padding: 0.85rem 0; }
	.site-footer__meta a { display: inline-block; padding: 0.6rem 0; }
	.text-link { padding-top: 0.6rem; padding-bottom: 0.75rem; }
	.jump-nav { gap: 1.25rem; }
	.jump-nav a { padding: 0.65rem 0 0.6rem; }
	.link-list li { padding: 0; }
	.link-list a { display: block; padding: 0.85rem 0; }
	.pagination .page-numbers { padding: 0.85rem 1.15rem; }
	.filing-table td a { display: inline-block; padding: 0.6rem 0; }
	/* Inline links in headings and prose. Vertical padding on an inline box
	   grows the hit area without growing the line box, so these gain a
	   thumb-sized target and the type sets exactly where it did before. */
	.card__title a, .team-card__name a, .post-row__title a, .donate__fine a { padding: 0.8rem 0; }
	.nav-toggle { padding: 0.5rem 0.35rem; margin-right: -0.35rem; }
}