/* ==========================================================================
   Moen Tactical — moentactical.win
   Single stylesheet. No @import, no data: URIs, no third-party anything.
   Every colour, step and space is a token; the page is composed from them.
   ========================================================================== */

/* --------------------------------------------------------------- 1. fonts */

@font-face {
	font-family: "Inter";
	src: url("/assets/fonts/inter-var.563a74b0.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("/assets/fonts/jetbrains-mono-var.3ac3cf32.woff2") format("woff2");
	font-weight: 100 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Instrument Serif";
	src: url("/assets/fonts/instrument-serif.4f3abbb9.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* -------------------------------------------------------------- 2. tokens */

:root {
	/* palette — a three-step value ladder, one accent, one state colour */
	--bg-0: #0A0D14;
	--bg-1: #10141D;
	--bg-2: #161B26;
	--hairline: rgba(154, 174, 204, 0.10);
	--hairline-hi: rgba(154, 174, 204, 0.18);
	--rail-line: rgba(154, 174, 204, 0.26);
	--text-1: #EDF1F5;
	--text-2: #A8B3C4;
	--text-3: #7E8BA3;
	--accent: #45D6A4;
	--accent-dim: rgba(69, 214, 164, 0.14);
	--accent-line: rgba(69, 214, 164, 0.35);
	--state-finding: #F87171;

	/* type */
	--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
	--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

	--step--1: clamp(0.8125rem, 0.788rem + 0.109vw, 0.875rem);
	--step-0: clamp(1rem, 0.957rem + 0.217vw, 1.125rem);
	--step-1: clamp(1.1875rem, 1.113rem + 0.326vw, 1.375rem);
	--step-2: clamp(1.4375rem, 1.315rem + 0.543vw, 1.75rem);
	--step-3: clamp(1.75rem, 1.554rem + 0.870vw, 2.25rem);
	--step-4: clamp(2.5rem, 1.620rem + 3.913vw, 4.75rem);

	/* space — 4px rhythm */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2rem;
	--space-6: 3rem;
	--space-7: 4.5rem;
	--space-8: 7rem;

	--band-pad: clamp(4.5rem, 3.4rem + 4.9vw, 7.5rem);
	--rail-gap: 2.25rem;
	--radius: 8px;
	--radius-s: 4px;
}

/* --------------------------------------------------------------- 3. reset */

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

html {
	-webkit-text-size-adjust: 100%;
	tab-size: 4;
}

body {
	margin: 0;
	background-color: var(--bg-0);
	color: var(--text-2);
	font-family: var(--font-sans);
	font-size: var(--step-0);
	line-height: 1.65;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

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

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

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

a {
	color: inherit;
}

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

::selection {
	background: var(--accent-dim);
	color: var(--text-1);
}

/* the film grain — a real, hashed, same-origin SVG file, never a data: URI */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.05;
	mix-blend-mode: overlay;
	background-image: url("/assets/grain.dc496f2b.svg");
	background-size: 240px 240px;
}

/* ------------------------------------------------------- 4. layout system */

/* One grid, three tracks. `main` is the 720px prose column; `wide` is the
   1040px shell the composed bands use; `full` bleeds edge to edge. Pipeline
   and ledger share the same inner split, which is what lets the 1px connector
   run continuously from one band into the next. */
.band {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns:
		[full-start] minmax(1.5rem, 1fr)
		[wide-start] minmax(0, 160px)
		[main-start] minmax(0, 720px) [main-end]
		minmax(0, 160px) [wide-end]
		minmax(1.5rem, 1fr) [full-end];
	padding-block: var(--band-pad);
}

.band > * {
	grid-column: main;
}

.band > .wide {
	grid-column: wide;
}

.band--1 {
	background-color: var(--bg-1);
}

.band--2 {
	background-color: var(--bg-2);
}

.measure {
	max-width: 65ch;
}

.lead {
	max-width: 55ch;
}

.skip {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 99;
	transform: translateY(-200%);
	padding: var(--space-2) var(--space-4);
	background: var(--bg-2);
	color: var(--text-1);
	border: 1px solid var(--hairline-hi);
	border-radius: 0 0 var(--radius-s) 0;
	text-decoration: none;
}

.skip:focus {
	transform: translateY(0);
}

/* ------------------------------------------------------------ 5. typography */

.overline {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-3);
	margin-bottom: var(--space-4);
}

h1 {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--step-4);
	line-height: 1.08;
	letter-spacing: 0;
	color: var(--text-1);
	max-width: 14ch;
	text-wrap: balance;
}

h2 {
	font-size: var(--step-3);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--text-1);
	text-wrap: balance;
}

h3 {
	font-size: var(--step-1);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--text-1);
}

p + p {
	margin-top: var(--space-4);
}

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

/* quiet links: the underline is the affordance, the accent is not spent here */
.link {
	color: var(--text-1);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--hairline-hi);
	text-underline-offset: 0.28em;
	transition: text-decoration-color 0.25s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s;
}

.link:hover,
.link:focus-visible {
	color: var(--text-1);
	text-decoration-color: currentColor;
}

.link--quiet {
	color: var(--text-2);
}

.link--big {
	font-size: var(--step-1);
	font-weight: 500;
}

/* ------------------------------------------------------------------ 6. nav */

.nav {
	position: sticky;
	top: 0;
	z-index: 20;
	background-color: color-mix(in srgb, var(--bg-0) 85%, transparent);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--hairline);
}

.nav__inner {
	max-width: 1040px;
	margin-inline: auto;
	padding: var(--space-3) 1.5rem;
	display: flex;
	align-items: center;
	gap: var(--space-5);
	min-height: 56px;
}

.brand {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
	color: var(--text-1);
	font-weight: 600;
	letter-spacing: -0.015em;
	margin-right: auto;
}

.brand__mark {
	width: 32px;
	height: 32px;
	flex: none;
}

.nav__links {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2.4vw, 2rem);
	font-size: var(--step--1);
	color: var(--text-2);
}

.nav__links a {
	text-decoration: none;
	padding: 0.75rem 0.25rem;
	display: inline-block;
	min-height: 44px;
	line-height: 1.5rem;
	transition: color 0.2s;
}

.nav__links a:hover {
	color: var(--text-1);
}

/* below this width the wordmark and three labels cannot share a line without
   wrapping into a three-storey nav; the mark carries the brand instead */
@media (max-width: 640px) {
	.brand span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.nav__inner {
		gap: var(--space-3);
	}
}

/* ----------------------------------------------------------------- 7. hero */

.hero {
	min-height: 88svh;
	align-content: center;
	padding-block: var(--space-5) var(--space-7);
	overflow: clip;
}

/* structure layer: a 32px dot grid, masked away below the fold line */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(154, 174, 204, 0.07) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
}

/* depth layer: one same-hue radial vignette, no chromatic gradients anywhere */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(120% 80% at 18% 0%, var(--bg-1) 0%, rgba(10, 13, 20, 0) 62%);
}

.hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--space-6);
}

.hero__sub {
	font-size: var(--step-1);
	line-height: 1.5;
	color: var(--text-2);
	margin-top: var(--space-4);
	max-width: 56ch;
}

.hero__signpost {
	margin-top: var(--space-4);
	padding-top: var(--space-3);
	border-top: 1px solid var(--hairline);
	max-width: 55ch;
	font-size: var(--step--1);
	color: var(--text-3);
}

.hero__foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
	margin-top: var(--space-4);
	font-size: var(--step--1);
	font-family: var(--font-mono);
	letter-spacing: 0.01em;
}

.hero__foot a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

@media (max-width: 600px) {
	.hero__sub {
		font-size: var(--step-0);
		line-height: 1.6;
	}
}

@media (min-width: 900px) {
	.hero__grid {
		grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	}

	.hero__col {
		grid-column: 1;
	}
}

/* ---------------------------------------------------------------- 8. offer */

.offer__head {
	max-width: 34ch;
}

.cards {
	display: grid;
	gap: 1px;
	margin-top: var(--space-7);
	background-color: var(--hairline);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	overflow: hidden;
}

@media (min-width: 760px) {
	.cards {
		grid-template-columns: 1fr 1fr;
	}
}

.card {
	background-color: var(--bg-0);
	padding: var(--space-5) var(--space-5) var(--space-6);
	transition: background-color 0.25s;
}

.card:hover {
	background-color: var(--bg-1);
}

.card h3 {
	margin-bottom: var(--space-3);
	max-width: 28ch;
}

.card p {
	font-size: var(--step--1);
	color: var(--text-2);
	line-height: 1.6;
	max-width: 40ch;
}

/* the engagement-shape paragraph: deliberately offset, not centred */
.offer__shape {
	margin-top: var(--space-7);
	max-width: 60ch;
	border-left: 1px solid var(--hairline-hi);
	padding-left: var(--space-5);
	color: var(--text-2);
}

@media (min-width: 1040px) {
	.offer__shape {
		margin-left: 25%;
	}
}

/* ---------------------------------------- 9. the drawn system: rail + nodes */

/* Pipeline and ledger share this grid. Same columns, same gap, so the 1px
   connector sits at the same x in both bands and reads as one line that
   starts at station 01 and resolves at the ledger. */
.system {
	display: grid;
	gap: var(--space-6);
}

@media (min-width: 1040px) {
	.system {
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
		gap: clamp(2rem, 4vw, 4.5rem);
	}

	.system__aside {
		position: sticky;
		top: 5.5rem;
		align-self: start;
	}
}

.rail {
	position: relative;
	padding-left: var(--rail-gap);
	min-width: 0;
}

.rail::before {
	content: "";
	position: absolute;
	left: 0;
	width: 1px;
	background: var(--rail-line);
}

/* the pipeline's rail fades in, then runs out through the band's bottom pad */
.rail--start::before {
	top: 0.7em;
	bottom: calc(var(--band-pad) * -1);
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 3rem);
	mask-image: linear-gradient(180deg, transparent 0, #000 3rem);
}

/* the ledger's rail picks it up at the band's top edge and fades out at the end */
.rail--end::before {
	top: calc(var(--band-pad) * -1);
	bottom: 6rem;
	-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 5rem), transparent 100%);
	mask-image: linear-gradient(180deg, #000 calc(100% - 5rem), transparent 100%);
}

.node {
	position: relative;
}

.node::before {
	content: "";
	position: absolute;
	left: calc(var(--rail-gap) * -1);
	top: 0.62em;
	width: 5px;
	height: 5px;
	margin-left: -2px;
	border-radius: 50%;
	background-color: var(--text-3);
}

/* ------------------------------------------------------------- 10. stations */

.stations > li + li {
	margin-top: var(--space-6);
}

.station__n {
	font-family: var(--font-mono);
	font-feature-settings: "tnum" 1;
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--text-3);
	display: block;
	margin-bottom: var(--space-2);
}

.station h3 {
	margin-bottom: var(--space-2);
}

.station p {
	max-width: 55ch;
	font-size: var(--step-0);
	color: var(--text-2);
}

.station__stance {
	margin-top: var(--space-2);
	color: var(--text-3);
	font-size: var(--step--1);
}

/* ---------------------------------------------------------- 11. the ledger */

.ledger-h {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--step-3);
	letter-spacing: 0;
	line-height: 1.1;
	color: var(--text-1);
}

.passage {
	margin-top: var(--space-4);
	max-width: 55ch;
	color: var(--text-2);
}

.passage p:last-child {
	color: var(--text-3);
	font-size: var(--step--1);
}

.ledger {
	min-width: 0;
}

.ledger__rows {
	font-family: var(--font-mono);
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
}

.lg-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	column-gap: var(--space-4);
	align-items: baseline;
	padding-block: 0.28rem;
	border-bottom: 1px solid transparent;
	border-image: linear-gradient(90deg, var(--hairline) 0, var(--hairline) 60%, transparent 100%) 1;
	font-size: var(--step--1);
	line-height: 1.5;
	color: var(--text-3);
	overflow-wrap: anywhere;
}

/* every round is a node on the same rail — smaller than a station's, denser */
.lg-row::before {
	content: "";
	position: absolute;
	left: calc(var(--rail-gap) * -1);
	top: 0.72em;
	width: 3px;
	height: 3px;
	margin-left: -1px;
	border-radius: 50%;
	background-color: var(--text-3);
}

.lg-row--open::before {
	width: 5px;
	height: 5px;
	margin-left: -2px;
	background-color: var(--text-3);
}

.lg-row .lg-n {
	letter-spacing: 0.06em;
}

.lg-row .lg-t {
	min-width: 0;
}

/* rows 12–14 open up: bigger step, more air, brighter, annotated */
.lg-row--open {
	font-size: var(--step-0);
	padding-block: var(--space-3);
	color: var(--text-2);
	border-image: linear-gradient(90deg, var(--hairline-hi) 0, var(--hairline-hi) 70%, transparent 100%) 1;
}

.lg-row--open .lg-note {
	grid-column: 2;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--step-0);
	line-height: 1.4;
	color: var(--text-3);
	margin-top: var(--space-1);
}

.lg-note:empty {
	display: none;
}

/* the one drawn "loop" gesture: the rail hooks back on itself between 13 and 14 */
.lg-row--hook::after {
	content: "";
	position: absolute;
	left: calc(var(--rail-gap) * -1);
	top: -0.9rem;
	width: 11px;
	height: 1.8rem;
	margin-left: -11px;
	border: 1px solid var(--rail-line);
	border-right: 0;
	border-radius: 7px 0 0 7px;
}

/* --- the HALT object: the page's single full-strength accent moment ------- */
.lg-halt {
	position: relative;
	margin-top: var(--space-5);
	padding: var(--space-4) var(--space-5);
	background-color: var(--bg-1);
	border: 1px solid var(--accent-line);
	border-radius: var(--radius);
	box-shadow: 0 0 0 1px var(--accent-line), 0 0 24px var(--accent-dim);
	font-family: var(--font-mono);
	font-size: var(--step-0);
	line-height: 1.55;
	color: var(--accent);
	overflow-wrap: anywhere;
}

.lg-halt b {
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-right: var(--space-2);
}

/* Reserved slots for the ratification pack (§C-4d). They collapse to nothing
   while empty — no visible gap under the focal object — and filling them is a
   text swap, not a layout change. */
.lg-quote,
.lg-aside {
	display: block;
}

.lg-quote:empty,
.lg-aside:empty {
	display: none;
}

.lg-quote {
	margin-top: var(--space-4);
	font-family: var(--font-mono);
	font-size: var(--step-0);
	line-height: 1.5;
	color: var(--text-1);
	border-left: 2px solid var(--accent-line);
	padding-left: var(--space-4);
}

.lg-aside {
	margin-top: var(--space-4);
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--step-0);
	line-height: 1.45;
	color: var(--text-3);
	max-width: 46ch;
}

.lg-close {
	margin-top: var(--space-5);
	font-family: var(--font-mono);
	font-size: var(--step--1);
	line-height: 1.55;
	color: var(--text-3);
	max-width: 58ch;
}

/* --- the loop's residue, in the same typography -------------------------- */
.lg-prs {
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	border-top: 1px solid var(--hairline-hi);
}

.lg-prs__label {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-3);
	margin-bottom: var(--space-3);
}

.pr {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	column-gap: var(--space-4);
	padding-block: var(--space-3);
	border-bottom: 1px solid transparent;
	border-image: linear-gradient(90deg, var(--hairline) 0, var(--hairline) 60%, transparent 100%) 1;
	font-family: var(--font-mono);
	font-feature-settings: "tnum" 1;
	font-size: var(--step--1);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.pr__n {
	color: var(--text-3);
	letter-spacing: 0.04em;
}

.pr__t {
	min-width: 0;
	color: var(--text-2);
}

.pr__meta {
	display: block;
	margin-top: var(--space-1);
	color: var(--text-3);
}

.ledger figcaption {
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	border-top: 1px solid var(--hairline);
	max-width: 58ch;
	font-size: var(--step--1);
	line-height: 1.6;
	color: var(--text-3);
}

@media (max-width: 719px) {
	:root {
		--rail-gap: 1.75rem;
	}

	/* the annotation drops below its row; the number stays beside its label */
	.lg-row--open .lg-note {
		grid-column: 1 / -1;
	}

	.pr {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--space-1);
	}
}

/* ---------------------------------------------------------------- 12. proof */

.proof__line {
	margin-top: var(--space-4);
	font-size: var(--step-2);
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--text-1);
	max-width: 22ch;
	text-wrap: balance;
}

.proof__body {
	max-width: 62ch;
	color: var(--text-2);
}

.proof__links {
	margin-top: var(--space-5);
	font-family: var(--font-mono);
	font-size: var(--step--1);
	color: var(--text-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	align-items: center;
}

.proof__links a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* ----------------------------------------------------------- 13. engagement */

/* the editorial split: a statement column and a detail column. Used by the
   proof and engagement bands — same skeleton, different weight in each. */
.split {
	display: grid;
	gap: var(--space-6);
}

@media (min-width: 900px) {
	.split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(2rem, 5vw, 5rem);
	}
}

.engage__body {
	max-width: 55ch;
	color: var(--text-2);
}

.engage__address {
	margin-top: var(--space-5);
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--font-mono);
	letter-spacing: -0.01em;
}

.engage__derisk {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--hairline);
	font-size: var(--step--1);
	color: var(--text-3);
	max-width: 46ch;
}

/* ---------------------------------------------------- 14. about and footer */

.about {
	padding-bottom: var(--space-7);
}

.about__lead {
	margin-top: var(--space-4);
	font-size: var(--step-1);
	line-height: 1.45;
	color: var(--text-1);
	max-width: 30ch;
	letter-spacing: -0.015em;
}

.about__body {
	margin-top: var(--space-4);
	max-width: 58ch;
}

.foot {
	border-top: 1px solid var(--hairline);
	padding-block: var(--space-6) var(--space-7);
	font-size: var(--step--1);
	color: var(--text-3);
	line-height: 1.6;
}

.foot__grid {
	display: grid;
	gap: var(--space-5);
}

@media (min-width: 900px) {
	.foot__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: clamp(2rem, 5vw, 5rem);
	}
}

.foot__fine {
	max-width: 62ch;
}

.foot__entity {
	font-family: var(--font-mono);
	letter-spacing: 0.02em;
	color: var(--text-3);
}

.foot__mail {
	display: block;
	margin-bottom: var(--space-3);
	font-family: var(--font-mono);
	color: var(--text-2);
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ 15. 404 */

.err {
	min-height: 74svh;
	align-content: center;
}

.err h1 {
	max-width: 16ch;
}

.err p {
	margin-top: var(--space-4);
	max-width: 46ch;
}

.err__back {
	margin-top: var(--space-6);
	font-family: var(--font-mono);
	font-size: var(--step--1);
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ------------------------------------------------------------- 16. motion */

/* Doubly gated: reveal styles apply only when JS is present AND the visitor
   has not asked for reduced motion. Without either, the page is complete. */
.js .reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--row, 0) * 70ms);
}

.js .reveal.in {
	opacity: 1;
	transform: none;
}

/* the ledger's stagger — set here, never as an inline style attribute (CSP) */
.lg-row:nth-child(1) { --row: 0; }
.lg-row:nth-child(2) { --row: 1; }
.lg-row:nth-child(3) { --row: 2; }
.lg-row:nth-child(4) { --row: 3; }
.lg-row:nth-child(5) { --row: 4; }
.lg-row:nth-child(6) { --row: 5; }
.lg-row:nth-child(7) { --row: 6; }
.lg-row:nth-child(8) { --row: 7; }
.lg-row:nth-child(9) { --row: 8; }
.lg-row:nth-child(10) { --row: 9; }
.lg-row:nth-child(11) { --row: 10; }
.lg-row:nth-child(12) { --row: 11; }
.lg-row:nth-child(13) { --row: 12; }
.lg-row:nth-child(14) { --row: 13; }

.stations > li:nth-child(1) { --row: 0; }
.stations > li:nth-child(2) { --row: 1; }
.stations > li:nth-child(3) { --row: 2; }
.stations > li:nth-child(4) { --row: 3; }
.stations > li:nth-child(5) { --row: 4; }
.stations > li:nth-child(6) { --row: 5; }

.card:nth-child(1) { --row: 0; }
.card:nth-child(2) { --row: 1; }
.card:nth-child(3) { --row: 2; }
.card:nth-child(4) { --row: 3; }

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	.js .reveal {
		opacity: 1;
		transform: none;
		transition: none;
		transition-delay: 0s;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------- 17. preference adaptations */

@media (prefers-contrast: more) {
	:root {
		--hairline: #5b6b85;
		--hairline-hi: #5b6b85;
		--text-3: #b6c2d4;
	}
}

@media (forced-colors: active) {
	.card,
	.lg-halt,
	.cards {
		border: 1px solid CanvasText;
	}

	.lg-halt {
		box-shadow: none;
	}

	body::before,
	.hero::before,
	.hero::after {
		display: none;
	}
}

@media print {
	body::before,
	.hero::before,
	.hero::after,
	.nav {
		display: none;
	}
}