:root {
	/* Colour palette: Jewel on dark & Vintage letterpress */
	--ground:#0E1211;
	--surface:#141A18;
	--surface-card:#1A221F;
	--surface-elevated:#202B27;
	--surface-subtle:#17201C;
	--hairline:#2B3632;
	--hairline-light:#3D4D47;
	--hairline-brass:rgba(197, 168, 105, 0.28);


	--accent-jewel:#1B5E43;
	--accent-jewel-light:#2D8A63;
	--accent-jewel-glow:rgba(45, 138, 99, 0.16);
	--accent-jewel-tint:rgba(27, 94, 67, 0.25);


	--accent-brass:#C5A869;
	--accent-brass-hover:#D8BC7E;
	--accent-brass-dim:#B89C5F;
	--accent-brass-glow:rgba(197, 168, 105, 0.14);


	--text-main:#EDECE6;
	--text-muted:#9DA8A2;
	--text-faint:#8A9690;
	--text-on-accent:#080C0A;
	--status-err:#DF685C;
	--status-ok:#50B37F;


	/* Typography stacks */
	--puni-f5a:"Cormorant Garamond", Georgia, "Times New Roman", serif;
	--puni-345:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--puni-1f5:"JetBrains Mono", ui-monospace, Menlo, Monaco, monospace;


	/* Fluid type scale via clamp() */
	--text-xs:clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
	--text-sm:clamp(0.82rem, 0.78rem + 0.22vw, 0.92rem);
	--text-base:clamp(0.96rem, 0.92rem + 0.24vw, 1.06rem);
	--text-lg:clamp(1.12rem, 1.04rem + 0.4vw, 1.28rem);
	--text-xl:clamp(1.32rem, 1.18rem + 0.7vw, 1.62rem);
	--text-2xl:clamp(1.68rem, 1.42rem + 1.2vw, 2.18rem);
	--text-3xl:clamp(2.1rem, 1.7rem + 1.9vw, 2.85rem);
	--text-hero:clamp(2.45rem, 1.95rem + 2.7vw, 3.85rem);


	/* Leading */
	--leading-tight:1.15;
	--leading-snug:1.3;
	--leading-normal:1.6;
	--leading-relaxed:1.75;


	/* Spacing rhythm */
	--space-2:0.125rem;

	--space-4:0.25rem;
	--space-8:0.5rem;
	--space-12:0.75rem;
	--space-16:1rem;
	--space-20:1.25rem;
	--space-24:1.5rem;
	--space-32:2rem;
	--space-40:2.5rem;
	--space-48:3rem;
	--space-64:4rem;
	--space-80:5rem;
	--space-96:6rem;


	/* Layout geometry */
	--frame-max-width:1240px;
	--frame-padding:clamp(1rem, 0.7rem + 1.4vw, 2.25rem);
	--frame-border-width:1px;
	--frame-margin:clamp(0.5rem, 0.25rem + 0.8vw, 1rem);
	--radius-xs:2px;
	--radius-sm:3px;
	--radius-md:4px;


	--ease-spring:cubic-bezier(0.175, 0.885, 0.32, 1.15);
	--ease-settle:cubic-bezier(0.16, 1, 0.3, 1);
	--ease-standard:cubic-bezier(0.4, 0, 0.2, 1);
	--duration-micro:140ms;
	--duration-short:220ms;
	--duration-medium:380ms;
	--duration-long:620ms;
}


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


html {
	background-color:var(--ground);
	color:var(--text-main);
	font-family:var(--puni-345);
	font-size:16px;
	line-height:var(--leading-normal);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	text-rendering:optimizeLegibility;
	scroll-behavior:smooth;
	height:100%;
}


body {
	background-color:var(--ground);
	color:var(--text-main);
	min-height:100%;
	display:flex;
	flex-direction:column;
	overflow-x:hidden;
	position:relative;
}


.skip-link {
	position:absolute;
	top:-100px;
	left:1rem;
	z-index:1000;
	padding:0.75rem 1.25rem;
	background-color:var(--accent-brass);
	color:#0C100E;
	font-family:var(--puni-1f5);
	font-size:var(--text-sm);
	font-weight:500;
	text-decoration:none;
	border-radius:var(--radius-xs);
	box-shadow:0 4px 18px rgba(0, 0, 0, 0.6);
	transition:top var(--duration-short) var(--ease-settle);
}


.skip-link:focus {
	top:1rem;
	outline:2px solid var(--text-main);
	outline-offset:2px;
}


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


h1, h2, h3, h4, h5, h6 {
	font-family:var(--puni-f5a);
	color:var(--text-main);
	font-weight:600;
	line-height:var(--leading-tight);
	text-wrap:balance;
	letter-spacing:-0.015em;
}


h1 {
	font-size:var(--text-hero);
	font-weight:600;
	margin-bottom:var(--space-20);
}


h2 {
	font-size:var(--text-2xl);
	font-weight:600;
	margin-bottom:var(--space-16);
}


h3 {
	font-size:var(--text-xl);
	font-weight:600;
	margin-bottom:var(--space-12);
}


h4 {
	font-size:var(--text-lg);
	font-weight:500;
	margin-bottom:var(--space-8);
}


p {
	max-width:68ch;
	margin-bottom:var(--space-16);
	color:var(--text-main);
	font-size:var(--text-base);
	line-height:var(--leading-normal);
}


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


p.lead {
	font-size:var(--text-lg);
	line-height:var(--leading-snug);
	color:var(--text-main);
	max-width:64ch;
}


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


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


.text-mono {
	font-family:var(--puni-1f5);
	font-size:0.9em;
	letter-spacing:-0.02em;
}


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


.text-jewel {
	color:var(--accent-jewel-light);
}


/* Rule lines / letterpress hairlines */
hr {
	border:0;
	height:1px;
	background:var(--hairline-brass);
	margin:var(--space-32) 0;
}


hr.subtle {
	background:var(--hairline);
}


/* Unstyled and definition lists */
ul, ol {
	padding-left:var(--space-24);
	margin-bottom:var(--space-20);
	max-width:68ch;
}


li {
	margin-bottom:var(--space-8);
	color:var(--text-main);
}


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


/* Links */
a {
	color:inherit;
	text-decoration:underline;
	text-decoration-color:var(--accent-brass-dim);
	text-underline-offset:3px;
	transition:color var(--duration-micro) var(--ease-standard),
							text-decoration-color var(--duration-micro) var(--ease-standard);
}


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


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


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


/* Boxed Frame Architecture Primitive */
.site-frame {
	margin:var(--frame-margin);
	border:var(--frame-border-width) solid var(--accent-brass-dim);
	background-color:var(--surface);
	min-height:calc(100vh - (var(--frame-margin) * 2));
	display:flex;
	flex-direction:column;
	position:relative;
	box-shadow:0 0 0 1px rgba(0, 0, 0, 0.8),
							0 18px 48px rgba(0, 0, 0, 0.45);
}


.site-frame-inner {
	max-width:var(--frame-max-width);
	width:100%;
	margin-inline:auto;
	padding-inline:var(--frame-padding);
}


.main-content {
	flex:1 0 auto;
	width:100%;
}


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


.section-rhythm {
	padding-block:clamp(3rem, 2rem + 3vw, 5.5rem);
	border-bottom:1px solid var(--hairline);
	position:relative;
}


.section-rhythm:last-child {
	border-bottom:none;
}


/* Responsive grid primitives */
.grid {

	display:grid;
	gap:var(--space-24);
}


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


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


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


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


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


/* Screen reader only utility */
.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;
	white-space:nowrap !important;
	border:0 !important;
}


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

	}
}