

:root {
	--ground:#EDE6E4;
	--surface:#DFD7D5;
	--surface-2:#CEC5C2;
	--line:#ABA2A0;
	--ink-soft:#514C4A;
	--ink:#2B2827;
	--accent:#8E4544;
	--accent-ink:#FFFFFF;


	--zemi-8f3:"Newsreader", "Newsreader Fallback", Garamond, Georgia, serif;
	--zemi-fcb:"Archivo", "Archivo Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--zemi-20c:"JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, Menlo, Monaco, Consolas, monospace;


	--ease-natural:cubic-bezier(0.2, 0, 0.2, 1);
	--ease-out:cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in:cubic-bezier(0.7, 0, 0.84, 0);
	--dur-fast:140ms;
	--dur-med:240ms;
	--dur-slow:420ms;


	--radius-xs:3px;
	--radius-sm:4px;
	--radius-md:8px;
	--radius-lg:12px;


	--space-1:4px;
	--space-2:8px;
	--space-3:12px;
	--space-4:16px;
	--space-5:24px;
	--space-6:32px;
	--space-7:48px;
	--space-8:64px;
	--space-9:96px;
	--space-10:128px;


	--container-max:1360px;
	--reading-max:65ch;
	--dock-height:64px;
}


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


html {
	font-family:var(--zemi-fcb);
	font-size:16px;
	line-height:1.55;
	background-color:var(--ground);
	color:var(--ink);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	scroll-behavior:smooth;
	scroll-padding-top:80px;
}


body {
	background-color:var(--ground);
	color:var(--ink);
	min-height:100vh;
	min-height:100svh;
	display:flex;
	flex-direction:column;
	padding-bottom:calc(var(--dock-height) + 180px);
	overflow-x:hidden;
}


@media (min-width: 768px) {
	body {
		padding-bottom:220px;
	}
}


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


@media (min-width: 1440px) {
	body {
		padding-bottom:120px;
	}
}


h1, h2, h3, h4, h5, h6 {
	font-family:var(--zemi-8f3);
	font-weight:600;
	color:var(--ink);
	line-height:1.15;
	text-wrap:balance;
	letter-spacing:-0.015em;
}


h1 {
	font-size:clamp(2.1rem, 5.2vw, 3.8rem);
	line-height:1.08;
	letter-spacing:-0.025em;
	font-variation-settings:"opsz" 48;
}


h2 {
	font-size:clamp(1.75rem, 3.4vw, 2.6rem);

	line-height:1.15;
	font-variation-settings:"opsz" 36;
}


h3 {
	font-size:clamp(1.35rem, 2.2vw, 1.85rem);
	line-height:1.22;
	font-variation-settings:"opsz" 24;
}


h4 {
	font-size:clamp(1.15rem, 1.5vw, 1.35rem);
	line-height:1.3;
}


p, li, blockquote, figcaption {
	font-size:clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height:1.62;
	color:var(--ink);
}


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


.lede {
	font-size:clamp(1.15rem, 1.3vw, 1.35rem);
	line-height:1.5;
	color:var(--ink-soft);
	max-width:58ch;
}


small, .meta {
	font-size:0.875rem;
	line-height:1.45;
	color:var(--ink-soft);
}


.tabular-num,
.spec-value,
.price-tag,
.num {
	font-family:var(--zemi-20c);
	font-variant-numeric:tabular-nums;
	letter-spacing:-0.01em;
}


a {
	color:var(--ink);
	text-decoration:underline;
	text-decoration-color:var(--line);
	text-underline-offset:3px;
	transition:color var(--dur-fast) var(--ease-natural),
							text-decoration-color var(--dur-fast) var(--ease-natural);
}


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


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


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


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


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


ul, ol {
	list-style-position:outside;
	padding-left:1.25rem;
}


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


.skip-link {
	position:absolute;
	top:-100px;
	left:16px;
	z-index:10000;
	padding:12px 20px;
	background-color:var(--ink);

	color:var(--ground);
	font-weight:600;
	text-decoration:none;
	border-radius:var(--radius-sm);
	transition:top var(--dur-fast) var(--ease-out);
}


.skip-link:focus {
	top:16px;

	outline:2px solid var(--accent);
}


.shell-container {
	width:100%;
	max-width:var(--container-max);
	margin-left:auto;
	margin-right:auto;
	padding-left:clamp(16px, 3.5vw, 48px);
	padding-right:clamp(16px, 3.5vw, 48px);
}


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


.icon {
	width:1.25rem;
	height:1.25rem;
	fill:currentColor;
	display:inline-block;
	flex-shrink:0;
	vertical-align:-0.15em;
}


#smooth-wrapper {
	width:100%;
	min-height:100vh;
	position:relative;
	overflow:hidden;
}


#smooth-content {
	width:100%;
	position:relative;
	display:flex;
	flex-direction:column;
}


.scroll-spine {
	display:none;
}


@media (min-width: 1040px) {
	.scroll-spine {
		display:block;
		position:fixed;
		right:18px;
		top:50%;
		transform:translateY(-50%);
		width:6px;
		height:180px;
		background-color:var(--surface-2);
		border-radius:999px;
		z-index:800;
		pointer-events:none;
		overflow:hidden;
	}


	.scroll-spine__fill {
		width:100%;
		height:0%;
		background-color:var(--accent);
		border-radius:999px;
		transition:height 80ms linear;
	}
}


@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration:0.001ms !important;
		animation-iteration-count:1 !important;
		transition-duration:0.001ms !important;
		scroll-behavior:auto !important;
	}
	.scroll-spine__fill {
		transition:none !important;
	}
}



.badge {
	display:inline-flex;
	align-items:center;
	gap:var(--space-2);
	padding:4px 10px;
	background-color:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius-xs);
	font-family:var(--zemi-20c);
	font-size:0.8125rem;
	color:var(--ink);
	line-height:1.2;
}


.badge--accent {
	background-color:var(--accent);
	color:var(--accent-ink);
	border-color:var(--accent);
}


.flow > * + * {
	margin-top:1.5rem;
}


.flow-tight > * + * {
	margin-top:0.75rem;
}


.flow-loose > * + * {
	margin-top:2.5rem;
}


.text-subtle {
	color:var(--ink-soft);
}


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


.rule {
	height:1px;
	background-color:var(--line);
	width:100%;
}


.surface-box {
	background-color:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius-md);
	padding:clamp(20px, 3vw, 40px);
}



.editorial-pull {
	font-family:var(--zemi-8f3);
	font-size:clamp(1.4rem, 2.5vw, 2.1rem);
	font-style:italic;
	line-height:1.3;
	color:var(--ink);
	border-left:3px solid var(--accent);
	padding-left:clamp(16px, 2.5vw, 28px);
	margin:var(--space-7) 0;
	max-width:52ch;
}


.mono-index {
	font-family:var(--zemi-20c);
	font-size:0.8125rem;
	letter-spacing:0.08em;
	color:var(--ink-soft);
	text-transform:uppercase;
}


.spec-list {
	display:grid;
	grid-template-columns:1fr;
	gap:var(--space-3);
	padding:0;
	list-style:none;
}


@media (min-width: 640px) {
	.spec-list {
		grid-template-columns:repeat(2, 1fr);
	}
}


.spec-list__item {
	display:flex;
	justify-content:space-between;
	align-items:baseline;
	border-bottom:1px dashed var(--line);
	padding-bottom:var(--space-2);
	gap:var(--space-3);
}


.spec-list__label {
	font-size:0.875rem;
	color:var(--ink-soft);
}


.spec-list__val {
	font-family:var(--zemi-20c);
	font-size:0.875rem;
	color:var(--ink);
	text-align:right;
	font-weight:500;
}
