:root {
	/* OKLCH-derived Cool Slate Tokens */
	--ground: #e9edf1;
	--surface: #dadee3;
	--surface-2: #c7ccd2;
	--line: #a5aaae;
	--ink-soft: #4a4d51;
	--ink: #27292b;
	--accent: #2f7f8a;
	--accent-ink: #ffffff;


	--belu-629: 'Bitter', 'Bitter Fallback', Georgia, serif;
	--belu-726: 'Zilla Slab', 'Zilla Slab Fallback', Georgia, serif;
	--belu-21c: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace;


	/* Fluid Type Scales (clamp min fits 320px viewport without clipping or word breaks) */
	--step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
	--belu-d3c: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
	--belu-32a: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	--belu-c52: clamp(1.25rem, 1.15rem + 0.6vw, 1.5625rem);
	--belu-590: clamp(1.4375rem, 1.3rem + 0.95vw, 1.953rem);
	--belu-2f1: clamp(1.75rem, 1.5rem + 1.5vw, 2.441rem);
	--belu-1c9: clamp(2.125rem, 1.8rem + 2.1vw, 3.052rem);
	--belu-6c5: clamp(2.5rem, 2.1rem + 2.8vw, 3.815rem);


	/* Spacing Scale */
	--space-3xs: clamp(0.25rem, 0.22rem + 0.1vw, 0.3125rem);
	--space-2xs: clamp(0.5rem, 0.45rem + 0.2vw, 0.625rem);
	--space-xs: clamp(0.75rem, 0.7rem + 0.3vw, 0.9375rem);
	--space-s: clamp(1rem, 0.92rem + 0.45vw, 1.25rem);
	--space-m: clamp(1.5rem, 1.38rem + 0.7vw, 1.875rem);
	--space-l: clamp(2rem, 1.8rem + 1.1vw, 2.5rem);
	--space-xl: clamp(2.75rem, 2.45rem + 1.6vw, 3.75rem);
	--space-2xl: clamp(3.5rem, 3.1rem + 2.2vw, 5rem);
	--space-3xl: clamp(4.5rem, 3.9rem + 3.2vw, 7rem);


	/* Layout Constants */
	--sidebar-w: 280px;
	--content-max-w: 1120px;
	--prose-max-w: 65ch;
	--radius-sm: 2px;
	--radius-md: 3px;
	--radius-lg: 4px;
	--touch-target: 44px;


	--border-fine: 1px solid var(--line);
	--border-thick: 2px solid var(--ink);
	--border-accent: 2px solid var(--accent);
	--shadow-subtle: 0 1px 2px rgba(39, 41, 43, 0.05), 0 4px 12px rgba(39, 41, 43, 0.04);
	--shadow-raised: 0 2px 4px rgba(39, 41, 43, 0.08), 0 10px 24px rgba(39, 41, 43, 0.08);


	/* Motion Tokens */
	--dur-rapid: 140ms;
	--dur-base: 220ms;
	--dur-deliberate: 360ms;
	--dur-scene: 540ms;
	--ease-mechanical: cubic-bezier(0.2, 0, 0, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}


/* Base Reset & Box Sizing */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}


html {

	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	tab-size: 4;
	scroll-behavior: smooth;
	background-color: var(--ground);
	color: var(--ink);
}


body {

	min-height: 100vh;
	font-family: var(--belu-726);
	font-size: var(--belu-d3c);
	line-height: 1.62;
	font-weight: 400;
	background-color: var(--ground);
	color: var(--ink);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}


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


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


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


svg.icon {
	width: 1.25em;
	height: 1.25em;
	fill: currentColor;
	flex-shrink: 0;
	vertical-align: -0.18em;
}


/* Typographic Hierarchy (Headings max 8 words, no hyphen cutting) */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--belu-629);
	color: var(--ink);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.015em;
	text-wrap: balance;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: manual;
}


h1 {
	font-size: var(--belu-1c9);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.025em;
	margin-block-end: var(--space-s);
}


h2 {
	font-size: var(--belu-590);
	font-weight: 700;
	line-height: 1.2;
	margin-block-end: var(--space-xs);
}


h3 {
	font-size: var(--belu-c52);
	font-weight: 600;
	line-height: 1.25;
	margin-block-end: var(--space-2xs);
}


h4 {
	font-size: var(--belu-32a);
	font-weight: 600;
	line-height: 1.3;
}


p {
	max-width: var(--prose-max-w);
	margin-block-end: var(--space-s);
}


p:last-child {
	margin-block-end: 0;
}


.lede {
	font-size: var(--belu-32a);
	line-height: 1.5;
	color: var(--ink-soft);
	max-width: var(--prose-max-w);
	margin-block-end: var(--space-m);
}


strong, b {
	font-weight: 600;
	color: var(--ink);
}


small {
	font-size: var(--step--1);
	line-height: 1.4;
	color: var(--ink-soft);
}


code, kbd, samp, pre {
	font-family: var(--belu-21c);
	font-size: 0.9em;
}


.mono-figure {
	font-family: var(--belu-21c);
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: 'tnum' 1, 'lnum' 1;
	letter-spacing: -0.02em;
}


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


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


/* Focus Visible Accessibility */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}


ul, ol {
	padding-inline-start: 1.4em;
	margin-block-end: var(--space-s);
	max-width: var(--prose-max-w);
}


li {
	margin-block-end: var(--space-2xs);
}


li::marker {
	color: var(--accent);
}


/* Unstyled Lists */
.list-clean {
	list-style: none;
	padding: 0;
	margin: 0;
}


.skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-s);
	padding: var(--space-xs) var(--space-m);
	background-color: var(--ink);
	color: var(--accent-ink);
	font-family: var(--belu-21c);
	font-size: var(--step--1);
	text-decoration: none;
	z-index: 1000;
	border-radius: var(--radius-sm);
	transition: top var(--dur-rapid) var(--ease-mechanical);
}


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


/* Layout Shell: Fixed Sidebar + Content Column */
.app-layout {
	display: flex;
	min-height: 100vh;
	min-height: 100dvh;
	width: 100%;
}


.app-sidebar {
	width: var(--sidebar-w);
	flex-shrink: 0;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	height: 100vh;
	height: 100dvh;
	background-color: var(--surface);
	border-inline-end: var(--border-fine);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--space-l) var(--space-m);
	z-index: 600;
	overflow-y: auto;
	overscroll-behavior: contain;
}


.app-content {
	flex: 1 1 0%;
	min-width: 0;
	margin-inline-start: var(--sidebar-w);
	display: flex;
	flex-direction: column;
	background-color: var(--ground);
}


.page-wrapper {
	flex: 1 0 auto;
	width: 100%;
	max-width: var(--content-max-w);
	padding-inline: var(--space-m);
	padding-block: var(--space-xl) var(--space-3xl);
	margin-inline: auto;
}


.grid {
	display: grid;
	gap: var(--space-m);
}


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


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


.cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
}


/* Visually Hidden Helper (strictly inaccessible visually, accessible to AT) */
.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 (max-width: 720px) {
	.app-layout {
		display: block;
		padding-block-end: 72px; 
		min-height: 100vh;
		min-height: 100dvh;
	}


	.app-sidebar {
		position: fixed;
		top: 0;
		left: 0;

		display: none;
		width: 280px;
		height: 100vh;
		height: 100dvh;
		transform: translateX(-100%);
		transition: transform var(--dur-deliberate) var(--ease-mechanical);
		z-index: 300;
		box-shadow: var(--shadow-raised);
	}


	.app-sidebar[data-open='true'] {
		display: flex;
		transform: translateX(0);
	}


	.app-sidebar-backdrop {
		display: none;
		position: fixed;
		inset: 0;
		background-color: rgba(39, 41, 43, 0.48);
		z-index: 290;
	}


	.app-sidebar[data-open='true'] + .app-sidebar-backdrop {
		display: block;
	}


	.app-content {
		margin-inline-start: 0;
		width: 100%;
	}


	.page-wrapper {
		padding-inline: var(--space-s);
		padding-block: var(--space-l) var(--space-2xl);
	}
}


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