
:root {
	--ground:#15403f;
	--surface:#1a4d4c;
	--surface-2:#225e5c;
	--line:#447e7c;
	--ink-soft:#b2d8d6;
	--ink:#ddf8f7;
	--accent:#e5b864;
	--accent-ink:#111111;

	/* Typography Stacks */
	--cibu-cd7:"Cinzel", "Cinzel Fallback", Georgia, "Times New Roman", serif;
	--cibu-db1:"Archivo", "Archivo Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--cibu-f00:"JetBrains Mono", "JetBrains Mono Fallback", "SF Mono", Consolas, Monaco, monospace;

	--text-xs:clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
	--text-sm:clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
	--text-base:clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
	--text-lg:clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	--text-xl:clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);
	--text-2xl:clamp(1.5rem, 1.35rem + 1vw, 2rem);
	--text-3xl:clamp(1.85rem, 1.6rem + 1.5vw, 2.65rem);
	--text-display:clamp(2.25rem, 1.85rem + 2.2vw, 3.5rem);

	/* Spacing Scale */
	--space-2xs:0.25rem;
	--space-xs:0.5rem;
	--space-sm:0.75rem;
	--space-md:1rem;
	--space-lg:1.5rem;
	--space-xl:2rem;
	--space-2xl:3rem;
	--space-3xl:4.5rem;
	--space-4xl:6rem;

	--max-content-width:1240px;
	--reading-measure:65ch;
	--frame-border-width:1px;
	--rail-width:5.5rem;
	--dock-height:4.25rem;
	--header-height:4.5rem;

	--ease-out-quad:cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--ease-out-cubic:cubic-bezier(0.215, 0.61, 0.355, 1);
	--ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);
	--duration-fast:140ms;
	--duration-base:220ms;
	--duration-slow:380ms;
}

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

html {
	font-size:16px;
	background-color:var(--ground);
	color:var(--ink);
	font-family:var(--cibu-db1);
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	text-rendering:optimizeLegibility;
	scroll-behavior:smooth;
	scroll-padding-block-start:var(--header-height);
}

body {
	min-height:100vh;
	background-color:var(--ground);
	color:var(--ink);
	overflow-x:clip;
	position:relative;
	padding-bottom:calc(var(--dock-height) + 180px);
}

@media (min-width: 768px) and (max-width: 1023px) {
	body {
		padding-bottom:calc(var(--dock-height) + 240px);
	}
}

@media (min-width: 1024px) {
	body {
		padding-bottom:180px;
	}
}

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

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

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

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

h1, h2, h3, h4, h5, h6 {
	font-family:var(--cibu-cd7);
	color:var(--ink);
	font-weight:700;
	line-height:1.15;
	letter-spacing:0.02em;
	text-wrap:balance;
}

h1 {
	font-size:var(--text-display);
	letter-spacing:0.03em;
}

h2 {
	font-size:var(--text-3xl);
	margin-bottom:var(--space-md);
}

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

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

p {
	max-width:var(--reading-measure);
	margin-bottom:var(--space-md);
	color:var(--ink);
	font-size:var(--text-base);
	line-height:1.65;
}

p.lede {
	font-size:var(--text-lg);
	color:var(--ink-soft);
	line-height:1.55;
	margin-bottom:var(--space-lg);
}

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

small {
	font-size:var(--text-xs);
	color:var(--ink-soft);
}

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

.tabular {
	font-family:var(--cibu-f00);
	font-variant-numeric:tabular-nums;
	letter-spacing:-0.01em;
}

hr {
	border:0;
	border-top:1px solid var(--line);
	margin:var(--space-2xl) 0;
}

/* Accessibility Skip Link */
.skip-link {
	position:absolute;
	top:-9999px;

	left:1rem;
	z-index:10000;
	padding:var(--space-sm) var(--space-md);
	background-color:var(--accent);
	color:var(--accent-ink);
	font-family:var(--cibu-db1);

	font-weight:700;
	font-size:var(--text-sm);
	text-decoration:none;
	border:1px solid var(--accent);
}

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

/* Structural Shell & Boxed Frame */
.page-frame {
	width:100%;
	max-width:var(--max-content-width);
	margin:0 auto;
	border-left:1px solid var(--line);
	border-right:1px solid var(--line);
	background-color:var(--ground);
	position:relative;
	min-height:100vh;
	min-height:100svh;
	display:flex;
	flex-direction:column;
}

@media (max-width: 1240px) {
	.page-frame {
		border-left:none;
		border-right:none;
	}
}

/* Rail layout for Desktop */
.frame-body {
	display:flex;
	flex:1 0 auto;
	position:relative;
}

.desk-rail {
	display:none;
}

@media (min-width: 1024px) {
	.desk-rail {
		display:flex;
		flex-direction:column;
		justify-content:space-between;
		align-items:center;
		width:var(--rail-width);
		flex-shrink:0;
		border-right:1px solid var(--line);
		background-color:var(--surface);
		position:sticky;
		top:0;
		height:100vh;
		height:100svh;
		padding:var(--space-lg) var(--space-xs);
		z-index:80;
	}
}

.main-column {
	flex:1 1 0;
	min-width:0;
	background-color:var(--ground);
	position:relative;
}

@media (min-width: 1024px) {
	.hero-split-frame,
	.duotone-caesura,
	.full-measure-photo {
		margin-left:0;
		margin-right:0;
		width:100%;
	}
}

/* Icons */
.icon {
	width:1.25rem;
	height:1.25rem;
	display:inline-block;
	vertical-align:middle;
	fill:currentColor;
	flex-shrink:0;
}

.icon-lg {
	width:1.5rem;
	height:1.5rem;
}

.icon-xl {
	width:2rem;
	height:2rem;
}

/* Visually Hidden Utility for Honeypots & Screen-Readers */
.sr-only,
.visually-hidden {
	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;
}

/* Smooth Wrapper Degrade Baseline */
#smooth-wrapper {
	position:relative;
	width:100%;
	overflow-x:clip;
}

#smooth-content {
	position:relative;
	width:100%;
}

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

.container {
	width:100%;
	max-width:var(--max-content-width);
	margin-left:auto;
	margin-right:auto;
	padding-left:var(--space-xl);
	padding-right:var(--space-xl);
}

@media (max-width: 640px) {
	.container {
		padding-left:var(--space-md);
		padding-right:var(--space-md);
	}
}

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

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

.section-padding {

	padding-top:var(--space-3xl);
	padding-bottom:var(--space-3xl);
}

@media (max-width: 768px) {
	.section-padding {
		padding-top:var(--space-2xl);
		padding-bottom:var(--space-2xl);
	}
}

/* Hairline borders and dividers */
.border-top {
	border-top:1px solid var(--line);
}

.border-bottom {
	border-bottom:1px solid var(--line);
}

.border-all {
	border:1px solid var(--line);
}

/* Duotone signature filter class */
.duotone-filter {
	filter:grayscale(100%) contrast(120%);
	mix-blend-mode:luminosity;
	opacity:0.82;
}
