/* testd product site, draft 2.
   The page grid comes from the Lapilli wordmark: its ember seam sits at
   (120 + 10) / 350 = 37.1428% of its width, so the page splits there too.
   One angle (1:2, the cut on the wordmark's column tops), one accent (ember),
   all corners sharp, except a 1:2 chamfer on buttons and screenshots. */

@font-face {
	font-family: "Geologica";
	src: url(fonts/geologica-latin-shrp-normal.woff2) format("woff2-variations");
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url(fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2");
	font-weight: 600;
	font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
	color-scheme: light;

	--ember: #E4542B;
	--ember-text: #8E2A0B;

	/* Tuff: a grey volcanic ash, warmed slightly. Each band sits a little deeper. */
	--bg-0: #E9E6DE;
	--bg-1: #E3DFD6;
	--bg-2: #DDD9CE;
	--bg-3: #D7D2C6;
	--bg-4: #D1CBBE;
	--bg-5: #CBC5B7;

	--ink: #141414;
	--ink-2: #47433C;
	--line: rgb(20 20 20 / 0.2);
	--hatch: rgb(20 20 20 / 0.42);
	--tint: rgb(20 20 20 / 0.055);

	--st1: #DEDAD0;
	--st2: #D3CEC2;
	--st3: #C8C2B4;
	--st4: #BCB5A6;
	--bd1: #CFC9BC;
	--bd2: #C3BCAE;
	--bd3: #B8B1A2;

	--sans: "Geologica", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);

	--tile-dn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='12'%3E%3Cpath d='M0 3h12M13 9h12' stroke='%23000' fill='none'/%3E%3C/svg%3E");
	--tile-ed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='14'%3E%3Cpath d='M0 .5h30M0 7.5h30M7.5 0v7M22.5 7v7' stroke='%23000' fill='none'/%3E%3C/svg%3E");
	--tile-px: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Ccircle cx='2' cy='2' r='.95'/%3E%3Ccircle cx='6.5' cy='6.5' r='.95'/%3E%3C/svg%3E");
	--tile-au: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M6 2v7M2.5 5.5h7M18 14v7M14.5 17.5h7' stroke='%23000' fill='none'/%3E%3C/svg%3E");
	--tile-lf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14'%3E%3Cpath d='M2 3l4 7 4-7' stroke='%23000' fill='none'/%3E%3C/svg%3E");
	--tile-b1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10'%3E%3Cpath d='M0 2.5h20M24 7.5h10M0 7.5h8' stroke='%23000' fill='none'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--ember-text: #F0704A;
	--bg-0: #151412;
	--bg-1: #181614;
	--bg-2: #1B1916;
	--bg-3: #1E1C18;
	--bg-4: #211E1B;
	--bg-5: #24211D;
	--ink: #F2EEE4;
	--ink-2: #B0AA9E;
	--line: rgb(242 238 228 / 0.2);
	--hatch: rgb(242 238 228 / 0.3);
	--tint: rgb(242 238 228 / 0.06);
	--st1: #24211D;
	--st2: #2B2723;
	--st3: #322E29;
	--st4: #3A352F;
	--bd1: #2A2622;
	--bd2: #24211D;
	--bd3: #1F1C19;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--ember-text: #F0704A;
		--bg-0: #151412;
		--bg-1: #181614;
		--bg-2: #1B1916;
		--bg-3: #1E1C18;
		--bg-4: #211E1B;
		--bg-5: #24211D;
		--ink: #F2EEE4;
		--ink-2: #B0AA9E;
		--line: rgb(242 238 228 / 0.2);
		--hatch: rgb(242 238 228 / 0.3);
		--tint: rgb(242 238 228 / 0.06);
		--st1: #24211D;
		--st2: #2B2723;
		--st3: #322E29;
		--st4: #3A352F;
		--bd1: #2A2622;
		--bd2: #24211D;
		--bd3: #1F1C19;
	}
}

/* The descent: the last bands of the page are basalt in either theme. */
.deep {
	color-scheme: dark;
	--ember-text: #F0704A;
	--ink: #F2EEE4;
	--ink-2: #B0AA9E;
	--line: rgb(242 238 228 / 0.2);
	--hatch: rgb(242 238 228 / 0.3);
	--tint: rgb(242 238 228 / 0.06);
	color: var(--ink);
}

/* ---------- Base ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	scroll-behavior: smooth;
	background: var(--bg-0);
}

body {
	margin: 0;
	background: var(--bg-0);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.6;
	font-weight: 350;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.page {
	container-type: inline-size;
	overflow-x: clip;
	--max: 1440px;
	--frame: min(100cqw, var(--max));
	--gutter: clamp(20px, 3.9cqw, 56px);
	--inner: calc(var(--frame) - 2 * var(--gutter));
	--seam-ratio: 0.371428;
	--seam-x: calc((100cqw - var(--frame)) / 2 + var(--gutter) + var(--inner) * var(--seam-ratio));
	--col-gap: clamp(24px, 3.2cqw, 48px);
	--pad: clamp(64px, 6.8cqw, 100px);
	--dip: 72px;
	--rail: 0px;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, pre, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
	font-family: var(--sans);
	font-variation-settings: "SHRP" 100;
	text-wrap: balance;
}
h1 {
	font-size: clamp(2.3rem, 4.75cqw, 4.25rem);
	line-height: 1.03;
	letter-spacing: -0.032em;
	font-weight: 600;
}
h2 {
	font-size: clamp(1.9rem, 3.35cqw, 3rem);
	line-height: 1.07;
	letter-spacing: -0.026em;
	font-weight: 600;
}
h3 {
	font-size: 1.0625rem;
	line-height: 1.3;
	letter-spacing: -0.006em;
	font-weight: 600;
}
p { text-wrap: pretty; max-width: 62ch; }
strong, b { font-weight: 600; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

code, pre, .code-line {
	font-family: var(--mono);
	font-variant-ligatures: none;
}
code { font-size: 0.875em; }
p code, li code, dd code, span code {
	background: var(--tint);
	padding: 0.1em 0.32em;
	overflow-wrap: anywhere;
}

:focus-visible {
	outline: 2px solid var(--ember);
	outline-offset: 2px;
}

.skip {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 20;
	background: var(--ink);
	color: var(--bg-0);
	padding: 10px 16px;
	font-family: var(--mono);
	font-size: 0.875rem;
}
.skip:focus { top: 12px; }

.wrap {
	width: var(--frame);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.grid {
	display: grid;
	grid-template-columns: calc(var(--seam-ratio) * 100%) minmax(0, 1fr);
}
.lhs { padding-right: var(--col-gap); }
.rhs { padding-left: var(--col-gap); grid-column: 2; }
.lhs > * + *, .rhs > * + * { margin-top: 1em; }
.lede { font-size: clamp(1.0625rem, 1.5cqw, 1.3125rem); line-height: 1.5; font-weight: 300; }

/* Content that crosses the seam sits on the band's ground, so the line passes behind it. */
.over { position: relative; z-index: 1; background: var(--bg); }

.only-dark { display: none; }
:root[data-theme="dark"] .only-light { display: none; }
:root[data-theme="dark"] .only-dark { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .only-light { display: none; }
	:root:not([data-theme="light"]) .only-dark { display: block; }
}

/* ---------- Bands: strata with a fault at the seam ---------- */

.band {
	--bg: var(--bg-1);
	--c1: 22px; --c2: 44px; --c3: 62px; --c4: 18px;
	--rim: 30px;
	--tile: var(--tile-dn);
	position: relative;
	background: var(--bg);
	margin-top: calc(var(--dip) * -1);
	padding-block: calc(var(--dip) + var(--pad)) var(--pad);
	clip-path: polygon(
		0 var(--c1),
		var(--seam-x) var(--c2),
		var(--seam-x) var(--c3),
		100% var(--c4),
		100% 100%,
		0 100%
	);
}
/* A rim of hatching along the top of each stratum. */
.band::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: calc(var(--dip) + var(--rim));
	background: var(--hatch);
	-webkit-mask: var(--tile);
	mask: var(--tile);
	clip-path: polygon(
		0 var(--c1),
		var(--seam-x) var(--c2),
		var(--seam-x) var(--c3),
		100% var(--c4),
		100% calc(var(--c4) + var(--rim)),
		var(--seam-x) calc(var(--c3) + var(--rim)),
		var(--seam-x) calc(var(--c2) + var(--rim)),
		0 calc(var(--c1) + var(--rim))
	);
	pointer-events: none;
}

.band--1 { --bg: var(--bg-1); --tile: var(--tile-dn); --c1: 8px; --c2: 40px; --c3: 58px; --c4: 22px; --rim: 26px; }
.band--2 { --bg: var(--bg-2); --tile: var(--tile-px); --c1: 26px; --c2: 12px; --c3: 30px; --c4: 56px; --rim: 40px; }
.band--3 { --bg: var(--bg-3); --tile: var(--tile-ed); --c1: 40px; --c2: 54px; --c3: 18px; --c4: 34px; --rim: 28px; }
.band--4 { --bg: var(--bg-4); --tile: var(--tile-au); --c1: 12px; --c2: 30px; --c3: 48px; --c4: 10px; --rim: 48px; }
.band--5 { --bg: var(--bg-5); --tile: var(--tile-b1); --c1: 36px; --c2: 16px; --c3: 34px; --c4: 52px; --rim: 22px; }
.lease { --c1: 18px; --c2: 8px; --c3: 26px; --c4: 44px; --tile: var(--tile-lf); --rim: 36px; }
.share { --c1: 44px; --c2: 28px; --c3: 8px; --c4: 28px; --tile: var(--tile-dn); --rim: 24px; }
.doctor { --c1: 6px; --c2: 34px; --c3: 52px; --c4: 20px; --tile: var(--tile-px); --rim: 44px; }

.band--d1 { --bg: #211E1A; --tile: var(--tile-lf); --c1: 30px; --c2: 12px; --c3: 30px; --c4: 58px; --rim: 54px; }
.band--d2 { --bg: #1D1A17; --tile: var(--tile-au); --c1: 14px; --c2: 42px; --c3: 60px; --c4: 24px; --rim: 40px; }
.band--d3 { --bg: #191714; --tile: var(--tile-b1); --c1: 46px; --c2: 22px; --c3: 4px; --c4: 30px; --rim: 26px; }
.band--d4 { --bg: #161412; --tile: var(--tile-px); --c1: 10px; --c2: 28px; --c3: 46px; --c4: 12px; --rim: 40px; }
.band--d5 { --bg: #141414; --tile: var(--tile-lf); --c1: 34px; --c2: 14px; --c3: 32px; --c4: 56px; --rim: 58px; }

/* ---------- The seam ---------- */

.seam {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--seam-x) - 1px);
	width: 2px;
	background: var(--line);
	pointer-events: none;
}
.seam::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ember);
	transform-origin: top;
}
.band > .wrap { position: relative; }

@keyframes seam-fill {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* The ember leads the reader down, at about two thirds of the viewport. */
		.seam::after {
			animation: seam-fill linear both;
			animation-timeline: view();
			animation-range: entry 34svh entry calc(100% + 34svh);
		}
	}
}

/* ---------- Header ---------- */

.top {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 72px;
}
.top__brand { display: flex; align-items: center; gap: 18px; }
.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: 1.1875rem;
	letter-spacing: -0.02em;
	text-decoration: none;
	font-variation-settings: "SHRP" 100;
}
.brand__mark { width: 30px; height: 30px; flex: none; }
.by {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ink-2);
	font-size: 0.8125rem;
	text-decoration: none;
}
.by img { width: 62px; margin-bottom: -5px; }
.top__nav {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2cqw, 28px);
	font-size: 0.9375rem;
}
.top__nav a { text-decoration: none; padding-block: 8px; }
.theme {
	appearance: none;
	background: none;
	border: 0;
	padding: 8px;
	margin-right: -8px;
	color: inherit;
	cursor: pointer;
	touch-action: manipulation;
	transition: transform 120ms var(--ease-out);
}
.theme:active { transform: scale(0.94); }
.theme svg { width: 22px; height: 22px; }
.theme__a { fill: currentColor; }
.theme__b { fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (hover: hover) and (pointer: fine) {
	.top__nav a:hover { text-decoration: underline; }
	.by:hover { color: var(--ink); }
}

/* ---------- Hero ---------- */

.hero { position: relative; isolation: isolate; z-index: 0; --bg: var(--bg-0); }
.hero__grid { position: relative; z-index: 2; padding-top: clamp(24px, 3cqw, 44px); }
.hero__copy { pointer-events: none; }
.hero__copy > * { pointer-events: auto; }
.hero__sub {
	font-size: clamp(1.0625rem, 1.5cqw, 1.3125rem);
	line-height: 1.45;
	font-weight: 300;
	margin-top: 1.1em;
	max-width: 54ch;
}
.hero__cmd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 640px;
	margin-top: 24px;
	padding: 12px 12px 12px 18px;
	background: var(--ink);
	color: var(--bg-0);
	clip-path: polygon(0 10px, 20px 0, 100% 0, 100% 100%, 0 100%);
}
.hero__lines { display: grid; gap: 3px; min-width: 0; }
.hero__cmd code {
	font-size: clamp(0.8125rem, 1.15cqw, 1rem);
	font-weight: 500;
	white-space: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}
.hero__cmd .hero__then { font-weight: 400; font-size: clamp(0.75rem, 1cqw, 0.875rem); opacity: 0.72; }
.nb { white-space: nowrap; }
.prompt { color: var(--ember); margin-right: 0.2em; user-select: none; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.lhs .actions { margin-top: 24px; }

.btn {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 10px 20px;
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	position: relative;
	isolation: isolate;
	background: var(--ink);
	color: inherit;
	clip-path: polygon(0 8px, 16px 0, 100% 0, 100% 100%, 0 100%);
	touch-action: manipulation;
	transition: transform 120ms var(--ease-out), background-color 160ms ease, color 160ms ease;
}
.btn::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: -1;
	background: var(--bg);
	clip-path: polygon(0 7.5px, 15px 0, 100% 0, 100% 100%, 0 100%);
	transition: opacity 160ms ease;
}
.btn--solid { background: var(--ember); color: #141414; }
.btn--solid::before { display: none; }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { clip-path: none; }
@media (hover: hover) and (pointer: fine) {
	.btn:not(.btn--solid):hover { color: var(--bg); }
	.btn:not(.btn--solid):hover::before { opacity: 0; }
	.btn--solid:hover { background: var(--ink); color: var(--bg); }
}

.copy {
	flex: none;
	appearance: none;
	background: none;
	border: 1px solid var(--line);
	color: inherit;
	font-family: var(--mono);
	font-size: 0.75rem;
	padding: 3px 9px;
	min-height: 28px;
	cursor: pointer;
	touch-action: manipulation;
	transition: transform 120ms var(--ease-out), border-color 160ms ease;
}
.copy:active { transform: scale(0.96); }
.copy--inv { border-color: color-mix(in srgb, var(--bg-0) 40%, transparent); }
@media (hover: hover) and (pointer: fine) {
	.copy:hover { border-color: currentColor; }
}

/* ---------- The cross-section ---------- */

.plate {
	position: relative;
	z-index: 1;
	margin-top: calc(var(--inner) * -0.076);
	pointer-events: none;
}
.plate__svg { width: 100%; height: auto; overflow: visible; }
.plate__cap {
	position: absolute;
	right: var(--gutter);
	bottom: calc(var(--dip) + 34px);
	width: 26ch;
	padding: 4px 8px;
	background: var(--bd3);
	font-family: var(--mono);
	font-size: 0.75rem;
	line-height: 1.4;
}

.st1 { fill: var(--st1); }
.st2 { fill: var(--st2); }
.st3 { fill: var(--st3); }
.st4 { fill: var(--st4); }
.bd1 { fill: var(--bd1); }
.bd2 { fill: var(--bd2); }
.bd3 { fill: var(--bd3); }
.h { stroke: var(--hatch); stroke-width: 1; fill: none; }
.hf { fill: var(--hatch); }
.hv { stroke: var(--bg-0); stroke-width: 1.1; fill: none; opacity: 0.7; }
.flank { stroke: var(--ink); stroke-width: 1.5; }
.contact { stroke: var(--ink); stroke-width: 0.75; opacity: 0.5; }
.unconf { stroke: var(--ink); stroke-width: 1.5; fill: none; stroke-linejoin: miter; }
.stone-body { fill: var(--ink); }
.dike, .conduit { stroke: var(--ember); stroke-width: 2.25; fill: none; }
.dike__casing { stroke: var(--bd1); stroke-width: 6; fill: none; opacity: 0.85; }
.intake polygon { fill: var(--ink); }
.arc { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 0.1 7; opacity: 0.6; }
.lapillus { fill: var(--ink); }

.lab {
	font-family: var(--mono);
	font-size: 13.5px;
	fill: var(--ink);
	paint-order: stroke;
	stroke: var(--st2);
	stroke-width: 4px;
	stroke-linejoin: round;
}
.lab__u { font-weight: 600; }
.lab--flat { stroke: var(--st4); }
.lab--leaf, .lab--run { stroke: var(--bd2); }
.lab--run { font-size: 12.5px; }
.lab--name { font-size: 14.5px; font-weight: 500; stroke: var(--bg-0); }
.lab--seam { font-weight: 500; font-size: 12.5px; stroke: var(--st4); }

@media (prefers-reduced-motion: no-preference) {
	.conduit { stroke-dasharray: 1; animation: draw 620ms var(--ease-out) 560ms both; }
	.dike { stroke-dasharray: 1; animation: draw 520ms var(--ease-out) calc(120ms + var(--i) * 90ms) both; }
	.name, .lapillus {
		transform-box: fill-box;
		transform-origin: center;
		animation: thrown 820ms var(--ease-out) calc(980ms + var(--i) * 110ms) both;
	}
	.arc { animation: fade 500ms ease calc(1160ms + var(--i) * 110ms) both; }
}
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes thrown {
	from { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.7); }
	35% { opacity: 1; }
	to { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 0.6; } }

/* ---------- Legend ---------- */

@media (min-width: 900px) {
	.how .lhs { position: sticky; top: 36px; align-self: start; }
}
.legend { display: grid; }
.legend li {
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr) 15ch;
	gap: 22px;
	align-items: start;
	padding-block: 18px;
	border-top: 1px solid var(--line);
}
.legend li:first-child { border-top: 0; padding-top: 0; }
.legend p { margin-top: 4px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; }
.legend h3 code { font-size: 0.95em; }
.legend__spec {
	background: none;
	padding: 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--ink-2);
	padding-top: 3px;
}

.swatch {
	position: relative;
	display: grid;
	place-items: center;
	height: 46px;
	background: var(--tone, var(--st2));
	box-shadow: inset 0 0 0 1px var(--ink);
	overflow: hidden;
}
.swatch::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hatch);
	-webkit-mask: var(--swatch-tile);
	mask: var(--swatch-tile);
}
.swatch b {
	position: relative;
	font-family: var(--mono);
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 0 4px;
	background: var(--tone, var(--st2));
}
.swatch--dn { --tone: var(--st1); --swatch-tile: var(--tile-dn); }
.swatch--ed { --tone: var(--st2); --swatch-tile: var(--tile-ed); }
.swatch--px { --tone: var(--st3); --swatch-tile: var(--tile-px); }
.swatch--au { --tone: var(--st4); --swatch-tile: var(--tile-au); }
.swatch--lf { --tone: var(--ink); --swatch-tile: var(--tile-lf); color: var(--bg-0); }
.swatch--lf::before { background: var(--bg-0); opacity: 0.7; }
.swatch--seam { background: transparent; }
.swatch--seam::before {
	inset: 0 auto 0 calc(50% - 1px);
	width: 2px;
	background: var(--ember);
	-webkit-mask: none;
	mask: none;
}

/* ---------- Quickstart ---------- */

.start__head { margin-bottom: clamp(32px, 4cqw, 56px); align-items: end; }
.steps {
	display: grid;
	grid-template-columns: calc(var(--seam-ratio) * 100%) 1fr 1fr;
	counter-reset: step;
	position: relative;
}
.steps li { counter-increment: step; padding-right: var(--col-gap); }
.steps li + li { padding-left: var(--col-gap); }
.steps li + li + li { border-left: 1px solid var(--line); }
.steps__cmd {
	display: block;
	background: none;
	padding: 0 0 14px;
	font-size: clamp(1.25rem, 2.15cqw, 1.9375rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.03em;
	margin-bottom: 14px;
	border-bottom: 2px solid var(--ink);
	white-space: nowrap;
}
.steps__cmd::before {
	content: counter(step);
	display: block;
	font-family: var(--sans);
	font-variation-settings: "SHRP" 100;
	font-size: 0.8125rem;
	letter-spacing: 0;
	font-weight: 600;
	color: var(--ember-text);
	margin-bottom: 6px;
}
.steps p { color: var(--ink-2); font-size: 0.9375rem; }
.start__more { margin-top: clamp(40px, 5cqw, 72px); }
.start__more .lhs p, .start__more > p { color: var(--ink); }
.forms > div {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 16px;
	padding-block: 9px;
	border-top: 1px solid var(--line);
	margin: 0;
}
.forms > div:first-child { border-top: 0; padding-top: 0; }
.forms code { font-size: 0.8125rem; background: none; padding: 0; overflow-wrap: anywhere; }
.forms dd { color: var(--ink-2); font-size: 0.875rem; }
.lhs.forms > * + *, .rhs.forms > * + * { margin-top: 0; }

/* ---------- Names ---------- */

.anatomy {
	display: grid;
	grid-template-columns: calc(var(--seam-ratio) * 100%) minmax(0, 1fr);
	max-width: none;
	margin-block: clamp(36px, 5cqw, 72px);
	font-family: var(--sans);
	font-variation-settings: "SHRP" 100;
	font-size: calc(var(--inner) * 0.0805);
	line-height: 1;
	letter-spacing: -0.04em;
	font-weight: 600;
}
.anatomy__l { display: flex; justify-content: flex-end; padding-right: 0.09em; }
.anatomy__r { display: flex; padding-left: 0.05em; }
.part { display: grid; grid-template-rows: auto 1fr; }
.part b { font-weight: 600; }
.part small {
	width: 0;
	min-width: 100%;
	margin-top: 0.24em;
	padding-top: 8px;
	border-top: 2px solid var(--ink);
	font-family: var(--mono);
	font-size: 0.8125rem;
	line-height: 1.35;
	letter-spacing: 0;
	font-weight: 400;
}
.part--tld b { color: var(--ember-text); }
.part--tld small { border-color: var(--ember-text); }
.names__foot > * { color: var(--ink-2); font-size: 0.9375rem; }

/* ---------- Lease ---------- */

.lease__tool { position: relative; margin-top: clamp(32px, 4cqw, 56px); }
.events { min-width: 0; }
.lhs.events > * + * { margin-top: 0; }
.events legend {
	padding: 0;
	margin-bottom: 8px;
	font-weight: 600;
	font-size: 0.9375rem;
	font-variation-settings: "SHRP" 100;
}
.events label {
	display: block;
	position: relative;
	cursor: pointer;
	touch-action: manipulation;
}
.events input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}
.events span {
	display: block;
	padding: 9px 12px;
	border-top: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 0.875rem;
	font-weight: 400;
	transition: background-color 120ms ease, color 120ms ease;
}
.events label:last-child span { border-bottom: 1px solid var(--line); }
.events input:checked + span { background: var(--ink); color: var(--bg); font-weight: 500; }
.events input:focus-visible + span { outline: 2px solid var(--ember); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
	.events input:not(:checked):hover + span { background: var(--tint); }
}

.ledger { align-self: start; }
.ledger__name {
	max-width: none;
	font-size: clamp(1.25rem, 2.9cqw, 2.625rem);
	line-height: 1.1;
	letter-spacing: -0.04em;
	font-weight: 500;
	padding-bottom: 18px;
	transition: opacity 160ms ease;
}
.ledger__name code { font-size: 1em; background: none; padding: 0; overflow-wrap: anywhere; }
.lease[data-live="false"] .ledger__name { opacity: 0.45; text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--ember-text); }
.ledger__rows > div {
	display: grid;
	grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
	gap: 16px;
	padding-block: 16px;
	border-top: 1px solid var(--line);
	margin: 0;
}
.ledger__rows dt { font-weight: 600; font-variation-settings: "SHRP" 100; }
.ledger__rows small {
	display: block;
	font-weight: 350;
	font-size: 0.8125rem;
	color: var(--ink-2);
	font-variation-settings: normal;
}
.ledger__rows dd {
	display: grid;
	grid-template-columns: minmax(70px, 2fr) minmax(0, 3fr);
	gap: 16px;
	align-items: center;
	font-family: var(--mono);
	font-size: 0.875rem;
}
.ledger__leaf dd { display: block; }
.rhs.ledger > * + * { margin-top: 0; }

/* A length of core: whole, half gone, or missing. */
.core {
	position: relative;
	display: block;
	height: 30px;
	background: var(--st3);
	box-shadow: inset 0 0 0 1px var(--ink);
	overflow: hidden;
	transition: clip-path 200ms var(--ease-out), opacity 160ms ease;
	clip-path: inset(0 0 0 0);
}
.core::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hatch);
	-webkit-mask: var(--tile-au);
	mask: var(--tile-au);
}
.core--ed { background: var(--st2); }
.core--ed::before { -webkit-mask: var(--tile-ed); mask: var(--tile-ed); }
.core--ember { background: var(--ember); box-shadow: none; }
.core--ember::before { display: none; }
.core[data-s="part"] { clip-path: inset(0 45% 0 0); }
.core[data-s="gone"] { clip-path: inset(0 100% 0 0); }

.lease__cut {
	position: absolute;
	left: calc(var(--seam-ratio) * 100% - 6px);
	top: 38%;
	width: 12px;
	height: 84px;
	background: var(--bg);
	transform: scaleY(0);
	transition: transform 200ms var(--ease-out);
	z-index: 0;
}
.lease[data-live="false"] .lease__cut { transform: scaleY(1); }
.noscript-note { margin-top: 24px; }

/* ---------- Access ---------- */

.lanes {
	display: grid;
	grid-template-columns: calc(var(--seam-ratio) * 100%) minmax(0, 1fr);
	margin-top: clamp(36px, 4.5cqw, 64px);
	row-gap: 22px;
}
.lane:nth-child(1) { grid-row: 1 / span 2; }
.lane:nth-child(2) { grid-row: 2 / span 2; }
.lane:nth-child(3) { grid-row: 3 / span 2; }
.lane:nth-child(4) { grid-row: 4 / span 2; }
.lane { position: relative; }
.lane p { margin-top: 10px; color: var(--ink-2); font-size: 0.9375rem; }
.lane__who {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 8px;
	font-variation-settings: "SHRP" 100;
}
.lane--leaf { grid-column: 1; padding-right: var(--col-gap); }
.lane--host { grid-column: 2; padding-left: var(--col-gap); }
.lane--host p { max-width: 46ch; }
/* Each step reaches across to the seam. */
.lane::after {
	content: "";
	position: absolute;
	top: 0.72rem;
	height: 2px;
	width: calc(var(--col-gap) - 10px);
	background: var(--ember);
}
.lane--leaf::after { right: 0; }
.lane--host::after { left: 0; }
.code-line {
	display: table;
	font-size: 0.875rem;
	font-weight: 500;
	padding: 4px 8px;
	background: var(--tint);
	box-shadow: inset 0 0 0 1px var(--line);
	margin-top: 4px;
	max-width: 100%;
	overflow-wrap: anywhere;
}
.note {
	display: grid;
	grid-template-columns: calc(var(--seam-ratio) * 100%) minmax(0, 1fr);
	margin-top: clamp(40px, 5cqw, 72px);
	padding-block: 20px;
	border-block: 2px solid var(--ember);
}
.note strong { font-size: 1.1875rem; line-height: 1.3; padding-right: var(--col-gap); font-variation-settings: "SHRP" 100; }
.note p { padding-left: var(--col-gap); max-width: 70ch; }

/* ---------- Share ---------- */

.code {
	position: relative;
	padding: 14px 16px;
	padding-right: 72px;
	background: var(--tint);
	box-shadow: inset 0 0 0 1px var(--line);
	font-size: 0.875rem;
	line-height: 1.7;
	overflow-x: auto;
}
.code .copy { position: absolute; top: 10px; right: 10px; background: var(--bg); }
.code code { font-size: 1em; }
.ln { white-space: pre-wrap; overflow-wrap: anywhere; }
.ln::before { content: "$ "; color: var(--ember-text); user-select: none; }
.code-title { font-weight: 500; font-size: 0.9375rem; }
.share__spawned { color: var(--ink); }
.share__warn { margin-top: 18px; font-weight: 500; }

.providers { margin-top: clamp(32px, 4cqw, 56px); border-bottom: 1px solid var(--line); }
.providers__row, .paths__row {
	display: grid;
	grid-template-columns: calc(var(--seam-ratio) * 100%) minmax(0, 1fr) minmax(0, 1.75fr);
	align-items: baseline;
	padding-block: 14px;
	border-top: 1px solid var(--line);
}
.providers__row > *:nth-child(2), .paths__row > *:nth-child(2) { padding-left: var(--col-gap); padding-right: 20px; }
.providers__row b {
	font-family: var(--mono);
	font-size: clamp(1.25rem, 2.15cqw, 1.9375rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.2;
}
.providers__row > span { font-size: 0.9375rem; }
.providers__head, .paths__head { padding-block: 8px; font-size: 0.8125rem; font-weight: 600; font-variation-settings: "SHRP" 100; border-top: 0; }
.providers__head > span, .paths__head > span { font-size: 0.8125rem; }

/* ---------- Dashboard ---------- */

.surface__copy h3 { margin-top: 28px; }
.surface__copy h3 + p { margin-top: 6px; color: var(--ink-2); font-size: 0.9375rem; }
.surface__copy > p { color: var(--ink-2); }
.surface__copy > h2 + p { color: var(--ink); margin-top: 18px; }
.shot img {
	width: 100%;
	box-shadow: 0 0 0 1px var(--line), 0 24px 60px -32px rgb(20 16 10 / 0.5);
	clip-path: polygon(0 18px, 36px 0, 100% 0, 100% 100%, 0 100%);
}
.shot figcaption { margin-top: 10px; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-2); }

/* ---------- Doctor ---------- */

.codes {
	display: grid;
	grid-template-columns: calc(var(--seam-ratio) * 100%) repeat(3, minmax(0, 1fr));
	margin-top: clamp(36px, 4.5cqw, 64px);
}
.codes__cell { position: relative; padding-right: 20px; }
.codes__cell + .codes__cell { padding-left: var(--col-gap); }
.codes__cell + .codes__cell + .codes__cell { border-left: 1px solid var(--line); padding-left: 20px; }
.codes dt {
	font-size: clamp(3.5rem, 8cqw, 7.25rem);
	line-height: 0.95;
	letter-spacing: -0.05em;
	font-weight: 600;
	font-variation-settings: "SHRP" 100;
	font-variant-numeric: tabular-nums;
}
.codes__cell:first-child dt { color: var(--ember-text); }
.codes dd { margin-top: 10px; font-size: 0.9375rem; line-height: 1.4; max-width: 22ch; }
.tag {
	display: inline-block;
	margin-top: 10px;
	padding: 1px 6px;
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 600;
	box-shadow: inset 0 0 0 1px var(--ink);
}
.tag--dn { background: var(--st1); }
.tag--ed { background: var(--st2); }

/* ---------- Security ---------- */

.paths { margin-top: clamp(32px, 4cqw, 56px); border-bottom: 1px solid var(--line); }
.paths__row b { font-weight: 500; font-size: 1.0625rem; font-variation-settings: "SHRP" 100; }
.paths__row > span { font-size: 0.9375rem; line-height: 1.5; }
.paths__row > span:last-child { color: var(--ink-2); }
.is-plain { color: var(--ember-text); font-weight: 500; }

.evidence__bottom { margin-top: clamp(48px, 6cqw, 88px); }
.evidence h3 { margin-bottom: 14px; }
.evidence .lhs > * + *, .evidence .rhs > * + * { margin-top: 0; }
.evidence p { color: var(--ink-2); font-size: 0.9375rem; }

.ages li { padding-block: 12px; border-top: 1px solid var(--line); }
.ages b {
	display: block;
	font-size: clamp(1.25rem, 2cqw, 1.75rem);
	letter-spacing: -0.02em;
	line-height: 1.15;
	font-variation-settings: "SHRP" 100;
}
.ages span { display: block; margin-top: 4px; color: var(--ink-2); font-size: 0.875rem; line-height: 1.4; }
.ages i { display: block; height: 6px; width: var(--w); min-width: 8px; margin-top: 10px; background: var(--ember); }
.evidence .fine { margin-top: 6px; font-family: var(--mono); font-size: 0.75rem; }

.assay {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 28px;
	margin-top: 18px !important;
}
.assay dl { border-top: 2px solid var(--ink); }
.assay div { padding-block: 12px; border-bottom: 1px solid var(--line); }
.assay div:last-child { border-bottom: 0; }
.assay dt {
	font-family: var(--mono);
	font-size: clamp(1.25rem, 2.15cqw, 1.9375rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}
.assay dd { margin-top: 4px; color: var(--ink-2); font-size: 0.8125rem; line-height: 1.4; }

.nots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.nots li { padding-block: 9px; border-top: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.45; }

/* ---------- Install ---------- */

.install .rhs > h3 { margin-top: 36px; }
.install .rhs > h3 + .code { margin-top: 10px; }
.install .rhs > p { color: var(--ink-2); font-size: 0.9375rem; }
.code-title + .code { margin-top: 8px; }
.platforms { margin-top: 18px; background: none; }
.platforms__row {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	padding-block: 11px;
	border-top: 1px solid var(--line);
}
.platforms__row:last-child { border-bottom: 1px solid var(--line); }
.platforms__row b { font-variation-settings: "SHRP" 100; }
.platforms__row span { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.5; }

/* ---------- Docs ---------- */

.doclist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.rhs.doclist > * + * { margin-top: 0; }
.doclist a {
	display: block;
	height: 100%;
	padding-block: 14px 18px;
	border-top: 1px solid var(--line);
	text-decoration: none;
	transition: border-color 160ms ease;
}
.doclist b {
	display: block;
	font-size: 1.1875rem;
	letter-spacing: -0.012em;
	font-variation-settings: "SHRP" 100;
}
.doclist span { display: block; margin-top: 4px; color: var(--ink-2); font-size: 0.875rem; line-height: 1.45; }
@media (hover: hover) and (pointer: fine) {
	.doclist a:hover { border-top-color: var(--ember); }
	.doclist a:hover b { text-decoration: underline; text-decoration-thickness: 1px; }
}

/* ---------- Studio ---------- */

.studio { padding-bottom: 0; overflow: hidden; }
.studio__text { position: relative; z-index: 1; }
.studio__lede {
	font-size: clamp(1.25rem, 2.1cqw, 1.875rem);
	line-height: 1.28;
	letter-spacing: -0.016em;
	font-weight: 400;
	max-width: 32ch;
}
.studio__lede + p { color: var(--ink-2); }
.studio__mark {
	position: relative;
	margin-top: clamp(40px, 6cqw, 88px);
}
.studio__mark { aspect-ratio: 350 / 224; }
.studio__mark img { width: 100%; max-width: none; }
/* The page's seam comes down and enters the wordmark's own seam. */
.studio__mark::before {
	content: "";
	position: absolute;
	left: calc(var(--seam-ratio) * 100% - 1px);
	bottom: 68.75%;
	height: 4000px;
	width: 2px;
	background: var(--ember);
}
.studio__legal {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	padding-block: 18px 22px;
	font-size: 0.8125rem;
	color: var(--ink-2);
	border-top: 1px solid var(--line);
}
.studio__legal p { max-width: none; }
.studio__legal nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.studio__legal a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
	.studio__legal a:hover { color: var(--ink); text-decoration: underline; }
}

/* ---------- Medium: tighten the three-part rows ---------- */

@media (max-width: 1180px) {
	.legend li { grid-template-columns: 68px minmax(0, 1fr); }
	.legend__spec { grid-column: 2; padding-top: 0; }
	.nots, .doclist { grid-template-columns: minmax(0, 1fr); }
	.assay { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.forms > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- Narrow: one column, with the seam as a rail on the left ---------- */

@media (max-width: 899px) {
	.page {
		--seam-x: var(--gutter);
		--rail: 18px;
		--dip: 56px;
		--col-gap: 0px;
		--pad: 56px;
	}
	.wide-only { display: none; }
	.band > .wrap { padding-left: calc(var(--gutter) + var(--rail)); }
	.grid, .lanes, .note, .steps { display: block; }
	.lhs, .rhs { padding: 0; }
	.rhs { margin-top: 20px; }
	.hero__grid .rhs { margin-top: 0; }
	.hero__grid { padding-top: 8px; }
	.band { --c1: 10px; --c2: 12px; --c3: 26px; --c4: 40px; }
	.by img { width: 54px; }

	.plate { margin-top: -30px; height: 614px; padding: 0; width: 100%; }
	.plate__svg {
		width: 800px;
		max-width: none;
		margin-left: calc(var(--gutter) - 800px * var(--seam-ratio));
	}
	.lab { font-size: 19px; stroke-width: 5px; }
	.lab--name { font-size: 19px; }
	.lab--run, .lab--seam, .lab__t--wide { display: none; }
	.lease__tool { margin-top: 24px; }
	.hero__cmd { align-items: flex-start; }
	.hero__cmd code { white-space: normal; }
	.lab--leaf { font-size: 19px; }
	.plate__cap { right: auto; left: calc(var(--gutter) + var(--rail)); bottom: calc(var(--dip) + 4px); width: auto; max-width: 74%; }

	.steps li { padding: 0; margin-top: 28px; border: 0 !important; }
	.steps li:first-child { margin-top: 0; }
	.steps__cmd { white-space: normal; }

	.anatomy { display: block; font-size: clamp(3rem, 15.6cqw, 7rem); margin-block: 32px; }
	.anatomy__l, .anatomy__r { display: block; padding: 0; }
	.part { margin-top: 18px; }
	.part small { width: auto; }

	.ledger { margin-top: 28px; }
	.ledger__rows > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.ledger__rows dd { grid-template-columns: 96px minmax(0, 1fr); }
	.lease__cut { left: calc(var(--rail) * -1 - 6px); top: 40%; }

	.lane { margin-top: 26px; }
	.lane::after { top: 0.7rem; left: calc(var(--rail) * -1); right: auto; width: calc(var(--rail) - 4px); }
	.note { margin-top: 36px; }
	.note strong { display: block; padding: 0; margin-bottom: 6px; }
	.note p { padding: 0; }

	.providers__row, .paths__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.providers__row > *:nth-child(2), .paths__row > *:nth-child(2) { padding: 0; }
	.providers__head, .paths__head { display: none; }

	.shot { margin-top: 28px; }

	.codes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
	.codes__cell, .codes__cell + .codes__cell, .codes__cell + .codes__cell + .codes__cell { padding: 0 14px 0 0; border: 0; }

	.evidence__top .rhs, .evidence__bottom .rhs { margin-top: 44px; }
	.evidence__bottom { margin-top: 44px; }

	.studio .seam { display: none; }
	.studio__mark { margin-left: calc(var(--rail) * -1); }
	/* The seam jogs across a small fault to find the wordmark's seam. */
	.studio__text::before {
		content: "";
		position: absolute;
		left: calc(var(--gutter) - 1px);
		top: -2000px;
		bottom: -14px;
		width: 2px;
		background: var(--ember);
	}
	.studio__mark::before {
		left: 0;
		bottom: 68.75%;
		height: calc(31.25% + 26px);
		width: calc(var(--seam-ratio) * 100%);
		background: none;
		box-shadow: none;
		border-top: 2px solid var(--ember);
		border-right: 2px solid var(--ember);
	}
	.studio__legal { flex-direction: column; }
}

/* A phone sees half the section, so the farthest throw would land off screen. */
@media (max-width: 560px) {
	.names .name:nth-child(4),
	.arcs .arc:nth-child(4),
	.ejecta .lapillus:nth-child(n+10) { display: none; }
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.btn, .copy, .theme, .core, .lease__cut, .events span, .ledger__name { transition: none; }
}