:root {
	--ink: #171815;
	--night: #20221e;
	--paper: #f1ecdf;
	--paper-deep: #e3dac8;
	--panel: #faf6eb;
	--muted: #68695f;
	--line: rgba(23, 24, 21, .18);
	--rust: #a74b2f;
	--blue: #476c79;
	--moss: #697450;
	--gold: #c59442;
	--red: #9f3933;
	--sans: "Segoe UI", system-ui, sans-serif;
	--serif: Georgia, "Times New Roman", serif;
	--mono: "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
	margin: 0;
	color: var(--ink);
	background:
		radial-gradient(circle at 86% 5%, rgba(71, 108, 121, .18), transparent 28rem),
		radial-gradient(circle at 8% 24%, rgba(167, 75, 47, .12), transparent 28rem),
		linear-gradient(180deg, #f8f2e6, var(--paper) 46rem, var(--paper-deep));
	font: 17px/1.62 var(--serif);
}
a { color: #7d321f; text-underline-offset: 3px; }
a:hover { color: var(--rust); }
img, video { display: block; max-width: 100%; }
button { font: inherit; }
.skip { position: fixed; top: -5rem; left: 1rem; z-index: 100; padding: .65rem 1rem; background: white; color: black; }
.skip:focus { top: 1rem; }

.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .7rem max(1rem, calc((100vw - 1180px) / 2));
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	background: rgba(23, 24, 21, .94);
	backdrop-filter: blur(14px);
	font-family: var(--sans);
}
.brand { color: white; text-decoration: none; font-size: .76rem; letter-spacing: .08em; }
.brand span { color: #c7bda9; }
.topbar nav { display: flex; gap: .2rem; overflow-x: auto; }
.topbar nav a { padding: .45rem .55rem; color: #bebbac; text-decoration: none; white-space: nowrap; font-size: .73rem; font-weight: 700; }
.topbar nav a:hover, .topbar nav a[aria-current="true"] { color: white; }

.wrap { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
.narrow { width: min(790px, 100%); }
.section { padding: clamp(4rem, 9vw, 8rem) 0; border-top: 1px solid var(--line); }
.eyebrow { margin: 0 0 .7rem; color: var(--rust); font: 900 .7rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; text-wrap: balance; line-height: 1.04; }
h1 { max-width: 11ch; font-size: clamp(3.5rem, 9vw, 7.8rem); letter-spacing: -.065em; }
h2 { max-width: 17ch; font-size: clamp(2.35rem, 5.5vw, 5rem); letter-spacing: -.052em; }
h3 { font-size: clamp(1.2rem, 2.3vw, 1.7rem); letter-spacing: -.025em; }
.lede { max-width: 67ch; color: var(--muted); font-size: clamp(1.08rem, 2vw, 1.38rem); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .7rem 1rem; border: 1px solid currentColor; color: var(--ink); font: 800 .78rem/1 var(--sans); text-decoration: none; }
.button.primary { border-color: var(--rust); background: var(--rust); color: white; }
.button:hover { transform: translateY(-1px); }

.hero { min-height: calc(100vh - 57px); display: grid; align-items: center; padding: 5rem 0; background: linear-gradient(110deg, transparent 55%, rgba(23, 24, 21, .06) 55%); }
.hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.hero h1 em { color: var(--rust); font-style: italic; }
.hero .lede { margin: 1.5rem 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.verdict-card { position: relative; padding: 1rem; background: var(--ink); color: white; box-shadow: 1rem 1rem 0 var(--rust); }
.verdict-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; background: #3c4140; }
.verdict-card figcaption { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .9rem .3rem .2rem; color: #d7d1c3; font: .75rem/1.45 var(--sans); }
.verdict-card b { color: #e0aa69; text-transform: uppercase; letter-spacing: .1em; }

.metric-strip { background: var(--ink); color: white; }
.metrics { display: grid; grid-template-columns: repeat(5, 1fr); }
.metric { padding: 2rem 1rem; border-left: 1px solid rgba(255, 255, 255, .12); }
.metric:first-child { border-left: 0; }
.metric strong { display: block; color: #e6ad66; font: 900 clamp(1.8rem, 4vw, 3.5rem)/1 var(--sans); }
.metric span { display: block; margin-top: .45rem; color: #c2bdaf; font: .72rem/1.4 var(--sans); }

.outcome-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0; }
.outcome-controls button { padding: .55rem .8rem; border: 1px solid var(--line); background: rgba(255, 255, 255, .35); color: var(--muted); cursor: pointer; font: 800 .72rem/1 var(--sans); }
.outcome-controls button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: white; }
.outcome-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.outcome { padding: 1.5rem; border: 1px solid var(--line); background: rgba(255, 255, 255, .46); }
.outcome[hidden] { display: none; }
.outcome header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.status { padding: .34rem .5rem; color: white; font: 900 .63rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.status.changed { background: var(--red); }
.status.qualified { background: var(--gold); color: #2e2518; }
.status.kept { background: var(--moss); }
.status.project { background: var(--blue); }
.outcome p { margin: .75rem 0 0; color: var(--muted); }
.outcome .replacement { padding-top: .75rem; border-top: 1px solid var(--line); color: var(--ink); font-style: italic; }

.timeline { display: grid; gap: 0; margin-top: 3rem; }
.era { display: grid; grid-template-columns: 8rem 1fr 1.1fr; gap: 1.5rem; padding: 2rem 0; border-top: 1px solid var(--line); }
.era time { color: var(--rust); font: 900 .85rem/1.3 var(--mono); }
.era p { margin: 0; color: var(--muted); }
.era .proof { padding-left: 1rem; border-left: 4px solid var(--blue); color: var(--ink); font-size: .95rem; }

.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; margin-top: 3rem; }
.figure { margin: 0; padding: .65rem; border: 1px solid var(--line); background: #252722; color: #e8e1d4; }
.figure img, .figure video { width: 100%; height: 100%; min-height: 260px; object-fit: contain; background: #181916; }
.figure figcaption { padding: .75rem .25rem .2rem; font: .75rem/1.5 var(--sans); }
.figure figcaption b { display: block; color: #dda867; }
.figure.wide { grid-column: span 7; }
.figure.narrow { grid-column: span 5; }
.figure.third { grid-column: span 4; }

.pipeline { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; margin: 3rem 0; }
.pipeline article { position: relative; min-height: 12rem; padding: 1rem; border: 1px solid var(--line); background: var(--panel); }
.pipeline article:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; top: 50%; right: -.72rem; color: var(--rust); font: 900 1.1rem var(--sans); }
.pipeline b { display: block; margin-bottom: .55rem; color: var(--rust); font: 900 .68rem var(--mono); }
.pipeline p { margin: 0; color: var(--muted); font-size: .9rem; }
.pipeline .creator { border-top: 5px solid var(--rust); }
.pipeline .support { border-top: 5px solid var(--blue); }

.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; }
.proof-panel { padding: 2rem; border: 1px solid var(--line); background: rgba(255, 255, 255, .46); }
.proof-panel h3 { margin-bottom: .7rem; }
.proof-panel ul { margin: 0; padding-left: 1.1rem; color: var(--muted); }
.proof-panel li + li { margin-top: .5rem; }
.proof-panel.stop { border-top: 6px solid var(--rust); }
.proof-panel.go { border-top: 6px solid var(--moss); }

.source-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }
.source-card { min-height: 13rem; padding: 1.3rem; border: 1px solid var(--line); background: rgba(255, 255, 255, .43); text-decoration: none; }
.source-card b, .source-card span { display: block; }
.source-card b { color: var(--ink); font: 900 1rem/1.3 var(--sans); }
.source-card span { margin-top: .65rem; color: var(--muted); font-size: .92rem; }
.source-card small { display: block; margin-top: 1rem; color: var(--rust); font: 800 .66rem/1.4 var(--mono); text-transform: uppercase; }

.callout { padding: 2rem; border: 2px solid var(--ink); background: var(--gold); box-shadow: .7rem .7rem 0 var(--ink); }
.callout p { margin: 0; font-size: 1.17rem; }
.scope-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
.scope-list div { padding: 1rem; border-top: 4px solid var(--blue); background: rgba(255, 255, 255, .4); }
.scope-list b { display: block; font: 900 .75rem var(--sans); }
.scope-list span { color: var(--muted); font-size: .9rem; }

.ledger-page { padding: 5rem 0 8rem; }
.ledger-page h1 { max-width: 12ch; }
.ledger-section { padding: 3.5rem 0; border-top: 1px solid var(--line); }
.ledger-section:first-of-type { margin-top: 3rem; }
.ledger-section h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
.receipt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.receipt { padding: 1rem; border: 1px solid var(--line); background: rgba(255, 255, 255, .48); }
.receipt b, .receipt span { display: block; }
.receipt b { font: 900 .7rem var(--sans); text-transform: uppercase; }
.receipt span { margin-top: .4rem; color: var(--muted); font: .73rem/1.5 var(--mono); overflow-wrap: anywhere; }
.table-wrap { margin-top: 1.5rem; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: rgba(255, 255, 255, .48); font: .8rem/1.48 var(--sans); }
th, td { padding: .72rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--ink); color: white; }
td code { overflow-wrap: anywhere; }
.failure-list li + li, .limit-list li + li { margin-top: .6rem; }

footer { padding: 3rem 0 5rem; border-top: 1px solid var(--line); color: var(--muted); font: .78rem/1.6 var(--sans); }
.footer-grid { display: flex; justify-content: space-between; gap: 2rem; }

@media (max-width: 980px) {
	.hero-grid, .proof-grid { grid-template-columns: 1fr; }
	.hero { min-height: auto; }
	.metrics { grid-template-columns: repeat(3, 1fr); }
	.pipeline { grid-template-columns: 1fr 1fr; }
	.pipeline article:not(:last-child)::after { display: none; }
	.source-grid { grid-template-columns: 1fr 1fr; }
	.scope-list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
	body { font-size: 16px; }
	.topbar nav a:nth-child(n + 4) { display: none; }
	.metrics, .outcome-grid, .source-grid, .receipt-grid { grid-template-columns: 1fr; }
	.metric { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
	.era { grid-template-columns: 1fr; gap: .6rem; }
	.era .proof { margin-top: .5rem; }
	.gallery { display: block; }
	.figure { margin-bottom: 1rem; }
	.pipeline, .scope-list { grid-template-columns: 1fr; }
	.footer-grid { display: block; }
}