/* =====================================================================
   Tokens (design/BRIEF.md, the same values as web/src/app.css)
   ===================================================================== */
:root {
	color-scheme: light;
	--paper: #f8f6f1; /* page */
	--paper-sunk: #efebe3; /* code */
	--ink: #221f1a; /* text */
	--ink-2: #5d574d; /* secondary text */
	--ink-3: #766f63; /* numerals, notes */
	--rule: #d6cfc2; /* hairlines */
	--accent: #2536c4; /* blue pencil: the links */
	--accent-wash: #e4e6f6;
	--on-accent: #ffffff; /* text on an accent fill */

	--font-display: 'Brygada 1918', 'Iowan Old Style', Palatino, Georgia, serif;
	--font-text: 'Alegreya Sans', 'Gill Sans', 'Seravek', 'Segoe UI', sans-serif;
	--font-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	--t-xs: 0.8125rem; /* 13 */
	--t-sm: 0.9375rem; /* 15 */
	--t-md: 1.125rem; /* 18, body */
	--t-lg: 1.3125rem; /* 21 */
	--t-xl: 1.75rem; /* 28 */
	--t-2xl: 2.25rem; /* 36 */
	--t-3xl: 3rem; /* 48 */

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

	--measure: 36rem; /* running text */
	--page: 74rem;
	--gutter: clamp(1rem, 4vw, 3rem);
	--radius: 3px;
}
/* Dark follows the system unless the toggle chose light; the toggle can also choose dark. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		color-scheme: dark;
		--paper: #1a1916;
		--paper-sunk: #24221e;
		--ink: #ece7dc;
		--ink-2: #b3ac9f;
		--ink-3: #948d80;
		--rule: #3a362f;
		--accent: #9aa6ff;
		--accent-wash: #262a47;
		--on-accent: #14151f;
	}
}
:root[data-theme='dark'] {
	color-scheme: dark;
	--paper: #1a1916;
	--paper-sunk: #24221e;
	--ink: #ece7dc;
	--ink-2: #b3ac9f;
	--ink-3: #948d80;
	--rule: #3a362f;
	--accent: #9aa6ff;
	--accent-wash: #262a47;
	--on-accent: #14151f;
}

/* =====================================================================
   Base
   ===================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	background: var(--paper);
}
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: var(--t-md);
	line-height: 1.5;
	font-variant-numeric: oldstyle-nums proportional-nums;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.15;
	margin: 0;
}
p,
ul,
ol {
	margin: 0;
}
code {
	font-family: var(--font-mono);
	font-size: 0.84em;
	font-variant-numeric: normal;
	letter-spacing: -0.01em;
}
a {
	color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}
a:hover {
	text-decoration-thickness: 2px;
}
button {
	font: inherit;
	color: inherit;
}
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 2px;
}
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.page {
	max-width: var(--page);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* =====================================================================
   Masthead
   ===================================================================== */
.masthead {
	border-bottom: 1px solid var(--rule);
}
.masthead__inner {
	max-width: var(--page);
	margin: 0 auto;
	padding: var(--s-4) var(--gutter);
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-5);
}
.wordmark {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 600;
	font-size: 1.5rem;
	letter-spacing: -0.01em;
	color: var(--ink);
	text-decoration: none;
}
.tools {
	display: flex;
	align-items: baseline;
	gap: var(--s-5);
	margin-left: auto;
}
.theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	background: none;
	border: 1px solid var(--rule);
	border-radius: 999px;
	padding: 2px var(--s-3);
	font-size: var(--t-sm);
	color: var(--ink-2);
	cursor: pointer;
}
.theme-toggle:hover {
	color: var(--ink);
	border-color: var(--ink-3);
}
.theme-toggle[hidden] {
	display: none;
}
.theme-toggle svg {
	width: 14px;
	height: 14px;
}
.sign-in {
	font-weight: 500;
	text-decoration: none;
}
.sign-in:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* =====================================================================
   Hero: what happens to one error, in five stages on one hairline
   across the page, and the dot that travels it
   ===================================================================== */
/* Five equal columns inside the page's width, edges aligned with the masthead and the sections, in a band of its own. */
.hero {
	--dot: 26px; /* the dot's box: the core, its ring and the arc */
	max-width: var(--page);
	margin: 0 auto;
	padding: var(--s-9) var(--gutter);
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	grid-template-rows: auto 2.5rem auto;
}
.flow,
.stage {
	display: contents;
}
.stage__title {
	grid-row: 1;
	align-self: end;
	padding-right: var(--s-5);
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(1.5rem, 1rem + 0.9vw, 2rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	overflow-wrap: break-word;
}
/* One line in its column from 64rem up: 14px at 64rem, the body's 15px from about 69rem. */
.stage__caption {
	grid-row: 3;
	padding-right: var(--s-3);
	color: var(--ink-2);
	font-size: clamp(0.875rem, 0.5rem + 0.6vw, 0.9375rem);
	overflow-wrap: break-word;
}
.stage:nth-child(1) > * { grid-column: 1; }
.stage:nth-child(2) > * { grid-column: 2; }
.stage:nth-child(3) > * { grid-column: 3; }
.stage:nth-child(4) > * { grid-column: 4; }
.stage:nth-child(5) > * { grid-column: 5; }
/* The dot stops under the first letter of each stage's title: column starts in a row, title centres in a stack. */
.flow__line {
	--p1-x: calc(0.4rem - var(--dot) / 2);
	--p2-x: calc(20% + 0.4rem - var(--dot) / 2);
	--p3-x: calc(40% + 0.4rem - var(--dot) / 2);
	--p4-x: calc(60% + 0.4rem - var(--dot) / 2);
	--p5-x: calc(80% + 0.4rem - var(--dot) / 2);
	--p-y: calc(0.5px - var(--dot) / 2);
	--p1-y: var(--p-y);
	--p2-y: var(--p-y);
	--p3-y: var(--p-y);
	--p4-y: var(--p-y);
	--p5-y: var(--p-y);
	grid-row: 2;
	grid-column: 1 / -1;
	align-self: center;
	position: relative;
	height: 1px;
	background: var(--rule);
}
.dot {
	position: absolute;
	left: var(--p5-x);
	top: var(--p5-y);
	width: var(--dot);
	height: var(--dot);
	overflow: visible;
}
.dot__core {
	fill: var(--accent);
}
.dot__ring,
.dot__arc {
	fill: none;
}
.dot__ring {
	stroke: var(--rule);
	stroke-width: 1;
}
/* The arc fills to nine tenths: the probability, without the number. */
.dot__arc {
	stroke: var(--accent);
	stroke-width: 1.75;
	stroke-dasharray: 100;
	stroke-dashoffset: 10;
}
@media (width < 64rem) {
	/* Stacked: each stage a fixed step down the page, the line running beside the titles. */
	.hero {
		--step: 6.5rem;
		display: block;
		position: relative;
		padding: var(--s-7) var(--gutter);
	}
	.flow {
		display: block;
		list-style: none;
		margin: 0;
		padding: 0 0 0 var(--s-6);
	}
	.stage {
		display: block;
		height: var(--step);
	}
	.stage__title {
		line-height: 2rem;
		padding-right: 0;
	}
	.stage__caption {
		padding-right: 0;
		max-width: var(--measure);
	}
	.flow__line {
		--p1-x: calc(0.5px - var(--dot) / 2);
		--p2-x: var(--p1-x);
		--p3-x: var(--p1-x);
		--p4-x: var(--p1-x);
		--p5-x: var(--p1-x);
		--p1-y: calc(0px - var(--dot) / 2);
		--p2-y: calc(var(--step) - var(--dot) / 2);
		--p3-y: calc(2 * var(--step) - var(--dot) / 2);
		--p4-y: calc(3 * var(--step) - var(--dot) / 2);
		--p5-y: calc(4 * var(--step) - var(--dot) / 2);
		position: absolute;
		top: calc(var(--s-7) + 1rem);
		left: var(--gutter);
		width: 1px;
		height: calc(4 * var(--step));
	}
}

.intro {
	padding-bottom: var(--s-8);
}
.lede {
	max-width: 30em;
	font-family: var(--font-display);
	font-size: clamp(1.3125rem, 1rem + 1.2vw, 1.75rem);
	line-height: 1.35;
}

/* One ten-second loop: the dot pauses at each stage while its caption fades in, gains the ring and fills
   the arc at the verdict, and settles at the issue. Without motion the hero is that last frame. */
@media (prefers-reduced-motion: no-preference) {
	.dot {
		animation: travel 10s ease-in-out infinite;
	}
	.dot__ring {
		animation: ring 10s ease-out infinite;
	}
	.dot__arc {
		animation: ring 10s ease-out infinite, arc 10s ease-in-out infinite;
	}
	.stage:nth-child(1) .stage__caption { animation: caption-1 10s ease-out infinite; }
	.stage:nth-child(2) .stage__caption { animation: caption-2 10s ease-out infinite; }
	.stage:nth-child(3) .stage__caption { animation: caption-3 10s ease-out infinite; }
	.stage:nth-child(4) .stage__caption { animation: caption-4 10s ease-out infinite; }
	.stage:nth-child(5) .stage__caption { animation: caption-5 10s ease-out infinite; }
}
@keyframes travel {
	0% { left: var(--p1-x); top: var(--p1-y); opacity: 0; }
	4%, 10% { left: var(--p1-x); top: var(--p1-y); opacity: 1; }
	18%, 26% { left: var(--p2-x); top: var(--p2-y); opacity: 1; }
	34%, 48% { left: var(--p3-x); top: var(--p3-y); opacity: 1; }
	56%, 64% { left: var(--p4-x); top: var(--p4-y); opacity: 1; }
	72%, 90% { left: var(--p5-x); top: var(--p5-y); opacity: 1; }
	96%, 100% { left: var(--p5-x); top: var(--p5-y); opacity: 0; }
}
@keyframes ring {
	0%, 34% { opacity: 0; }
	38%, 100% { opacity: 1; }
}
@keyframes arc {
	0%, 37% { stroke-dashoffset: 100; }
	46%, 100% { stroke-dashoffset: 10; }
}
@keyframes caption-1 {
	0%, 2% { opacity: 0; }
	8%, 90% { opacity: 1; }
	96%, 100% { opacity: 0; }
}
@keyframes caption-2 {
	0%, 18% { opacity: 0; }
	24%, 90% { opacity: 1; }
	96%, 100% { opacity: 0; }
}
@keyframes caption-3 {
	0%, 34% { opacity: 0; }
	40%, 90% { opacity: 1; }
	96%, 100% { opacity: 0; }
}
@keyframes caption-4 {
	0%, 56% { opacity: 0; }
	62%, 90% { opacity: 1; }
	96%, 100% { opacity: 0; }
}
@keyframes caption-5 {
	0%, 72% { opacity: 0; }
	78%, 90% { opacity: 1; }
	96%, 100% { opacity: 0; }
}

/* =====================================================================
   Parts: a section title in the margin, its content beside it
   ===================================================================== */
.part {
	display: grid;
	grid-template-columns: 12rem minmax(0, 1fr);
	column-gap: var(--s-7);
	border-top: 2px solid var(--ink);
	padding: var(--s-4) 0 var(--s-8);
}
.part > h2 {
	font-size: var(--t-xl);
}
@media (max-width: 52rem) {
	.part {
		grid-template-columns: minmax(0, 1fr);
	}
	.part > h2 {
		margin-bottom: var(--s-5);
	}
}

/* =====================================================================
   Steps: a numbered sequence, the numeral in its own column
   ===================================================================== */
.steps {
	list-style: none;
	padding: 0;
	max-width: 44rem;
	counter-reset: step;
}
.steps li {
	counter-increment: step;
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	padding: var(--s-5) 0;
	border-bottom: 1px solid var(--rule);
}
.steps li:first-child {
	padding-top: var(--s-1);
}
.steps li::before {
	content: counter(step);
	grid-row: span 2;
	font-family: var(--font-display);
	font-size: var(--t-xl);
	line-height: 1;
	color: var(--ink-3);
	font-variant-numeric: lining-nums;
}
.steps h3 {
	font-size: var(--t-lg);
	line-height: 1.25;
}
.steps p {
	margin-top: var(--s-2);
	color: var(--ink-2);
	max-width: var(--measure);
}
@media (min-width: 64rem) {
	/* Wide: the three steps side by side across the content column. */
	.steps {
		max-width: none;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--s-6);
	}
	.steps li,
	.steps li:first-child {
		align-content: start;
		padding: var(--s-1) 0 0;
		border-bottom: 0;
	}
}

/* =====================================================================
   Kept and not kept: two short columns
   ===================================================================== */
.ledger {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-6) var(--s-7);
}
@media (max-width: 36rem) {
	.ledger {
		grid-template-columns: minmax(0, 1fr);
	}
}
.ledger h3 {
	font-size: var(--t-lg);
	font-style: italic;
	font-weight: 400;
	padding-bottom: var(--s-2);
	border-bottom: 1px solid var(--ink);
}
.ledger ul {
	list-style: none;
	padding: 0;
}
.ledger li {
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--rule);
}
.note {
	margin-top: var(--s-6);
	max-width: var(--measure);
	color: var(--ink-3);
	font-size: var(--t-sm);
}

/* =====================================================================
   Colophon
   ===================================================================== */
.colophon {
	border-top: 1px solid var(--rule);
	padding: var(--s-5) 0 var(--s-8);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-3) var(--s-6);
	font-size: var(--t-sm);
}
.colophon p {
	color: var(--ink-2);
	font-family: var(--font-display);
	font-style: italic;
	max-width: var(--measure);
}
.colophon ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-5);
}