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

   The audience is high net worth individuals, family offices and institutions.
   That audience reads investment committee papers, not landing pages, so the
   whole visual system is built to look like a document that costs money to
   produce rather than a campaign: hairline rules instead of borders, a single
   accent, generous measure, and figures set in tabular numerals so a column of
   rands lines up the way it would in a term sheet.

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

   The serif is Fraunces, but 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. The sibling sites in this ecosystem run the same
   file with those axes open, so UAFIN reads as a different, more severe voice
   without a second font download.
   =========================================================================== */

/* --- 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;
}

.wordmark-tag {
	font-size: 0.5625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--olive-lit);
	font-weight: 600;
	line-height: 1;
	display: none;
}

@media (min-width: 40rem) {
	.wordmark-tag {
		display: block;
	}
}

.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;
	}
}