
:root {
	--cream: #F4ECDD;
	--cream-deep: #EFE4D0;
	--oat: #E7DAC2;
	--oat-deep: #DCCBAE;
	--oxblood: #5C1A1E;
	--oxblood-deep: #461215;
	--oxblood-soft: #7A2A2F;
	--brown: #3B2721;
	--brown-deep: #2C1D18;
	--charcoal: #231D1B;
	--clay: #9C5236;
	--clay-deep: #84432B;
	--rule: #CFBC9E;
	--rule-strong: #B9A27F;
	--gold: #B38B3F;
	--gold-soft: #D2B477;
	--gold-text: #7A5A1E;

	--ink: var(--charcoal);
	--ink-soft: #4A3E39;
	--ink-mute: #6B5C53;
	--ground: var(--cream);
	--surface: var(--oat);
	--on-dark: #F4ECDD;
	--on-dark-soft: #D9CBB4;
	--on-dark-mute: #B3A28C;
	--rule-dark: rgba(244, 236, 221, 0.16);
	--error: #9B1C1C;
	--error-bg: #F6DCD6;
	--ok: #3F5B2E;
	--ok-bg: #E2E6CF;

	--cike-e3a: 'Zilla Slab', 'Rockwell', 'Roboto Slab', Georgia, serif;
	--cike-a3a: 'Alegreya Sans', 'Gill Sans', 'Trebuchet MS', system-ui, sans-serif;
	--cike-b19: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

	--fs-xs: 0.8125rem;
	--fs-sm: 0.9375rem;
	--fs-base: 1.0625rem;
	--fs-md: 1.1875rem;
	--fs-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
	--fs-h6: 1rem;

	--fs-h5: 1.125rem;
	--fs-h4: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
	--fs-h3: clamp(1.35rem, 1.15rem + 0.9vw, 1.9rem);
	--fs-h2: clamp(1.6rem, 1.1rem + 2.2vw, 2.9rem);
	--fs-h1: clamp(2rem, 1.2rem + 4.2vw, 4.75rem);
	--fs-display: clamp(2.4rem, 1.2rem + 6vw, 6.5rem);
	--fs-numeral: clamp(3.5rem, 2rem + 7vw, 8.5rem);
	--fs-mono: 0.9375rem;
	--fs-eyebrow: 0.78rem;

	--lh-tight: 1.05;
	--lh-snug: 1.18;
	--lh-head: 1.12;
	--lh-body: 1.6;
	--measure: 66ch;
	--measure-narrow: 52ch;
	--measure-wide: 78ch;

	--track-display: -0.01em;
	--track-tight: -0.018em;
	--track-eyebrow: 0.14em;
	--track-mono: 0.01em;

	--unit: 8px;
	--pitch: 32px;
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;
	--section: clamp(4rem, 8vw, 7.5rem);
	--section-tight: clamp(2.5rem, 5vw, 4.5rem);
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--shell: 1240px;
	--shell-narrow: 860px;
	--shell-wide: 1440px;

	--radius-frame: 12px;
	--radius-control: 3px;
	--radius-pill: 999px;

	--shadow-1: 0 1px 0 rgba(59, 39, 33, 0.08), 0 1px 2px rgba(59, 39, 33, 0.08);
	--shadow-2: 0 1px 0 rgba(59, 39, 33, 0.06), 0 6px 16px -6px rgba(59, 39, 33, 0.22);
	--shadow-3: 0 2px 0 rgba(59, 39, 33, 0.05), 0 18px 40px -16px rgba(44, 29, 24, 0.38);
	--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(59, 39, 33, 0.08);
	--shadow-press: inset 0 2px 3px rgba(35, 29, 27, 0.25);

	--ledger-line: rgba(185, 162, 127, 0.38);
	--ledger-line-dark: rgba(244, 236, 221, 0.07);
	--ledger-bg: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--pitch) - 1px), var(--ledger-line) calc(var(--pitch) - 1px), var(--ledger-line) var(--pitch));
	--ledger-bg-dark: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--pitch) - 1px), var(--ledger-line-dark) calc(var(--pitch) - 1px), var(--ledger-line-dark) var(--pitch));
	--margin-rule: var(--oxblood);

	--dur-instant: 90ms;
	--dur-fast: 140ms;
	--dur-base: 180ms;
	--dur-slow: 320ms;
	--dur-slower: 560ms;
	--dur-reveal: 800ms;
	--dur-marquee: 42s;
	--dur-marquee-slow: 58s;
	--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
	--ease-snap: cubic-bezier(0.2, 0.9, 0.25, 1.15);
	--ease-ledger: cubic-bezier(0.7, 0, 0.2, 1);

	--header-h: 76px;
	--utility-h: 38px;
	--consent-offset: 0px;

	--z-base: 1;
	--z-sticky: 40;
	--z-header: 60;
	--z-mega: 70;
	--z-drawer: 80;
	--z-chat: 90;
	--z-consent: 95;
	--z-skip: 100;

	color-scheme: light;
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 1rem);
	overflow-x: clip;
}

body {
	margin: 0;
	min-height: 100vh;
	background-color: var(--ground);
	color: var(--ink);
	font-family: var(--cike-a3a);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	font-weight: 400;
	font-kerning: normal;
	font-variant-ligatures: common-ligatures;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
	overflow-wrap: break-word;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, pre, table { margin: 0; }

ul[class], ol[class] {
	list-style: none;
	padding: 0;
}

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

img {
	height: auto;
	font-style: italic;
	background-color: var(--oat);
}

input, button, textarea, select {

	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

[hidden] { display: none !important; }

:target { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

::selection {
	background: var(--oxblood);
	color: var(--cream);
}

:focus { outline: none; }

:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: var(--radius-control);
}

.icon {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	fill: currentColor;
	stroke: currentColor;
	vertical-align: -0.18em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .display {
	font-family: var(--cike-e3a);
	font-weight: 600;
	line-height: var(--lh-head);
	color: var(--oxblood);
	letter-spacing: var(--track-display);
	font-variant-numeric: oldstyle-nums;
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: manual;
}

h1, .h1 {
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: var(--lh-tight);
	letter-spacing: var(--track-tight);
}

h2, .h2 {
	font-size: var(--fs-h2);
	line-height: var(--lh-head);
}

h3, .h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-snug);
}

h4, .h4 {
	font-size: var(--fs-h4);
	line-height: 1.25;
	letter-spacing: 0;
}

h5, h6 {
	font-size: var(--fs-h5);
	letter-spacing: 0;
	line-height: 1.3;
}

.display {
	font-size: var(--fs-display);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: var(--track-tight);
}

p { text-wrap: pretty; }

.lead {
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--ink-soft);
	max-width: 56ch;
}

.small, small { font-size: var(--fs-sm); }

.mono, code, kbd, samp {
	font-family: var(--cike-b19);
	font-size: var(--fs-mono);
	font-weight: 400;
	letter-spacing: var(--track-mono);
	font-variant-numeric: tabular-nums lining-nums;
}

code {
	background: var(--oat);
	padding: 0.05em 0.35em;
	border-radius: var(--radius-control);
	font-size: 0.88em;
}

strong, b { font-weight: 700; }

em, i { font-style: italic; }

a {
	color: var(--oxblood);
	text-decoration-line: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.2em;
	transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out), text-decoration-thickness var(--dur-fast) var(--ease-out);
}

a:hover {
	color: var(--clay-deep);
	text-decoration-color: var(--oxblood);
	text-decoration-thickness: 2px;

}

a:active { color: var(--oxblood-deep); }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--cike-b19);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--clay-deep);
	padding-bottom: 0.35em;
	border-bottom: 2px solid var(--gold);
	line-height: 1.4;
	max-width: 100%;
}

.eyebrow--on-dark { color: var(--gold-soft); }

.kicker-num {
	font-family: var(--cike-b19);
	font-size: var(--fs-xs);
	color: var(--gold-text);
	letter-spacing: 0.06em;
}

.on-dark { color: var(--on-dark); }

.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--cream); }

.on-dark a {
	color: var(--cream);
	text-decoration-color: var(--gold);
}

.on-dark a:hover { color: var(--gold-soft); }

.prose {
	max-width: var(--measure);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	color: var(--ink);
}

.prose > * + * { margin-top: 1em; }

.prose h2 {
	font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.1rem);
	margin-top: 2.2em;
}

.prose h3 {
	font-size: var(--fs-h4);
	margin-top: 1.9em;
}

.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }

.prose ul, .prose ol { padding-left: 1.3em; }

.prose li + li { margin-top: 0.4em; }

.prose ul li::marker { color: var(--gold); }

.prose ol li::marker {
	font-family: var(--cike-b19);
	font-size: 0.88em;
	color: var(--clay-deep);
}

.prose blockquote {
	border-left: 3px solid var(--oxblood);
	padding: 0.25em 0 0.25em 1.1em;
	font-family: var(--cike-e3a);
	font-size: var(--fs-h4);
	color: var(--oxblood);
	hanging-punctuation: first;
}

.prose hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: 2em 0;
}

.prose a { font-weight: 500; }

.prose dt {
	font-weight: 700;
	margin-top: 1em;
}

.prose dd {
	margin-left: 0;
	color: var(--ink-soft);
}

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

.shell--narrow { max-width: calc(var(--shell-narrow) + var(--gutter) * 2); }

.shell--wide { max-width: calc(var(--shell-wide) + var(--gutter) * 2); }

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

.section--tight { padding-block: var(--section-tight); }

.section + .section { border-top: 1px solid var(--rule); }

.section--oat { background-color: var(--oat); }

.section--brown {
	background-color: var(--brown);
	color: var(--on-dark);
}

.section--oxblood {
	background-color: var(--oxblood);
	color: var(--on-dark);
}

.section--brown h2, .section--brown h3,
.section--oxblood h2, .section--oxblood h3 { color: var(--cream); }

.section-rule {
	display: block;
	height: 1px;
	border: 0;
	margin: 0;
	background: var(--rule);
	transform-origin: left center;
}

.section-rule--gold {
	background: var(--gold);
	height: 2px;
}

.section-head {
	display: grid;
	gap: var(--sp-4);
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
	max-width: 48rem;
}

.section-head > * { min-width: 0; }

.ledger {
	background-image: var(--ledger-bg);
	background-position: 0 0;
	background-size: 100% var(--pitch);
}

.ledger--dark { background-image: var(--ledger-bg-dark); }

.ledger-margin {
	position: relative;
	padding-left: clamp(1.25rem, 3vw, 2.5rem);
}

.ledger-margin::before,
.ledger-margin::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--margin-rule);
	opacity: 0.55;
}

.ledger-margin::before { left: 0; }

.ledger-margin::after {
	left: 4px;
	opacity: 0.3;
}

.stack {
	display: flex;
	flex-direction: column;
	gap: var(--stack-gap, var(--sp-4));
}

.stack > * { min-width: 0; }

.stack--sm { --stack-gap: var(--sp-2); }
.stack--lg { --stack-gap: var(--sp-6); }
.stack--xl { --stack-gap: var(--sp-8); }

.cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cluster-gap, var(--sp-3));
}

.cluster > * { min-width: 0; }

.grid {
	display: grid;
	gap: var(--grid-gap, clamp(1rem, 2.5vw, 2rem));
	grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
}

.grid > * { min-width: 0; }

.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 16rem)), 1fr)); }

@media (min-width: 640px) {
	.grid--2 { --cols: 2; }
	.grid--3 { --cols: 2; }
	.grid--4 { --cols: 2; }
}

@media (min-width: 1024px) {
	.grid--3 { --cols: 3; }
	.grid--4 { --cols: 4; }
}

.split {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

.split > * { min-width: 0; }

@media (min-width: 900px) {
	.split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.split--reverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.split--center { align-items: center; }
}

.frame {
	position: relative;
	border-radius: var(--radius-frame);
	overflow: hidden;
	background: var(--oat);
	box-shadow: var(--shadow-3);
	isolation: isolate;
}

.frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.frame--ruled {
	outline: 1px solid var(--rule);
	outline-offset: 8px;
}

.figure-caption {
	font-family: var(--cike-b19);
	font-size: var(--fs-xs);
	color: var(--ink-mute);
	margin-top: 0.85rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--rule);
	letter-spacing: 0.02em;
}

.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-3x2 { aspect-ratio: 3 / 2; }
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-1x1 { aspect-ratio: 1 / 1; }

.measure { max-width: var(--measure); }
.measure-narrow { max-width: var(--measure-narrow); }
.center { text-align: center; margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--sp-3); }
.mt-md { margin-top: var(--sp-5); }
.mt-lg { margin-top: var(--sp-7); }

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

.skip-link {
	position: absolute;
	left: var(--gutter);
	top: 0;
	z-index: var(--z-skip);
	padding: 0.85rem 1.2rem;
	min-height: 44px;
	background: var(--oxblood);
	color: var(--cream);
	font-weight: 700;
	border-radius: 0 0 var(--radius-control) var(--radius-control);
	text-decoration: none;
	transform: translateY(-120%);
	transition: transform var(--dur-base) var(--ease-out);
}

.skip-link:focus,
.skip-link:focus-visible {
	transform: translateY(0);
	color: var(--cream);
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

@media (max-width: 1023px) {
	:root { --header-h: 66px; }
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-instant: 0ms;
		--dur-fast: 0ms;
		--dur-base: 0ms;
		--dur-slow: 0ms;
		--dur-slower: 0ms;
		--dur-reveal: 0ms;
	}

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

@media print {
	.utility-bar, .masthead, .site-footer, .cookie-bar, .chat-launcher, .chat-panel, .marquee { display: none !important; }
	body {
		background: #FFF;
		color: #000;
	}
	.ledger { background-image: none; }
}
