
:root {
	--ground:#15403F;
	--surface:#1A4D4C;
	--surface-2:#225E5C;
	--line:#447E7C;
	--ink-soft:#9BC0BE;
	--ink:#DDF8F7;
	--accent:#F4C778;
	--accent-ink:#111111;

	--ground-rgb:21, 64, 63;
	--surface-rgb:26, 77, 76;
	--surface-2-rgb:34, 94, 92;
	--line-rgb:68, 126, 124;

	--ink-soft-rgb:155, 192, 190;
	--ink-rgb:221, 248, 247;
	--accent-rgb:244, 199, 120;

	--ground-alpha-80:rgba(21, 64, 63, 0.8);
	--ground-alpha-90:rgba(21, 64, 63, 0.9);
	--ground-alpha-95:rgba(21, 64, 63, 0.95);
	--surface-alpha-80:rgba(26, 77, 76, 0.8);
	--surface-alpha-90:rgba(26, 77, 76, 0.9);
	--surface-alpha-95:rgba(26, 77, 76, 0.95);
	--surface-2-alpha-90:rgba(34, 94, 92, 0.9);
	--line-alpha-30:rgba(68, 126, 124, 0.3);
	--line-alpha-50:rgba(68, 126, 124, 0.5);
	--accent-alpha-15:rgba(196, 154, 74, 0.15);
	--accent-alpha-25:rgba(196, 154, 74, 0.25);
	--accent-hover:#D4AA5B;
	--accent-active:#B58B3C;

	--zodu-1e8:"Fraunces", "Fraunces Fallback", Georgia, serif;
	--zodu-8ef:"Source Sans 3", "Source Sans 3 Fallback", system-ui, -apple-system, sans-serif;
	--zodu-722:"JetBrains Mono", "JetBrains Mono Fallback", monospace;

	--text-xs:clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--text-sm:clamp(0.84rem, 0.8rem + 0.2vw, 0.9375rem);
	--text-base:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--text-md:clamp(1.125rem, 1.06rem + 0.35vw, 1.25rem);
	--text-lg:clamp(1.28rem, 1.2rem + 0.45vw, 1.5rem);
	--text-xl:clamp(1.5rem, 1.38rem + 0.75vw, 1.875rem);
	--text-2xl:clamp(1.85rem, 1.62rem + 1.2vw, 2.35rem);
	--text-3xl:clamp(2.2rem, 1.85rem + 1.8vw, 3rem);
	--text-display:clamp(2.5rem, 2.05rem + 2.5vw, 4rem);

	--space-1:0.25rem;
	--space-2:0.5rem;
	--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;

	--radius-xs:4px;
	--radius-sm:4px;
	--radius-md:4px;
	--radius-lg:4px;
	--control-h:44px;

	--shadow-sm:0 1px 3px rgba(0, 0, 0, 0.35);
	--shadow-md:0 4px 14px rgba(0, 0, 0, 0.42);
	--shadow-lg:0 12px 34px rgba(0, 0, 0, 0.52);
	--shadow-inset:inset 0 1px 0 rgba(221, 248, 247, 0.08);

	--ease-standard:cubic-bezier(0.2, 0, 0, 1);
	--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-out-expo:cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast:140ms;

	--dur-mid:220ms;
	--dur-slow:360ms;

	--sidebar-w:280px;
	--dock-h:64px;
	--header-h-mobile:56px;
	--section-strip-h:46px;
	--content-max-w:1240px;
	--reading-max-w:65ch;
	--touch-target:44px;
}

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

html {
	-webkit-text-size-adjust:100%;
	scroll-behavior:smooth;
	scroll-padding-top:var(--section-strip-h);
	color-scheme:dark;
	background-color:var(--ground);
}

body {
	background-color:var(--ground);
	color:var(--ink);
	font-family:var(--zodu-8ef);
	font-size:var(--text-base);
	font-weight:400;
	line-height:1.6;
	min-height:100vh;
	overflow-x:hidden;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	padding-bottom:var(--dock-h);
}

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family:var(--zodu-1e8);
	font-weight:600;
	line-height:1.25;
	color:var(--ink);
	text-wrap:balance;
}

h1 {
	font-size:var(--text-3xl);
	font-weight:700;
	letter-spacing:-0.02em;
}

h2 {
	font-size:var(--text-2xl);
	letter-spacing:-0.015em;
}

h3 {
	font-size:var(--text-xl);
	letter-spacing:-0.01em;
}

h4 {
	font-size:var(--text-lg);
}

p {
	max-width:var(--reading-max-w);
	color:var(--ink);
}

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

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

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

em,
i {
	font-style:italic;
}

hr {
	border:0;
	height:1px;
	background-color:var(--line);
	margin:var(--space-8) 0;
}

blockquote {
	border-left:2px solid var(--accent);
	padding-left:var(--space-4);
	font-family:var(--zodu-1e8);
	font-style:italic;
	font-size:var(--text-md);
	color:var(--ink);
}

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

.font-mono {
	font-family:var(--zodu-722);
	font-variant-numeric:tabular-nums lining-nums;
}

.tabular-nums {
	font-variant-numeric:tabular-nums lining-nums;
}

.skip-link {
	position:absolute;
	top:-100px;
	left:var(--space-4);
	background-color:var(--accent);
	color:var(--accent-ink);
	font-family:var(--zodu-8ef);
	font-size:var(--text-sm);
	font-weight:600;
	padding:var(--space-2) var(--space-4);
	border-radius:var(--radius-sm);
	z-index:1000;
	transition:top var(--dur-fast) var(--ease-out-quad);
}

.skip-link:focus-visible {
	top:var(--space-4);
	outline:2px solid var(--ink);
	outline-offset:2px;
}

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

.site-layout {
	min-height:100vh;
	min-height:100svh;
	display:flex;
	flex-direction:column;
}

@media (min-width: 1024px) {
	.site-layout {
		flex-direction:row;
	}
}

.site-main-column {
	flex:1 1 auto;
	min-width:0;
	display:flex;
	flex-direction:column;
	background-color:var(--ground);
}

@media (min-width: 1024px) {

	.site-main-column {
		margin-left:var(--sidebar-w);
	}
}

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

@media (min-width: 768px) {
	.container {
		padding-left:var(--space-8);
		padding-right:var(--space-8);
	}
}

@media (min-width: 1280px) {
	.container {
		padding-left:var(--space-12);
		padding-right:var(--space-12);
	}
}

.section-panel {
	padding-top:var(--space-12);
	padding-bottom:var(--space-12);
	border-bottom:1px solid var(--line-alpha-30);
}

@media (min-width: 768px) {
	.section-panel {
		padding-top:var(--space-16);
		padding-bottom:var(--space-16);
	}
}

@media (min-width: 1024px) {
	.section-panel {
		padding-top:var(--space-20);
		padding-bottom:var(--space-20);
	}
}

.section-panel-surface {
	background-color:var(--surface);
}

.section-panel-ground {
	background-color:var(--ground);
}

.statement-block {
	display:flex;
	flex-direction:column;
	gap:var(--space-4);
	max-width:var(--content-max-w);
}

.statement-heading {
	font-family:var(--zodu-1e8);
	font-size:var(--text-2xl);
	font-weight:600;
	line-height:1.25;
	color:var(--ink);
	text-wrap:balance;
	max-width:900px;
}

@media (min-width: 768px) {
	.statement-heading {
		font-size:var(--text-3xl);
	}
}

.statement-body {
	font-size:var(--text-base);
	line-height:1.65;
	color:var(--ink-soft);
	max-width:var(--reading-max-w);
}

.lockup-asymmetric {
	position:relative;
	display:flex;
	flex-direction:column;
	padding-bottom:var(--space-4);
	margin-bottom:var(--space-6);
}

.lockup-word-primary {
	font-family:var(--zodu-1e8);
	font-size:var(--text-display);
	font-weight:700;
	line-height:1.05;
	color:var(--ink);
	letter-spacing:-0.02em;
}

.lockup-offset-row {
	display:flex;
	align-items:center;
	gap:var(--space-4);
	margin-top:calc(-0.15 * var(--text-display));
	padding-left:clamp(1.5rem, 4vw, 4rem);
}

.lockup-rule {
	flex:1 1 auto;
	height:1px;
	background:linear-gradient(90deg, var(--accent) 0%, var(--line) 100%);
}

.lockup-word-offset {
	font-family:var(--zodu-1e8);
	font-size:clamp(1.4rem, 1.2rem + 1.2vw, 2.2rem);
	font-weight:400;
	font-style:italic;
	color:var(--accent);
	white-space:nowrap;
}

.bleed-photo-frame {
	width:100%;
	overflow:hidden;
	position:relative;
	border-top:1px solid var(--line-alpha-30);
	border-bottom:1px solid var(--line-alpha-30);
	background-color:var(--surface);
}

.bleed-photo-frame img {
	width:100%;
	height:auto;
	min-height:280px;
	max-height:620px;
	object-fit:cover;
	object-position:left bottom;
}

@media (min-width: 768px) {
	.bleed-photo-frame img {
		min-height:420px;
	}
}

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

	[data-model-stage] canvas {
		display:none !important;
	}

	[data-model-still] {
		display:block !important;
		opacity:1 !important;
	}

	.diagram-path {
		stroke-dashoffset:0 !important;
	}
}
