/* ==========================================================================
   dash — dash-mcp.com
   --------------------------------------------------------------------------
   Design note. The identity is a warm near-black ground with one orange-to-red
   bloom across it, a white rounded wordmark, and a fine grain over everything;
   every colour below was sampled out of the supplied logo, app icon and banner
   rather than picked by eye.

   Two rules hold the system together:

   1. Orange means published. The bloom is atmosphere, but every *solid* use of
      orange marks something a shopper can see — the live ledger row, the
      publish step, the install button. It is never a general highlight.
   2. The bloom appears once, in the hero. It is the loudest thing in the brand,
      so spending it twice would make it wallpaper.
   ========================================================================== */

/* ---------- Fonts (self-hosted: one origin, no third-party requests) ------ */

/* Outfit's geometric, slightly rounded forms are the closest available match
   to the wordmark's own construction, so headings read as the same family of
   shapes without trying to imitate the logo. */
@font-face {
	font-family: 'Outfit';
	src: url('fonts/outfit.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: 'Instrument Sans';
	src: url('fonts/instrument-sans.woff2') format('woff2');
	font-weight: 400 700;
	font-display: swap;
}

@font-face {
	font-family: 'Geist Mono';
	src: url('fonts/geist-mono.woff2') format('woff2');
	font-weight: 300 700;
	font-display: swap;
}

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

:root {
	/* Ground. Sampled #131210 / #11110F / #0B0B09 from the icon and banner —
	   a black with warmth in it, never a neutral #000. */
	--ink: #0f0e0d;
	--ink-raised: #171513;
	--ink-deep: #090808;

	--text: #f1ede9;
	--text-soft: #a9a29b; /* 7.7:1 on --ink */
	--text-faint: #857e76; /* 4.8:1 on --ink — labels, timestamps, captions */
	--rule: #2c2825;
	--rule-soft: #211e1c;
	--quote: #4a443f; /* decorative only, sits below the text floor */

	/* The brand ramp, left to right off the banner and the icon's corner. */
	--flare: #ff8000;
	--flame: #e76414;
	--ember: #de5119;
	--blaze: #c4371c;
	--rust: #8e3418;

	/* Solid orange is the published signal. 7.7:1 on --ink; --ink on --flare is
	   the same ratio inverted, which is why buttons take dark text. */
	--live: var(--flare);
	--live-wash: rgba(231, 100, 20, 0.16);

	--display: 'Outfit', 'Helvetica Neue', sans-serif;
	--body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	--ease: cubic-bezier(0.2, 0.7, 0.3, 1);

	color-scheme: dark;
}

/* ---------- Reset -------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	background: var(--ink);
}

body {
	margin: 0;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--ink);
	color: var(--text);
	font-family: var(--body);
	font-size: 1.0625rem;
	line-height: 1.62;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* The grain carried by every supplied asset. Kept far enough down that it
   reads as paper texture rather than noise. */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.032;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
}

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

::selection {
	background: var(--flare);
	color: var(--ink);
}

/* ---------- Layout primitives -------------------------------------------- */

.wrap {
	width: min(100% - 2.5rem, 68rem);
	margin-inline: auto;
}

body > main {
	flex: 1 0 auto;
}

.band {
	padding-block: clamp(3.75rem, 8vw, 7rem);
	position: relative;
}

.band--ruled {
	border-top: 1px solid var(--rule-soft);
}

.band--raised {
	background: var(--ink-raised);
}

.band--deep {
	background: var(--ink-deep);
	overflow: hidden;
}

/* ---------- Type roles --------------------------------------------------- */

.eyebrow {
	font-family: var(--mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--text-faint);
	line-height: 1.5;
}

.h2 {
	font-family: var(--display);
	font-size: clamp(1.85rem, 3.9vw, 3.05rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.05;
	text-wrap: balance;
	color: var(--text);
}

.h3 {
	font-family: var(--display);
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: -0.012em;
	line-height: 1.25;
	color: var(--text);
}

.lede {
	font-size: clamp(1.0625rem, 1.55vw, 1.1875rem);
	line-height: 1.58;
	color: var(--text-soft);
	max-width: 34em;
	text-wrap: pretty;
}

.note {
	font-family: var(--mono);
	font-size: 0.78125rem;
	line-height: 1.6;
	color: var(--text-faint);
	letter-spacing: 0.005em;
}

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

.masthead {
	border-bottom: 1px solid var(--rule-soft);
	position: relative;
	z-index: 2;
}

.masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 4.25rem;
}

/* The supplied wordmark, keyed to transparency from the master PNG. It is the
   logo — never reset it in type. */
.wordmark {
	display: block;
	line-height: 0;
}

.wordmark img {
	height: 1.35rem;
	width: auto;
}

.masthead__nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
	font-family: var(--mono);
	font-size: 0.78125rem;
	letter-spacing: 0.02em;
}

.masthead__nav a {
	text-decoration: none;
	color: var(--text-soft);
	padding-block: 0.35rem;
	border-bottom: 1px solid transparent;
	transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.masthead__nav a:hover {
	color: var(--text);
	border-bottom-color: var(--flame);
}

.masthead__nav .is-hideable {
	display: none;
}

@media (min-width: 40rem) {
	.masthead__nav .is-hideable {
		display: inline;
	}
}

/* ---------- Buttons ------------------------------------------------------ */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-family: var(--mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	padding: 0.85em 1.4em;
	border: 1px solid var(--rule);
	border-radius: 0;
	transition: background 0.18s var(--ease), color 0.18s var(--ease),
		border-color 0.18s var(--ease), translate 0.18s var(--ease);
}

/* Dark text on orange, not white — white on --flare is 2.5:1 and fails. */
.btn--primary {
	background: var(--flare);
	border-color: var(--flare);
	color: var(--ink);
	font-weight: 600;
}

.btn--primary:hover {
	background: var(--ember);
	border-color: var(--ember);
	color: var(--text);
	translate: 0 -1px;
}

.btn--ghost {
	background: transparent;
	color: var(--text);
}

.btn--ghost:hover {
	border-color: var(--text);
	background: rgba(255, 255, 255, 0.05);
	translate: 0 -1px;
}

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

.hero {
	padding-block: clamp(2.75rem, 5vw, 4.25rem) clamp(3.5rem, 7vw, 6rem);
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* The bloom, traced off the banner: an amber core off the left edge falling
   through orange and red into the ground. It is the one place the brand shouts.

   Two constraints it has to respect. It bleeds past the viewport edge rather
   than starting at the content column, which is why .hero is full-bleed and the
   column lives in a .wrap inside it. And it is bounded vertically so it has
   faded out before the ledger begins — the ledger's timestamps are --text-faint,
   which is tuned against --ink and washes out over orange. */
.hero::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: -34rem;
	left: -22rem;
	width: 78rem;
	height: 74rem;
	background: radial-gradient(
		46% 46% at 50% 50%,
		#ffb056 0%,
		var(--flare) 18%,
		var(--ember) 34%,
		var(--blaze) 47%,
		rgba(142, 52, 24, 0.5) 62%,
		rgba(15, 14, 13, 0) 78%
	);
	filter: blur(10px);
	opacity: 0.85;
	pointer-events: none;
}

/* The bloom's core is bright enough that white type over it falls to about
   2.5:1. The banner solves this by seating the wordmark on the red falloff
   rather than the amber core; this scrim does the same job, weighted to the
   top-left so it holds the headline above 4.5:1 without dulling the bloom out
   at the edge where no text sits. */
.hero::after {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(
		104deg,
		rgba(15, 14, 13, 0.4) 0%,
		rgba(15, 14, 13, 0.24) 32%,
		rgba(15, 14, 13, 0.06) 58%,
		rgba(15, 14, 13, 0) 74%
	);
	pointer-events: none;
}

/* Narrow screens have no room to the left for the core to sit off-canvas, so
   the whole bloom shrinks into a corner glow instead of washing the column. */
@media (max-width: 60rem) {
	.hero::before {
		top: -26rem;
		left: -22rem;
		width: 54rem;
		height: 58rem;
		opacity: 0.62;
	}

	.hero::after {
		background: linear-gradient(
			160deg,
			rgba(15, 14, 13, 0.6) 0%,
			rgba(15, 14, 13, 0.34) 34%,
			rgba(15, 14, 13, 0) 68%
		);
	}
}

.hero__quote {
	font-family: var(--display);
	font-size: clamp(2.3rem, 6.6vw, 4.9rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1;
	margin-block: 1.1rem 0;
	max-width: 16ch;
	text-wrap: balance;
	color: #fff;
}

/* Hang the opening quote in the margin so the sentence itself stays flush with
   the eyebrow above it. */
.hero__quote::before {
	content: '\201C';
	color: rgba(255, 255, 255, 0.42);
	margin-left: -0.42em;
}

.hero__quote::after {
	content: '\201D';
	color: rgba(255, 255, 255, 0.42);
}

.hero .eyebrow {
	color: rgba(255, 255, 255, 0.72);
}

.hero__body {
	margin-top: clamp(1.5rem, 2.5vw, 2rem);
	display: grid;
	gap: 1.5rem;
	max-width: 40rem;
}

/* Over the bloom the soft grey loses contrast, so hero copy sits brighter than
   body copy elsewhere. */
.hero .lede {
	color: #ede8e3;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* ---------- Ledger (the signature) --------------------------------------- */

.ledger {
	margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
	position: relative;
}

.ledger__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--text-faint);
}

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

.ledger__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.15rem 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--rule-soft);
	font-family: var(--mono);
	font-size: 0.8125rem;
	line-height: 1.45;
	align-items: baseline;
}

.ledger__rows > .ledger__row:last-child {
	border-bottom: 0;
}

.ledger__call {
	font-weight: 500;
	color: var(--text);
	white-space: nowrap;
}

.ledger__detail {
	grid-column: 1;
	color: var(--text-soft);
	overflow-wrap: anywhere;
}

.ledger__state {
	grid-column: 2;
	grid-row: 1 / span 2;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-faint);
	white-space: nowrap;
}

.ledger__ver {
	color: var(--text-soft);
	letter-spacing: 0.04em;
	/* "v2", not "V2" — it should read the way the admin prints it. */
	text-transform: none;
}

.ledger__chip {
	border: 1px solid var(--rule);
	padding: 0.15em 0.5em;
	color: var(--text-soft);
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

/* The one row a shopper can see, and the only solid orange in the ledger. */
.ledger__row.is-live .ledger__chip {
	background: var(--flare);
	border-color: var(--flare);
	color: var(--ink);
	font-weight: 600;
}

.ledger__row.is-live .ledger__call,
.ledger__row.is-live .ledger__ver {
	color: #fff;
	font-weight: 500;
}

/* The sparkle from inside the logo's D, reused where it means something:
   this version is live. */
.spark {
	width: 0.62em;
	height: 0.82em;
	flex: none;
	fill: currentColor;
}

@media (min-width: 46rem) {
	.ledger__row {
		grid-template-columns: 5.5rem 11rem 1fr auto;
		gap: 1.25rem;
		padding: 0.7rem 0;
	}

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

	.ledger__detail {
		grid-column: auto;
	}

	.ledger__state {
		grid-column: auto;
		grid-row: auto;
	}
}

/* Time is redundant noise on a narrow screen; the sequence is the information. */
.ledger__time {
	display: none;
}

@media (min-width: 46rem) {
	.ledger__time {
		display: block;
	}
}

/* ---------- Steps -------------------------------------------------------- */

.steps {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	display: grid;
	gap: 0;
	border-top: 1px solid var(--rule);
}

@media (min-width: 52rem) {
	.steps {
		grid-template-columns: repeat(4, 1fr);
	}
}

.step {
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--rule-soft);
	display: grid;
	gap: 0.5rem;
	align-content: start;
}

@media (min-width: 52rem) {
	.step {
		padding: 1.75rem clamp(1rem, 2vw, 1.75rem) 2.5rem 0;
		border-bottom: 0;
		border-right: 1px solid var(--rule-soft);
	}

	.step:last-child {
		border-right: 0;
		padding-right: 0;
	}
}

.step__n {
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--text-faint);
}

.step:last-child .step__n {
	color: var(--flare);
}

.step p {
	color: var(--text-soft);
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* ---------- Spec sheet --------------------------------------------------- */

.spec {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	border-top: 1px solid var(--rule);
}

.spec__row {
	display: grid;
	gap: 0.35rem;
	padding: 1.4rem 0;
	border-bottom: 1px solid var(--rule-soft);
}

@media (min-width: 46rem) {
	.spec__row {
		grid-template-columns: 9.5rem 1fr;
		gap: 2rem;
		align-items: baseline;
	}
}

.spec__term {
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.spec__def {
	color: var(--text-soft);
	max-width: 46em;
	text-wrap: pretty;
}

/* ---------- Guarantees --------------------------------------------------- */

.guards {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	display: grid;
	gap: 0;
	border-top: 1px solid var(--rule);
}

@media (min-width: 48rem) {
	.guards {
		grid-template-columns: 1fr 1fr;
		column-gap: clamp(2rem, 5vw, 4rem);
	}
}

.guard {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--rule-soft);
	display: grid;
	gap: 0.45rem;
	align-content: start;
}

.guard p {
	color: var(--text-soft);
	font-size: 0.9375rem;
	line-height: 1.58;
	text-wrap: pretty;
}

/* ---------- Clients ------------------------------------------------------ */

/* Slash separators only survive on a line that doesn't wrap — a wrapped one
   leaves a slash dangling at the end, which reads as a mistake. So the list is a
   plain two-column grid until there is room for the whole row. */
.clients {
	margin-top: clamp(2rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.4rem 1.5rem;
	align-items: baseline;
	font-family: var(--display);
	font-size: clamp(1.35rem, 3vw, 2.1rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--text);
}

.clients .is-any {
	color: var(--text-faint);
	grid-column: 1 / -1;
}

@media (min-width: 64rem) {
	.clients {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 0;
	}

	.clients li:not(:last-child)::after {
		content: '/';
		color: var(--rule);
		margin-inline: 0.5em 0.4em;
		font-weight: 300;
	}

	/* "anything that speaks MCP" is a different kind of item from the named
	   products, so it takes its own line and drops the separator before it. */
	.clients li:nth-last-child(2)::after {
		content: none;
	}

	.clients .is-any {
		flex-basis: 100%;
	}
}

/* ---------- Closing CTA -------------------------------------------------- */

.closer {
	display: grid;
	gap: 1.75rem;
	justify-items: start;
	position: relative;
	z-index: 1;
}

/* A far quieter echo of the hero bloom — enough warmth to close the page on
   the brand, not a second hero. */
.band--deep::before {
	content: '';
	position: absolute;
	inset: auto -10% -60% auto;
	width: 46rem;
	height: 46rem;
	background: radial-gradient(
		50% 50% at 50% 50%,
		var(--blaze) 0%,
		rgba(142, 52, 24, 0.4) 45%,
		rgba(9, 8, 8, 0) 72%
	);
	opacity: 0.5;
	pointer-events: none;
}

/* ---------- Footer ------------------------------------------------------- */

.footer {
	border-top: 1px solid var(--rule-soft);
	padding-block: 2.25rem 3rem;
	position: relative;
	z-index: 2;
}

.footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
	align-items: baseline;
	font-family: var(--mono);
	font-size: 0.78125rem;
	color: var(--text-faint);
}

.footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.footer__inner a {
	color: var(--text-soft);
	text-decoration: none;
	border-bottom: 1px solid var(--rule);
	transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.footer__inner a:hover {
	color: var(--text);
	border-bottom-color: var(--flame);
}

/* ---------- Prose (privacy) ---------------------------------------------- */

.doc {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

@media (min-width: 58rem) {
	.doc {
		grid-template-columns: 13rem 1fr;
		column-gap: clamp(2.5rem, 6vw, 5rem);
	}
}

.doc__index {
	font-family: var(--mono);
	font-size: 0.78125rem;
	line-height: 1.9;
	display: grid;
	gap: 0.15rem;
	align-content: start;
}

@media (min-width: 58rem) {
	.doc__index {
		position: sticky;
		top: 2.5rem;
	}
}

.doc__index a {
	color: var(--text-faint);
	text-decoration: none;
	transition: color 0.18s var(--ease);
}

.doc__index a:hover {
	color: var(--flare);
}

.doc__index-title {
	color: var(--text);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.6875rem;
	padding-bottom: 0.6rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid var(--rule);
}

/* ~68 characters. A policy nobody wants to read at least gets a comfortable
   measure. */
.prose {
	max-width: 36em;
}

.prose > * + * {
	margin-top: 1.1rem;
}

.prose h2 {
	font-family: var(--display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.018em;
	line-height: 1.2;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rule-soft);
	scroll-margin-top: 2rem;
	color: var(--text);
}

.prose > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.prose h3 {
	font-family: var(--body);
	font-size: 1rem;
	font-weight: 600;
	margin-top: 1.75rem;
	color: var(--text);
}

.prose p,
.prose li {
	color: var(--text-soft);
	text-wrap: pretty;
}

.prose strong {
	color: var(--text);
	font-weight: 600;
}

.prose ul {
	display: grid;
	gap: 0.55rem;
}

.prose ul li {
	padding-left: 1.15rem;
	position: relative;
}

.prose ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.66em;
	width: 0.4rem;
	height: 1px;
	background: var(--flame);
}

.prose a {
	color: var(--text);
	text-decoration: none;
	border-bottom: 1px solid var(--flame);
	padding-bottom: 0.05em;
	transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.prose a:hover {
	background: var(--live-wash);
	color: #fff;
}

.prose code {
	font-family: var(--mono);
	font-size: 0.875em;
	background: var(--ink-raised);
	border: 1px solid var(--rule-soft);
	padding: 0.12em 0.35em;
	color: var(--text);
}

.doc__meta {
	font-family: var(--mono);
	font-size: 0.78125rem;
	color: var(--text-faint);
	margin-bottom: 2rem;
}

.doc__title {
	font-family: var(--display);
	font-size: clamp(2.4rem, 6vw, 3.75rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
	margin-bottom: 1.25rem;
	color: #fff;
}

/* ---------- Motion ------------------------------------------------------- */
/* One orchestrated moment: the ledger writes itself out on load, ending on the
   row a shopper can actually see. Everything else on the page holds still. */

@media (prefers-reduced-motion: no-preference) {
	@keyframes ledger-in {
		from {
			opacity: 0;
			translate: 0 0.6rem;
		}
		to {
			opacity: 1;
			translate: 0 0;
		}
	}

	/* Delays live here rather than in a style attribute so the page can ship a
	   CSP without 'unsafe-inline'. */
	.ledger__row {
		opacity: 0;
		animation: ledger-in 0.5s var(--ease) forwards;
	}

	.ledger__row:nth-child(1) {
		animation-delay: 0.35s;
	}
	.ledger__row:nth-child(2) {
		animation-delay: 0.44s;
	}
	.ledger__row:nth-child(3) {
		animation-delay: 0.53s;
	}
	.ledger__row:nth-child(4) {
		animation-delay: 0.62s;
	}
	.ledger__row:nth-child(5) {
		animation-delay: 0.71s;
	}

	@keyframes hero-in {
		from {
			opacity: 0;
			translate: 0 0.75rem;
		}
		to {
			opacity: 1;
			translate: 0 0;
		}
	}

	.hero .eyebrow,
	.hero__quote,
	.hero__body,
	.ledger__caption {
		opacity: 0;
		animation: hero-in 0.6s var(--ease) forwards;
	}

	.hero .eyebrow {
		animation-delay: 0.05s;
	}

	.hero__quote {
		animation-delay: 0.1s;
	}

	.hero__body {
		animation-delay: 0.2s;
	}

	.ledger__caption {
		animation-delay: 0.28s;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ---------- Utilities ---------------------------------------------------- */

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--flare);
	color: var(--ink);
	padding: 0.75rem 1.25rem;
	font-family: var(--mono);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	z-index: 10;
}

.skip:focus {
	left: 0.75rem;
	top: 0.75rem;
}

.vh {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.note--spaced {
	margin-top: 2rem;
}

.doc__lede {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* The 404 reuses .doc__title inside .closer; its own bottom margin would stack
   on top of the grid gap. */
.closer .doc__title {
	margin-bottom: 0;
}