/* ABC Areal Superfamily (Dinamo) — variable font with a MONO axis. */
@font-face {
	font-family: 'ABC Areal';
	src:
		url('fonts/ABCArealSuperfamilyVariable.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* Inter (latin subset, variable weight) — used for the grants list. */
@font-face {
	font-family: 'Inter Variable';
	src: url('fonts/inter-latin-wght.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Figma frame is 3168px wide; 1u = 1 Figma px, scaled to the viewport and capped. */
	--u: min(calc(100vw / 3168), 0.6px);
	--gutter: calc(142 * var(--u));

	--black: #000;
	--white: #fff;
	--grey: #d6d6d6;
	--green: #a0da00;
	--mint: #bfff8b;
	--paper: rgba(255, 255, 255, 0.96);

	--font-sans: 'ABC Areal', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--font-mono: 'ABC Areal', ui-monospace, Menlo, monospace;

	--text-sm: clamp(14px, calc(36 * var(--u)), 22px);
	--text-md: clamp(18px, calc(48 * var(--u)), 29px);
	--text-lg: clamp(20px, calc(64 * var(--u)), 38px);

	color-scheme: dark;
}

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

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

body {
	margin: 0;
	background: var(--black);
	color: var(--white);
	font-family: var(--font-sans);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
	text-decoration: none;
}

.mono {
	font-family: var(--font-mono);
	font-variation-settings: 'MONO' 100;
}

/* Contact bar */
.cta {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	border-top: calc(2 * var(--u)) solid var(--white);
	border-bottom: calc(2 * var(--u)) solid var(--white);
	min-height: calc(152 * var(--u));
	font-size: var(--text-sm);
}

.cta__label {
	margin: 0;
	align-self: center;
	padding-block: 0.75em;
}

.cta__button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 calc(769 * var(--u));
	background: var(--green);
	color: var(--black);
	transition: background-color 150ms ease;
}

.cta__button:hover,
.cta__button:focus-visible {
	background: var(--mint);
}

.cta__button:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 2px;
}

@media (max-width: 720px) {
	.cta {
		flex-direction: column;
		border-width: 1px;
	}

	.cta__label {
		align-self: flex-start;
	}

	.cta__button {
		flex-basis: auto;
		min-height: 48px;
	}
}

.fold,
main,
.footer {
	margin-inline: var(--gutter);
}

/* Header variants: A is the default, B via ?header=b (inline script in <head>). */
:root:not([data-header='b']) .only-b,
:root[data-header='b'] .only-a {
	display: none;
}

/*
 * First screen. Header + wafer + first CTA form a column capped at the viewport
 * height, so the CTA is always above the fold on load: the wafer stage is the
 * only part that shrinks, and the wafer stays a centred square inside it.
 */
.fold {
	/* wafer size when there's room, and the gaps above/below it as a fraction of it */
	--wafer-max: calc(1585 * var(--u));
	/* equal space above and below the wafer */
	--gap-top: 0.1;
	--gap-pad: 0px;
	--gap-bottom: 0.1;

	display: flex;
	flex-direction: column;
	container-type: inline-size; /* phones size the header lines to this column */
	/* a little air under the CTA when the screen is the limit */
	max-height: calc(100vh - calc(48 * var(--u)));
	max-height: calc(100svh - calc(48 * var(--u)));
}

.fold > .cta {
	flex-shrink: 0;
}

/* Hero */
.hero {
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
	min-height: 0;
	padding-top: calc(108 * var(--u));
}

.hero__top,
.hero__taglines {
	flex-shrink: 0;
}

.hero__logo {
	margin: 0;
	padding-block: calc(81 * var(--u)) calc(79 * var(--u));
	border-top: calc(2 * var(--u)) solid var(--white);
	border-bottom: calc(2 * var(--u)) solid var(--white);
}

.hero__logo img {
	width: 100%;
	height: auto;
}

/* The row under the logo's rule: what Vensa is (left) and what it believes (right). */
.hero__taglines {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	padding-top: calc(36 * var(--u));
	color: var(--grey);
	font-size: clamp(14px, calc(40 * var(--u)), 24px);
	line-height: 1.2;
}

/* Default, tablets (721–960px): too narrow for the taglines to overlap the wafer's space,
   so they keep their own row and the wafer is centred between the rules below them (the
   row's height is added under the wafer to balance it). */
@media (min-width: 721px) and (max-width: 960px) {
	:root:not([data-version]):not([data-header='b']) .hero__stage {
		--tl-h: calc(36 * var(--u) + 1.2 * clamp(14px, calc(40 * var(--u)), 24px));
		padding-bottom: var(--tl-h);
		flex-basis: calc(var(--wafer-max) * var(--wafer-k) + var(--gap-pad) + var(--tl-h));
	}
}

/* Default, desktop (961px+): the wafer fills most of the height between the logo's bottom rule
   and the CTA's top rule, centred with an equal gap at each. The tagline row overlaps
   the top of that space at the far left and right, where the wafer's curve clears it. */
@media (min-width: 961px) {
	/* gaps of 0.128 of the wafer (vs 0.04 before) make it 14% smaller in the same space:
	   1.08 / 1.256 = 0.86; the cap shrinks by the same 14% for tall screens */
	:root:not([data-version]):not([data-header='b']) .fold {
		--wafer-max: calc(1363 * var(--u));
		--gap-top: 0.128;
		--gap-bottom: 0.128;
	}

	/* stays where it is, but gives its height back so the wafer's space starts at the rule */
	:root:not([data-version]):not([data-header='b']) .hero__taglines {
		position: relative;
		z-index: 1;
		margin-bottom: calc(-1 * (36 * var(--u) + 1.2 * clamp(14px, calc(40 * var(--u)), 24px)));
		pointer-events: none;
	}
}

.hero__taglines p {
	margin: 0;
}

/* Remaining height for the wafer; the gaps scale with it. */
.hero__stage {
	--wafer-k: calc(1 + var(--gap-top) + var(--gap-bottom));
	/* the wafer's size; resolved in children, where cq units refer to this stage */
	--wafer-size: min(var(--wafer-max), 100cqw, calc(100cqh / var(--wafer-k)));

	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 1 calc(var(--wafer-max) * var(--wafer-k) + var(--gap-pad));
	padding-top: var(--gap-pad);
	min-height: 0;
	container-type: size;
}

.hero__stage::before,
.hero__stage::after {
	content: '';
	flex: calc(var(--gap-top) * 1000) 0 0; /* x1000: grow factors summing below 1 leave space unused */
}

.hero__stage::after {
	flex-grow: calc(var(--gap-bottom) * 1000);
}

.hero__wafer {
	flex: none;
	width: var(--wafer-size);
	aspect-ratio: 1;
}

/*
 * Version 4 (?v=4): under the logo, a large headline ("Anyone should be able to make a
 * microchip") level with the wafer's top edge on the left, and "Vensa is a nonprofit
 * advancing open silicon" level with its bottom edge; the wafer sits on the right.
 * Phones stack them: logo, headline, wafer, nonprofit line.
 */
.hero__headline,
.hero__about,
.hero__divider {
	display: none;
	margin: 0;
	font-weight: 400;
}

.hero__headline {
	color: var(--white);
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.hero__about {
	color: var(--grey);
	line-height: 1.2;
}

:root[data-version='4'] .hero__taglines {
	display: none;
}

@media (min-width: 721px) {
	/* The wafer floats in an open cell on the right: equal air above, below, left (to the
	   divider) and right (to the column edge), each a fraction of its size. More air means
	   a slightly smaller wafer; the CTA stays above the fold either way. */
	:root[data-version='4'] .fold {
		--wafer-max: calc(1200 * var(--u));
		--gap-top: 0.14;
		--gap-bottom: 0.14;
	}

	:root[data-version='4'] .hero__stage {
		--gap-x: 0.14;
		--cell: calc(var(--wafer-size) * (1 + 2 * var(--gap-x))); /* wafer + air either side */
		align-items: flex-end;
	}

	:root[data-version='4'] .hero__wafer {
		margin-right: calc(var(--wafer-size) * var(--gap-x));
	}

	/* a floating vertical rule left of the cell, as tall as the wafer: it lines up with the
	   headline's top and the nonprofit line's bottom, not touching the rules above/below */
	:root[data-version='4']:not([data-header='b']) .hero__divider {
		display: block;
		position: absolute;
		left: calc(100cqw - var(--cell));
		top: calc((100cqh - var(--wafer-size)) / 2);
		width: max(1px, calc(2 * var(--u)));
		height: var(--wafer-size);
		background: var(--white);
	}

	:root[data-version='4']:not([data-header='b']) .hero__headline--d,
	:root[data-version='4']:not([data-header='b']) .hero__about--d {
		display: block;
		position: absolute;
		left: 0;
		max-width: calc(100cqw - var(--cell) - 1.5em);
	}

	:root[data-version='4'] .hero__headline--d {
		/* the wafer is centred vertically in the stage, so its top edge is here */
		top: calc((100cqh - var(--wafer-size)) / 2);
		width: 9.4em;
		font-size: clamp(26px, calc(104 * var(--u)), 63px);
		/* sit the cap height, not the line box, on the wafer's top edge */
		margin-top: -0.14em;
	}

	:root[data-version='4'] .hero__about--d {
		top: calc((100cqh + var(--wafer-size)) / 2);
		transform: translateY(-100%);
		/* and the baseline-ish bottom on the wafer's bottom edge */
		margin-top: 0.2em;
		font-size: clamp(16px, calc(58 * var(--u)), 35px);
	}
}

/*
 * Version 4 layout options for review (?v=4&hero=1…4, desktop only; no hero = the
 * divider). All keep the wafer's equal top/bottom air and the CTA above the fold.
 */
@media (min-width: 721px) {
	:root[data-version='4'][data-hero]:not([data-header='b']) .hero__divider {
		display: none;
	}

	/* 1 · halves: text fills the left half, the wafer floats centred in the right half */
	:root[data-version='4'][data-hero='1'] .hero__stage {
		--wafer-size: min(var(--wafer-max), 40cqw, calc(100cqh / var(--wafer-k)));
	}

	:root[data-version='4'][data-hero='1'] .hero__wafer {
		margin-right: calc((50cqw - var(--wafer-size)) / 2);
	}

	:root[data-version='4'][data-hero='1']:not([data-header='b']) .hero__headline--d,
	:root[data-version='4'][data-hero='1']:not([data-header='b']) .hero__about--d {
		max-width: calc(50cqw - 1.5em);
	}

	/* 2 · logo grid: the logo is 15 equal cells; text spans the first 6, the wafer is
	   centred under the last 6 (edges on cell lines when it's at full size) */
	:root[data-version='4'][data-hero='2'] .hero__stage {
		--wafer-size: min(var(--wafer-max), 40cqw, calc(100cqh / var(--wafer-k)));
	}

	:root[data-version='4'][data-hero='2'] .hero__wafer {
		margin-right: calc((40cqw - var(--wafer-size)) / 2);
	}

	:root[data-version='4'][data-hero='2']:not([data-header='b']) .hero__headline--d,
	:root[data-version='4'][data-hero='2']:not([data-header='b']) .hero__about--d {
		max-width: 40cqw;
	}

	/* 3 · centred wafer, diagonal text: headline top-left, nonprofit line bottom-right */
	:root[data-version='4'][data-hero='3'] .hero__stage {
		align-items: center;
	}

	:root[data-version='4'][data-hero='3'] .hero__wafer {
		margin-right: 0;
	}

	:root[data-version='4'][data-hero='3']:not([data-header='b']) .hero__headline--d,
	:root[data-version='4'][data-hero='3']:not([data-header='b']) .hero__about--d {
		max-width: calc((100cqw - var(--wafer-size)) / 2 - 1.5em);
	}

	:root[data-version='4'][data-hero='3'] .hero__about--d {
		left: auto;
		right: 0;
		text-align: right;
	}

	/* 4 · no divider; the headline grows to fill the space left of the wafer's cell */
	:root[data-version='4'][data-hero='4'] .hero__headline--d {
		font-size: min(calc((100cqw - var(--cell)) / 10.5), 96px);
	}
}

/* review helper: switcher shown only when ?hero is in the URL */
.option-switcher {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px;
	border: 1px solid #333;
	background: rgba(0, 0, 0, 0.85);
	font-size: 13px;
}

.option-switcher a {
	padding: 6px 10px;
	color: var(--grey);
	text-decoration: none;
}

.option-switcher a[aria-current] {
	background: var(--white);
	color: var(--black);
}

/* Version 1 (?v=1): a single quiet caption under the logo's rule, at the CTA's text size */
.hero__tl-single,
.hero__belief {
	display: none;
}

:root[data-version='1'] .hero__tl-single {
	display: block;
}

:root[data-version='1'] .hero__tl-pair {
	display: none;
}

:root[data-version='1'] .hero__taglines {
	justify-content: flex-start;
	font-size: var(--text-sm);
}

/*
 * Version 2 (?v=2, desktop): the tagline split into two large blocks either side of
 * the wafer, level with its top edge. Phones keep the caption under the logo.
 */
.hero__side {
	display: none;
}

@media (min-width: 721px) {
	:root[data-version='2']:not([data-header='b']) .hero__taglines {
		display: none;
	}

	:root[data-version='2']:not([data-header='b']) .hero__side {
		display: block;
		position: absolute;
		/* the wafer is centred in the stage (equal gaps), so its top edge is here */
		top: calc((100cqh - var(--wafer-size)) / 2);
		width: max-content;
		max-width: calc((100cqw - var(--wafer-size)) / 2 - 1em);
		margin: 0;
		color: var(--grey);
		font-size: clamp(22px, calc(88 * var(--u)), 44px);
		line-height: 1.15;
		/* sit the cap height, not the line box, on the wafer's top edge */
		margin-top: -0.12em;
	}

	:root[data-version='2'] .hero__side--start {
		left: calc(10 * var(--u));
	}

	:root[data-version='2'] .hero__side--end {
		right: calc(10 * var(--u));
	}
}

/* Header B: small logo, one tagline on the logo's baseline, one rule below. */
:root[data-header='b'] .fold {
	--gap-top: 0.169; /* 268u */
	--gap-bottom: 0.238; /* 378u */
	--gap-pad: 0px;
}

:root[data-header='b'] .hero {
	padding-top: calc(176 * var(--u));
}

:root[data-header='b'] .hero__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	padding-bottom: calc(56 * var(--u));
	border-bottom: calc(2 * var(--u)) solid var(--white);
}

:root[data-header='b'] .hero__logo {
	flex: 0 1 calc(1220 * var(--u));
	padding: 0;
	border: 0;
}

.hero__tagline {
	margin: 0;
	color: var(--grey);
	font-size: var(--text-sm);
	text-align: right;
}

/* live WebGL wafer (js/hero-wafer.js); falls back to the static SVG */
.hero__wafer canvas,
.hero__wafer img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.hero__wafer canvas {
	will-change: transform;
}

/* Letter
   A typed letter on a sheet of US-letter paper (8.5 × 11) lying on the dark page:
   warm off-white stock, fine grain and soft cloudy formation, light fall-off toward the edges,
   a contact + drop shadow, and slightly spread ink. All CSS + two tiny inline SVG noise tiles. */
.letter {
	/* Sheet width; padding is derived from it so the page keeps its proportions at any size.
	   (A % here resolves against <main>, exactly like `width: 100%`.) */
	--sheet: min(100%, max(calc(1560 * var(--u)), 720px));
	--ink: #161514;
	--blank-line: 1.3em; /* = one line of type */
	/* ABC Areal Mono Regular, as in the Figma mock */
	font-weight: 400;
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	width: var(--sheet);
	aspect-ratio: 8.5 / 11;
	margin: calc(320 * var(--u)) auto calc(392 * var(--u));
	padding: calc(var(--sheet) * 0.08) calc(var(--sheet) * 0.135) calc(var(--sheet) * 0.075) calc(var(--sheet) * 0.122);
	color: var(--ink);
	/* Type scales with the sheet (≈ sheet width / 60), like a real page would. */
	font-size: min(max(calc(26 * var(--u)), 12px), 16px);
	line-height: 1.3;
	/* Light falls from the upper left; edges and corners sink a touch, like a sheet that isn't perfectly flat. */
	background:
		radial-gradient(120% 90% at 28% 18%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60%),
		radial-gradient(140% 110% at 50% 45%, rgba(0, 0, 0, 0) 64%, rgba(60, 50, 35, 0.09) 100%),
		linear-gradient(172deg, #fbfaf6 0%, #f6f4ee 55%, #efece5 100%);
	box-shadow:
		/* paper edge catching light */
		inset 0 0 0 0.5px rgba(255, 255, 255, 0.8),
		/* contact shadow where the sheet meets the surface */
		0 1px 1px rgba(0, 0, 0, 0.9),
		0 2px 3px -1px rgba(0, 0, 0, 0.8),
		/* soft drop shadow, a little longer toward the bottom */
		0 22px 40px -14px rgba(0, 0, 0, 0.95),
		/* faint lamp-lit surface around the sheet, so the shadow has something to fall on */
		0 0 calc(220 * var(--u)) calc(60 * var(--u)) rgba(255, 255, 255, 0.045);
	transform: rotate(-0.35deg);
	/* ink spreading a hair into the fibres */
	text-shadow: 0 0 0.6px rgba(22, 21, 20, 0.4);
}

.letter::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* Paper tooth (fine noise) and formation (soft, cloudy density changes in the pulp), multiplied onto the sheet. */
.letter::before {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .27 0 0 0 0 .22 0 0 0 -1.7 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='850' height='1100' viewBox='0 0 850 1100' preserveAspectRatio='none'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .38 0 0 0 0 .31 0 0 0 -1.3 .74'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
	/* fine grain tiles (seamless, via stitchTiles); the cloudy formation is one image
	   stretched over the whole sheet so it never repeats */
	background-size: 200px 200px, 100% 100%;
	background-repeat: repeat, no-repeat;
	opacity: 0.3;
	mix-blend-mode: multiply;
}

/* Letterhead */
.letter__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 3em;
}

.letter__head p {
	margin: 0;
}

.letter__mark {
	position: relative;
	flex: none;
	width: max(48px, calc(125 * var(--u)));
	aspect-ratio: 125 / 115;
	transform: scaleY(-1);
	/* printed, not pasted: let the paper show through the black a little */
	opacity: 0.92;
	mix-blend-mode: multiply;
}

.letter__mark img {
	position: absolute;
}

.letter__mark-circle {
	left: 7.8%;
	top: -1%;
	width: 93.2%;
	height: 101.9%;
}

.letter__mark-half {
	left: 0;
	top: 1.9%;
	width: 44.1%;
	height: 96.1%;
}

.letter__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Condensed copy for phones; swapped in by the mobile media query. */
.letter__body--short {
	display: none;
}

/* Spaced like a typed letter: one blank line between paragraphs, after the greeting,
   and before the sign-off; the sign-off's two lines sit together. */
.letter__body p,
.letter__body ol {
	margin: 0 0 var(--blank-line);
}

.letter__body ol {
	padding-left: 2.25em;
}

/* Typed ink is never perfectly even: the ribbon runs a little lighter and darker block to block. */
.letter__text > :nth-child(3n + 2) {
	color: rgba(22, 21, 20, 0.88);
}

.letter__text > :nth-child(4n + 3) {
	color: rgba(22, 21, 20, 0.93);
}

.letter__body a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.letter__body a:hover,
.letter__body a:focus-visible {
	text-decoration-thickness: 2px;
}

/* Sign-off follows the body after one blank line (the last paragraph's margin). */
.letter__signoff {
	padding-top: 0;
}

.letter__signoff p {
	margin: 0;
}


/* Grants */
.grants {
	margin-bottom: calc(206 * var(--u));
}

.grants__title {
	margin: 0;
	padding-block: calc(43 * var(--u));
	border-top: calc(2 * var(--u)) solid var(--white);
	border-bottom: calc(2 * var(--u)) solid var(--white);
	font-size: var(--text-md);
	font-weight: 400;
}

.grants__list {
	margin: 0;
	padding: calc(64 * var(--u)) 0 0;
	list-style: none;
	font-family: 'Inter Variable', var(--font-sans);
	font-weight: 200;
	font-size: var(--text-sm);
}

.grants__row {
	display: flex;
	align-items: baseline;
	gap: 0.75em;
	padding-bottom: calc(27 * var(--u));
}

.grants__name {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.75em;
	min-width: 0;
}

.grants__link {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	border-radius: 2px;
}

.grants__link:hover,
.grants__link:focus-visible {
	text-decoration: underline;
}

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

.grants__ext {
	display: inline-block;
	margin-left: 0.25em;
	font-size: 0.85em;
	opacity: 0.6;
}

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

.grants__meta {
	color: rgba(255, 255, 255, 0.55);
}

.grants__leader {
	flex: 1;
	min-width: 1.5em;
	height: 0.16em;
	/* small, quiet dots: ~0.1em across, every 0.45em */
	background: radial-gradient(circle at center, currentColor 0.045em, transparent 0.06em) 0 50% / 0.45em 0.16em
		repeat-x;
	opacity: 0.45;
}

.grants__year {
	flex-shrink: 0;
}

/* Footer */
.footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	padding-block: calc(80 * var(--u)) calc(108 * var(--u));
}

/* its own row under the logo and icons */
.footer__copyright {
	flex-basis: 100%;
	margin: 0;
	color: var(--grey);
	opacity: 0.6;
	font-size: clamp(12px, calc(28 * var(--u)), 16px);
}

.footer__logo {
	width: max(140px, calc(839 * var(--u)));
	height: auto;
}

.footer__links {
	display: flex;
	align-items: center;
	gap: calc(79 * var(--u));
}

.footer__socials {
	display: flex;
	gap: calc(12 * var(--u));
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer__icon {
	display: block;
	color: var(--white);
	border-radius: 50%;
	transition: opacity 0.15s ease;
}

.footer__icon svg {
	display: block;
	width: max(26px, calc(100 * var(--u)));
	height: auto;
}

.footer a:hover,
.footer a:focus-visible {
	opacity: 0.75;
}

.footer a:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 3px;
}

@media (max-width: 720px) {
	.hero__taglines {
		flex-direction: column;
		gap: 0.25em;
	}

	/* Version 4 on phones: logo, headline, wafer, nonprofit line. The headline runs
	   to about two lines; the nonprofit line fills one (it is 19.3× its font size wide). */
	:root[data-version='4']:not([data-header='b']) .hero__headline--m,
	:root[data-version='4']:not([data-header='b']) .hero__about--m {
		display: block;
		flex-shrink: 0;
	}

	:root[data-version='4'] .hero__headline--m {
		padding-top: 0.45em;
		font-size: calc(100cqw / 10.5);
	}

	:root[data-version='4'] .hero__about--m {
		padding-bottom: 0.9em;
		font-size: calc(100cqw / 19.8);
		white-space: nowrap;
	}

	/* Default (and version 2) on phones: "what Vensa is" stays under the logo, "what it believes" moves under the wafer.
	   Both are sized to fill one line of the column: the longer line is 19.4× its font
	   size wide in ABC Areal, so column width ÷ 19.8 leaves a hair of room. */
	:root:not([data-version='1']):not([data-version='4']) .hero__taglines,
	:root:not([data-version='1']):not([data-version='4']) .hero__belief {
		font-size: calc(100cqw / 19.8); /* cqw = the column's own width, scrollbar excluded */
		line-height: 1.15;
		white-space: nowrap;
	}

	:root:not([data-version='1']):not([data-version='4']) .hero__taglines {
		padding-top: 0.5em;
	}

	:root:not([data-version='1']):not([data-version='4']) .hero__tl-belief {
		display: none;
	}

	:root:not([data-version='1']):not([data-version='4']) .hero__belief {
		display: block;
		flex-shrink: 0;
		margin: 0;
		padding-bottom: 0.9em;
		color: var(--grey);
	}

	.fold {
		--wafer-max: calc(0.8 * (100vw - 2 * var(--gutter)));
		--gap-top: 0.14; /* ~40px at 375, above and below */
		--gap-bottom: 0.14;
		--gap-pad: 0px;
	}

	:root[data-header='b'] .fold {
		--gap-top: 0.16;
		--gap-bottom: 0.2;
	}

	:root[data-header='b'] .hero__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding-bottom: 14px;
		border-bottom-width: 1px;
	}

	:root[data-header='b'] .hero__logo {
		flex: none;
		width: 60%;
	}

	.hero__tagline {
		text-align: left;
	}

	.letter {
		width: 100%;
		margin-block: 48px;
		padding: 18px 18px 16px;
		font-size: 12px;
		line-height: 1.24;
		--blank-line: 1.24em;
		transform: rotate(-0.5deg);
		box-shadow:
			inset 0 0 0 0.5px rgba(255, 255, 255, 0.7),
			0 1px 1px rgba(0, 0, 0, 0.9),
			0 14px 26px -10px rgba(0, 0, 0, 0.95),
			0 0 40px 8px rgba(255, 255, 255, 0.04);
	}

	.letter__head {
		margin-bottom: 2em;
	}

	.letter__mark {
		width: 30px;
	}

	.letter__body--full {
		display: none;
	}

	.letter__body--short {
		display: flex;
	}

	.letter__body ol {
		padding-left: 2em;
	}



	.grants {
		margin-bottom: 48px;
	}

	.grants__title {
		padding-block: 16px;
		border-width: 1px;
	}

	.grants__list {
		padding-top: 20px;
	}

	.grants__row {
		padding-bottom: 12px;
	}

	.grants__name {
		flex-direction: column;
		row-gap: 2px;
	}

	.grants__meta {
		font-size: 0.85em;
	}

	.footer {
		padding-block: 32px 40px;
	}

	.footer__links {
		gap: 20px;
	}
}