:root {
	--ground:#EDE6E4;
	--surface:#DFD7D5;
	--surface-2:#CEC5C2;

	--line:#ABA2A0;
	--ink-soft:#514C4A;
	--ink:#2B2827;
	--accent:#A9605F;
	--accent-ink:#FFF;

	--duha-28f:"Fraunces", "Fraunces Fallback", Georgia, serif;
	--duha-744:'EB Garamond', 'EB Garamond Fallback', Garamond, Georgia, serif;
	--duha-e79:'JetBrains Mono', "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;

	--ease-settle:cubic-bezier(0.16, 1, 0.3, 1);
	--ease-standard:cubic-bezier(0.2, 0, 0, 1);
	--dur-rapid:140ms;
	--dur-moderate:240ms;
	--dur-deliberate:440ms;

	--measure-narrow:48ch;
	--measure-prose:65ch;
	--measure-reading:72ch;
	--container-max:1160px;
	--gutter:clamp(1.25rem, 3.5vw, 2.75rem);

	--step--1:clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
	--duha-b22:clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--duha-482:clamp(1.1875rem, 1.1rem + 0.44vw, 1.375rem);
	--duha-d17:clamp(1.4375rem, 1.3rem + 0.69vw, 1.75rem);
	--duha-b22:clamp(1.75rem, 1.52rem + 1.15vw, 2.25rem);
	--duha-08f:clamp(2.125rem, 1.78rem + 1.72vw, 2.875rem);
	--duha-430:clamp(2.5rem, 2.05rem + 2.25vw, 3.75rem);

	--rule-hairline:1px solid var(--line);
	--ledger-dash:1px dashed var(--line);
}

@view-transition {
	navigation:auto;
}

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

html {
	background-color:var(--ground);
	color:var(--ink);
	font-family:var(--duha-744);
	font-size:100%;
	line-height:1.55;
	text-rendering:optimizeLegibility;

	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	scroll-behavior:smooth;
	scroll-padding-block-start:1.5rem;
}

body {
	margin:0;
	padding:0;
	min-height:100vh;
	background-color:var(--ground);
	color:var(--ink);
	font-family:var(--duha-744);
	font-size:var(--duha-b22);
	font-weight:400;
	overflow-x:hidden;
	position:relative;
}

body::before {
	content:"";
	position:fixed;
	inset:0;
	pointer-events:none;
	background-image:linear-gradient(to bottom, transparent 96%, rgba(171, 162, 160, 0.12) 100%);
	background-size:100% 28px;
	z-index:999;
}

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

input,
button,
textarea,
select {
	font:inherit;
	color:inherit;
}

@media (max-width: 48rem) {
	input,
	select,
	textarea {
		font-size:max(16px, 1rem);
	}
}

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

h1,
h2,
h3,
h4 {
	font-family:var(--duha-28f);
	font-weight:600;
	line-height:1.15;
	color:var(--ink);
	text-wrap:balance;
}

h1 {
	font-size:var(--duha-430);
	font-weight:600;
	letter-spacing:-0.02em;
}

h2 {
	font-size:var(--duha-08f);
	letter-spacing:-0.015em;
}

h3 {
	font-size:var(--duha-b22);
	letter-spacing:-0.01em;
}

h4 {
	font-size:var(--duha-d17);
}

p {
	max-width:var(--measure-prose);
	font-size:var(--duha-b22);
}

p + p {
	margin-top:1.25em;
}

ul,
ol {
	margin:0;
	padding:0;
	list-style:none;
}

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

a:hover {
	color:var(--accent);
}

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

table {
	border-collapse:collapse;
	width:100%;
	font-variant-numeric:tabular-nums lining-nums;
}

code,
pre,
kbd,
samp {
	font-family:var(--duha-e79);
	font-size:0.9em;
	color:#7D3F3E;
}

hr {
	border:0;
	border-top:var(--rule-hairline);
	margin:2.5rem 0;
}

.skip-link {
	position:absolute;
	top:-9999px;
	left:1rem;
	z-index:10000;
	padding:0.75rem 1.25rem;
	background-color:var(--accent);
	color:var(--accent-ink);
	font-family:var(--duha-e79);
	font-size:var(--step--1);
	text-decoration:none;
	font-weight:500;
}

.skip-link:focus {
	top:1rem;
}

.shell-container {

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

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

.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.15em;
	height:1.15em;
	fill:currentColor;
	vertical-align:-0.18em;
	flex-shrink:0;
}

.tabular {
	font-family:var(--duha-e79);
	font-variant-numeric:tabular-nums lining-nums;
	letter-spacing:-0.02em;
}

.meta-label {
	font-family:var(--duha-e79);
	font-size:var(--step--1);
	text-transform:uppercase;
	letter-spacing:0.08em;
	color:var(--ink-soft);
}

.ledger-band {
	border-top:var(--rule-hairline);
	border-bottom:var(--rule-hairline);
	position:relative;
}

.ledger-band::after {
	content:"";
	position:absolute;
	inset-inline:0;
	bottom:3px;
	border-bottom:1px solid var(--surface-2);
	pointer-events:none;
}

@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(root) {
		animation:220ms var(--ease-standard) both vt-fade-out;
	}
	::view-transition-new(root) {
		animation:260ms var(--ease-settle) both vt-fade-in;
	}

	::view-transition-old(hero),
	::view-transition-new(hero) {
		animation-duration:380ms;
		animation-timing-function:var(--ease-settle);
	}

	::view-transition-old(hero-title),
	::view-transition-new(hero-title) {
		animation-duration:320ms;
		animation-timing-function:var(--ease-settle);
	}
}

@keyframes vt-fade-out {
	from { opacity: 1; transform: translateY(0); }
	to { opacity: 0; transform: translateY(-4px); }
}

@keyframes vt-fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

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


/* Foundation Utility Classes & Ledger Baseline Extensions */
.display-title {
	font-family:var(--duha-28f);
	font-weight:600;
	line-height:1.1;
	color:var(--ink);
	letter-spacing:-0.025em;
}

.lede-text {
	font-family:var(--duha-744);
	font-size:var(--duha-482);
	line-height:1.6;
	color:var(--ink-soft);
	max-width:var(--measure-prose);
}

.caption-text {
	font-family:var(--duha-e79);
	font-size:var(--step--1);
	color:var(--ink-soft);
	line-height:1.45;
	letter-spacing:-0.01em;
}

.badge-tag {
	display:inline-flex;
	align-items:center;
	gap:0.35rem;
	padding:0.2rem 0.55rem;
	background-color:var(--surface);
	border:1px solid var(--line);
	color:var(--ink);
	font-family:var(--duha-e79);
	font-size:0.75rem;
	font-weight:500;
	letter-spacing:0.04em;
	text-transform:uppercase;
	min-height:24px;
}

.badge-tag--accent {
	background-color:var(--accent);
	color:var(--accent-ink);
	border-color:var(--accent);
}

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

@media (max-width: 768px) {
	.grid-cols-2 {
		grid-template-columns:minmax(0, 1fr);
	}
}

.divider-rule {
	width:100%;
	height:1px;
	background-color:var(--line);
	margin-block:2.5rem;
}

.surface-box {
	background-color:var(--surface);
	border:1px solid var(--line);
	padding:clamp(1.25rem, 3vw, 2.25rem);
}