
:root {
	--ground:#15403f;
	--ground-deep:#0d2b2a;
	--ground-surface:#1d4f4e;
	--ground-elevated:#245e5d;
	--ground-translucent:rgba(21, 64, 63, 0.88);
	--ground-surface-translucent:rgba(29, 79, 78, 0.88);
	--ground-deep-translucent:rgba(13, 43, 42, 0.92);
	--brass:#e8b668;
	--brass-glow:#f3d299;
	--brass-dark:#a67c3b;
	--brass-muted:rgba(212, 163, 89, 0.16);
	--brass-focus:rgba(232, 193, 127, 0.35);
	--bone:#f4efeb;
	--bone-muted:#b8c7c4;
	--bone-subtle:rgba(244, 239, 235, 0.65);
	--line-subtle:rgba(212, 163, 89, 0.22);
	--line-strong:rgba(212, 163, 89, 0.45);
	--line-dark:rgba(13, 43, 42, 0.6);
	--danger:#e06d53;
	--danger-bg:rgba(224, 109, 83, 0.14);
	--danger-border:rgba(224, 109, 83, 0.35);
	--success:#5db88f;
	--success-bg:rgba(93, 184, 143, 0.14);
	--success-border:rgba(93, 184, 143, 0.35);

	--sewu-285:'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--sewu-b98:'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--sewu-d60:'Space Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

	--text-2xs:clamp(0.6875rem, 0.65rem + 0.18vw, 0.75rem);
	--text-xs:clamp(0.75rem, 0.72rem + 0.2vw, 0.8125rem);
	--text-sm:clamp(0.8438rem, 0.8rem + 0.25vw, 0.9063rem);
	--text-base:clamp(0.9688rem, 0.9375rem + 0.25vw, 1.0625rem);
	--text-md:clamp(1.1rem, 1.05rem + 0.35vw, 1.25rem);
	--text-lg:clamp(1.25rem, 1.15rem + 0.55vw, 1.5rem);

	--text-xl:clamp(1.45rem, 1.3rem + 0.9vw, 1.85rem);
	--text-2xl:clamp(1.75rem, 1.5rem + 1.4vw, 2.35rem);
	--text-3xl:clamp(2.15rem, 1.8rem + 2vw, 3.1rem);
	--text-4xl:clamp(2.55rem, 2.1rem + 2.8vw, 4.1rem);
	--text-5xl:clamp(2.95rem, 2.3rem + 3.8vw, 5.25rem);
	--text-hero:clamp(2.75rem, 2.2rem + 4.8vw, 7.25rem);

	--leading-none:1;
	--leading-tight:1.12;
	--leading-snug:1.25;
	--leading-normal:1.55;
	--leading-relaxed:1.7;

	--tracking-tight:-0.035em;
	--tracking-snug:-0.02em;
	--tracking-normal:0;
	--tracking-wide:0.04em;
	--tracking-wider:0.08em;
	--tracking-widest:0.14em;

	--dur-fast:140ms;
	--dur-base:220ms;
	--dur-slow:380ms;
	--dur-deliberate:560ms;

	--ease-standard:cubic-bezier(0.2, 0, 0, 1);
	--ease-out:cubic-bezier(0, 0, 0.2, 1);
	--ease-in:cubic-bezier(0.4, 0, 1, 1);
	--ease-bounce:cubic-bezier(0.34, 1.56, 0.64, 1);

	--space-05:0.125rem;
	--space-1:0.25rem;
	--space-1-5:0.375rem;
	--space-2:0.5rem;
	--space-2-5:0.625rem;
	--space-3:0.75rem;
	--space-4:1rem;
	--space-5:1.25rem;
	--space-6:1.5rem;
	--space-8:2rem;
	--space-10:2.5rem;
	--space-12:3rem;
	--space-16:4rem;
	--space-20:5rem;
	--space-24:6rem;
	--space-32:8rem;

	--container-max:1360px;
	--container-reading:66ch;

	--container-pad:clamp(1rem, 4vw, 3rem);

	--radius-none:0;
	--radius-xs:2px;
	--radius-sm:4px;
	--radius-md:6px;
	--radius-lg:10px;
	--radius-full:9999px;

	--shadow-sm:0 1px 3px rgba(13, 43, 42, 0.4);
	--shadow-md:0 4px 14px rgba(13, 43, 42, 0.55);
	--shadow-lg:0 12px 36px rgba(13, 43, 42, 0.65);
	--shadow-glow:0 0 24px rgba(212, 163, 89, 0.35);

	--z-base:1;
	--z-elevated:10;
	--z-sticky:50;
	--z-header:100;
	--z-modal:200;
	--z-chat:300;
	--z-banner:400;
	--z-skip:1000;
}

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

html {
	-webkit-text-size-adjust:100%;
	scroll-behavior:smooth;
	accent-color:var(--brass);
}

body {
	background-color:var(--ground);
	color:var(--bone);
	font-family:var(--sewu-b98);
	font-weight:400;
	font-size:var(--text-base);
	line-height:var(--leading-normal);
	min-height:100vh;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	overflow-x:hidden;
	display:flex;
	flex-direction:column;
}

main {
	flex:1 0 auto;
	display:block;
}

main:focus { outline:none; }

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

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

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

ul, ol { list-style:none; }

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

button {
	background:none;
	border:none;
	cursor:pointer;
	text-align:left;
}

h1, h2, h3, h4, h5, h6 {
	font-family:var(--sewu-285);
	font-weight:700;
	line-height:var(--leading-tight);
	color:var(--bone);
	text-wrap:balance;
	overflow-wrap:break-word;
	word-break:break-word;
}

h1 {
	font-size:var(--text-hero);
	font-weight:800;
	letter-spacing:var(--tracking-tight);

	line-height:var(--leading-none);
}

h2 {
	font-size:var(--text-4xl);
	font-weight:800;
	letter-spacing:var(--tracking-tight);
}

h3 {
	font-size:var(--text-3xl);
	font-weight:700;
	letter-spacing:var(--tracking-snug);
}

h4 {
	font-size:var(--text-2xl);
	font-weight:700;
}

h5 {
	font-size:var(--text-xl);
	font-weight:700;
}

h6 {
	font-size:var(--text-lg);
	font-weight:700;
}

p {
	font-size:var(--text-base);
	color:var(--bone);
	line-height:var(--leading-normal);
	margin-bottom:var(--space-4);
	max-width:var(--container-reading);
}

p:last-child { margin-bottom:0; }

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

small {
	font-size:var(--text-sm);
	color:var(--bone-muted);
}

em, i { font-style:italic; }

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

address { font-style:normal; }

blockquote {
	border-left:2px solid var(--brass);
	padding-left:var(--space-4);
	margin-block:var(--space-6);
	font-style:normal;
	color:var(--bone);
}

hr {
	border:none;
	border-top:1px solid var(--line-subtle);
	margin-block:var(--space-8);
}

.skip-link {
	position:fixed;
	top:var(--space-3);
	left:var(--space-3);
	z-index:var(--z-skip);
	padding:var(--space-3) var(--space-5);
	background:var(--brass);
	color:var(--ground-deep);
	font-family:var(--sewu-d60);
	font-size:var(--text-sm);
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:var(--tracking-wider);
	border-radius:var(--radius-xs);
	box-shadow:var(--shadow-lg);
	transform:translateY(-200%);
	transition:transform var(--dur-fast) var(--ease-out), outline-offset var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
	transform:translateY(0);
	outline:3px solid var(--bone);
	outline-offset:2px;
}

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

.container-narrow {
	width:100%;
	max-width:860px;
	margin-inline:auto;
	padding-inline:var(--container-pad);
}

.container-reading {
	width:100%;
	max-width:var(--container-reading);
	margin-inline:auto;
	padding-inline:var(--container-pad);
}

.container-wide {
	width:100%;
	max-width:1600px;
	margin-inline:auto;
	padding-inline:var(--container-pad);
}

.container-fluid {
	width:100%;
	padding-inline:var(--container-pad);
}

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

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

.grid-cols-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }

.grid-cols-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }

.grid-cols-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }

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

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

.flex { display:flex; }

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

.flex-col { flex-direction:column; }

.items-center { align-items:center; }

.items-start { align-items:flex-start; }

.items-end { align-items:flex-end; }

.justify-between { justify-content:space-between; }

.justify-center { justify-content:center; }

.justify-end { justify-content:flex-end; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }

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

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

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

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

.text-brass { color:var(--brass); }

.text-bone-muted { color:var(--bone-muted); }

.text-mono { font-family:var(--sewu-d60); }

.text-display { font-family:var(--sewu-285); }

.mono-tag {
	font-family:var(--sewu-d60);
	font-size:var(--text-2xs);
	letter-spacing:var(--tracking-widest);
	text-transform:uppercase;
	color:var(--brass);
	display:inline-block;
}

.lead {
	font-size:var(--text-lg);
	line-height:var(--leading-relaxed);
	color:var(--bone);
	max-width:var(--container-reading);
}

.standfirst {
	font-size:var(--text-md);
	line-height:var(--leading-relaxed);
	color:var(--bone-muted);
	max-width:var(--container-reading);
}

.badge {
	display:inline-flex;
	align-items:center;
	gap:var(--space-2);
	padding:var(--space-1) var(--space-2-5);
	font-family:var(--sewu-d60);
	font-size:var(--text-2xs);
	letter-spacing:var(--tracking-wider);
	text-transform:uppercase;
	font-weight:700;
	border-radius:var(--radius-xs);
	background:var(--ground-surface);
	color:var(--brass);
	border:1px solid var(--line-subtle);
	min-height:28px;
	width:fit-content;
}

.badge-outline {
	background:transparent;
	border-color:var(--line-strong);
	color:var(--bone);
}

.badge-brass {
	background:var(--brass);
	color:var(--ground-deep);
	border-color:var(--brass);
}

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

.hairline-brass {
	border:none;
	height:1px;
	background-color:var(--brass);
	opacity:0.45;
	width:100%;
}

.prose {
	color:var(--bone);
	font-size:var(--text-base);
	line-height:var(--leading-relaxed);
	max-width:var(--container-reading);
}

.prose p { margin-bottom:var(--space-5); }

.prose h2 {
	font-size:var(--text-2xl);
	margin-top:var(--space-10);
	margin-bottom:var(--space-4);
	color:var(--bone);
}

.prose h3 {
	font-size:var(--text-xl);
	margin-top:var(--space-8);
	margin-bottom:var(--space-3);
	color:var(--bone);
}

.prose ul, .prose ol {
	margin-bottom:var(--space-6);
	padding-left:var(--space-6);
}

.prose ul { list-style:square; }

.prose ol { list-style:decimal; }

.prose li {
	margin-bottom:var(--space-2);
	color:var(--bone);
}

.prose a {
	color:var(--brass);
	text-decoration:underline;
	text-underline-offset:3px;
	transition:color var(--dur-fast) var(--ease-out);
}

.prose a:hover { color:var(--brass-glow); }

.prose a:focus-visible {
	outline:2px solid var(--brass-glow);
	outline-offset:2px;
	border-radius:var(--radius-xs);
}

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