/*
 * Landbridge design system.
 *
 * The archetype is operating paperwork. A freight operator's credibility
 * is in its figures, so the page is built like a waybill: a hairline rule
 * grid, tabular figures in a monospace, a sequence number against every
 * section, and a status chip on the right-hand end of every rule. There is
 * no full-bleed photograph behind the first screen, because the first
 * thing a shipper wants is a number, not a sunset over a container yard.
 *
 * The one saturated colour in the whole system is hi-vis chartreuse, and
 * it is used the way hi-vis is actually used: as a block you put dark type
 * on top of, never as type on a light ground. That single rule keeps the
 * palette honest and keeps every accent above 12:1 on contrast.
 */

/* ---------------------------------------------------------------- tokens */

:root {
	--lb-paper: #f1f2ef;
	--lb-paper-2: #e6e8e3;
	--lb-paper-3: #dcdfd8;
	--lb-card: #ffffff;

	--lb-ink: #14181a;
	--lb-ink-2: #3d4649;
	--lb-ink-3: #626c6f;

	--lb-line: #d2d7d0;
	--lb-line-2: #b7beb6;

	--lb-hv: #d7e021;
	--lb-hv-deep: #aab30c;

	--lb-board: #101416;
	--lb-board-2: #1b2225;
	--lb-board-fg: #e2e9d6;
	--lb-board-dim: #97a397;

	--lb-go: #16694180;
	--lb-go-solid: #166941;
	--lb-stop: #a63c1b;

	/* Read by assets/js/lb-field.js for the traffic field's two colours. */
	--lb-field-slow: 0.72, 0.78, 0.09;
	--lb-field-fast: 0.55, 0.59, 0.58;
	--lb-field-opacity: 0.30;

	--lb-sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--lb-cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
	--lb-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

	--lb-fs-1: 0.8rem;
	--lb-fs-2: 1rem;
	--lb-fs-3: 1.25rem;
	--lb-fs-4: 1.5625rem;
	--lb-fs-5: 1.953rem;
	--lb-fs-6: 2.441rem;
	--lb-fs-7: 3.052rem;
	--lb-fs-8: 3.815rem;

	--lb-sp-1: 0.25rem;
	--lb-sp-2: 0.5rem;
	--lb-sp-3: 0.75rem;
	--lb-sp-4: 1rem;
	--lb-sp-5: 1.5rem;
	--lb-sp-6: 2rem;
	--lb-sp-7: 3rem;
	--lb-sp-8: 4rem;
	--lb-sp-9: 6rem;
	--lb-sp-10: 8rem;

	--lb-gutter: 1.5rem;
	--lb-max: 1280px;
	--lb-max-wide: 1560px;

	--lb-ease: cubic-bezier(0.22, 0.68, 0.28, 1);
}

/* ------------------------------------------------------------------ base */

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

html {
	background: var(--lb-paper);
	/* clip, not hidden: `overflow-x: hidden` on html or body turns them
	   into scroll containers, which silently kills every `position: sticky`
	   descendant on the site. */
	overflow-x: clip;
	scroll-behavior: smooth;
}

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

body {
	margin: 0;
	background: transparent;
	color: var(--lb-ink);
	font-family: var(--lb-sans);
	font-size: var(--lb-fs-2);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

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

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--lb-hv-deep); }

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

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--lb-sp-4);
	font-family: var(--lb-cond);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 5.4vw, var(--lb-fs-8)); }
h2 { font-size: clamp(2rem, 3.6vw, var(--lb-fs-6)); }
h3 { font-size: var(--lb-fs-4); }
h4 { font-size: var(--lb-fs-3); }

p { margin: 0 0 var(--lb-sp-4); }

/* Every figure on the site is tabular and monospaced. This is not a
   flourish: columns of transit times that do not align are unreadable. */
.num, td.router__cell--num, .board__time, .stat__value {
	font-family: var(--lb-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

.u-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: var(--lb-sp-3) var(--lb-sp-5);
	background: var(--lb-hv);
	color: var(--lb-ink);
	font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------ the field */

#lb-field {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	/* Fade the corridors out of the top of the viewport so the field never
	   competes with a headline, and let them run at full strength lower
	   down where the page is mostly rules and figures. */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.18) 42%, #000 78%);
	mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.18) 42%, #000 78%);
	/* The whole page sits above this, so any section that needs to be
	   legible carries its own surface. Sections that do not are where the
	   corridors show through. */
}

.site {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------------------- layout */

.wrap {
	width: 100%;
	max-width: var(--lb-max);
	margin-inline: auto;
	padding-inline: var(--lb-gutter);
}
.wrap--wide { max-width: var(--lb-max-wide); }

.section {
	padding-block: clamp(4.5rem, 9vw, var(--lb-sp-10));
	position: relative;
}
.section--tight { padding-block: clamp(3rem, 6vw, var(--lb-sp-8)); }
.section--paper { background: var(--lb-paper-2); }
.section--card { background: var(--lb-card); }
.section--board {
	background: var(--lb-board);
	color: var(--lb-board-fg);
}
.section--board h2, .section--board h3 { color: var(--lb-board-fg); }

/* --------------------------------------------- the consignment rule */
/* The recurring structural device: a numbered rule across the top of
   every section, read left to right like a line on a waybill. */

.rule {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	gap: var(--lb-sp-4);
	padding-bottom: var(--lb-sp-3);
	margin-bottom: var(--lb-sp-7);
	border-bottom: 1px solid var(--lb-line-2);
}
.section--board .rule { border-bottom-color: #2f3a3d; }

.rule__seq {
	font-family: var(--lb-mono);
	font-size: var(--lb-fs-1);
	letter-spacing: 0.08em;
	padding: 0.15em 0.5em;
	background: var(--lb-hv);
	color: var(--lb-ink);
	white-space: nowrap;
}

.rule__label {
	font-family: var(--lb-cond);
	font-weight: 600;
	font-size: var(--lb-fs-3);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lb-ink-2);
}
.section--board .rule__label { color: var(--lb-board-dim); }

.rule__status {
	font-family: var(--lb-mono);
	font-size: var(--lb-fs-1);
	letter-spacing: 0.06em;
	color: var(--lb-ink-3);
	white-space: nowrap;
}
.section--board .rule__status { color: var(--lb-board-dim); }

.section__lede {
	max-width: 62ch;
	font-size: var(--lb-fs-3);
	line-height: 1.5;
	color: var(--lb-ink-2);
}
.section--board .section__lede { color: #b9c4b6; }

/* --------------------------------------------------------------- header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: color-mix(in srgb, var(--lb-paper) 92%, transparent);
	backdrop-filter: blur(9px);
	border-bottom: 1px solid var(--lb-line);
}

.nav {
	display: flex;
	align-items: center;
	gap: var(--lb-sp-6);
	min-height: 68px;
	flex-shrink: 0;
}

.brand {
	display: flex;
	align-items: center;
	gap: var(--lb-sp-3);
	text-decoration: none;
	margin-right: auto;
	min-width: 0;
}
.brand__mark { flex: none; }
.brand__name {
	font-family: var(--lb-cond);
	font-weight: 700;
	font-size: var(--lb-fs-4);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
}
.brand__strap {
	display: block;
	font-family: var(--lb-mono);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lb-ink-3);
	margin-top: 0.25em;
}

.nav__links { flex-shrink: 0; }
.nav__links ul {
	display: flex;
	align-items: center;
	gap: var(--lb-sp-5);
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav__links a {
	font-family: var(--lb-cond);
	font-weight: 600;
	font-size: var(--lb-fs-3);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--lb-ink-2);
	padding-block: 0.35em;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.nav__links a:hover,
.nav__links .current-menu-item > a {
	color: var(--lb-ink);
	border-bottom-color: var(--lb-hv-deep);
}

.nav__cta { flex-shrink: 0; white-space: nowrap; }

.nav__toggle {
	display: none;
	appearance: none;
	border: 1px solid var(--lb-line-2);
	background: transparent;
	color: inherit;
	padding: 0.5rem 0.75rem;
	font-family: var(--lb-cond);
	font-size: var(--lb-fs-3);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

@media (max-width: 1000px) {
	.nav__links, .nav__cta { display: none; }
	.nav__toggle { display: block; }
	.site-header.is-open .nav__links {
		display: block;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		background: var(--lb-paper);
		border-bottom: 1px solid var(--lb-line-2);
		padding: var(--lb-sp-4) var(--lb-gutter) var(--lb-sp-6);
	}
	.site-header.is-open .nav__links ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.site-header.is-open .nav__links li { border-top: 1px solid var(--lb-line); }
	.site-header.is-open .nav__links a { display: block; padding: var(--lb-sp-3) 0; border-bottom: 0; }
}

/* -------------------------------------------------------------- buttons */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--lb-sp-2);
	padding: 0.7rem 1.25rem;
	font-family: var(--lb-cond);
	font-weight: 600;
	font-size: var(--lb-fs-3);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--lb-ink);
	background: transparent;
	color: var(--lb-ink);
	cursor: pointer;
	transition: background 180ms var(--lb-ease), color 180ms var(--lb-ease);
}
.btn:hover { background: var(--lb-ink); color: var(--lb-paper); }

.btn--primary {
	background: var(--lb-hv);
	border-color: var(--lb-hv);
	color: var(--lb-ink);
}
.btn--primary:hover {
	background: var(--lb-ink);
	border-color: var(--lb-ink);
	color: var(--lb-hv);
}

.section--board .btn { border-color: var(--lb-board-fg); color: var(--lb-board-fg); }
.section--board .btn:hover { background: var(--lb-board-fg); color: var(--lb-board); }
.section--board .btn--primary { background: var(--lb-hv); border-color: var(--lb-hv); color: var(--lb-ink); }

/* ---------------------------------------------------------------- chips */

.chip {
	display: inline-block;
	padding: 0.1em 0.5em;
	font-family: var(--lb-mono);
	font-size: var(--lb-fs-1);
	letter-spacing: 0.04em;
	border: 1px solid var(--lb-line-2);
	white-space: nowrap;
}
.chip--rail { background: var(--lb-ink); color: var(--lb-paper); border-color: var(--lb-ink); }
.chip--road { background: var(--lb-paper-3); color: var(--lb-ink); }
.chip--sea { background: var(--lb-hv); color: var(--lb-ink); border-color: var(--lb-hv-deep); }
.chip--on { color: var(--lb-go-solid); border-color: currentColor; }

/* ----------------------------------------------------------------- hero */

.hero {
	padding-block: clamp(3rem, 7vw, var(--lb-sp-9)) clamp(3rem, 6vw, var(--lb-sp-8));
	border-bottom: 1px solid var(--lb-line-2);
}

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 4vw, var(--lb-sp-8));
	align-items: start;
}

.hero__eyebrow {
	font-family: var(--lb-mono);
	font-size: var(--lb-fs-1);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lb-ink-3);
	margin-bottom: var(--lb-sp-4);
}

.hero__title {
	margin-bottom: var(--lb-sp-5);
	text-transform: uppercase;
	letter-spacing: -0.012em;
}
.hero__title em {
	font-style: normal;
	background: var(--lb-hv);
	padding-inline: 0.12em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.hero__lede {
	max-width: 52ch;
	font-size: var(--lb-fs-3);
	line-height: 1.5;
	color: var(--lb-ink-2);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-sp-3);
	margin-top: var(--lb-sp-6);
}

.hero__figures {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--lb-sp-5);
	margin-top: var(--lb-sp-7);
	padding-top: var(--lb-sp-5);
	border-top: 1px solid var(--lb-line-2);
}

.stat__value {
	display: block;
	font-size: var(--lb-fs-5);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
}
.stat__label {
	display: block;
	margin-top: var(--lb-sp-2);
	font-size: var(--lb-fs-1);
	line-height: 1.35;
	color: var(--lb-ink-3);
}

/* ------------------------------------------------------ departure board */

.board {
	background: var(--lb-board);
	color: var(--lb-board-fg);
	padding: var(--lb-sp-5);
	border: 1px solid var(--lb-board-2);
}

.board__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lb-sp-4);
	padding-bottom: var(--lb-sp-3);
	margin-bottom: var(--lb-sp-3);
	border-bottom: 1px solid #2c3639;
}
.board__title {
	font-family: var(--lb-cond);
	font-weight: 700;
	font-size: var(--lb-fs-3);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0;
}
.board__clock {
	font-family: var(--lb-mono);
	font-size: var(--lb-fs-1);
	letter-spacing: 0.08em;
	color: var(--lb-board-dim);
}

.board__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--lb-mono);
	font-size: 0.86rem;
	font-variant-numeric: tabular-nums;
}
.board__table th {
	text-align: left;
	font-weight: 400;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lb-board-dim);
	padding: 0 0 var(--lb-sp-2);
}
.board__table td {
	padding: 0.5rem 0.6rem 0.5rem 0;
	border-top: 1px solid #232c2f;
	vertical-align: baseline;
}
.board__table td:last-child, .board__table th:last-child { text-align: right; padding-right: 0; }
.board__service { color: #fff; }
.board__status--on { color: #9ccf9c; }
.board__status--hold { color: var(--lb-hv); }
.board__status--run { color: var(--lb-board-dim); }

/* ----------------------------------------------- signature 1: routing */

.router {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	gap: clamp(1.5rem, 3vw, var(--lb-sp-7));
	align-items: start;
}

.router__controls {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: end;
	gap: var(--lb-sp-3);
	margin-bottom: var(--lb-sp-5);
}
.router__field { display: flex; flex-direction: column; gap: var(--lb-sp-2); min-width: 0; }
.router__field label {
	font-family: var(--lb-mono);
	font-size: var(--lb-fs-1);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lb-ink-3);
}
.router__field select {
	font-family: var(--lb-sans);
	font-size: var(--lb-fs-2);
	padding: 0.55rem 0.65rem;
	border: 1px solid var(--lb-line-2);
	background: var(--lb-card);
	color: var(--lb-ink);
	width: 100%;
}
.router__swap {
	appearance: none;
	border: 1px solid var(--lb-line-2);
	background: var(--lb-card);
	color: var(--lb-ink);
	font-family: var(--lb-mono);
	font-size: var(--lb-fs-2);
	line-height: 1;
	padding: 0.65rem 0.6rem;
	cursor: pointer;
}
.router__swap:hover { background: var(--lb-hv); border-color: var(--lb-hv-deep); }

.router__headline {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--lb-sp-5);
	align-items: center;
	padding: var(--lb-sp-4);
	background: var(--lb-card);
	border: 1px solid var(--lb-line-2);
	margin-bottom: var(--lb-sp-4);
}
.router__biglabel {
	display: block;
	font-family: var(--lb-mono);
	font-size: var(--lb-fs-1);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lb-ink-3);
}
.router__bignum {
	display: block;
	font-family: var(--lb-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--lb-fs-6);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
}
.router__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--lb-sp-2) var(--lb-sp-4);
	margin: 0;
}
.router__facts dt {
	font-size: var(--lb-fs-1);
	color: var(--lb-ink-3);
}
.router__facts dd {
	margin: 0;
	font-family: var(--lb-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--lb-fs-2);
}

.router__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
	background: var(--lb-card);
}
.router__table th {
	text-align: left;
	font-family: var(--lb-mono);
	font-weight: 400;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lb-ink-3);
	padding: 0.5rem 0.6rem;
	border-bottom: 1px solid var(--lb-line-2);
}
.router__cell {
	padding: 0.5rem 0.6rem;
	border-bottom: 1px solid var(--lb-line);
	vertical-align: baseline;
}
.router__cell--num {
	text-align: right;
	font-family: var(--lb-mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.router__cell--seq {
	font-family: var(--lb-mono);
	color: var(--lb-ink-3);
	width: 2.4rem;
}
.router__row--hold { color: var(--lb-ink-3); background: var(--lb-paper-2); }
.router__table tfoot td {
	padding: 0.6rem;
	border-top: 2px solid var(--lb-ink);
	font-weight: 600;
}
.router__empty { padding: var(--lb-sp-5); background: var(--lb-card); border: 1px solid var(--lb-line-2); }

/* the map */

.netmap {
	background: var(--lb-card);
	border: 1px solid var(--lb-line-2);
	padding: var(--lb-sp-3);
	position: sticky;
	top: 92px;
}
.netmap__svg { display: block; width: 100%; height: auto; }
.netmap__link { stroke: var(--lb-line-2); stroke-width: 1.5; }
.netmap__link--road { stroke-dasharray: 5 4; }
.netmap__link--sea { stroke-dasharray: 1.5 5; stroke-linecap: round; }

.netmap__leg {
	stroke: var(--lb-ink);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: lb-draw 620ms var(--lb-ease) forwards;
	animation-delay: calc(var(--i, 0) * 110ms);
}
.netmap__leg--sea { stroke: var(--lb-hv-deep); }
.netmap__leg--road { stroke: var(--lb-ink-3); }

@keyframes lb-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
	.netmap__leg { animation: none; stroke-dashoffset: 0; }
}

.netmap__node circle {
	fill: var(--lb-card);
	stroke: var(--lb-ink-2);
	stroke-width: 2;
	cursor: pointer;
	transition: fill 160ms var(--lb-ease);
}
.netmap__node--hub circle { stroke-width: 3; }
.netmap__node:hover circle { fill: var(--lb-hv); }
.netmap__node.is-on circle { fill: var(--lb-ink); stroke: var(--lb-ink); }
.netmap__node.is-end circle { fill: var(--lb-hv); stroke: var(--lb-ink); stroke-width: 3; }
.netmap__label {
	font-family: var(--lb-mono);
	font-size: 12px;
	fill: var(--lb-ink-3);
	pointer-events: none;
}
.netmap__node.is-on .netmap__label { fill: var(--lb-ink); }

.netmap__key {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-sp-4);
	margin-top: var(--lb-sp-3);
	padding-top: var(--lb-sp-3);
	border-top: 1px solid var(--lb-line);
	font-family: var(--lb-mono);
	font-size: var(--lb-fs-1);
	color: var(--lb-ink-3);
}

/* ----------------------------------------------- signature 2: load plan */

.loadplan {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(1.5rem, 3vw, var(--lb-sp-7));
	align-items: start;
}

.loadplan__panel {
	background: var(--lb-card);
	border: 1px solid var(--lb-line-2);
	padding: var(--lb-sp-5);
}

.loadplan__select {
	width: 100%;
	font-family: var(--lb-sans);
	font-size: var(--lb-fs-2);
	padding: 0.55rem 0.65rem;
	border: 1px solid var(--lb-line-2);
	background: var(--lb-paper);
	color: var(--lb-ink);
	margin-bottom: var(--lb-sp-5);
}

.loadplan__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: 'label qty' 'dims qty';
	gap: 0 var(--lb-sp-3);
	align-items: center;
	padding-block: var(--lb-sp-3);
	border-top: 1px solid var(--lb-line);
}
.loadplan__rowlabel { grid-area: label; font-size: 0.95rem; }
.loadplan__rowdims {
	grid-area: dims;
	font-family: var(--lb-mono);
	font-size: 0.72rem;
	color: var(--lb-ink-3);
}
.loadplan__qty {
	grid-area: qty;
	width: 4.5rem;
	font-family: var(--lb-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--lb-fs-2);
	text-align: right;
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--lb-line-2);
	background: var(--lb-paper);
	color: var(--lb-ink);
}

.loadplan__stage {
	position: relative;
	background: var(--lb-board);
	border: 1px solid var(--lb-board-2);
	padding: var(--lb-sp-4);
}
.loadplan__canvas {
	display: block;
	width: 100%;
	height: clamp(260px, 34vw, 420px);
	cursor: grab;
}
.loadplan__canvas:active { cursor: grabbing; }
.loadplan__hint {
	font-family: var(--lb-mono);
	font-size: var(--lb-fs-1);
	color: var(--lb-board-dim);
	margin: var(--lb-sp-3) 0 0;
}

.loadplan__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--lb-sp-4);
	margin: var(--lb-sp-5) 0 var(--lb-sp-4);
}
.loadplan__stat dt { font-size: var(--lb-fs-1); color: var(--lb-ink-3); }
.loadplan__stat dd {
	margin: 0.2em 0 0;
	font-family: var(--lb-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--lb-fs-4);
	line-height: 1.1;
}

.loadplan__bar {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--lb-sp-3);
	margin-bottom: var(--lb-sp-2);
}
.loadplan__barlabel {
	font-family: var(--lb-mono);
	font-size: var(--lb-fs-1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lb-ink-3);
}
.loadplan__bartrack {
	display: block;
	height: 10px;
	background: var(--lb-paper-3);
	border: 1px solid var(--lb-line-2);
}
.loadplan__barfill {
	display: block;
	height: 100%;
	background: var(--lb-ink);
	transition: width 320ms var(--lb-ease);
}
.loadplan__barfill--weight { background: var(--lb-hv-deep); }
.loadplan__barval {
	font-family: var(--lb-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--lb-fs-1);
	color: var(--lb-ink-3);
	white-space: nowrap;
}

.loadplan__verdict {
	margin-top: var(--lb-sp-5);
	padding-top: var(--lb-sp-4);
	border-top: 2px solid var(--lb-ink);
	font-size: var(--lb-fs-3);
	line-height: 1.4;
}
.loadplan__verdict strong { text-transform: uppercase; font-family: var(--lb-cond); letter-spacing: 0.04em; }
.loadplan__note { font-size: 0.92rem; color: var(--lb-ink-3); margin-bottom: 0; }

/* ----------------------------------------------- fundamental diagram */

.fd {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, var(--lb-sp-7));
	align-items: center;
}
.fd__plot {
	background: var(--lb-board-2);
	border: 1px solid #2c3639;
	padding: var(--lb-sp-4);
}
.fd__svg { display: block; width: 100%; height: auto; }
.fd__axis { stroke: #4a585c; stroke-width: 1; }
.fd__tick { font-family: var(--lb-mono); font-size: 10px; fill: var(--lb-board-dim); }
.fd__point { fill: var(--lb-hv); }
.fd__free { stroke: #6d7c66; stroke-width: 1; stroke-dasharray: 4 4; }
.fd__caption { font-family: var(--lb-mono); font-size: var(--lb-fs-1); color: var(--lb-board-dim); margin: var(--lb-sp-3) 0 0; }

/* ---------------------------------------------------------------- cards */

.grid {
	display: grid;
	gap: var(--lb-sp-5);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }

.card {
	display: flex;
	flex-direction: column;
	background: var(--lb-card);
	border: 1px solid var(--lb-line-2);
	text-decoration: none;
	color: inherit;
	transition: border-color 180ms var(--lb-ease), transform 180ms var(--lb-ease);
}
a.card:hover { border-color: var(--lb-ink); transform: translateY(-2px); }

.card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--lb-paper-3); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--lb-sp-4); display: flex; flex-direction: column; gap: var(--lb-sp-2); flex: 1; }
.card__kicker {
	font-family: var(--lb-mono);
	font-size: var(--lb-fs-1);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--lb-ink-3);
}
.card__title { font-size: var(--lb-fs-3); margin: 0; }
.card__text { font-size: 0.95rem; color: var(--lb-ink-2); margin: 0; }
.card__meta {
	margin-top: auto;
	padding-top: var(--lb-sp-3);
	border-top: 1px solid var(--lb-line);
	font-family: var(--lb-mono);
	font-size: var(--lb-fs-1);
	color: var(--lb-ink-3);
	display: flex;
	justify-content: space-between;
	gap: var(--lb-sp-3);
}

/* ---------------------------------------------------------- data table */

.dtable {
	width: 100%;
	border-collapse: collapse;
	background: var(--lb-card);
	font-size: 0.94rem;
}
.dtable caption {
	text-align: left;
	font-family: var(--lb-mono);
	font-size: var(--lb-fs-1);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lb-ink-3);
	padding-bottom: var(--lb-sp-3);
}
.dtable th {
	text-align: left;
	font-family: var(--lb-mono);
	font-weight: 400;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lb-ink-3);
	padding: 0.55rem 0.7rem;
	border-bottom: 1px solid var(--lb-line-2);
	white-space: nowrap;
}
.dtable td {
	padding: 0.6rem 0.7rem;
	border-bottom: 1px solid var(--lb-line);
	vertical-align: baseline;
}
.dtable td.n {
	text-align: right;
	font-family: var(--lb-mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.dtable tbody tr:hover { background: var(--lb-paper-2); }

.scroller { overflow-x: auto; }

/* ---------------------------------------------------------- page hero */

.page-hero {
	padding-block: clamp(3rem, 6vw, var(--lb-sp-8)) var(--lb-sp-6);
	border-bottom: 1px solid var(--lb-line-2);
	background: var(--lb-paper-2);
}
.page-hero__title { margin-bottom: var(--lb-sp-3); text-transform: uppercase; }
.page-hero__lede { max-width: 60ch; font-size: var(--lb-fs-3); color: var(--lb-ink-2); margin: 0; }

/* --------------------------------------------------------------- prose */

.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--lb-sp-7); }
.prose h3 { margin-top: var(--lb-sp-6); }
.prose img, .prose figure { margin-block: var(--lb-sp-6); }
.prose figcaption { font-family: var(--lb-mono); font-size: var(--lb-fs-1); color: var(--lb-ink-3); margin-top: var(--lb-sp-2); }
.prose blockquote {
	margin: var(--lb-sp-6) 0;
	padding-left: var(--lb-sp-5);
	border-left: 3px solid var(--lb-hv);
	font-size: var(--lb-fs-3);
	color: var(--lb-ink-2);
}
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: var(--lb-sp-4); }
.prose li { margin-bottom: var(--lb-sp-2); }

/* ---------------------------------------------------------------- form */

.form { display: grid; gap: var(--lb-sp-4); max-width: 640px; }
.form__row { display: grid; gap: var(--lb-sp-2); }
.form__row label {
	font-family: var(--lb-mono);
	font-size: var(--lb-fs-1);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lb-ink-3);
}
.form input, .form textarea, .form select {
	font-family: var(--lb-sans);
	font-size: var(--lb-fs-2);
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--lb-line-2);
	background: var(--lb-card);
	color: var(--lb-ink);
	width: 100%;
}
.form textarea { min-height: 140px; resize: vertical; }
.form__hp { position: absolute; left: -9999px; }
.form__status { font-family: var(--lb-mono); font-size: var(--lb-fs-1); }
.form__status--ok { color: var(--lb-go-solid); }
.form__status--err { color: var(--lb-stop); }

/* -------------------------------------------------------------- footer */

.site-footer {
	background: var(--lb-board);
	color: var(--lb-board-fg);
	padding-block: var(--lb-sp-8) var(--lb-sp-6);
	margin-top: var(--lb-sp-8);
}
.site-footer a { color: inherit; }
.footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
	gap: var(--lb-sp-6);
	padding-bottom: var(--lb-sp-6);
	border-bottom: 1px solid #2c3639;
}
.footer__blurb { color: #b3bfb1; max-width: 40ch; }
.widget__title, .footer__heading {
	font-family: var(--lb-cond);
	font-size: var(--lb-fs-3);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 var(--lb-sp-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lb-sp-2); }
.site-footer .widget a, .footer__grid a { color: #c3cfc0; text-decoration: none; }
.site-footer .widget a:hover, .footer__grid a:hover { color: var(--lb-hv); }
.footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--lb-sp-4);
	padding-top: var(--lb-sp-5);
	font-family: var(--lb-mono);
	font-size: var(--lb-fs-1);
	color: var(--lb-board-dim);
}

/* ------------------------------------------------------------- reveals */

.reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 620ms var(--lb-ease), transform 620ms var(--lb-ease);
	transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal.is-in { opacity: 1; transform: none; }

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

/* JS is what adds `is-in`. Without it every revealed block must still be
   present and readable, or the content is gated behind script. */
.no-js .reveal { opacity: 1; transform: none; }

/* -------------------------------------------------------- comments etc */

.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list li { border-top: 1px solid var(--lb-line); padding-block: var(--lb-sp-4); }
.comment-list .children { list-style: none; padding-left: var(--lb-sp-5); }
.pagination { margin-top: var(--lb-sp-7); font-family: var(--lb-mono); }
.pagination .page-numbers { padding: 0.35rem 0.6rem; border: 1px solid var(--lb-line-2); text-decoration: none; }
.pagination .current { background: var(--lb-ink); color: var(--lb-paper); border-color: var(--lb-ink); }

/* --------------------------------------------------------- responsive */

@media (max-width: 1080px) {
	.router, .loadplan, .fd { grid-template-columns: minmax(0, 1fr); }
	.netmap { position: static; }
	.footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.hero__grid { grid-template-columns: minmax(0, 1fr); }
	.loadplan__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.router__headline { grid-template-columns: minmax(0, 1fr); gap: var(--lb-sp-4); }
}

@media (max-width: 560px) {
	:root { --lb-gutter: 1.125rem; }
	.hero__figures { grid-template-columns: minmax(0, 1fr); gap: var(--lb-sp-4); }
	.router__controls { grid-template-columns: minmax(0, 1fr); }
	.router__swap { justify-self: start; }
	.rule { grid-template-columns: auto 1fr; }
	.rule__status { grid-column: 1 / -1; }
	.footer__grid { grid-template-columns: minmax(0, 1fr); }
}