@charset "UTF-8";
/* ===========================================================================
   UAFIN Agri — agri.uafin.africa

   Four readers arrive at this site at once: a funder, a development partner, a
   landholder and someone who wants a place in the programme. The brief is
   explicit that none of them may be made to feel like the product, and that
   constraint is as much a visual one as a verbal one. So there is no
   photography of people being helped, no impact-report chrome, no progress
   bars implying a journey someone is being taken on. Hairline rules, a single
   accent, generous measure, and diagrams that carry the argument.

   The visual system is the UAFIN one — same two typefaces, same four colours,
   same olive and brass — because this programme sits on the UAFIN domain and a
   landholder who reads both sites should see one organisation, not two. What
   is added here is what this brief needs and that one did not: status badges
   that keep "emerging" visible, a two-door route treatment, an interactive
   tool shell that labels itself an illustration, and diagram styling that
   works on both the dark and the paper surfaces.

   Two typefaces, four colours, one accent. Everything else is space.

   The serif is Fraunces, pinned to WONK 0 / SOFT 0 — the axes that give it its
   playful character are turned all the way off, which leaves a crisp,
   high-contrast Scotch roman.
   =========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
		U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('/assets/fonts/fraunces-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F,
		U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('/assets/fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
		U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F,
		U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
	/* The brand olive is taken from the logo (#5A6D43). Everything else is
	   built around it: the ink is that hue pushed almost to black so the two
	   never clash, and the brass is its complement at the same value. */
	--ink: #10130d;
	--ink-2: #171b12;
	--ink-3: #1f2419;
	--olive: #5a6d43;
	--olive-lit: #8ba362;
	--brass: #c8a34a;
	--bone: #f4f1e8;
	--bone-2: #e7e2d4;
	--muted: #8d8e80;
	--muted-dark: #6b6d5f;
	--rule: rgba(244, 241, 232, 0.14);
	--rule-dark: rgba(16, 19, 13, 0.13);

	--serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
	--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
		sans-serif;

	/* Fraunces with its character axes shut down. This one declaration is what
	   makes the serif read as institutional rather than editorial. */
	--wonk: 'SOFT' 0, 'WONK' 0;

	--measure: 34rem;
	--gutter: clamp(1.5rem, 5vw, 4rem);
	--shell: 78rem;
	--band: clamp(4.5rem, 9vw, 8.5rem);
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--ink);
	color: var(--bone);
	font-family: var(--sans);
	font-size: 1.0625rem;
	line-height: 1.68;
	font-weight: 350;
	letter-spacing: -0.003em;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img,
svg {
	display: block;
	max-width: 100%;
}

/* --- Type ----------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
	font-family: var(--serif);
	font-variation-settings: var(--wonk);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.021em;
	margin: 0;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.6rem, 6.2vw, 5rem);
}
h2 {
	font-size: clamp(2rem, 4vw, 3.15rem);
}
h3 {
	font-size: clamp(1.3rem, 2vw, 1.65rem);
	line-height: 1.2;
	letter-spacing: -0.014em;
}
h4 {
	font-size: 1.1rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

p {
	margin: 0 0 1.15em;
	max-width: var(--measure);
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: inherit;
	text-decoration-color: rgba(200, 163, 74, 0.45);
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	transition: text-decoration-color 0.2s, color 0.2s;
}

a:hover {
	text-decoration-color: var(--brass);
}

strong {
	font-weight: 600;
	color: #fff;
}

/* The eyebrow. Every section on the site is announced by one — it is the
   single most load-bearing device in the layout, because it lets a heading
   stay short while the reader still knows where they are. */
.eyebrow {
	font-family: var(--sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brass);
	margin: 0 0 1.4rem;
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.eyebrow::before {
	content: '';
	width: 1.85rem;
	height: 1px;
	background: currentColor;
	flex: none;
	opacity: 0.6;
}

.lede {
	font-size: clamp(1.15rem, 1.8vw, 1.4rem);
	line-height: 1.55;
	font-weight: 350;
	letter-spacing: -0.012em;
	color: rgba(244, 241, 232, 0.86);
	max-width: 40rem;
}

.small {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--muted);
	max-width: 44rem;
}

.serif-lede {
	font-family: var(--serif);
	font-variation-settings: var(--wonk);
	font-size: clamp(1.35rem, 2.4vw, 1.95rem);
	line-height: 1.38;
	letter-spacing: -0.018em;
	font-weight: 300;
	max-width: 38rem;
}

/* --- Layout --------------------------------------------------------------- */

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

.shell-wide {
	max-width: 92rem;
}

.band {
	padding-block: var(--band);
	position: relative;
}

/* The nav is fixed, so anything jumped to by anchor would otherwise arrive
   underneath it. Applied to the id, not the section, so it holds for any
   linkable target. */
[id] {
	scroll-margin-top: 6.5rem;
}

.band-tight {
	padding-block: clamp(3rem, 6vw, 5rem);
}

.paper {
	background: var(--bone);
	color: var(--ink);
}

.paper .lede {
	color: rgba(16, 19, 13, 0.74);
}
.paper .small {
	color: var(--muted-dark);
}
.paper strong {
	color: var(--ink);
}
.paper a {
	text-decoration-color: rgba(90, 109, 67, 0.45);
}
.paper a:hover {
	text-decoration-color: var(--olive);
}
.paper .eyebrow {
	color: var(--olive);
}

.deep {
	background: var(--ink-2);
}

/* Two-column editorial split: a heading column that stays put and a body
   column that scrolls past it. */
.split {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
	.split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
	}
	.split-sticky > :first-child {
		position: sticky;
		top: 7rem;
	}
}

.grid {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.75rem);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Two columns, and only ever two. `auto-fit` would happily make three of these
   at 1440px, which turns a set of four cards into a 3 + 1 orphan. */
.grid-2 {
	grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
	.grid-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.stack > * + * {
	margin-top: 1.15em;
}

.rule {
	height: 1px;
	background: var(--rule);
	border: 0;
	margin: 0;
}

.paper .rule {
	background: var(--rule-dark);
}

/* --- Navigation ----------------------------------------------------------- */

.nav {
	position: fixed;
	inset: 0 0 auto;
	z-index: 60;
	transition: background 0.35s, border-color 0.35s, backdrop-filter 0.35s;
	border-bottom: 1px solid transparent;
}

/* Solid only once the hero is behind it, so the wordmark sits on the
   photograph at the top of the page and on a surface everywhere else. */
.nav.is-stuck {
	background: rgba(16, 19, 13, 0.88);
	backdrop-filter: saturate(1.4) blur(14px);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	border-bottom-color: var(--rule);
}

.nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	min-height: 4.75rem;
}

.wordmark {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	text-decoration: none;
	flex: none;
}

.wordmark-name {
	font-family: var(--serif);
	font-variation-settings: var(--wonk);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--bone);
	line-height: 1;
}

.nav-links {
	display: none;
	gap: clamp(1.1rem, 2.2vw, 2rem);
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 60rem) {
	.nav-links {
		display: flex;
	}
}

.nav-links a {
	font-size: 0.8125rem;
	letter-spacing: 0.055em;
	text-transform: uppercase;
	font-weight: 500;
	color: rgba(244, 241, 232, 0.72);
	text-decoration: none;
	padding-block: 0.4rem;
	position: relative;
	white-space: nowrap;
}

.nav-links a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--brass);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.28s;
}

.nav-links a:hover,
.nav-links a[aria-current='page'] {
	color: var(--bone);
}

.nav-links a:hover::after,
.nav-links a[aria-current='page']::after {
	transform: scaleX(1);
}

/* The menu button is only ever shown below the nav-links breakpoint. */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	background: none;
	border: 1px solid var(--rule);
	color: var(--bone);
	font: inherit;
	font-size: 0.75rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	padding: 0.6rem 0.95rem;
	cursor: pointer;
	border-radius: 2px;
}

@media (min-width: 60rem) {
	.nav-toggle {
		display: none;
	}
}

.nav-drawer {
	display: none;
	border-top: 1px solid var(--rule);
	background: rgba(16, 19, 13, 0.97);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.nav-drawer.is-open {
	display: block;
}

@media (min-width: 60rem) {
	.nav-drawer,
	.nav-drawer.is-open {
		display: none;
	}
}

.nav-drawer ul {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0 1.5rem;
}

.nav-drawer a {
	display: block;
	padding: 0.85rem 0;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: rgba(244, 241, 232, 0.82);
	border-bottom: 1px solid var(--rule);
}

.nav-drawer a:hover {
	color: var(--bone);
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.95rem 1.6rem;
	border: 1px solid var(--brass);
	background: var(--brass);
	color: #1a1405;
	border-radius: 2px;
	cursor: pointer;
	transition: background 0.22s, color 0.22s, border-color 0.22s, transform 0.22s;
	white-space: nowrap;
}

.btn:hover {
	background: #dcb75f;
	border-color: #dcb75f;
	transform: translateY(-1px);
}

/* On a narrow screen a nowrap button is a horizontal scrollbar. "Request the
   memorandum" is 273px of uppercase tracked text, which does not fit beside a
   gutter on a 390px phone, so below this width the label is allowed to wrap
   and the button is capped at the column. */
@media (max-width: 40rem) {
	.btn {
		white-space: normal;
		max-width: 100%;
		text-align: center;
		justify-content: center;
	}
}

/* The header CTA is hidden exactly where the drawer takes over, because the
   drawer carries the same action as its last item. Two competing calls to
   action in a 390px header is how the wordmark gets pushed off screen. */
.nav .btn {
	display: none;
}

@media (min-width: 60rem) {
	.nav .btn {
		display: inline-flex;
	}
}

.btn-ghost {
	background: transparent;
	color: var(--bone);
	border-color: rgba(244, 241, 232, 0.32);
}

.btn-ghost:hover {
	background: rgba(244, 241, 232, 0.07);
	border-color: var(--bone);
	color: var(--bone);
}

.paper .btn-ghost {
	color: var(--ink);
	border-color: rgba(16, 19, 13, 0.28);
}

.paper .btn-ghost:hover {
	background: rgba(16, 19, 13, 0.05);
	border-color: var(--ink);
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 2.2rem;
}

/* A link that reads as an action without being a button. */
.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--brass);
}

.arrow-link::after {
	content: '→';
	transition: transform 0.24s;
	display: inline-block;
}

.arrow-link:hover::after {
	transform: translateX(4px);
}

.paper .arrow-link {
	color: var(--olive);
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
	position: relative;
	min-height: min(94svh, 54rem);
	display: flex;
	align-items: flex-end;
	padding-block: 9rem clamp(3.5rem, 8vw, 6rem);
	overflow: hidden;
	isolation: isolate;
}

.hero-media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 28%;
}

/* Two scrims stacked: a vertical one so the copy at the bottom always has
   contrast, and a horizontal one so the left column stays legible on a wide
   screen where the subject sits right of centre. */
.hero-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
			to top,
			var(--ink) 2%,
			rgba(16, 19, 13, 0.82) 34%,
			rgba(16, 19, 13, 0.34) 68%,
			rgba(16, 19, 13, 0.55) 100%
		),
		linear-gradient(to right, rgba(16, 19, 13, 0.72) 0%, rgba(16, 19, 13, 0) 62%);
}

.hero h1 {
	max-width: 17ch;
}

.hero .lede {
	margin-top: 1.8rem;
}

.hero-sub {
	min-height: auto;
	padding-block: 8.5rem clamp(3rem, 6vw, 4.5rem);
	align-items: flex-end;
}

@media (min-width: 48rem) {
	.hero-sub {
		min-height: min(62svh, 36rem);
	}
}

/* --- Statistics ----------------------------------------------------------- */

.stats {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	border-top: 1px solid var(--rule);
}

.paper .stats {
	border-top-color: var(--rule-dark);
}

.stat {
	padding: 2rem 1.75rem 2rem 0;
	border-bottom: 1px solid var(--rule);
}

.paper .stat {
	border-bottom-color: var(--rule-dark);
}

.stat-figure {
	font-family: var(--serif);
	font-variation-settings: var(--wonk);
	font-size: clamp(2.1rem, 3.6vw, 3rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--bone);
	display: block;
}

.paper .stat-figure {
	color: var(--olive);
}

.stat-label {
	margin-top: 0.85rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--muted);
	max-width: 20rem;
}

.paper .stat-label {
	color: var(--muted-dark);
}

/* --- Cards ---------------------------------------------------------------- */

.card {
	border: 1px solid var(--rule);
	padding: clamp(1.5rem, 2.6vw, 2.25rem);
	background: rgba(244, 241, 232, 0.022);
	border-radius: 3px;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	transition: border-color 0.25s, background 0.25s;
}

.card:hover {
	border-color: rgba(200, 163, 74, 0.4);
	background: rgba(244, 241, 232, 0.045);
}

.paper .card {
	border-color: var(--rule-dark);
	background: rgba(16, 19, 13, 0.018);
}

.paper .card:hover {
	border-color: rgba(90, 109, 67, 0.42);
	background: rgba(16, 19, 13, 0.035);
}

.card p {
	max-width: none;
	font-size: 0.9375rem;
	color: rgba(244, 241, 232, 0.74);
	margin: 0;
}

.paper .card p {
	color: rgba(16, 19, 13, 0.72);
}

/* A numbered step. The index is set in the serif at a large size and low
   opacity so it reads as a mark on the page rather than as content. */
.card-index {
	font-family: var(--serif);
	font-variation-settings: var(--wonk);
	font-size: 0.9rem;
	letter-spacing: 0.12em;
	color: var(--brass);
	font-variant-numeric: tabular-nums;
}

.paper .card-index {
	color: var(--olive);
}

/* --- Figures -------------------------------------------------------------- */

figure {
	margin: 0;
}

.figure img {
	width: 100%;
	height: auto;
	border-radius: 3px;
}

/* Inside a card the picture is furniture, not content, so it is forced to one
   ratio. The source images come from several libraries at 16:9 and 3:2, and
   letting those through unmodified leaves the headings in a row of cards
   sitting at different heights — the single most obvious tell that a layout
   was assembled rather than designed. */
.card .figure img,
.card > img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center 25%;
}

.figure figcaption {
	margin-top: 0.9rem;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--muted);
	max-width: 32rem;
}

.paper .figure figcaption {
	color: var(--muted-dark);
}

/* --- Tables --------------------------------------------------------------- */

/* The league table is the most scrutinised object on the site, so it is set
   like a printed schedule: hairline rules, tabular figures, no zebra striping,
   and a horizontal scroll container so it is never squeezed to illegibility on
   a phone. */
.table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-inline: calc(var(--gutter) * -1);
	padding-inline: var(--gutter);
}

table {
	width: 100%;
	min-width: 46rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums lining-nums;
}

thead th {
	text-align: left;
	font-family: var(--sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--muted-dark);
	padding: 0 1.1rem 0.9rem 0;
	border-bottom: 1px solid rgba(16, 19, 13, 0.28);
	vertical-align: bottom;
	white-space: nowrap;
}

tbody td {
	padding: 1.1rem 1.1rem 1.1rem 0;
	border-bottom: 1px solid var(--rule-dark);
	vertical-align: top;
}

tbody tr:hover {
	background: rgba(90, 109, 67, 0.045);
}

.num {
	text-align: right;
	white-space: nowrap;
}

thead th.num {
	text-align: right;
}

.brand-cell strong {
	font-family: var(--serif);
	font-variation-settings: var(--wonk);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	display: block;
}

.brand-cell .sector {
	font-size: 0.75rem;
	color: var(--muted-dark);
	letter-spacing: 0.03em;
	margin-top: 0.2rem;
	display: block;
}

/* Marks a figure as UAFIN's arithmetic rather than someone's published claim.
   It is dotted, not solid, and it carries a title — the visual difference is
   the point. */
.indicative {
	border-bottom: 1px dotted rgba(16, 19, 13, 0.4);
	cursor: help;
}

.src-link {
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--olive);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-top: 0.35rem;
	font-weight: 600;
}

.src-link::after {
	content: '↗';
	font-size: 0.85em;
}

.src-link:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* In a figures column the attribution goes on its own line, aligned under the
   number. Run inline and the eye cannot travel down the column comparing
   amounts, which is the only thing anyone does with this table. */
.num .src-link {
	display: flex;
	justify-content: flex-end;
}

.row-mark {
	display: inline-block;
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #1a1405;
	background: var(--brass);
	padding: 0.2rem 0.45rem;
	border-radius: 2px;
	margin-left: 0.5rem;
	vertical-align: 0.15em;
}

/* --- Filter chips --------------------------------------------------------- */

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2rem;
	padding: 0;
	list-style: none;
}

.chip {
	font: inherit;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	padding: 0.5rem 0.95rem;
	border: 1px solid rgba(16, 19, 13, 0.2);
	background: transparent;
	color: rgba(16, 19, 13, 0.7);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.chip:hover {
	border-color: var(--olive);
	color: var(--ink);
}

.chip[aria-pressed='true'] {
	background: var(--olive);
	border-color: var(--olive);
	color: var(--bone);
}

/* --- Notes and callouts --------------------------------------------------- */

.note {
	border-left: 2px solid var(--brass);
	padding: 0.15rem 0 0.15rem 1.35rem;
	font-size: 0.9375rem;
	line-height: 1.62;
	color: rgba(244, 241, 232, 0.78);
	max-width: 42rem;
}

.paper .note {
	border-left-color: var(--olive);
	color: rgba(16, 19, 13, 0.76);
}

.note p {
	max-width: none;
}

.pullquote {
	font-family: var(--serif);
	font-variation-settings: var(--wonk);
	font-size: clamp(1.5rem, 3vw, 2.35rem);
	line-height: 1.28;
	letter-spacing: -0.02em;
	font-weight: 300;
	max-width: 26ch;
	margin: 0;
}

.pullquote cite {
	display: block;
	font-family: var(--sans);
	font-size: 0.75rem;
	font-style: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brass);
	margin-top: 1.6rem;
	font-weight: 600;
}

.paper .pullquote cite {
	color: var(--olive);
}

/* A definition list used for term-sheet style facts. */
.terms {
	margin: 0;
	display: grid;
	gap: 0;
}

.terms > div {
	display: grid;
	gap: 0.35rem 2rem;
	padding: 1.05rem 0;
	border-bottom: 1px solid var(--rule);
	grid-template-columns: 1fr;
}

.paper .terms > div {
	border-bottom-color: var(--rule-dark);
}

@media (min-width: 40rem) {
	.terms > div {
		grid-template-columns: 13rem 1fr;
	}
}

.terms dt {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--brass);
	padding-top: 0.2rem;
}

.paper .terms dt {
	color: var(--olive);
}

.terms dd {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(244, 241, 232, 0.82);
}

.paper .terms dd {
	color: rgba(16, 19, 13, 0.78);
}

/* --- Checklist ------------------------------------------------------------ */

.ticks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.ticks li {
	position: relative;
	padding-left: 1.75rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(244, 241, 232, 0.8);
	max-width: 40rem;
}

.paper .ticks li {
	color: rgba(16, 19, 13, 0.78);
}

.ticks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.62rem;
	height: 0.62rem;
	border: 1px solid var(--brass);
	border-radius: 1px;
	transform: rotate(45deg);
}

.paper .ticks li::before {
	border-color: var(--olive);
}

/* --- Forms ---------------------------------------------------------------- */

.form {
	display: grid;
	gap: 1.35rem;
	max-width: 40rem;
}

.field {
	display: grid;
	gap: 0.5rem;
}

.field label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--muted);
}

.paper .field label {
	color: var(--muted-dark);
}

.field input,
.field select,
.field textarea {
	font: inherit;
	font-size: 0.9375rem;
	padding: 0.85rem 1rem;
	background: rgba(244, 241, 232, 0.04);
	border: 1px solid var(--rule);
	border-radius: 2px;
	color: var(--bone);
	width: 100%;
	transition: border-color 0.2s, background 0.2s;
}

.field textarea {
	min-height: 8rem;
	resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--brass);
	background: rgba(244, 241, 232, 0.07);
}

.field select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
		linear-gradient(135deg, var(--muted) 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) 1.28rem, calc(100% - 0.85rem) 1.28rem;
	background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
	background-repeat: no-repeat;
	padding-right: 2.5rem;
}

.field select option {
	background: var(--ink-2);
	color: var(--bone);
}

.field-pair {
	display: grid;
	gap: 1.35rem;
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.field-pair {
		grid-template-columns: 1fr 1fr;
	}
}

/* The honeypot. Hidden from people and from screen readers, left in the DOM
   for anything that fills every input it finds. */
.hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-note {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--muted);
	margin: 0;
	max-width: 40rem;
}

.form-status {
	font-size: 0.9375rem;
	line-height: 1.6;
	padding: 1rem 1.25rem;
	border-radius: 2px;
	display: none;
}

.form-status.is-ok {
	display: block;
	background: rgba(139, 163, 98, 0.14);
	border: 1px solid rgba(139, 163, 98, 0.4);
	color: #cfe0b4;
}

.form-status.is-err {
	display: block;
	background: rgba(200, 90, 60, 0.12);
	border: 1px solid rgba(200, 90, 60, 0.4);
	color: #f0c0b0;
}

/* --- Footer --------------------------------------------------------------- */

.footer {
	background: #0b0d09;
	border-top: 1px solid var(--rule);
	padding-block: clamp(3.5rem, 6vw, 5rem) 2.5rem;
}

.footer-grid {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 52rem) {
	.footer-grid {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

.footer h4 {
	font-family: var(--sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brass);
	margin-bottom: 1.1rem;
}

.footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.65rem;
}

.footer a {
	font-size: 0.875rem;
	color: rgba(244, 241, 232, 0.66);
	text-decoration: none;
}

.footer a:hover {
	color: var(--bone);
}

.colophon {
	margin-top: 3.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--rule);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
	font-size: 0.75rem;
	color: var(--muted-dark);
}

.colophon p {
	margin: 0;
	max-width: 46rem;
}

/* --- Reveal --------------------------------------------------------------- */

/* Opt-in, applied by site.js only when IntersectionObserver exists — so with
   JavaScript off or unsupported the page is simply visible, never blank. */
.reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.reveal,
	.reveal.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.btn:hover {
		transform: none;
	}
}

/* --- Accessibility -------------------------------------------------------- */

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--brass);
	color: #1a1405;
	padding: 0.85rem 1.3rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.skip:focus {
	left: 0;
}

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

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media print {
	.nav,
	.footer,
	.btn-row {
		display: none;
	}
	body {
		background: #fff;
		color: #000;
	}
}

/* ===========================================================================
   AGRI — everything below is specific to agri.uafin.africa.

   Kept in one block at the end rather than threaded through the base system,
   so the shared UAFIN vocabulary above can be diffed against the sibling site
   and stay in step with it.
   =========================================================================== */

/* --- Wordmark ------------------------------------------------------------- */

.wordmark-sub {
	font-family: var(--sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--brass);
	line-height: 1;
}

/* --- Navigation, adjusted for nine pages ---------------------------------- */

/* Six items in the bar plus two route pills plus a wordmark needs more room
   than the sibling site's four items did. Below 74rem the bar hands the whole
   set to the drawer rather than compressing it to unreadable. */
.nav-links {
	gap: clamp(0.9rem, 1.6vw, 1.5rem);
}

.nav-links a {
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

@media (min-width: 60rem) and (max-width: 73.999rem) {
	.nav-links {
		display: none;
	}
}

@media (min-width: 74rem) {
	.nav-links {
		display: flex;
	}
	.nav-toggle {
		display: none;
	}
}

@media (max-width: 73.999rem) {
	.nav-toggle {
		display: inline-flex;
	}
}

/* The two doors in the header. Small, quiet, always there — the brief wants
   them reachable from anywhere and explicitly not as an interruption, so they
   are pills at the end of the bar rather than a banner or a modal. */
.doors-nav {
	display: none;
	gap: 0.5rem;
	margin-left: auto;
}

@media (min-width: 46rem) {
	.doors-nav {
		display: flex;
	}
}

.pill {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(244, 241, 232, 0.78);
	border: 1px solid var(--rule);
	border-radius: 999px;
	padding: 0.5rem 0.95rem;
	white-space: nowrap;
	transition: border-color 0.22s, color 0.22s, background 0.22s;
}

.pill:hover {
	color: var(--bone);
	border-color: var(--brass);
	background: rgba(200, 163, 74, 0.08);
}

/* --- Status badges -------------------------------------------------------- */

/* Guardrails §3.3 and §3.4: an indicative figure is labelled indicative on the
   same visual element, and the programme says out loud that it is emerging.
   One treatment, used everywhere, so a reader learns to read it once. */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--sans);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 0.32rem 0.6rem;
	border-radius: 2px;
	border: 1px solid currentColor;
	margin: 0 0 0.9rem;
	max-width: max-content;
	line-height: 1.3;
}

.badge::before {
	content: '';
	width: 0.36rem;
	height: 0.36rem;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.badge-pilot {
	color: var(--olive-lit);
}
.badge-developing {
	color: var(--brass);
}
.badge-indicative {
	color: var(--brass);
}
.badge-unpackaged {
	color: var(--muted);
}
.badge-pending {
	color: var(--muted);
}
.badge-attributed {
	color: var(--olive-lit);
}

.paper .badge-pilot,
.paper .badge-attributed {
	color: var(--olive);
}
.paper .badge-developing,
.paper .badge-indicative {
	color: #97742a;
}
.paper .badge-unpackaged,
.paper .badge-pending {
	color: var(--muted-dark);
}

/* A badge sitting inside the element it qualifies rather than above it. */
.badge-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.2rem;
}

.badge-row .badge {
	margin-bottom: 0;
}

/* --- Image slots ---------------------------------------------------------- */

/* An image that has not been generated yet renders its own brief, in the space
   the picture will occupy. The brief forbids stock-photo development clichés,
   so the honest alternative to the right image is not the nearest available
   image — it is a labelled empty frame that cannot be forgotten. */
.imgslot {
	display: block;
}

.imgslot-body {
	aspect-ratio: var(--slot-aspect, 3 / 2);
	border: 1px dashed var(--rule);
	border-radius: 3px;
	background: repeating-linear-gradient(
		135deg,
		rgba(244, 241, 232, 0.014),
		rgba(244, 241, 232, 0.014) 10px,
		transparent 10px,
		transparent 20px
	);
	padding: clamp(1.25rem, 3vw, 2.25rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	overflow: auto;
}

.paper .imgslot-body {
	border-color: var(--rule-dark);
	background: repeating-linear-gradient(
		135deg,
		rgba(16, 19, 13, 0.022),
		rgba(16, 19, 13, 0.022) 10px,
		transparent 10px,
		transparent 20px
	);
}

.imgslot-brief {
	font-size: 0.8125rem;
	line-height: 1.62;
	color: var(--muted);
	max-width: 44rem;
	margin: 0;
}

.paper .imgslot-brief {
	color: var(--muted-dark);
}

/* --- The two doors -------------------------------------------------------- */

.doors {
	background: var(--ink-2);
	border-top: 1px solid var(--rule);
}

.door {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	text-decoration: none;
	border: 1px solid var(--rule);
	border-radius: 3px;
	padding: clamp(1.6rem, 3vw, 2.4rem);
	background: rgba(244, 241, 232, 0.022);
	transition: border-color 0.25s, background 0.25s, transform 0.25s;
}

.door:hover {
	border-color: rgba(200, 163, 74, 0.45);
	background: rgba(244, 241, 232, 0.05);
	transform: translateY(-2px);
}

.door-index {
	font-family: var(--sans);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brass);
}

.door-title {
	font-family: var(--serif);
	font-variation-settings: var(--wonk);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 400;
	letter-spacing: -0.018em;
	line-height: 1.1;
	color: var(--bone);
}

.door-body {
	font-size: 0.9375rem;
	line-height: 1.62;
	color: rgba(244, 241, 232, 0.74);
}

.door-go {
	margin-top: 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brass);
}

.door-go::after {
	content: ' →';
}

@media (prefers-reduced-motion: reduce) {
	.door:hover {
		transform: none;
	}
}

/* --- Diagrams ------------------------------------------------------------- */

/* Wherever a relationship, a sequence or a flow is being explained, the brief
   asks for a diagram rather than a paragraph. These are hand-authored inline
   SVGs that inherit the page's colours through currentColor and a small set of
   custom properties, so one diagram works on the dark surface and the paper
   one without a second copy. */
.diagram {
	--dg-line: rgba(244, 241, 232, 0.22);
	--dg-fill: rgba(244, 241, 232, 0.03);
	--dg-text: rgba(244, 241, 232, 0.88);
	--dg-mute: rgba(244, 241, 232, 0.52);
	--dg-accent: #c8a34a;
	--dg-accent-2: #8ba362;
	width: 100%;
	height: auto;
	overflow: visible;
}

.paper .diagram {
	--dg-line: rgba(16, 19, 13, 0.2);
	--dg-fill: rgba(16, 19, 13, 0.025);
	--dg-text: rgba(16, 19, 13, 0.88);
	--dg-mute: rgba(16, 19, 13, 0.55);
	--dg-accent: #96742b;
	--dg-accent-2: #5a6d43;
}

.diagram .dg-box {
	fill: var(--dg-fill);
	stroke: var(--dg-line);
	stroke-width: 1;
	rx: 3;
}

.diagram .dg-box-accent {
	fill: none;
	stroke: var(--dg-accent);
	stroke-width: 1.2;
	rx: 3;
}

.diagram .dg-line {
	stroke: var(--dg-line);
	stroke-width: 1;
	fill: none;
}

.diagram .dg-flow {
	stroke: var(--dg-accent);
	stroke-width: 1.4;
	fill: none;
}

.diagram .dg-flow-2 {
	stroke: var(--dg-accent-2);
	stroke-width: 1.4;
	fill: none;
	stroke-dasharray: 5 4;
}

.diagram .dg-t {
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	fill: var(--dg-text);
}

.diagram .dg-t-sm {
	font-family: var(--sans);
	font-size: 10.5px;
	fill: var(--dg-mute);
}

.diagram .dg-label {
	font-family: var(--sans);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	fill: var(--dg-accent);
}

.diagram .dg-serif {
	font-family: var(--serif);
	font-variation-settings: var(--wonk);
	font-size: 15px;
	font-weight: 400;
	fill: var(--dg-text);
}

.diagram .dg-arrow {
	fill: var(--dg-accent);
}

.diagram-frame {
	border: 1px solid var(--rule);
	border-radius: 3px;
	padding: clamp(1.25rem, 3vw, 2.25rem);
	background: rgba(244, 241, 232, 0.015);
}

.paper .diagram-frame {
	border-color: var(--rule-dark);
	background: rgba(16, 19, 13, 0.015);
}

.diagram-caption {
	margin: 1.1rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--muted);
	max-width: 46rem;
}

.paper .diagram-caption {
	color: var(--muted-dark);
}

/* --- The interactive tool shell ------------------------------------------- */

/* Every interactive element on the site is a learning tool and the brief
   requires each one to say so. The label is part of the component, not
   something an author remembers to add. */
.tool {
	border: 1px solid var(--rule);
	border-radius: 3px;
	overflow: hidden;
	background: rgba(244, 241, 232, 0.018);
}

.paper .tool {
	border-color: var(--rule-dark);
	background: rgba(16, 19, 13, 0.015);
}

.tool-label {
	margin: 0;
	padding: 0.7rem clamp(1.1rem, 2.4vw, 1.6rem);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom: 1px solid var(--rule);
	background: rgba(244, 241, 232, 0.02);
	max-width: none;
}

.paper .tool-label {
	color: var(--muted-dark);
	border-bottom-color: var(--rule-dark);
	background: rgba(16, 19, 13, 0.022);
}

.tool-body {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
	.tool-body {
		grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	}
}

/* Block, not flex. As a wrapping flex row each item sizes to its own label,
   which leaves the separator rules stopping at ragged different widths down a
   phone screen. */
.tool-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	border-bottom: 1px solid var(--rule);
}

.paper .tool-nav {
	border-bottom-color: var(--rule-dark);
}

@media (min-width: 56rem) {
	.tool-nav {
		border-bottom: 0;
		border-right: 1px solid var(--rule);
	}
	.paper .tool-nav {
		border-right-color: var(--rule-dark);
	}
}

.tool-nav button {
	font: inherit;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--rule);
	color: rgba(244, 241, 232, 0.7);
	padding: 0.95rem clamp(1rem, 2vw, 1.35rem);
	cursor: pointer;
	font-size: 0.875rem;
	line-height: 1.35;
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	transition: background 0.2s, color 0.2s;
}

.paper .tool-nav button {
	border-bottom-color: var(--rule-dark);
	color: rgba(16, 19, 13, 0.7);
}

.tool-nav li:last-child button {
	border-bottom: 0;
}

.tool-nav button:hover {
	background: rgba(244, 241, 232, 0.04);
	color: var(--bone);
}

.paper .tool-nav button:hover {
	background: rgba(16, 19, 13, 0.035);
	color: var(--ink);
}

.tool-nav button[aria-selected='true'] {
	background: rgba(200, 163, 74, 0.12);
	color: var(--bone);
	box-shadow: inset 2px 0 0 var(--brass);
}

.paper .tool-nav button[aria-selected='true'] {
	background: rgba(90, 109, 67, 0.1);
	color: var(--ink);
	box-shadow: inset 2px 0 0 var(--olive);
}

.tool-step {
	font-family: var(--serif);
	font-variation-settings: var(--wonk);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	color: var(--brass);
	flex: none;
}

.paper .tool-step {
	color: var(--olive);
}

.tool-panel {
	padding: clamp(1.35rem, 3vw, 2.25rem);
	display: none;
}

.tool-panel[data-open] {
	display: block;
}

.tool-panel h3 {
	margin-bottom: 0.9rem;
}

.tool-panel p {
	font-size: 0.9375rem;
	max-width: 42rem;
}

.tool-panel .terms {
	margin-top: 1.35rem;
}

.tool-panel .terms > div:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* The line under a stage that says what it sets off next. It is the thing that
   makes the sequence a cycle rather than a list. */
.tool-trigger {
	margin-top: 1.5rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--rule);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--muted);
	display: flex;
	gap: 0.7rem;
	align-items: baseline;
	max-width: none;
}

.paper .tool-trigger {
	border-top-color: var(--rule-dark);
	color: var(--muted-dark);
}

.tool-trigger::before {
	content: 'Triggers';
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brass);
	flex: none;
}

.paper .tool-trigger::before {
	color: var(--olive);
}

/* --- Held / released ledger ----------------------------------------------- */

/* Guardrail §3.9: no page lists what we hold without showing, on the same
   page, what leaves our hands and what triggers it. The two columns are a
   single component for exactly that reason — one cannot be rendered without
   the other. */
.ledger {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: 1fr;
}

@media (min-width: 58rem) {
	.ledger {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ledger-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 0.3rem;
}

.paper .ledger-head {
	border-bottom-color: var(--rule-dark);
}

.ledger-head h3 {
	font-size: clamp(1.15rem, 1.8vw, 1.4rem);
}

.ledger-count {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
}

.paper .ledger-count {
	color: var(--muted-dark);
}

.ledger details {
	border-bottom: 1px solid var(--rule);
}

.paper .ledger details {
	border-bottom-color: var(--rule-dark);
}

.ledger summary {
	list-style: none;
	cursor: pointer;
	padding: 0.95rem 1.8rem 0.95rem 0;
	font-size: 0.9375rem;
	line-height: 1.4;
	position: relative;
	color: rgba(244, 241, 232, 0.86);
	transition: color 0.2s;
}

.paper .ledger summary {
	color: rgba(16, 19, 13, 0.86);
}

.ledger summary::-webkit-details-marker {
	display: none;
}

.ledger summary::after {
	content: '+';
	position: absolute;
	right: 0.15rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.1rem;
	line-height: 1;
	color: var(--brass);
	transition: transform 0.2s;
}

.paper .ledger summary::after {
	color: var(--olive);
}

.ledger details[open] summary::after {
	content: '−';
}

.ledger summary:hover {
	color: var(--bone);
}

.paper .ledger summary:hover {
	color: var(--ink);
}

.ledger-detail {
	padding: 0 0 1.1rem;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--muted);
	max-width: none;
}

.paper .ledger-detail {
	color: var(--muted-dark);
}

.ledger-detail strong {
	color: rgba(244, 241, 232, 0.9);
	font-weight: 600;
}

.paper .ledger-detail strong {
	color: var(--ink);
}

/* --- Roles ---------------------------------------------------------------- */

/* The four roles, in the site's fixed vocabulary. The brief requires the same
   five words on every page — landholder, funder, operating team, incubator,
   offtake partner — so they get one component and one place to change. */
.roles {
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
	border-top: 1px solid var(--rule);
}

.paper .roles {
	border-top-color: var(--rule-dark);
}

@media (min-width: 46rem) {
	.roles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(1.5rem, 4vw, 3.5rem);
	}
}

@media (min-width: 72rem) {
	.roles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.role {
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--rule);
}

.paper .role {
	border-bottom-color: var(--rule-dark);
}

.role h3 {
	font-size: 1.2rem;
	margin-bottom: 0.7rem;
}

.role p {
	font-size: 0.875rem;
	line-height: 1.62;
	color: rgba(244, 241, 232, 0.72);
	max-width: none;
}

.paper .role p {
	color: rgba(16, 19, 13, 0.72);
}

.role-brings {
	display: block;
	margin-top: 0.9rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brass);
}

.paper .role-brings {
	color: var(--olive);
}

/* --- Walkable path -------------------------------------------------------- */

/* A sequence the reader walks down rather than clicks through: each stage
   carries what is required of each side before it can be left. */
.path {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.path::before {
	content: '';
	position: absolute;
	left: 0.72rem;
	top: 0.9rem;
	bottom: 0.9rem;
	width: 1px;
	background: var(--rule);
}

.paper .path::before {
	background: var(--rule-dark);
}

.path > li {
	position: relative;
	padding: 0 0 2.4rem 3rem;
}

.path > li:last-child {
	padding-bottom: 0;
}

.path > li::before {
	content: '';
	position: absolute;
	left: 0.25rem;
	top: 0.42rem;
	width: 0.95rem;
	height: 0.95rem;
	border-radius: 50%;
	border: 1px solid var(--brass);
	background: var(--ink);
}

.paper .path > li::before {
	background: var(--bone);
	border-color: var(--olive);
}

.path-step {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brass);
	display: block;
	margin-bottom: 0.5rem;
}

.paper .path-step {
	color: var(--olive);
}

.path h3 {
	margin-bottom: 0.7rem;
}

.path p {
	font-size: 0.9375rem;
}

/* Who does what at this stage, side by side. */
.path-split {
	display: grid;
	gap: 0.5rem 2rem;
	grid-template-columns: 1fr;
	margin-top: 1.2rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--rule);
}

.paper .path-split {
	border-top-color: var(--rule-dark);
}

@media (min-width: 44rem) {
	.path-split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.path-side h4 {
	font-family: var(--sans);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 0.5rem;
}

.paper .path-side h4 {
	color: var(--muted-dark);
}

.path-side p {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: rgba(244, 241, 232, 0.74);
	max-width: none;
}

.paper .path-side p {
	color: rgba(16, 19, 13, 0.74);
}

/* --- Value-flow comparison ------------------------------------------------ */

.compare {
	display: grid;
	gap: clamp(1.5rem, 3.5vw, 2.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
	.compare {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.chain {
	border: 1px solid var(--rule);
	border-radius: 3px;
	padding: clamp(1.35rem, 2.8vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.paper .chain {
	border-color: var(--rule-dark);
}

.chain-ours {
	border-color: rgba(200, 163, 74, 0.4);
}

.paper .chain-ours {
	border-color: rgba(90, 109, 67, 0.45);
}

.chain h3 {
	font-size: 1.25rem;
}

.chain-steps {
	list-style: none;
	margin: 0.4rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.65rem;
}

.chain-steps li {
	font-size: 0.875rem;
	line-height: 1.5;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--rule);
	border-radius: 2px;
	color: rgba(244, 241, 232, 0.8);
	position: relative;
}

.paper .chain-steps li {
	border-color: var(--rule-dark);
	color: rgba(16, 19, 13, 0.8);
}

.chain-steps li + li::before {
	content: '↓';
	position: absolute;
	top: -0.72rem;
	left: 1rem;
	font-size: 0.7rem;
	color: var(--muted);
	line-height: 1;
}

.chain-steps .is-margin {
	border-color: rgba(200, 90, 60, 0.45);
	background: rgba(200, 90, 60, 0.07);
}

.chain-steps .is-farm {
	border-color: rgba(139, 163, 98, 0.5);
	background: rgba(139, 163, 98, 0.08);
}

.paper .chain-steps .is-farm {
	border-color: rgba(90, 109, 67, 0.5);
	background: rgba(90, 109, 67, 0.07);
}

/* --- Contact -------------------------------------------------------------- */

.form-wrap {
	border: 1px solid var(--rule);
	border-radius: 3px;
	padding: clamp(1.5rem, 3.5vw, 2.75rem);
}

.paper .form-wrap {
	border-color: var(--rule-dark);
}

/* background-color, never the `background` shorthand. The base rule draws the
   select's arrow as two gradients and positions them with background-size and
   background-position; the shorthand resets both to their initial values, which
   turns a 5px chevron into a full-element olive triangle. */
.paper .field input,
.paper .field select,
.paper .field textarea {
	background-color: rgba(16, 19, 13, 0.03);
	border-color: var(--rule-dark);
	color: var(--ink);
}

.paper .field input:focus,
.paper .field select:focus,
.paper .field textarea:focus {
	border-color: var(--olive);
	background-color: rgba(16, 19, 13, 0.055);
}

.paper .field select {
	background-image: linear-gradient(45deg, transparent 50%, var(--muted-dark) 50%),
		linear-gradient(135deg, var(--muted-dark) 50%, transparent 50%);
}

.paper .field input::placeholder,
.paper .field textarea::placeholder {
	color: rgba(16, 19, 13, 0.42);
}

.paper .field select option {
	background: var(--bone);
	color: var(--ink);
}

.paper .form-note {
	color: var(--muted-dark);
}

/* --- Odds and ends -------------------------------------------------------- */

/* An organising statement set at the top of the landing page, full width. */
.statement {
	font-family: var(--serif);
	font-variation-settings: var(--wonk);
	font-size: clamp(1.85rem, 4.4vw, 3.4rem);
	line-height: 1.16;
	letter-spacing: -0.022em;
	font-weight: 300;
	max-width: 24ch;
	margin: 0;
	text-wrap: balance;
}

.statement strong {
	font-weight: 400;
	color: var(--bone);
	text-decoration: underline;
	text-decoration-color: rgba(200, 163, 74, 0.55);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

.paper .statement strong {
	color: var(--ink);
	text-decoration-color: rgba(90, 109, 67, 0.55);
}

/* A short attributed line. The brief forbids stating sector claims as our own
   opinion, so the attribution travels with the claim rather than sitting in a
   footnote nobody reaches. */
.attributed {
	font-size: 0.75rem;
	line-height: 1.55;
	color: var(--muted);
	margin-top: 0.7rem;
	max-width: 34rem;
	padding-left: 0.9rem;
	border-left: 1px solid var(--rule);
}

.paper .attributed {
	color: var(--muted-dark);
	border-left-color: var(--rule-dark);
}

/* A line the page must not be read without. Heavier than .note, used once or
   twice per page at most. */
.plainly {
	font-family: var(--serif);
	font-variation-settings: var(--wonk);
	font-size: clamp(1.25rem, 2.2vw, 1.7rem);
	line-height: 1.34;
	letter-spacing: -0.016em;
	font-weight: 300;
	max-width: 32ch;
	margin: 0;
	padding-left: clamp(1.1rem, 2.4vw, 1.75rem);
	border-left: 2px solid var(--brass);
}

.paper .plainly {
	border-left-color: var(--olive);
}

.lede-wide {
	max-width: 48rem;
}

.measure-wide {
	max-width: 48rem;
}

.center-col {
	max-width: 46rem;
	margin-inline: auto;
}

/* A diagram is a fixed drawing, not a fluid layout. Squeezed to a 390px
   viewport its 12px labels become 5px, so below the width at which it is
   legible it scrolls sideways instead — the same treatment the sibling site
   gives its league table, and for the same reason. */
.diagram-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-inline: calc(var(--gutter) * -1);
	padding-inline: var(--gutter);
}

.diagram-scroll .diagram {
	min-width: 46rem;
}

.diagram-scroll .diagram-narrow {
	min-width: 34rem;
}

.diagram-hint {
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 0.75rem;
}

.paper .diagram-hint {
	color: var(--muted-dark);
}

@media (min-width: 62rem) {
	.diagram-hint {
		display: none;
	}
}