:root {
	--ground: #DED2BC;
	--surface: #D1C3AA;
	--surface-2: #C1B296;
	--line: #9E9074;
	--ink-soft: #564C39;
	--ink: #2B261C;

	--accent: #A65E2E;
	--accent-ink: #FFF;

	--vipe-cca: "Playfair Display", "Playfair Display Fallback", Georgia, "Times New Roman", serif;
	--vipe-eb0: "Literata", "Literata Fallback", Georgia, "Times New Roman", serif;
	--vipe-039: "JetBrains Mono", "JetBrains Mono Fallback", Consolas, "Liberation Mono", Menlo, monospace;

	--step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.80rem);
	--step--1: clamp(0.85rem, 0.82rem + 0.15vw, 0.94rem);
	--vipe-f31: clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem);
	--vipe-6ef: clamp(1.18rem, 1.12rem + 0.35vw, 1.38rem);
	--vipe-ad8: clamp(1.40rem, 1.30rem + 0.55vw, 1.70rem);
	--vipe-769: clamp(1.68rem, 1.52rem + 0.85vw, 2.12rem);
	--vipe-fc7: clamp(2.02rem, 1.78rem + 1.25vw, 2.65rem);
	--vipe-be1: clamp(2.42rem, 2.08rem + 1.80vw, 3.32rem);
	--vipe-1b7: clamp(2.90rem, 2.44rem + 2.50vw, 4.15rem);

	--space-3xs: clamp(0.25rem, 0.22rem + 0.10vw, 0.35rem);
	--space-2xs: clamp(0.50rem, 0.46rem + 0.20vw, 0.65rem);
	--space-xs: clamp(0.75rem, 0.68rem + 0.30vw, 0.95rem);
	--space-s: clamp(1.00rem, 0.90rem + 0.45vw, 1.30rem);
	--space-m: clamp(1.50rem, 1.35rem + 0.75vw, 2.00rem);
	--space-l: clamp(2.00rem, 1.75rem + 1.15vw, 2.80rem);
	--space-xl: clamp(3.00rem, 2.60rem + 1.75vw, 4.10rem);
	--space-2xl: clamp(4.00rem, 3.40rem + 2.60vw, 5.80rem);
	--space-3xl: clamp(5.50rem, 4.60rem + 3.80vw, 8.00rem);

	--measure-prose: 65ch;
	--measure-ledger: 78rem;
	--measure-wide: 88rem;

	--ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-firm: cubic-bezier(0.4, 0, 0.2, 1);
	--dur-rapid: 140ms;
	--dur-moderate: 240ms;
	--dur-composed: 420ms;

	--header-height-full: 4.75rem;
	--header-height-condensed: 3.5rem;
	--dock-height: 4.125rem;

	--radius-none: 0px;
	--radius-subtle: 2px;
}

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

* {
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height-condensed) + 1.5rem);
	background-color: var(--ground);
	color: var(--ink);
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--ground);
	color: var(--ink);
	font-family: var(--vipe-eb0);
	font-size: var(--vipe-f31);
	line-height: 1.58;
	letter-spacing: -0.006em;
	text-rendering: optimizeLegibility;

	-webkit-font-smoothing: antialiased;
	padding-bottom: var(--dock-height);
	overflow-x: hidden;
}

@media (min-width: 1024px) {
	body {
		padding-bottom: 0;
	}
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
optgroup,
select,
textarea {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--dur-rapid) var(--ease-firm),
							text-decoration-color var(--dur-rapid) var(--ease-firm);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--vipe-cca);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-wrap: balance;
}

h1 {
	font-size: var(--vipe-be1);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.028em;
}

h2 {
	font-size: var(--vipe-fc7);
	line-height: 1.12;
	letter-spacing: -0.024em;
}

h3 {
	font-size: var(--vipe-ad8);
	line-height: 1.22;
	letter-spacing: -0.015em;
}

h4 {
	font-size: var(--vipe-6ef);
	line-height: 1.3;
}

p {
	max-width: var(--measure-prose);
	color: var(--ink);
}

p + p {
	margin-top: var(--space-s);
}

.standfirst {
	font-size: var(--vipe-6ef);
	line-height: 1.48;
	color: var(--ink);
	max-width: 58ch;
}

.meta-label {
	font-family: var(--vipe-039);
	font-size: var(--step--1);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
}

.figure-num {
	font-family: var(--vipe-039);
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: -0.02em;
}

code,
pre,
kbd,
samp {
	font-family: var(--vipe-039);
	font-size: 0.9em;
}

ul,
ol {
	list-style-position: outside;
	padding-left: var(--space-m);
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: var(--space-l) 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-s);
	background-color: var(--accent);
	color: var(--accent-ink);
	padding: var(--space-xs) var(--space-m);
	font-family: var(--vipe-039);
	font-size: var(--step--1);
	font-weight: 500;
	text-decoration: none;
	z-index: 9999;
	border-radius: var(--radius-subtle);
	transition: top var(--dur-rapid) var(--ease-editorial);
}

.skip-link:focus {
	top: var(--space-s);
}

.shell-container {
	width: 100%;
	max-width: var(--measure-wide);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-s);
	padding-right: var(--space-s);
}

@media (min-width: 768px) {
	.shell-container {
		padding-left: var(--space-l);
		padding-right: var(--space-l);
	}
}

.shell-ledger {
	width: 100%;
	max-width: var(--measure-ledger);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-s);
	padding-right: var(--space-s);
}

@media (min-width: 768px) {
	.shell-ledger {
		padding-left: var(--space-l);
		padding-right: var(--space-l);
	}
}

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

.icon {
	width: 1.25em;
	height: 1.25em;
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
	fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Semantic utilities & typography extensions */
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }

.nowrap {
	white-space: nowrap;
}

.lede-text {
	font-size: var(--vipe-6ef);
	line-height: 1.5;
	color: var(--ink);
	max-width: var(--measure-prose);
}

.subtle-line {
	height: 1px;
	background-color: var(--line);
	width: 100%;
}

.surface-box {
	background-color: var(--surface);
	border: 1px solid var(--line);
	padding: var(--space-m);
}

.surface-field {
	background-color: var(--surface-2);
	border: 1px solid var(--line);
	padding: var(--space-s);
}

.stack-tight > * + * {
	margin-top: var(--space-xs);
}

.stack-flow > * + * {
	margin-top: var(--space-m);
}

.stack-roomy > * + * {
	margin-top: var(--space-l);
}

.stack-editorial > * + * {
	margin-top: var(--space-xl);
}

.cluster {
	display: flex;
	flex-wrap: wrap;

	gap: var(--space-xs);
	align-items: center;
}

.cluster-between {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	justify-content: space-between;
	align-items: baseline;
}

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