:root {
	color-scheme: dark;
	--ink: #090b0a;
	--ink-soft: #101310;
	--stone: #171b18;
	--line: #343b35;
	--line-soft: #242a25;
	--paper: #e8e7df;
	--muted: #a7ada6;
	--green: #9bbe87;
	--green-bright: #c1dda8;
	--warning: #c7a36a;
	--max-width: 1440px;
	--reading-width: 760px;
	--serif: Georgia, "Times New Roman", serif;
	--mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--serif);
	line-height: 1.6;
}

a {
	color: inherit;
}

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

.skip-link {
	position: fixed;
	z-index: 100;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--green-bright);
	color: var(--ink);
	font-weight: 700;
	transform: translateY(-150%);
}

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

/* Thin scrollbars for the chapters menu and the scrolling data tables: a
   pill with no track. The transparent border insets the thumb from the
   edge; background-clip keeps the fill inside that border. Containers use
   overflow: auto, so the bars only appear when the content overflows. */
.chapters-menu__list::-webkit-scrollbar,
.balance-table__scroll::-webkit-scrollbar,
.ledger-table-wrap::-webkit-scrollbar,
.audit-route-wrap::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.chapters-menu__list::-webkit-scrollbar-track,
.balance-table__scroll::-webkit-scrollbar-track,
.ledger-table-wrap::-webkit-scrollbar-track,
.audit-route-wrap::-webkit-scrollbar-track,
.chapters-menu__list::-webkit-scrollbar-corner,
.balance-table__scroll::-webkit-scrollbar-corner,
.ledger-table-wrap::-webkit-scrollbar-corner,
.audit-route-wrap::-webkit-scrollbar-corner {
	background: transparent;
}

.chapters-menu__list::-webkit-scrollbar-thumb,
.balance-table__scroll::-webkit-scrollbar-thumb,
.ledger-table-wrap::-webkit-scrollbar-thumb,
.audit-route-wrap::-webkit-scrollbar-thumb {
	border: 2px solid transparent;
	border-radius: 999px;
	background: rgb(167 173 166 / 35%);
	background-clip: padding-box;
}

.chapters-menu__list::-webkit-scrollbar-thumb:hover,
.balance-table__scroll::-webkit-scrollbar-thumb:hover,
.ledger-table-wrap::-webkit-scrollbar-thumb:hover,
.audit-route-wrap::-webkit-scrollbar-thumb:hover {
	background-color: rgb(167 173 166 / 55%);
}

/* Chromium ignores the ::-webkit-scrollbar rules above once the standard
   properties are set, so only browsers without them (Firefox) get these. */
@supports not selector(::-webkit-scrollbar) {
	.chapters-menu__list,
	.balance-table__scroll,
	.ledger-table-wrap,
	.audit-route-wrap {
		scrollbar-color: rgb(167 173 166 / 35%) transparent;
		scrollbar-width: thin;
	}
}

.site-header {
	position: sticky;
	z-index: 20;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 76px;
	padding: 0 3vw;
	border-bottom: 1px solid rgb(232 231 223 / 14%);
	background: rgb(9 11 10 / 88%);
	backdrop-filter: blur(18px);
}

.wordmark {
	display: inline-flex;
	gap: 0.8rem;
	align-items: center;
	color: var(--paper);
	font-family: var(--mono);
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-decoration: none;
}

.wordmark__mark {
	display: grid;
	width: 32px;
	height: 32px;
	place-items: center;
	border: 1px solid var(--green);
	color: var(--green-bright);
	font-family: var(--serif);
	font-size: 1rem;
	letter-spacing: 0;
}

.site-header nav {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.site-header nav a {
	text-decoration: none;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
	color: var(--green-bright);
}

.header-cta {
	padding: 0.42rem 0.7rem;
	border: 1px solid var(--line);
	color: var(--paper);
}

/* The dropdown is positioned against .site-header (sticky, so it is the
   containing block) rather than the toggle, which keeps it on screen at
   phone widths where the toggle sits well inside the right edge. */
.chapters-menu__toggle {
	display: inline-flex;
	gap: 0.45rem;
	align-items: baseline;
	padding: 0.42rem 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}

.chapters-menu__toggle:hover,
.chapters-menu__toggle:focus-visible,
.chapters-menu__toggle[aria-expanded="true"] {
	color: var(--green-bright);
}

.chapters-menu__num {
	padding-right: 0.6rem;
	border-right: 1px solid var(--line);
	color: var(--paper);
}

.chapters-menu__caret {
	font-size: 0.8em;
}

.chapters-menu__list {
	position: absolute;
	top: 100%;
	right: 3vw;
	width: max-content;
	max-width: calc(100% - 2rem);
	max-height: calc(100vh - 92px);
	margin: 0;
	padding: 0.35rem 1.1rem;
	overflow-y: auto;
	border: 1px solid var(--line);
	background: var(--ink-soft);
	box-shadow: 0 18px 40px rgb(0 0 0 / 45%);
	color: var(--paper);
	font-family: var(--serif);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: normal;
	list-style: none;
	text-transform: none;
}

.chapters-menu__list li + li {
	border-top: 1px solid var(--line-soft);
}

.site-header .chapters-menu__list a {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	padding: 0.7rem 0;
	font-size: 1rem;
}

.chapters-menu__list span {
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.7rem;
	line-height: 1.6rem;
}

.chapters-menu__list a[aria-current] {
	color: var(--green-bright);
}

.hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
	min-height: calc(100vh - 76px);
	max-width: var(--max-width);
	margin: 0 auto;
	padding: clamp(5rem, 9vw, 9rem) 4vw 4rem;
	border-bottom: 1px solid var(--line);
}

.hero__content {
	position: relative;
	z-index: 1;
	margin-right: 1rem;
	align-self: center;
}

.eyebrow,
.section-kicker,
.chapter__number,
.evidence-card__label {
	margin: 0 0 1.5rem;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.17em;
	text-transform: uppercase;
}

.hero h1 {
	max-width: 9ch;
	margin: 0 0 clamp(2.5rem, 4vw, 3.5rem);
	font-family: var(--serif);
	font-size: clamp(4rem, 7.7vw, 7.7rem);
	font-weight: 400;
	letter-spacing: -0.07em;
	line-height: 0.8;
}

/* The token strip under the hero: what the token is, its address and the asset
   it trades against, centred as one group. --contract-h is the row height in
   em, so the address row, its mark and copy button, and the pair pill all
   scale with the font size below and keep the same height as each other. */
.token-band {
	--contract-h: 2.75em;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: clamp(3rem, 5vw, 4.5rem) 4vw;
	border-bottom: 1px solid var(--line);
	text-align: center;
}

.token-band .section-kicker {
	margin: 0;
}

/* The one-paragraph pitch that opens the strip. Its closing clause is the
   present-day state of the blacklist, so it takes the green used for the
   present-day reading elsewhere. */
.token-band__story {
	max-width: 38em;
	margin: 0 0 clamp(1rem, 2.5vw, 2rem);
	color: var(--paper);
	font-family: var(--serif);
	font-size: clamp(1.1rem, 1.8vw, 1.45rem);
	line-height: 1.45;
}

.token-band__now {
	color: var(--green-bright);
}

/* The strip's two labels step up to sit with the larger address row, and drop
   back to the usual kicker size on phones, where the row itself is small. */
.token-band .section-kicker,
.token-pair__label {
	font-size: clamp(0.7rem, 100cqi / 43, 0.82rem);
}

/* Sized from the strip's width so the whole address always fits on one line.
   The row is about 33.4em wide: 42 monospace characters at up to 0.61em each,
   the address box's padding and the two squares. A 35th of the width leaves a
   little spare, and wide screens stop at 1rem. */
.contract-group,
.token-pair__asset {
	font-size: min(1rem, 100cqi / 35);
}

/* Contract address. */
.contract-shell {
	width: 100%;
	max-width: 37rem;
}

/* Mark, address box and copy button in one flush row. The mark sits bare at the
   left; the address box and the copy button are bordered and share a single
   line between them. */
.contract-group {
	display: flex;
	align-items: stretch;
	/* The row shrink-wraps the address instead of filling the shell, and only
	   gives ground when the viewport cannot hold it. */
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
}

.contract-brand {
	flex: 0 0 auto;
	align-self: stretch;
	width: var(--contract-h);
	height: auto;
	/* No inset: the image sits flush against the border. */
	padding: 0;
	border: 1px solid var(--line);
	background: var(--stone);
	object-fit: contain;
}

.contract {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	min-height: var(--contract-h);
	/* Pulled left by a pixel so it shares one border line with the mark. */
	margin-left: -1px;
	padding: 0 1.1em;
	border: 1px solid var(--line);
	background: var(--stone);
}

.contract__address {
	min-width: 0;
	/* Matches the copy button's icon colour. */
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: inherit;
	line-height: 1.5;
	letter-spacing: 0.01em;
	/* One unbroken token: never wrap it. The font size above keeps it whole;
	   should a wider fallback font still overrun, it is clipped with an
	   ellipsis and the copy button still yields the full value. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.contract__copy {
	display: grid;
	flex: 0 0 auto;
	align-self: stretch;
	place-items: center;
	/* Square, the same side as the mark: the row is exactly --contract-h tall
	   because the address box adds no vertical padding of its own. */
	width: var(--contract-h);
	height: auto;
	/* Pulled left by a pixel so it shares one border line with the address box. */
	margin-left: -1px;
	padding: 0;
	border: 1px solid var(--line);
	background: var(--stone);
	color: var(--green-bright);
	/* Buttons do not inherit font size, and the em sizes above need the row's. */
	font-size: inherit;
	cursor: pointer;
	transition:
		border-color 0.18s ease,
		background-color 0.18s ease,
		color 0.18s ease;
}

.contract__copy:hover {
	z-index: 1;
	border-color: var(--green);
	background: var(--ink-soft);
	color: var(--paper);
}

.contract__icon {
	width: 1.15em;
	height: 1.15em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.contract__icon--done,
.contract-shell.is-copied .contract__icon--copy {
	display: none;
}
.contract-shell.is-copied .contract__icon--done {
	display: block;
}
.contract-shell.is-copied .contract__copy {
	color: var(--green-bright);
}

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

/* The paired asset, built like the address row: the token's icon flush against
   a bordered box holding its ticker, so it reads as market data. The line
   wraps, centred, if a narrow screen cannot hold it. */
.token-pair {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0;
}

.token-pair__label {
	color: var(--muted);
	font-family: var(--mono);
	letter-spacing: 0.17em;
	text-transform: uppercase;
}

.token-pair__asset {
	display: flex;
	align-items: stretch;
	height: var(--contract-h);
}

.token-pair__asset img {
	width: var(--contract-h);
	border: 1px solid var(--line);
	object-fit: contain;
}

/* The strip's one call to action. It keeps a fixed size rather than scaling
   with the address row, so it stays a comfortable tap target on phones. */
.token-buy {
	display: inline-flex;
	gap: 0.6rem;
	align-items: center;
	margin-top: 0.75rem;
	padding: 0.55rem 1.1rem 0.55rem 0.75rem;
	border: 1px solid var(--green);
	color: var(--paper);
	font-family: var(--mono);
	font-size: 0.78rem;
	font-weight: 650;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		border-color 0.18s ease,
		background-color 0.18s ease,
		color 0.18s ease;
}

.token-buy:hover,
.token-buy:focus-visible {
	border-color: var(--green-bright);
	background: var(--ink-soft);
	color: var(--green-bright);
}

.token-buy img {
	width: 1.75rem;
	height: 1.75rem;
	object-fit: contain;
}

.token-pair__ticker {
	display: flex;
	align-items: center;
	margin-left: -1px;
	padding: 0 1.1em;
	border: 1px solid var(--line);
	background: var(--stone);
	color: var(--paper);
	font-family: var(--mono);
	letter-spacing: 0.01em;
}

.hero__statement,
.closing-statement {
	margin: 0 0 3rem;
	padding: 0 0 0 1.5rem;
	border-left: 1px solid var(--green);
	font-family: var(--serif);
	font-size: clamp(1.55rem, 2.6vw, 2.65rem);
	line-height: 1.2;
}

.hero__statement p,
.closing-statement p {
	margin: 0.15em 0;
}

.hero__statement p + p {
	margin-top: 0.8em;
}

.hero__statement .hero__refrain {
	margin-top: 1.25em;
	color: var(--green-bright);
}

.text-link {
	display: inline-block;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--green);
	color: var(--paper);
	font-size: 0.78rem;
	font-weight: 750;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.generated-art {
	margin: clamp(4rem, 8vw, 8rem) 0 0;
}

.generated-art img {
	width: 100%;
	border: 1px solid var(--line-soft);
	background: #050706;
	object-fit: cover;
}

.generated-art figcaption {
	max-width: 64ch;
	margin-top: 1rem;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.72rem;
	line-height: 1.65;
}

/* The hero art is a full-bleed layer behind the whole section rather than a
   framed panel in the right column. The grid still reserves its column, so the
   copy stays clear of the part of the picture that is fully opaque, and the
   mask dissolves the left half into the page underneath the text: fully opaque
   from the midpoint rightward, fully transparent at the left edge. */
.generated-art--hero {
	position: absolute;
	padding-left: 250px;
	inset: 0;
	margin: 0;
	overflow: hidden;
}

/* The mask rides on the image, not the figure: the figure is padded 250px to
   the left, so a gradient measured across the figure would already be part-way
   opaque where the picture actually begins and its left edge would show as a
   hard line. */
.generated-art--hero img {
	height: 100%;
	border: 0;
	background: none;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		rgba(0, 0, 0, 0.5) 42%,
		#000 70%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		rgba(0, 0, 0, 0.5) 42%,
		#000 70%
	);
}

.generated-art--crossing img {
	aspect-ratio: 1916 / 821;
}

.generated-art--monument {
	max-width: 860px;
	margin: clamp(5rem, 10vw, 10rem) auto;
}

.standard {
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(6rem, 10vw, 10rem) 4vw;
}

.standard h2 {
	margin: 0 0 3rem;
	font-family: var(--serif);
	font-size: clamp(2.7rem, 6vw, 6rem);
	font-weight: 400;
	letter-spacing: -0.045em;
	line-height: 0.98;
}

.maxim {
	margin: clamp(5rem, 9vw, 9rem) 0 0;
	padding-top: 2rem;
	border-top: 1px solid var(--line);
	color: var(--green-bright);
	font-family: var(--serif);
	font-size: clamp(2.2rem, 5vw, 5rem);
	line-height: 1.1;
}

.chapter-index {
	scroll-margin-top: 76px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 3rem 4vw 4rem;
}

.chapter-index ol {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.chapter-index a {
	display: grid;
	grid-template-columns: 5rem 1fr;
	padding: 1rem 0;
	border-bottom: 1px solid var(--line);
	font-family: var(--serif);
	font-size: clamp(1.25rem, 2.2vw, 2rem);
	text-decoration: none;
}

.chapter-index a:hover,
.chapter-index a:focus-visible {
	color: var(--green-bright);
}

.chapter-index span {
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.7rem;
}

.chapter {
	scroll-margin-top: 76px;
	padding: clamp(6rem, 11vw, 11rem) 4vw;
	border-top: 1px solid var(--line-soft);
}

.chapter--dark {
	background: #050706;
}

.chapter__header,
.chapter__body {
	max-width: 1180px;
	margin: 0 auto;
}

.chapter__body--paired {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	column-gap: clamp(3rem, 7vw, 7rem);
	align-items: start;
}

.chapter__body--paired > .story-copy {
	grid-column: 1;
	margin-left: 0;
}

.chapter__body--paired > .evidence-grid,
.chapter__body--paired > .evidence-stack,
.chapter__body--paired > .evidence-card {
	grid-column: 2;
	margin-top: 0;
}

.chapter__body--paired > .evidence-grid {
	grid-template-columns: 1fr;
}

.chapter__body--paired > .evidence-grid .evidence-card--wide {
	grid-column: auto;
}

.chapter__body--paired > .record-note,
.chapter__body--paired > .generated-art,
.chapter__body--paired > .ledger-panel {
	grid-column: 1 / -1;
}

.ledger-story {
	color: var(--muted);
}

.ledger-opening,
.ledger-context {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.ledger-copy {
	font-size: clamp(1.1rem, 1.6vw, 1.35rem);
	line-height: 1.65;
}

.ledger-copy p {
	margin: 0 0 1.3em;
}

.ledger-copy strong,
.ledger-batch-summary strong {
	color: var(--paper);
}

.ledger-headlines {
	border: 1px solid var(--line);
	background: var(--stone);
}

.ledger-headlines > div {
	padding: 1.3rem 1.8rem;
	border-bottom: 1px solid var(--line);
}

.ledger-headlines > div:last-child {
	border-bottom: 0;
}

.ledger-headlines span,
.ledger-timeline time,
.ledger-transfer-links > span {
	display: block;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ledger-headlines strong {
	display: block;
	color: var(--paper);
	font-size: clamp(2.7rem, 4.5vw, 4.1rem);
	font-weight: 400;
	line-height: 1.2;
	margin: 0.3rem 0;
}

.ledger-headlines p {
	margin: 0;
	font-size: 1rem;
}

.ledger-source-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	padding: 1.4rem 0;
	margin-top: 2rem;
	border-block: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 0.72rem;
	color: var(--green-bright);
}

.ledger-story a {
	text-underline-offset: 0.3em;
	text-decoration-thickness: 1px;
}

.ledger-story a:hover {
	color: var(--paper);
}
.ledger-story :is(a, summary):focus-visible {
	outline: 2px solid var(--green-bright);
	outline-offset: 5px;
}

.ledger-chapter {
	margin-top: clamp(4rem, 7vw, 7rem);
}

.ledger-section-head {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.ledger-step {
	color: var(--warning);
	font-family: var(--mono);
	font-size: 0.8rem;
	padding-top: 0.1rem;
}

.ledger-section-head .section-kicker {
	margin: 0 0 0.7rem;
}
.ledger-section-head h3,
.ledger-verdict h3 {
	margin: 0;
	color: var(--paper);
	font-size: clamp(1.9rem, 3.8vw, 3.1rem);
	font-weight: 400;
	line-height: 1.12;
	text-wrap: balance;
}

.ledger-context .evidence-card {
	margin: 0;
}
.ledger-story .ledger-metrics {
	margin-top: 1.5rem;
	border-top: 1px solid var(--line);
}
.ledger-footnote {
	color: var(--muted);
	font-size: 0.9rem;
	line-height: 1.6;
}

.ledger-chapter--featured {
	padding: clamp(1.25rem, 3vw, 3rem);
	border: 1px solid var(--line);
	border-top: 2px solid var(--warning);
	background: var(--ink-soft);
}

.ledger-batch-intro {
	max-width: 850px;
}
.ledger-timeline {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding: 0;
	margin: 2.5rem 0;
	list-style: none;
	border-block: 1px solid var(--line);
}

.ledger-timeline li {
	padding: 1.5rem;
	border-right: 1px solid var(--line);
}
.ledger-timeline li:first-child {
	padding-left: 0;
}
.ledger-timeline li:last-child {
	padding-right: 0;
	border-right: 0;
}
.ledger-timeline strong {
	display: block;
	margin: 0.7rem 0;
	font-size: clamp(1.7rem, 2.8vw, 2.5rem);
	font-weight: 400;
	line-height: 1.15;
	color: var(--warning);
}
.ledger-timeline p {
	font-size: 1rem;
	margin: 0 0 0.6rem;
}
.ledger-timeline .source-link {
	margin-left: 0;
}
.ledger-batch-summary {
	font-size: 1.1rem;
	max-width: 850px;
}

.ledger-details {
	border-block: 1px solid var(--line);
	margin-top: 2rem;
	scroll-margin-top: 100px;
}
.ledger-details summary {
	padding: 1.3rem 0;
	cursor: pointer;
	color: var(--paper);
	font-size: 1.1rem;
}
.ledger-details summary::marker {
	color: var(--green-bright);
}
.ledger-details summary > span {
	display: block;
	margin: 0.4rem 0 0 1.15rem;
	font-family: var(--mono);
	font-size: 0.68rem;
	color: var(--muted);
}
.ledger-details__body {
	padding: 0 0 1.5rem;
}
/* A note attached under a table: the same box as .ledger-table-wrap, pulled up a
   pixel so the two share one border line, and matching the caption's inset. */
.ledger-table-note {
	margin-top: -1px;
	padding: 1rem;
	border: 1px solid var(--line);
	background: var(--stone);
}

.ledger-table-note > :first-child {
	margin-top: 0;
}
.ledger-table-note .ledger-footnote {
	margin: 0;
}
.ledger-table-note .ledger-panel__links {
	padding: 0.75rem 0 0;
}
.ledger-table-note .source-link {
	margin: 0 0.25rem;
}

/* Interactive reader: the same attached box as .ledger-table-note, with the
   controls that run the contract call the table above documents. */
.probe-lead p {
	margin: 0;
	color: var(--muted);
	font-size: 0.9rem;
	line-height: 1.6;
}

.ledger-table-note.probe-lead p {
	margin-bottom: 0 !important;
}

/* Thin, quiet link: the row it sits in should not shout. */
.probe-lead .source-link {
	display: inline-block;
	margin: 0.65rem 0 0;
	font-size: 0.62rem;
	font-weight: 400;
	letter-spacing: 0.08em;
}
/* The raw call is reference material, so it is folded away until asked for.
   One thin row: chevrons, then the label in the evidence-card label style. */
.calldata-accordion {
	margin-top: -1px;
	border: 1px solid var(--line);
	background: var(--stone);
}
.story-details .calldata-accordion > summary {
	margin: 0;
	padding: 0.55rem 1rem;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	cursor: pointer;
}
/* Same native disclosure triangle as the outer panel, just smaller because the
   summary text is smaller, and in the accent colour. */
.story-details .calldata-accordion > summary::marker {
	color: var(--green-bright);
}
.story-details .calldata-accordion[open] > summary {
	border-bottom: 1px solid var(--line);
}
.story-details .calldata-accordion .ledger-table-wrap {
	border: 0;
	background: none;
}

/* The full 138-character calldata. It has to break rather than push the table
   into a horizontal scroll, so it overrides the right alignment every second
   column cell otherwise inherits. */
.calldata-accordion .ledger-table td.calldata-hex-cell {
	text-align: left;
}

.calldata-hex {
	overflow-wrap: anywhere;
}

/* A ready-to-paste command under the calldata table. Same box as the table note
   above it, so the accordion reads as one unit. */
.calldata-run {
	padding: 0 0 0.25rem;
}

.calldata-run p {
	margin: 0 0 0.6rem;
	color: var(--muted);
	font-size: 0.82rem;
	line-height: 1.6;
}

.calldata-run p:last-child {
	margin: 0.6rem 0 0;
}

.calldata-run pre {
	margin: 0;
	padding: 0.85rem 1rem;
	overflow-x: auto;
	border: 1px solid var(--line);
	background: var(--stone);
}

.calldata-run pre code {
	display: block;
	color: var(--paper);
	font-family: var(--mono);
	font-size: 0.72rem;
	line-height: 1.7;
	white-space: pre;
}
.rate-probe__intro {
	margin: 0 0 0.9rem;
	color: var(--muted);
	font-size: 0.9rem;
	line-height: 1.6;
}

.rate-probe__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.rate-probe__controls label {
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.17em;
	text-transform: uppercase;
}

.rate-probe__input {
	flex: 1 1 11rem;
	min-width: 0;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--line);
	background: var(--ink-soft);
	color: var(--paper);
	font-family: var(--mono);
	font-size: 0.85rem;
}

.rate-probe__go {
	padding: 0.55rem 1rem;
	border: 1px solid var(--green);
	background: none;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color 0.18s ease,
		color 0.18s ease;
}

.rate-probe__go:hover {
	background: var(--green);
	color: var(--ink);
}
.rate-probe__go:disabled {
	opacity: 0.5;
	cursor: progress;
}

.rate-probe__presets {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.7rem;
}

.rate-probe__presets button {
	padding: 0.3rem 0.6rem;
	border: 1px solid var(--line-soft);
	background: none;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.63rem;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition:
		border-color 0.18s ease,
		color 0.18s ease;
}

.rate-probe__presets button:hover {
	border-color: var(--green);
	color: var(--green-bright);
}

/* Address combobox: typeahead over the published depositor list, with the
   named addresses offered on the dropdown. */
.share-probe__field {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.4rem;
}
.share-probe__field label {
	flex: 0 0 auto;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.17em;
	text-transform: uppercase;
}
.combo {
	position: relative;
	display: flex;
	flex: 1 1 18rem;
	min-width: 0;
}
.combo__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--line);
	background: var(--ink-soft);
	color: var(--paper);
	font-family: var(--mono);
	font-size: 0.78rem;
}
.combo__toggle {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 2.1rem;
	margin-left: -1px;
	padding: 0;
	border: 1px solid var(--line);
	background: var(--stone);
	color: var(--green-bright);
	cursor: pointer;
	transition:
		color 0.18s ease,
		border-color 0.18s ease;
}
/* The global focus ring has a 4px offset, which on a field butted against the
   dropdown button draws a box over its neighbour. Mark focus on the field's own
   edge instead, so it stays obvious for keyboard use without the floating box. */
.combo__input:focus,
.combo__input:focus-visible,
.rate-probe__input:focus,
.rate-probe__input:focus-visible {
	outline: none;
	border-color: var(--green-bright);
	box-shadow: inset 0 0 0 1px var(--green-bright);
}
.combo__toggle:hover {
	border-color: var(--green);
	color: var(--paper);
}
.combo__toggle svg {
	width: 0.8rem;
	height: 0.8rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.18s ease;
}
.combo__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}
.combo__list {
	position: absolute;
	z-index: 5;
	top: calc(100% + 2px);
	left: 0;
	right: 0;
	max-height: 14rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--line);
	background: var(--ink-soft);
	list-style: none;
	overflow-y: auto;
}
.combo__option {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.6rem;
	padding: 0.45rem 0.65rem;
	border-bottom: 1px solid var(--line-soft);
	cursor: pointer;
}
.combo__option:last-child {
	border-bottom: 0;
}
.combo__option code {
	color: var(--paper);
	font-size: 0.72rem;
	overflow-wrap: anywhere;
}
.combo__option small {
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.58rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.combo__option.is-active,
.combo__option:hover {
	background: var(--stone);
}
.combo__option.is-active code {
	color: var(--green-bright);
}
/* The list doubles as the place to report that the address list failed. */
.combo__option--note {
	display: block;
	color: var(--warning);
	font-size: 0.78rem;
	line-height: 1.5;
	cursor: default;
}
.share-probe__go {
	margin-top: 1rem;
}
.share-probe__detail .is-stored dd code {
	color: var(--green-bright);
}
.share-probe__hint {
	margin: 0.9rem 0 0;
	color: var(--muted);
	font-size: 0.82rem;
	line-height: 1.6;
}
.rate-probe__scrub {
	margin-top: 1.1rem;
}

.rate-probe__slider {
	display: block;
	width: 100%;
	height: 1.5rem;
	margin: 0;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.rate-probe__slider::-webkit-slider-runnable-track {
	height: 2px;
	background: var(--line);
}

.rate-probe__slider::-moz-range-track {
	height: 2px;
	background: var(--line);
}

.rate-probe__slider::-webkit-slider-thumb {
	width: 0.85rem;
	height: 0.85rem;
	margin-top: -0.38rem;
	border: 0;
	border-radius: 0;
	background: var(--green-bright);
	-webkit-appearance: none;
	appearance: none;
}

.rate-probe__slider::-moz-range-thumb {
	width: 0.85rem;
	height: 0.85rem;
	border: 0;
	border-radius: 0;
	background: var(--green-bright);
}

.rate-probe__scale {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.4rem;
}

.rate-probe__end {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.6rem;
	line-height: 1.5;
	letter-spacing: 0.06em;
}

.rate-probe__end--right {
	text-align: right;
}
.rate-probe__end small {
	color: var(--line);
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.rate-probe__mid {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}

.rate-probe__current {
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	text-align: center;
}

.rate-probe__current-date {
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.58rem;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-align: center;
	white-space: nowrap;
}

.rate-probe__current-date.is-estimate {
	color: var(--line);
}

.rate-probe.is-outside .rate-probe__current {
	color: var(--warning);
}
.rate-probe.is-outside .rate-probe__current-date {
	visibility: hidden;
}

/* Too narrow for three columns: the selected block takes its own line above the
   two ends rather than being squeezed between them. */
@media (max-width: 620px) {
	.rate-probe__scale {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.6rem 0.75rem;
	}

	.rate-probe__mid {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.rate-probe__end {
		grid-row: 2;
	}
	.rate-probe__end--right {
		justify-self: end;
	}
}

.rate-probe__result:empty {
	display: none;
}

.rate-probe__result {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.9rem;
	line-height: 1.6;
}

.rate-probe__result--error {
	color: var(--warning);
}

.rate-probe__headline {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	margin: 0 0 0.8rem;
	color: var(--paper);
	font-size: 1rem;
}
.rate-probe__headline strong {
	color: var(--paper);
	font-family: var(--serif);
	font-size: 2.2rem;
	font-weight: 400;
	letter-spacing: -0.02em;
}
.rate-probe__headline em {
	margin-top: -0.15rem;
	color: var(--muted);
	font-size: 0.82rem;
	font-style: normal;
}

.rate-probe__detail {
	margin: 0;
}

.rate-probe__detail > div {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.8rem;
	padding: 0.35rem 0;
	border-top: 1px solid var(--line-soft);
}

.rate-probe__detail dt {
	flex: 0 0 7rem;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.rate-probe__detail dd {
	flex: 1 1 12rem;
	min-width: 0;
	margin: 0;
	font-family: var(--mono);
	font-size: 0.78rem;
	overflow-wrap: anywhere;
}

.ledger-table caption {
	padding: 1rem;
	text-align: left;
	color: var(--muted);
	font-size: 0.9rem;
	border-bottom: 1px solid var(--line);
}

.probe-lead .source-link {
	margin: 0.75rem 0 0;
}
.ledger-batch-table tbody th {
	font-family: var(--mono);
	font-size: 0.8rem;
}
.ledger-batch-table a {
	color: var(--green-bright);
}
.ledger-safe-record {
	padding: clamp(1.25rem, 3vw, 2.5rem);
	background: var(--stone);
	border: 1px solid var(--line);
}
.ledger-safe-total {
	display: block;
	font-size: clamp(3rem, 5vw, 4.4rem);
	font-weight: 400;
	color: var(--paper);
	line-height: 1.1;
}
.ledger-safe-record dl {
	margin: 1.5rem 0;
}
.ledger-safe-record dl > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--line);
}
.ledger-safe-record dd {
	margin: 0;
	color: var(--paper);
	font-variant-numeric: tabular-nums;
}
.ledger-address {
	display: block;
	overflow-wrap: anywhere;
	font-family: var(--mono);
	font-size: 0.7rem;
	color: var(--green-bright);
}
.ledger-transfer-links {
	display: grid;
	gap: 0.65rem;
	margin-top: 2rem;
	font-family: var(--mono);
	font-size: 0.72rem;
}
.ledger-verdict {
	border-left: 2px solid var(--warning);
	margin-top: clamp(4rem, 7vw, 7rem);
	padding: 0 0 0 clamp(1.25rem, 4vw, 3rem);
	max-width: 940px;
	font-size: clamp(1.15rem, 1.8vw, 1.45rem);
}
.ledger-verdict__last {
	color: var(--green-bright);
}
.ledger-method {
	margin-top: 4rem;
}
.ledger-method .route-ledger {
	margin-top: 2rem;
	padding-top: 2rem;
}
.ledger-method-notes {
	margin-top: 2rem;
	max-width: 900px;
}
.ledger-method-notes strong {
	color: var(--paper);
}

@media (max-width: 900px) {
	.ledger-opening,
	.ledger-context {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.ledger-headlines {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.ledger-headlines > div {
		padding: 1.2rem;
		border-bottom: 0;
		border-right: 1px solid var(--line);
	}
	.ledger-headlines > div:last-child {
		border-right: 0;
	}
	.ledger-timeline {
		grid-template-columns: 1fr;
	}
	.ledger-timeline li,
	.ledger-timeline li:first-child,
	.ledger-timeline li:last-child {
		padding: 1.5rem 0;
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}
	.ledger-timeline li:last-child {
		border-bottom: 0;
	}
}

@media (max-width: 560px) {
	.ledger-headlines {
		grid-template-columns: 1fr;
	}
	.ledger-headlines > div {
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}
	.ledger-headlines strong {
		font-size: 2.8rem;
	}
	.ledger-section-head {
		grid-template-columns: 1.5rem minmax(0, 1fr);
		gap: 0.5rem;
	}
	.ledger-story .ledger-table :is(th, td) {
		padding: 0.8rem 0.55rem;
	}
	.ledger-story .ledger-table thead th {
		font-size: 0.58rem;
		letter-spacing: 0.04em;
	}
	.ledger-story .ledger-table tbody th {
		font-size: 0.9rem;
	}
	.ledger-story .ledger-batch-table tbody th {
		font-size: 0.66rem;
	}
	.ledger-story .ledger-table td {
		font-size: 0.68rem;
	}
	.ledger-story .route-ledger__row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 3.5rem;
		gap: 0.6rem;
		font-size: 0.62rem;
	}
}

.ledger-panel {
	margin-top: clamp(4rem, 8vw, 8rem);
	border-top: 1px solid var(--line);
}

.ledger-panel__heading {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 2rem;
	padding: 1.5rem 0;
	color: var(--muted);
	font-size: 0.9rem;
	line-height: 1.6;
}

.ledger-panel__heading p {
	margin: 0;
}

.ledger-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	background: var(--stone);
}

.ledger-table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.ledger-table th,
.ledger-table td {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--line-soft);
	text-align: left;
}

.ledger-table thead th {
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ledger-table tbody th {
	color: var(--paper);
	font-family: var(--serif);
	font-size: 1rem;
	font-weight: 400;
}

.ledger-table td {
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.78rem;
}

.ledger-table th:nth-child(2),
.ledger-table th:nth-child(3),
.ledger-table td:nth-child(2),
.ledger-table td:nth-child(3) {
	text-align: right;
}

.ledger-table tbody tr:last-child th,
.ledger-table tbody tr:last-child td {
	border-bottom: 0;
}

.ledger-panel__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2rem;
	padding: 1rem 0;
}

.ledger-panel__links .source-link {
	display: inline-block;
	margin-left: 0;
}

/* Four columns is the usual shape, but a strip with fewer figures divides the
   row between them rather than leaving an empty cell at the end. */
.ledger-metrics {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	border-top: 1px solid var(--line);
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	border-left: 1px solid var(--line);
	margin-bottom: 40px;
}

.ledger-metric {
	display: grid;
	gap: 0.45rem;
	padding: 1.25rem;
	border-right: 1px solid var(--line-soft);
}

.ledger-metric:last-child {
	border-right: 0;
}

.ledger-metric span,
.ledger-metric small {
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.64rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* The label above each figure is set like the timeline labels: same size,
   tracking and amber. The note below the figure keeps the smaller grey. */
.ledger-metric span {
	color: var(--warning);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
}

/* That amber is meant for the label, but the selector above reaches any span
   inside the metric, and the token version suffix is one: in the note below
   the figure it was the only amber word in a grey line. Here it takes the
   colour of the text it belongs to. */
.ledger-metric small .token-version {
	color: inherit;
}

.ledger-metric strong {
	color: var(--paper);
	font-family: var(--serif);
	font-size: clamp(1.8rem, 4vw, 3.1rem);
	font-weight: 400;
	line-height: 1;
}

/* A precise-number inside the large metric value is still a span, so the
   generic metric-label rule above would otherwise shrink and recolor it. */
.ledger-metric strong .precise-number {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-transform: none;
}

/* Inside the floated evidence column the strip only has 46% of the measure to
   work with, which is narrower than a single one of these figures: three
   columns there push the numbers and their labels straight through the cell
   borders. Stacked, each figure gets the card's full width and the dividers
   run between rows instead. */
.story-pair > .evidence-card .ledger-metrics {
	grid-auto-flow: row;
	grid-template-columns: minmax(0, 1fr);
}

.story-pair > .evidence-card .ledger-metric {
	border-right: 0;
	border-bottom: 1px solid var(--line-soft);
}

.story-pair > .evidence-card .ledger-metric:last-child {
	border-bottom: 0;
}

.route-ledger {
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
	gap: clamp(2rem, 6vw, 6rem);
	margin-top: clamp(4rem, 8vw, 8rem);
	padding-top: 2rem;
	border-top: 1px solid var(--line);
}

.route-ledger__intro h3 {
	margin: 1rem 0 0;
	color: var(--paper);
	font-family: var(--serif);
	font-size: clamp(1.6rem, 3vw, 2.6rem);
	font-weight: 400;
	line-height: 1.2;
}

.route-ledger__bars {
	display: grid;
	gap: 1.1rem;
}

.route-ledger__row {
	display: grid;
	grid-template-columns: minmax(8rem, 0.75fr) minmax(8rem, 1.5fr) 4.8rem;
	gap: 1rem;
	align-items: center;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.68rem;
}

.route-ledger__row i {
	display: block;
	width: var(--share);
	height: 0.45rem;
	background: var(--green-bright);
}

.route-ledger__row strong {
	color: var(--paper);
	font-weight: 500;
	text-align: right;
}

.route-ledger__note {
	grid-column: 2;
	margin: 0;
	color: var(--muted);
	font-size: 0.8rem;
	line-height: 1.6;
}

.chapter__subhead {
	margin: 0 0 clamp(2.5rem, 2vw, 5rem);
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--line);
	color: var(--green-bright);
	font-family: var(--serif);
	font-size: clamp(2.4rem, 5vw, 5rem);
	font-weight: 400;
	letter-spacing: -0.04em;
	line-height: 1;
}

.chapter__body--segmented {
	display: grid;
	gap: clamp(6rem, 11vw, 11rem);
}

.chapter__pair {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	column-gap: clamp(3rem, 7vw, 7rem);
	align-items: start;
}

.chapter__pair > .story-copy {
	margin-left: 0;
}

.chapter__pair > .evidence-stack {
	margin-top: 0;
}

/* The Crossing uses the .story-pair float from the other chapters, so the
   narrative is plain block flow: its lines wrap beside the floated evidence
   and then run the full measure once they clear it. A grid container here
   would establish its own formatting context and sit beside the float at full
   height instead. */
.crossing-part + .crossing-part {
	margin-top: clamp(2rem, 2vw, 9rem);
}

.crossing-narrative .story-copy {
	max-width: none;
	margin-left: 0;
	color: var(--muted);
}

.crossing-narrative .story-copy strong {
	color: var(--paper);
}

/* The subhead's rule is a border on a full-width block, so beside the float it
   would run the whole measure and vanish under the evidence. flow-root makes
   the box itself shrink to the space left of the float, and it widens again
   once the stack ends. */
.crossing-narrative .chapter__subhead {
	display: flow-root;
}

.chapter__header {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	margin-bottom: clamp(4rem, 8vw, 8rem);
}

.chapter__number {
	grid-row: 1 / span 2;
	padding-top: 0.6rem;
}

.chapter__header h2 {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(4rem, 10vw, 9rem);
	font-weight: 400;
	letter-spacing: -0.06em;
	line-height: 0.85;
}

.chapter__dek {
	margin: 2rem 0 0;
	color: var(--green-bright);
	font-size: clamp(1rem, 1.8vw, 1.4rem);
}

.story-copy {
	max-width: var(--reading-width);
	margin-left: auto;
	font-family: var(--serif);
	font-size: clamp(1.1rem, 1.6vw, 1.35rem);
	line-height: 1.7;
}

.story-copy p {
	margin: 0 0 1.6em;
}

.story-copy--large {
	font-size: clamp(1.45rem, 2.8vw, 2.2rem);
	line-height: 1.5;
}

.evidence-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: clamp(4rem, 8vw, 8rem);
}

.evidence-stack {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
}
.evidence-stack > * {
	min-width: 0;
}

.evidence-card {
	margin: 0;
	padding: 1rem;
	border: 1px solid var(--line);
	background: var(--stone);
}

.evidence-card--wide {
	grid-column: 1 / -1;
}

.evidence-card--feature {
	max-width: 880px;
	margin: clamp(4rem, 8vw, 8rem) auto 0;
}

.evidence-card__label {
	margin: 0;
	padding: 0.25rem 0 1rem;
}

.evidence-card img {
	width: 100%;
	height: auto;
	border: 1px solid var(--line-soft);
	background: #111;
	object-fit: contain;
}

.evidence-card figcaption {
	padding: 1rem 0.25rem 0.25rem;
	color: var(--muted);
	font-size: 0.8rem;
	line-height: 1.6;
}

.source-link {
	display: block;
	margin: 0.75rem 0.25rem 0.25rem;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

.evidence-card img.evidence-image--natural {
	height: auto;
}

.evidence-card--record {
	overflow: hidden;
}

.contract-proof {
	display: grid;
	gap: 1rem;
	min-height: 17rem;
	padding: clamp(1.5rem, 4vw, 3rem);
	border: 1px solid var(--line-soft);
	background: #090d0a;
	align-content: center;
}

.contract-proof span {
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.18em;
}

.contract-proof strong {
	color: var(--paper);
	font-family: var(--serif);
	font-size: clamp(1.55rem, 3.2vw, 2.8rem);
	font-weight: 500;
	line-height: 1.05;
}

.contract-proof code {
	overflow-wrap: anywhere;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.72rem;
	line-height: 1.7;
}

.source-link:hover,
.source-link:focus-visible {
	color: var(--paper);
}

/* The post-ledger record: paired evidence, policy chronology and source access. */
.story-record {
	color: var(--muted);
}
.story-record .generated-art--monument img {
	height: auto;
}
.story-chapter .chapter__header h2 {
	overflow-wrap: normal;
}
/* Evidence floats right and the prose wraps around it, so the text runs the
   full width once it clears the bottom of the float instead of leaving a tall
   empty right column. The evidence element is first in the source because a
   float only wraps the content that follows it. */
.story-pair {
	display: flow-root;
}
.story-pair > * {
	min-width: 0;
}
.story-pair > :first-child {
	float: right;
	width: 46%;
	margin: 0.4rem 0 clamp(1.75rem, 3vw, 2.75rem) clamp(2rem, 5vw, 4.5rem);
}
.story-prose {
	font-size: clamp(1.1rem, 1.6vw, 1.35rem);
	line-height: 1.7;
}

/* Chapter 05 keeps its prose in a true left column: the narrative reads beside
   the evidence rather than resuming full width beneath it. Elsewhere the
   .story-pair float is meant to be wrapped by one continuous narrative column,
   so this stays scoped to this chapter's pairs. A block formatting context is
   laid out beside the float instead of flowing back under it. */
#terms .story-pair > .story-prose {
	display: flow-root;
}
.story-prose p {
	margin: 0 0 1.25em;
}
.story-prose strong {
	color: var(--paper);
}
.story-prose h3,
.story-section-head h3,
.story-finding h3 {
	margin: 0 0 1.2rem;
	color: var(--paper);
	font-size: clamp(1.9rem, 3.6vw, 3.1rem);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -0.025em;
}
.story-section {
	margin-top: clamp(0.5rem, 6vw, 6rem);
}
.story-section--first {
	margin-top: 0;
}
.story-section-head {
	max-width: 880px;
	margin-bottom: 2.5rem;
}
.story-section-head .section-kicker {
	margin-bottom: 0.8rem;
}

/* A narrative column that carries more than one headed part alongside a
   floated evidence stack. Each part continues in the same column, so a second
   heading reads on from the first instead of starting a new full-width
   section below the float and leaving a tall gap on the left. */
.story-narrative > * + * {
	margin-top: clamp(2.5rem, 4vw, 4rem);
}

.story-part .story-section-head {
	margin-bottom: 2rem;
}
.story-sources {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem 1.5rem;
	margin: 1rem 0 0;
	font-family: var(--mono);
	font-size: 0.68rem;
	line-height: 1.6;
	color: var(--green-bright);
}

.story-sources.inbody {
	margin: 1rem 0;
}
.story-record a {
	text-underline-offset: 0.3em;
	text-decoration-thickness: 0.9px;
}
.story-record a:hover {
	color: var(--paper);
}
.story-record a.back-reference {
	text-decoration-color: rgb(193 221 168 / 55%);
}
.story-record a.back-reference:hover,
.story-record a.back-reference:focus-visible {
	color: var(--green-bright);
	text-decoration-color: currentColor;
}
.story-record [id] {
	scroll-margin-top: 96px;
}
.story-record .evidence-card figcaption {
	font-size: 0.88rem;
}
.evidence-open {
	display: block;
	cursor: zoom-in;
}
.story-example {
	padding: 1.5rem;
	background: var(--ink-soft);
	border: 1px solid var(--line);
}
.story-example .section-kicker {
	margin-bottom: 1.3rem;
}
.story-example > p:last-child {
	font-size: 0.9rem;
	margin-bottom: 0;
}
.share-example {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 1rem;
	align-items: center;
}
.share-example span {
	font-size: 0.95rem;
}
.share-example strong {
	display: block;
	font-size: 2.5rem;
	color: var(--paper);
	font-weight: 400;
}
.share-example--three {
	grid-template-columns: 1fr;
	gap: 0.45rem;
	text-align: center;
}
.share-example--three > span[aria-hidden="true"] {
	transform: rotate(90deg);
	line-height: 1;
}
.share-example--three strong {
	font-size: clamp(1.7rem, 3.2vw, 2.3rem);
	overflow-wrap: anywhere;
}
.share-example em {
	display: block;
	margin-top: 0.3rem;
	font-style: normal;
	font-family: var(--mono);
	font-size: 0.72rem;
	color: var(--muted);
}
.share-example__loss strong {
	color: var(--warning);
}
.transcript {
	padding: 1rem 1.1rem;
	background: var(--ink-soft);
	border: 1px solid var(--line-soft);
}
.transcript p {
	margin: 0 0 0.85rem;
	font-size: 0.95rem;
	line-height: 1.55;
}
.transcript p:last-child {
	margin-bottom: 0;
}
.transcript span {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.transcript__a {
	padding-left: 0.9rem;
	border-left: 2px solid var(--green);
	color: var(--paper);
}
.transcript__a span {
	color: var(--green-bright);
}
.transcript__time {
	font-family: var(--mono);
	font-size: 0.62rem;
	color: var(--muted);
	text-align: right;
}
.story-caveat {
	margin: 1.6rem 0 0;
	padding: 1rem 1.2rem;
	border: 1px solid var(--line);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--muted);
}
.story-quote {
	margin: 1.6rem 0;
	padding: 1.2rem 1.4rem;
	background: var(--ink-soft);
	border-left: 2px solid var(--warning);
}
.story-quote p {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--paper);
}
.story-quote cite {
	display: block;
	margin-top: 0.8rem;
	font-style: normal;
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.04em;
}
.plain-steps {
	list-style: none;
	padding: 0;
	margin: 1.6rem 0;
	display: grid;
	gap: 0.8rem;
}
.plain-steps li {
	padding: 1rem 1.2rem;
	background: var(--ink-soft);
	border-left: 2px solid var(--line);
	line-height: 1.65;
}
.plain-steps li:last-child {
	border-left-color: var(--warning);
}
.supply-record {
	padding: clamp(1rem, 2.5vw, 1.75rem);
	background: var(--ink);
}

.supply-record__label {
	margin: 0;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.supply-record__total {
	margin: 0;
}

.supply-record__total strong {
	display: block;
	color: var(--paper);
	font-size: clamp(2.7rem, 5vw, 4.6rem);
	font-weight: 400;
	line-height: 1.05;
}

.supply-record__total > span {
	display: block;
	margin-top: 0.45rem;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.8rem;
}

.supply-record__equation {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(
			0,
			0.72fr
		);
	gap: 0.7rem;
	align-items: center;
	padding: 1.2rem 0;
	border-block: 1px solid var(--line);
}

.supply-record__term {
	min-width: 0;
}

.supply-record__term span {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.58rem;
	line-height: 1.35;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.supply-record__term strong {
	display: block;
	color: var(--paper);
	font-size: clamp(1.15rem, 2vw, 1.65rem);
	font-weight: 400;
	line-height: 1.15;
}

.supply-record__operator {
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 1.2rem;
}

.supply-record__result strong {
	color: var(--green-bright);
	font-size: clamp(1.65rem, 3vw, 2.4rem);
}

.supply-record__note {
	margin: 1rem 0 0;
	color: var(--muted);
	font-size: 0.88rem;
	line-height: 1.55;
}

@media (max-width: 620px) {
	.supply-record__equation {
		grid-template-columns: 1fr;
		gap: 0.55rem;
	}

	.supply-record__operator {
		line-height: 1;
	}

	.supply-record__term span {
		margin-bottom: 0.2rem;
	}
}

.story-pullquote {
	max-width: 950px;
	margin: clamp(4rem, 7vw, 7rem) 0 0;
	padding-left: clamp(1.5rem, 4vw, 3rem);
	border-left: 2px solid var(--warning);
	color: var(--green-bright);
	font-size: clamp(1.8rem, 3.6vw, 3rem);
	line-height: 1.25;
}
.story-pullquote p {
	margin: 0;
}
.policy-timeline {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	padding: 0;
	margin: 3rem 0 0;
	border-block: 1px solid var(--line);
}
.policy-timeline li {
	position: relative;
	padding: 1.5rem;
	border-right: 1px solid var(--line);
}
.policy-timeline li:first-child {
	padding-left: 0;
}
.policy-timeline li:last-child {
	border-right: 0;
}
/* .metric-eyebrow is the same label treatment used outside the timeline, for
   captions that sit above a figure strip — in green rather than the timeline's
   amber, see below. */
.policy-timeline time,
.policy-timeline .section-kicker,
.metric-eyebrow {
	display: block;
	color: var(--warning);
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 0.8rem;
}
.metric-eyebrow {
	color: var(--green-bright);
	margin: 5em 0 1.25em 0 !important;
}

.policy-timeline strong {
	color: var(--paper);
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.2;
	display: block;
}
.policy-timeline p {
	margin: 0.8rem 0 0;
	font-size: 1rem;
}
.policy-timeline--funds {
	background: var(--ink-soft);
}
.policy-timeline--funds li:first-child {
	padding-left: 1.5rem;
}
.story-finding {
	margin: 3.5rem 0 0;
	padding: 2rem 0 0;
	border-top: 2px solid var(--warning);
	max-width: 960px;
}
.story-finding p:last-child {
	font-size: clamp(1.15rem, 1.8vw, 1.45rem);
	line-height: 1.65;
}
.story-finding .section-kicker {
	color: var(--warning);
	margin-bottom: 1rem;
}
.story-table-note {
	font-size: 0.95rem;
	max-width: 850px;
}
.vote-record {
	overflow-x: auto;
	border: 1px solid var(--line);
}
.vote-record table {
	width: 100%;
	border-collapse: collapse;
	background: var(--ink-soft);
}
.vote-record th,
.vote-record td {
	text-align: left;
	padding: 1.3rem;
	border-bottom: 1px solid var(--line);
}
.vote-record thead th {
	font-family: var(--mono);
	font-size: 0.65rem;
	color: var(--green-bright);
	text-transform: uppercase;
	letter-spacing: 0.07em;
}
.vote-record tbody th {
	font-size: 0.95rem;
	font-weight: 400;
	white-space: nowrap;
	color: var(--paper);
}
.vote-record td:nth-child(2) {
	font-size: 1.15rem;
	color: var(--paper);
}
.vote-record td:nth-child(3) {
	font-family: var(--mono);
	font-size: 0.95rem;
	color: var(--warning);
	font-variant-numeric: tabular-nums;
}
.vote-record td a {
	display: block;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.68rem;
	margin: 0.3rem 0;
	white-space: nowrap;
}
.vote-record tr:last-child :is(th, td) {
	border-bottom: 0;
}
.vote-mobile-label {
	display: none;
}
.story-details {
	margin-top: 3rem;
	border-block: 1px solid var(--line);
}

.story-details.stuck {
	border-block-start: none;
}

.story-details.bottom {
	margin-top: 0;
	margin-bottom: 2rem;
}

.story-details.top {
	margin-top: 2rem;
	margin-bottom: 0;
}

.story-details.both {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.story-details summary {
	padding: 1.4rem 0;
	cursor: pointer;
	font-size: 1.2rem;
	color: var(--paper);
	transition: color 120ms ease;
}
.story-details summary::marker {
	color: var(--green-bright);
}
.story-details summary > span {
	display: block;
	margin: 0.4rem 0 0 1.25rem;
	font-size: 0.9rem;
	color: var(--muted);
	transition: color 120ms ease;
}

/* Hovering the row takes the accent colour of a record label. Keyboard focus
   gets the same treatment, and an open disclosure holds it: the heading stays
   lit for as long as its contents are showing. */
.story-details summary:hover,
.story-details summary:focus-visible,
.story-details[open] > summary {
	color: var(--green-bright);
}

.story-details summary:hover > span,
.story-details summary:focus-visible > span,
.story-details[open] > summary > span {
	color: var(--green);
}
/* Open, the body steps in behind a rule that runs its whole height, so the
   reader can see they are still inside the disclosure however far down the
   contents they have got. Green, like the summary's own marker, so the rule
   reads as part of the disclosure rather than as another panel border. */
.story-details__body {
	max-width: 900px;
	padding: 0 0 1.5rem clamp(1rem, 2vw, 1.75rem);
	border-left: 1px solid var(--green);
}

/* This disclosure ends its column, so it adds no trailing margin of its own:
   the next section's top margin already separates them, and the two together
   left a visible hole under the panel's bottom rule. */
#cuts-rate-check {
	margin-top: 0;
	margin-bottom: 0;
}

.story-section--exception {
	padding-top: clamp(3rem, 5vw, 5rem);
	border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
	/* One column: drop the float and put the prose back ahead of the evidence.
	   Flex items ignore float, so order alone restores the reading sequence. */
	.story-pair {
		display: flex;
		flex-direction: column;
		gap: 2.5rem;
	}
	.story-pair > :first-child {
		float: none;
		width: auto;
		margin: 0;
		order: 2;
	}
	.story-pair > :last-child {
		order: 1;
	}
	.story-record .evidence-stack {
		gap: 1.5rem;
	}
	.story-prose {
		max-width: 760px;
	}
	.story-chapter .chapter__header h2 {
		font-size: clamp(3rem, 10vw, 6rem);
	}
}
@media (max-width: 600px) {
	.policy-timeline {
		grid-template-columns: 1fr;
	}
	.policy-timeline li,
	.policy-timeline li:first-child {
		padding: 1.3rem 0;
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}
	.policy-timeline li:last-child {
		border-bottom: 0;
	}
	.policy-timeline--funds li,
	.policy-timeline--funds li:first-child {
		padding-inline: 1.2rem;
	}
	.vote-record :is(th, td) {
		padding: 0.85rem 0.65rem;
	}
	.vote-record table,
	.vote-record tbody {
		display: block;
	}
	.vote-record thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
	.vote-record tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		padding: 1.2rem;
		border-bottom: 1px solid var(--line);
		gap: 0.7rem 1rem;
	}
	.vote-record tbody tr:last-child {
		border-bottom: 0;
	}
	.vote-record tbody :is(th, td) {
		padding: 0;
		border-bottom: 0;
	}
	.vote-record tbody th,
	.vote-record td:nth-child(2) {
		grid-column: 1 / -1;
	}
	.vote-record tbody th {
		font-family: var(--mono);
		font-size: 0.68rem;
		color: var(--green-bright);
	}
	.vote-record td:nth-child(3) {
		font-size: 1.3rem;
	}
	.vote-record td:last-child {
		align-self: end;
		text-align: right;
	}
	.vote-mobile-label {
		display: block;
		font-size: 0.6rem;
		color: var(--muted);
		margin-bottom: 0.25rem;
	}
	.story-record .evidence-card {
		padding: 0.8rem;
	}
	.story-record .evidence-card__label {
		font-size: 0.62rem;
	}
	.story-example {
		padding: 1.1rem;
	}
	.share-example {
		gap: 0.6rem;
	}
	.share-example span {
		font-size: 0.8rem;
	}
	.share-example--three {
		grid-template-columns: 1fr;
		gap: 0.4rem;
		text-align: center;
	}
	.share-example--three > span[aria-hidden] {
		transform: rotate(90deg);
	}
	.plain-steps li {
		padding: 0.9rem 1rem;
		font-size: 0.98rem;
	}
}

.record-note {
	max-width: var(--reading-width);
	margin: 4rem 0 0 auto;
	padding: 2rem;
	border-top: 1px solid var(--warning);
	border-bottom: 1px solid var(--line);
	color: #c8cbc5;
}

.record-note__title {
	margin: 0 0 0.5rem;
	color: var(--warning);
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.record-note p:last-child {
	margin-bottom: 0;
}

.closing-statement {
	max-width: 900px;
	margin: 0 auto;
	font-size: clamp(2.5rem, 7vw, 7rem);
	letter-spacing: -0.04em;
}

.closing-mark {
	margin: 7rem 0 0;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-align: center;
	text-transform: uppercase;
}

.standard {
	border-top: 1px solid var(--line);
}

.standard__intro {
	max-width: 620px;
	margin: 0 0 4rem;
	color: var(--muted);
	font-size: 1rem;
}

.principles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.principles li {
	display: grid;
	grid-template-columns: 3.25rem 1fr;
	gap: 1rem;
	padding: 1.4rem 1rem 1.4rem 0;
	border-bottom: 1px solid var(--line);
}

.principles li:nth-child(odd) {
	border-right: 1px solid var(--line);
}

.principles li:nth-child(even) {
	padding-left: 1rem;
}

.principles span {
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.7rem;
}

.principles strong {
	font-family: var(--serif);
	font-size: clamp(1.15rem, 2vw, 1.65rem);
	font-weight: 400;
}

.finale {
	padding: clamp(6rem, 10vw, 10rem) 4vw clamp(5rem, 9vw, 8rem);
	border-top: 1px solid var(--line);
	background: var(--green-bright);
	color: var(--ink);
}

.the-token__inner {
	max-width: 1180px;
	margin: 0 auto;
}

.the-token__kicker,
.the-token__label,
.the-token__signoff {
	margin: 0;
	font-family: var(--mono);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.17em;
	text-transform: uppercase;
}

/* The contract address, for anyone who follows the header's "The Token"
   link to buy. It sits under the headline at the body copy's size and takes
   over the headline's gap to the copy. A click selects the whole address. */
.the-token__ca {
	margin: 0 0 clamp(3rem, 6vw, 5.5rem);
	font-family: var(--mono);
	font-size: clamp(1.05rem, 1.45vw, 1.3rem);
	font-weight: 400;
	overflow-wrap: anywhere;
}

.the-token__ca-address {
	font: inherit;
	user-select: all;
}

.the-token h2 {
	max-width: 15ch;
	margin: 1.2rem 0 clamp(1.25rem, 2.2vw, 2rem);
	font-family: var(--serif);
	/* A step below the Remedy's closing line just above it. */
	font-size: clamp(2.3rem, 4.8vw, 5.1rem);
	font-weight: 400;
	letter-spacing: -0.055em;
	line-height: 0.94;
}

.the-token__copy {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 4rem);
	border-top: 1px solid rgb(9 11 10 / 45%);
	border-bottom: 1px solid rgb(9 11 10 / 45%);
}

.the-token__copy p {
	margin: 0;
	padding: 1.8rem 0 2.1rem;
	font-family: var(--serif);
	font-size: clamp(1.05rem, 1.45vw, 1.3rem);
	line-height: 1.48;
}

.the-token__copy p + p {
	padding-left: clamp(1.2rem, 2vw, 2rem);
	border-left: 1px solid rgb(9 11 10 / 32%);
}

.the-token__copy strong {
	display: block;
	margin-bottom: 0.65rem;
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.the-token__flow {
	display: grid;
	/* One column per step and arrow, however many the markup has. */
	grid-auto-flow: column;
	gap: 0.8rem;
	align-items: center;
	justify-content: space-between;
	margin: clamp(3rem, 6vw, 5rem) 0;
	margin-top: 0;
	padding: 1.25rem 0;
	border-bottom: 1px solid rgb(9 11 10 / 45%);
	font-family: var(--mono);
	font-size: clamp(0.62rem, 0.9vw, 0.76rem);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.the-token__flow b {
	font-size: 1rem;
	font-weight: 400;
}

.the-token__definition {
	display: grid;
	grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.6fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
	max-width: 900px;
}

.the-token__definition p {
	margin: 0;
}

.the-token__definition > p:last-child {
	font-family: var(--serif);
	font-size: clamp(1.15rem, 1.8vw, 1.55rem);
	line-height: 1.45;
}

.the-token__closing {
	max-width: 15ch;
	margin: clamp(5rem, 10vw, 9rem) 0 0;
	font-family: var(--serif);
	font-size: clamp(2.4rem, 5.4vw, 5.5rem);
	letter-spacing: -0.045em;
	line-height: 1;
}

/* A closing stamp: centred between two short rules in the flow row's line
   colour, so it reads as the end of the page, not a stray label. */
.the-token__signoff {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: center;
	margin-top: clamp(4rem, 8vw, 7rem);
}

.the-token__signoff::before,
.the-token__signoff::after {
	content: "";
	width: 3rem;
	height: 1px;
	background: rgb(9 11 10 / 45%);
}

.site-footer {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 4rem;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 4rem 4vw;
	color: var(--muted);
	font-size: 0.72rem;
}

.site-footer strong {
	color: var(--paper);
	letter-spacing: 0.16em;
}

.site-footer p {
	max-width: 760px;
	margin: 0.4rem 0;
}

.site-footer__notes p + p {
	margin-top: 0.9rem;
}

:focus-visible {
	outline: 2px solid var(--green-bright);
	outline-offset: 4px;
}

@media (max-width: 900px) {
	.site-header {
		min-height: 64px;
	}

	.site-header nav a,
	.chapters-menu__toggle {
		font-size: 0.65rem;
	}

	.chapters-menu__list {
		max-height: calc(100vh - 80px);
	}

	.hero {
		/* minmax(0, ...) rather than 1fr, so no wide child can size the track past
		   the viewport and push the whole page into a horizontal scroll. */
		grid-template-columns: minmax(0, 1fr);
		min-height: auto;
		padding-top: 6rem;
	}

	/* One column here, but the art stays a background layer instead of dropping
	   below the copy. The picture no longer has a column of its own to sit in,
	   so the mask turns vertical: the top stays intact behind the headline and
	   the bottom dissolves into the page under the statement. */
	.generated-art--hero {
		padding-left: 0;
	}

	/* Held back so the copy on top of it stays readable. */
	.generated-art--hero img {
		opacity: 0.6;
		-webkit-mask-image: linear-gradient(
			to bottom,
			#000 0%,
			rgba(0, 0, 0, 0.55) 55%,
			transparent 100%
		);
		mask-image: linear-gradient(
			to bottom,
			#000 0%,
			rgba(0, 0, 0, 0.55) 55%,
			transparent 100%
		);
	}

	.chapter__header {
		grid-template-columns: 1fr;
	}

	.chapter__number {
		grid-row: auto;
	}

	.chapter__body--paired {
		grid-template-columns: 1fr;
	}

	.chapter__body--paired > .story-copy,
	.chapter__body--paired > .evidence-grid,
	.chapter__body--paired > .evidence-stack,
	.chapter__body--paired > .evidence-card,
	.chapter__body--paired > .record-note,
	.chapter__body--paired > .generated-art,
	.chapter__body--paired > .ledger-panel {
		grid-column: 1;
	}

	.chapter__body--paired > .evidence-grid,
	.chapter__body--paired > .evidence-stack,
	.chapter__body--paired > .evidence-card {
		margin-top: clamp(3rem, 8vw, 5rem);
	}

	.chapter__pair {
		grid-template-columns: 1fr;
	}

	.chapter__pair > .evidence-stack {
		margin-top: clamp(3rem, 8vw, 5rem);
	}

	.ledger-panel__heading {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.ledger-metrics {
		/* Back to explicit tracks that wrap into rows; the desktop rule flows
		   along the column axis to size itself to the figure count. */
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ledger-metric:nth-child(2) {
		border-right: 0;
	}

	.ledger-metric:nth-child(-n + 2) {
		border-bottom: 1px solid var(--line-soft);
	}

	.route-ledger {
		grid-template-columns: 1fr;
	}

	.route-ledger__note {
		grid-column: 1;
	}

	.site-footer {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.site-header {
		padding: 0 1rem;
	}

	.chapters-menu__list {
		right: 1rem;
	}

	.wordmark__mark {
		width: 28px;
		height: 28px;
	}

	.wordmark span:last-child {
		display: none;
	}

	.hero,
	.token-band,
	.chapter,
	.standard,
	.chapter-index,
	.site-footer {
		padding-right: 1.25rem;
		padding-left: 1.25rem;
	}

	.hero h1 {
		font-size: clamp(2.4rem, 14vw, 5rem);
	}

	.evidence-grid,
	.principles {
		grid-template-columns: 1fr;
	}

	.evidence-card--wide {
		grid-column: auto;
	}

	.principles li:nth-child(odd) {
		border-right: 0;
	}

	.principles li:nth-child(even) {
		padding-left: 0;
	}

	.generated-art--hero img {
		object-position: 72% center;
	}

	.generated-art--crossing img {
		min-height: 360px;
		object-position: 67% center;
	}

	.site-footer {
		gap: 2rem;
	}
}

#crossing {
	border-top: none;
}

/* Chapter 08 · The Method · reproducibility inputs */
.method-inputs {
	max-width: 1100px;
	margin-bottom: 1.5rem;
	padding: 0;
	background: var(--ink-soft);
}

.method-inputs .evidence-card__label {
	margin: 0;
	padding: 1rem 1.1rem;
	border-bottom: 1px solid var(--line);
	background: var(--ink);
}

.method-inputs__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--line-soft);
}

.method-inputs__row {
	display: grid;
	align-content: start;
	gap: 0.6rem;
	padding: 1rem 1.1rem;
	background: var(--stone);
	text-decoration: none;
	transition:
		background-color 0.18s ease,
		border-color 0.18s ease;
}

.method-inputs__row:nth-child(even) {
	background: var(--ink-soft);
}

.method-inputs__row:hover,
.method-inputs__row:focus-visible {
	background: rgb(155 190 135 / 9%);
}

.method-inputs__num {
	color: var(--warning);
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.method-inputs__row:nth-child(even) .method-inputs__num {
	color: var(--green-bright);
}

.method-inputs__copy {
	min-width: 0;
}

.method-inputs__copy strong {
	display: block;
	color: var(--paper);
	font-family: var(--serif);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.25;
}

.method-inputs__copy small {
	display: block;
	margin-top: 0.3rem;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.6rem;
	line-height: 1.45;
	letter-spacing: 0.06em;
}

/* Chapter 08 · The Method · inspectable calculation sources */
.method-source-accordions {
	max-width: 1100px;
	margin-bottom: 40px;
}

.method-source-details + .method-source-details {
	margin-top: -1px;
}

.method-source-details .story-details__body {
	max-width: none;
}

.method-source-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: end;
	margin-bottom: 0.8rem;
}

.method-deposit-tabs {
	flex: 0 0 auto;
	margin: 0;
}

.method-deposit-tabs button.is-active,
.method-deposit-tabs button[aria-pressed="true"] {
	border-color: var(--line);
	border-bottom-color: var(--ink);
	background: var(--ink);
	color: var(--green-bright);
}

.method-deposit-search {
	flex: 1 1 52ch;
	min-width: min(100%, 52ch);
	max-width: 48rem;
}

.method-deposit-search label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.method-deposit-search input {
	width: 100%;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--mono);
	font-size: 0.82rem;
	-webkit-appearance: none;
	appearance: none;
}

.method-deposit-search input:focus,
.method-deposit-search input:focus-visible {
	outline: none;
	border-color: var(--green-bright);
	box-shadow: inset 0 0 0 1px var(--green-bright);
}

.method-deposit-scroll {
	max-height: 31rem;
}

.method-deposit-table {
	min-width: 920px;
}

.method-deposit-table .method-address-link {
	font-family: var(--mono);
}

.method-deposit-table .precise-number {
	color: var(--paper);
}

.method-source-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	padding-top: 0.8rem;
}

.method-source-foot .source-link {
	margin: 0;
}

.method-load-more {
	padding: 0.55rem 0.8rem;
	border: 1px solid var(--line);
	background: var(--ink-soft);
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.method-load-more:hover,
.method-load-more:focus-visible {
	border-color: var(--green);
	outline: none;
}

.method-rate-explorer {
	border: 1px solid var(--line);
	background: var(--ink-soft);
}

.method-rate-explorer__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1.5rem;
	align-items: start;
	padding: clamp(1rem, 2.5vw, 1.4rem);
	border-bottom: 1px solid var(--line);
	background: var(--ink);
}

.method-rate-explorer__head .section-kicker {
	margin: 0 0 0.45rem;
}

.method-rate-explorer__head h4 {
	margin: 0;
	color: var(--paper);
	font-family: var(--serif);
	font-size: clamp(1.2rem, 2vw, 1.55rem);
	font-weight: 400;
	line-height: 1.25;
}

.method-rate-explorer__head p {
	max-width: 66ch;
	margin: 0.65rem 0 0;
	color: var(--muted);
	font-size: 0.86rem;
	line-height: 1.6;
}

.method-rate-extend {
	display: flex;
	gap: 0.55rem;
	align-items: center;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--line);
	background: var(--stone);
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.62rem;
	line-height: 1.4;
	cursor: pointer;
}

.method-rate-extend input {
	accent-color: var(--green-bright);
}

.method-rate-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	padding: 0.85rem 1rem 0;
}

.method-rate-presets button {
	padding: 0.38rem 0.65rem;
	border: 1px solid var(--line-soft);
	background: var(--stone);
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.61rem;
	letter-spacing: 0.06em;
	cursor: pointer;
}

.method-rate-presets button:hover,
.method-rate-presets button:focus-visible {
	border-color: var(--green);
	color: var(--green-bright);
	outline: none;
}

.method-rate-chart-wrap {
	position: relative;
	min-height: 250px;
	padding: 0.25rem 0.75rem 0;
}

.method-rate-chart {
	min-height: 250px;
}

.method-rate-cursor {
	position: absolute;
	z-index: 8;
	top: 0;
	width: 1px;
	height: 0;
	background: var(--green-bright);
	box-shadow: 0 0 0 1px rgb(193 221 168 / 8%);
	pointer-events: none;
	transform: translateX(-0.5px);
}

.method-rate-cursor[hidden] {
	display: none;
}

.method-rate-chart__fallback {
	position: absolute;
	inset: 0;
	display: grid;
	margin: 0;
	padding: 2rem;
	place-items: center;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.7rem;
	text-align: center;
}

.method-rate-chart__fallback[hidden] {
	display: none;
}

.method-rate-readout {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	border-block: 1px solid var(--line);
	background: var(--line-soft);
}

.method-rate-readout > div {
	min-width: 0;
	padding: 0.9rem 1rem;
	background: var(--ink);
}

.method-rate-readout > div > span {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.58rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.method-rate-readout strong {
	display: block;
	min-width: 0;
	color: var(--paper);
	font-family: var(--mono);
	font-size: clamp(0.82rem, 1.5vw, 1.05rem);
	font-weight: 500;
	overflow-wrap: anywhere;
}

.method-rate-readout > div:last-child strong {
	color: var(--green-bright);
	font-family: var(--serif);
	font-size: clamp(1.25rem, 2.3vw, 1.75rem);
	font-weight: 400;
}

.method-rate-readout .precise-number__exact {
	font-size: 0.76rem;
}

.method-rate-scrub {
	padding: 1rem;
}

.method-rate-scrub input[type="range"] {
	width: 100%;
	margin: 0;
	accent-color: var(--green-bright);
}

.method-rate-scrub__ends {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.35rem;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.58rem;
	line-height: 1.45;
}

.method-rate-scrub__ends span:last-child {
	text-align: right;
}

.method-rate-scrub__ends b,
.method-rate-scrub__ends small {
	display: block;
}

.method-rate-scrub__ends small {
	color: var(--line);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.method-rate-note {
	margin: 0;
	padding: 0.9rem 1rem;
	border-top: 1px solid var(--line-soft);
	color: var(--muted);
	font-size: 0.82rem;
	line-height: 1.6;
}

.method-rate-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1.5rem;
	padding: 0 0.75rem 0.9rem;
}

.method-rate-links .source-link {
	display: inline-block;
	margin: 0.6rem 0 0;
}

@media (max-width: 760px) {
	.method-source-toolbar {
		display: block;
	}

	.method-deposit-tabs {
		margin-bottom: 1rem;
	}

	.method-rate-explorer__head {
		grid-template-columns: 1fr;
	}

	.method-rate-extend {
		justify-self: start;
	}

	.method-rate-readout,
	.method-inputs__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.method-rate-readout,
	.method-inputs__list {
		grid-template-columns: 1fr;
	}

	.method-source-foot {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* Chapter 08 · The Method · contract-rate technical view
   Like the Chapter 02 reflection-bug deep dive, this disclosure contains a
   paired technical diagram and prose that need the full chapter measure rather
   than the shared 900px reading cap. */
.method-rate-technical .story-details__body {
	max-width: none;
}

/* Chapter 08 · The Method · conversion-rate map */
.method-rate-map {
	border: 1px solid var(--line);
	background: var(--ink-soft);
}

.method-rate-map__head {
	padding: 1rem 1.1rem;
	border-bottom: 1px solid var(--line);
	background: var(--ink);
}

.method-rate-map__head .section-kicker {
	margin: 0 0 0.45rem;
}

.method-rate-map__head h4 {
	margin: 0;
	color: var(--paper);
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.35;
}

.method-rate-map__group {
	padding: 1rem;
	border-bottom: 1px solid var(--line-soft);
}

.method-rate-map__label {
	display: block;
	margin-bottom: 0.75rem;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.method-rate-map__equation {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 0.55rem;
	align-items: center;
}

.method-rate-map__term {
	min-width: 0;
	padding: 0.7rem;
	border: 1px solid var(--line-soft);
	background: var(--stone);
}

.method-rate-map__term code,
.method-rate-map__term strong {
	display: block;
	overflow-wrap: anywhere;
	color: var(--paper);
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 700;
}

.method-rate-map__term span {
	display: block;
	margin-top: 0.35rem;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.58rem;
	line-height: 1.45;
}

.method-rate-map__term--result {
	border-color: rgb(155 190 135 / 45%);
}

.method-rate-map__term--result code,
.method-rate-map__term--result strong {
	color: var(--green-bright);
}

.method-rate-map__operator {
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 1rem;
}

.method-rate-map__note {
	margin: 0;
	padding: 0.8rem 1rem;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.62rem;
	line-height: 1.55;
}

#method-rate-data {
	border-block-start: 0;
}
.method-inline-equation {
	padding: 0.75rem 0.9rem;
	border-left: 2px solid var(--green);
	background: var(--ink-soft);
	overflow-x: auto;
}

.method-inline-equation code {
	white-space: nowrap;
	color: var(--green-bright);
	font-size: 0.82rem;
}

.method-rate-example {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 1.6rem 0;
	border: 1px solid var(--line);
	background: var(--line);
}

.method-rate-example > div {
	padding: 1rem;
	background: var(--ink-soft);
}

.method-rate-example > div > span {
	display: block;
	margin-bottom: 0.45rem;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.method-rate-example code {
	color: var(--paper);
	font-size: 0.8rem;
	white-space: nowrap;
}

.method-rate-example small {
	display: block;
	margin-top: 0.55rem;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.58rem;
	line-height: 1.45;
}

.method-finding {
	margin: 2rem 0;
	padding: 1.35rem 1.5rem;
	border-left: 2px solid var(--green);
	background: var(--ink-soft);
}

.method-finding .section-kicker {
	display: block;
	margin: 0 0 0.7rem;
	color: var(--green-bright);
}

.method-finding p {
	margin: 0;
}

.method-finding p + p {
	margin-top: 0.8rem;
}

.method-claim-example {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 1.8rem 0;
	border: 1px solid var(--line);
	background: var(--line);
}

.method-claim-example__case {
	min-width: 0;
	background: var(--ink-soft);
}

.method-claim-example__label {
	display: block;
	padding: 0.8rem 1rem;
	border-bottom: 1px solid var(--line-soft);
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.method-claim-example dl {
	margin: 0;
}

.method-claim-example dl > div {
	display: grid;
	grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.2fr);
	gap: 1rem;
	align-items: baseline;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--line-soft);
}

.method-claim-example dl > div:last-child {
	border-bottom: 0;
}

.method-claim-example dt {
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.04em;
}

.method-claim-example dd {
	min-width: 0;
	margin: 0;
	text-align: right;
}

.method-claim-example dd code {
	padding: 0;
	border: 0;
	background: none;
	color: var(--paper);
	font-size: 0.75rem;
	white-space: nowrap;
}

.method-claim-example__result {
	background: var(--ink);
}

.method-claim-example__result dt,
.method-claim-example__result dd code {
	color: var(--green-bright);
}

@media (max-width: 760px) {
	.method-rate-map__equation {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.45rem;
	}

	.method-rate-map__operator {
		text-align: center;
		transform: rotate(90deg);
	}

	.method-rate-example,
	.method-claim-example {
		grid-template-columns: 1fr;
	}

	.method-claim-example dl > div {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.method-claim-example dd {
		text-align: left;
	}
}

/* Self-contained method card — Chapter 02, the contract-derived split */
.method-card {
	border: 1px solid var(--line);
	background: var(--ink-soft);
}
.method-card__head {
	padding: 1.15rem clamp(1rem, 3vw, 1.6rem);
	border-bottom: 1px solid var(--line);
	background: var(--ink);
}
.method-card__kicker {
	display: block;
	font-family: var(--mono);
	font-size: 0.62rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--green-bright);
}
.method-card__head h4 {
	margin: 0.55rem 0 0;
	font-family: var(--serif);
	font-size: clamp(1.05rem, 2.4vw, 1.28rem);
	font-weight: 400;
	line-height: 1.32;
	color: var(--paper);
}
.method-card__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: method-step;
}
.method-card__steps > li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 1.1rem;
	padding: 1.2rem clamp(1rem, 3vw, 1.6rem);
	border-bottom: 1px solid var(--line-soft);
}
.method-card__steps > li:last-child {
	border-bottom: 0;
}
.method-card__steps > li::before {
	counter-increment: method-step;
	content: counter(method-step, decimal-leading-zero);
	font-family: var(--mono);
	font-size: 0.78rem;
	line-height: 1.55;
	letter-spacing: 0.08em;
	color: var(--green);
	padding-top: 0.2rem;
}
.method-card__body > strong {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--paper);
	font-size: 1rem;
	line-height: 1.4;
}
.method-card__body p {
	margin: 0;
	color: var(--muted);
	font-size: 0.95rem;
	line-height: 1.62;
}
.method-card__body p.method-card__math {
	margin-top: 0.75rem;
	padding: 0.55rem 0.8rem;
	background: var(--ink);
	border-left: 2px solid var(--line);
	font-family: var(--mono);
	font-size: 0.76rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--green-bright);
	overflow-x: auto;
}
.method-card__foot {
	margin: 0;
	padding: 1.2rem clamp(1rem, 3vw, 1.6rem);
	border-top: 1px solid var(--line);
	background: var(--ink);
	color: var(--muted);
	font-size: 0.92rem;
	line-height: 1.68;
}
.method-card__foot strong {
	color: var(--paper);
	font-weight: 400;
}
@media (max-width: 640px) {
	.method-card__steps > li {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.35rem;
	}
	.method-card__steps > li::before {
		padding-top: 0;
	}
}
.method-card__note {
	color: var(--muted);
	letter-spacing: 0.06em;
}

/* Per-address entitlement table — Chapter 02 */
.balance-table__metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: var(--line-soft);
	border: 1px solid var(--line);
	margin-bottom: 1.1rem;
}
.balance-table__metrics > div {
	padding: 0.9rem 1rem;
	background: var(--ink);
}
.balance-table__metrics > div > span {
	display: block;
	font-family: var(--mono);
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--muted);
}
.balance-table__metrics strong {
	display: block;
	margin-top: 0.4rem;
	font-family: var(--mono);
	font-size: 1.25rem;
	color: var(--paper);
}
.balance-table__metrics small {
	display: block;
	margin-top: 0.2rem;
	font-family: var(--mono);
	font-size: 0.68rem;
	color: var(--green);
}
.balance-table__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.9rem 1.2rem;
	margin-bottom: 0.9rem;
}
.balance-table__controls label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--mono);
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--muted);
}
.balance-table__search {
	flex: 1 1 52ch;
	min-width: min(100%, 52ch);
	max-width: 48rem;
}
.balance-table__sort {
	flex: 0 1 200px;
}
.balance-table__search input,
.balance-table__controls select {
	box-sizing: border-box;
	width: 100%;
	padding: 0.5rem 0.65rem;
	background: var(--ink);
	border: 1px solid var(--line);
	border-radius: 0;
	color: var(--paper);
	font-family: var(--mono);
	font-size: 0.82rem;
	-webkit-appearance: none;
	appearance: none;
}
.balance-table__controls select {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--green) 50%),
		linear-gradient(135deg, var(--green) 50%, transparent 50%);
	background-position:
		calc(100% - 15px) 55%,
		calc(100% - 10px) 55%;
	background-size:
		5px 5px,
		5px 5px;
	background-repeat: no-repeat;
	padding-right: 2rem;
}
.balance-table__search input:focus,
.balance-table__search input:focus-visible,
.balance-table__controls select:focus,
.balance-table__controls select:focus-visible {
	outline: none;
	border-color: var(--green-bright);
	box-shadow: inset 0 0 0 1px var(--green-bright);
}
.balance-table__count {
	flex: 1 1 100%;
	margin: 0;
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	color: var(--muted);
}
.balance-table__scroll {
	max-height: 23rem;
	overflow: auto;
	border: 1px solid var(--line);
	background: var(--ink);
	position: relative;
}
/* The vertical scrollbar lane sits beside the table, so the sticky header
   and footer stop short of the frame. Their heights come from the table
   scroll lane script: the lane carries their background and rules at those
   heights, and the track margins keep the thumb clear of them. The
   footer's rule is an inset shadow that stays put. The header's is a
   collapsed border that hangs half below the header and scrolls away with
   the rows, so the script gives two heights: down to the rule's bottom
   edge while the table sits at the top, and down to the header's own fill
   once it is marked is-scrolled. */
.balance-table__scroll {
	--lane-head: var(--table-head-ruled, 0px);
	--lane-head-rule: var(--line);
}
.balance-table__scroll.is-scrolled {
	--lane-head: var(--table-head, 0px);
	--lane-head-rule: var(--stone);
}
.balance-table__scroll::-webkit-scrollbar:vertical {
	background:
		linear-gradient(var(--stone) calc(100% - 1px), var(--lane-head-rule) 0) top
		/ 100% var(--lane-head) no-repeat,
		linear-gradient(var(--line) 1px, var(--stone) 0) bottom / 100%
		var(--table-foot, 0px) no-repeat;
}
.balance-table__scroll::-webkit-scrollbar-track:vertical {
	margin-top: var(--table-head-ruled, 0px);
	margin-bottom: var(--table-foot, 0px);
}
.balance-table__scroll:focus-visible {
	outline: 1px solid var(--green);
	outline-offset: -1px;
}
.balance-table__grid {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--mono);
	font-size: 0.74rem;
	white-space: nowrap;
}
/* The height puts the header's collapsed bottom rule, which is centred on
   the cell edge, on whole pixels (37-38px), so the scrollbar lane's copy of
   it can line up exactly. The content alone comes to about 37.3px. */
.balance-table__grid thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	height: 37.5px;
	padding: 0.65rem 0.8rem;
	background: var(--stone);
	border-bottom: 1px solid var(--line);
	text-align: left;
	font-weight: 400;
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--green-bright);
}
.balance-table__grid th.is-num,
.balance-table__grid td.is-num {
	text-align: right;
}
.balance-table__grid tbody td {
	padding: 0.5rem 0.8rem;
	border-bottom: 1px solid var(--line-soft);
	color: var(--muted);
}
/* Totals rows had no padding of their own, so they fell back to the browser's
   1px and every figure in the foot sat a dozen pixels right of the column it
   belongs to. Same gutter as the head and body: the numbers line up. */
.balance-table__grid tfoot th,
.balance-table__grid tfoot td {
	padding: 0.65rem 0.8rem;
	color: var(--paper);
}
.balance-table__grid tbody tr:hover td {
	background: var(--ink-soft);
}
.balance-table__grid tbody a {
	color: var(--paper);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
}
.balance-table__grid tbody a:hover {
	border-bottom-color: var(--green);
}
.balance-table__grid td.is-when {
	color: var(--muted);
}
.balance-table__grid td.is-short {
	color: #d98b7a;
}
.balance-table__grid td.is-over {
	color: var(--green);
}
.balance-table__grid td.is-num small {
	display: inline-block;
	min-width: 3.1rem;
	margin-left: 0.55rem;
	color: var(--muted);
	font-size: 0.66rem;
}
.balance-table__grid td.is-empty {
	white-space: normal;
	padding: 1.4rem 1rem;
	text-align: center;
	line-height: 1.6;
}
.balance-table__ast {
	color: var(--warning);
	text-decoration: none;
	padding-left: 1px;
}
.balance-table__more {
	position: sticky;
	bottom: 0;
	/* Whole pixels keep the top rule on a pixel row, matching its copy in the
	   scrollbar lane. The content alone is about 29.2px. */
	height: 29px;
	margin: 0;
	padding: 0.4rem 0.8rem;
	background: var(--stone);
	border-top: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--muted);
	text-align: center;
}
.balance-table__note {
	margin: 1rem 0 0;
	font-size: 0.88rem;
	line-height: 1.68;
	color: var(--muted);
}
.balance-table__note strong {
	color: var(--paper);
	font-weight: 400;
}
@media (max-width: 640px) {
	.balance-table__scroll {
		max-height: 23rem;
	}
	.balance-table__grid {
		font-size: 0.68rem;
	}
	.balance-table__grid tbody td {
		padding: 0.45rem 0.6rem;
	}
	.balance-table__grid thead th {
		padding: 0.55rem 0.6rem;
	}
	.balance-table__metrics > div:last-child {
		grid-column: 1 / -1;
	}
	.balance-table__search,
	.balance-table__sort {
		flex: 1 1 100%;
	}
}
/* The balance table carries six columns, so it uses the full column width
   rather than the 900px reading measure the other panels sit inside. */
#balance-check .story-details__body {
	max-width: none;
}

/* Shared sortable headers for static tables and the migration-deposit browser. */
.table-sortable-head {
	white-space: nowrap;
	cursor: pointer;
}

.table-sortable-head:hover {
	color: var(--paper);
}

.table-sortable-head::after {
	content: "\25B2\A\25BC";
	display: inline-block;
	margin-left: 0.42rem;
	opacity: 0.2;
	font-size: 0.42rem;
	line-height: 0.85;
	white-space: pre;
	vertical-align: 0.08em;
}

.table-sortable-head[aria-sort="ascending"]::after {
	content: "\25B2";
	opacity: 0.9;
	font-size: 0.5rem;
	line-height: 1;
}

.table-sortable-head[aria-sort="descending"]::after {
	content: "\25BC";
	opacity: 0.9;
	font-size: 0.5rem;
	line-height: 1;
}

.table-sortable-head[aria-sort]:not([aria-sort="none"]) {
	color: var(--paper);
}

/* Sortable column headers on the cut table */
.balance-table__grid thead th[data-sort] {
	white-space: nowrap;
}
.balance-table__grid thead th[data-sort] button {
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: inherit;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.balance-table__grid thead th[data-sort] button:hover {
	color: var(--paper);
}
.balance-table__grid thead th[data-sort] button:focus-visible {
	outline: 1px dotted var(--green);
	outline-offset: 2px;
}
.balance-table__grid thead th[data-sort] button::after {
	content: "\25B2\A\25BC";
	display: inline-block;
	margin-left: 0.42rem;
	opacity: 0.2;
	font-size: 0.42rem;
	line-height: 1.05;
	white-space: pre;
	vertical-align: 0.08em;
}
.balance-table__grid thead th[aria-sort="ascending"] button::after {
	content: "\25B2";
	opacity: 0.9;
	font-size: 0.5rem;
	line-height: 1;
}
.balance-table__grid thead th[aria-sort="descending"] button::after {
	content: "\25BC";
	opacity: 0.9;
	font-size: 0.5rem;
	line-height: 1;
}
.balance-table__grid thead th[aria-sort]:not([aria-sort="none"]) button {
	color: var(--paper);
}

/* Info marker and hover explanation on the cut table's column headers */
.balance-table {
	position: relative;
}
.balance-table__info {
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-left: 0.3rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	opacity: 0.55;
	font-size: 0.82em;
	line-height: 0.8em;
	text-align: center;
	text-transform: none;
	vertical-align: super;
}
.balance-table__grid thead th[data-sort]:hover .balance-table__info,
.balance-table__grid
	thead
	th[data-sort]
	button:focus-visible
	.balance-table__info {
	opacity: 1;
	color: var(--green-bright);
}
.balance-table__tip {
	position: absolute;
	z-index: 5;
	max-width: min(30rem, 100%);
	padding: 0.8rem 0.95rem;
	background: var(--stone);
	border: 1px solid var(--green);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
	font-family: var(--serif);
	font-size: 0.85rem;
	line-height: 1.55;
	letter-spacing: normal;
	text-transform: none;
	white-space: normal;
	color: var(--paper);
	pointer-events: none;
}

/* Chapters 10 and 11 carry no evidence column, so the prose runs on its own.
   Text keeps a reading measure while the method card and the cut table use
   the full chapter width. */
.story-prose--solo > p,
.story-prose--solo > h3,
.story-prose--solo > ol,
.story-prose--solo > ul {
	/*max-width: 68ch;*/
}

/* Inline code. Contract identifiers, function names and raw values that
   appear inside running text. <pre> blocks, the calldata hex string and the
   contract addresses keep the rules they already have. */
:not(pre)
> code:not(.calldata-hex):not(.contract__address):not(.the-token__ca-address) {
	padding: 0.08em 0.36em;
	border: 1px solid var(--line-soft);
	border-radius: 2px;
	background: var(--ink);
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.86em;
	overflow-wrap: break-word;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
/* Inside the evidence cards the surrounding label is already monospace and
   uppercased, so the identifier only needs its own casing back. */
.supply-record code {
	padding: 0;
	border: 0;
	background: none;
	font-size: 1em;
	text-transform: none;
}
/* The recipient column is a list of addresses, so it reads in the same
   monospace as every other address on the page rather than the body serif. */
.ledger-batch-table th[scope="row"] {
	font-family: var(--mono);
	font-size: 0.78rem;
	font-weight: 400;
}
/* The four-column metrics strip needs the full measure, so it drops below the
   floated evidence column instead of wrapping beside it in the text width. */
.story-prose > .ledger-metrics {
	clear: both;
}

/* The two things a fair adjustment had to hold apart, set side by side in
   their own panel rather than as three more paragraphs in the run of prose.
   It clears the floated evidence for the same reason the metrics strip does:
   it needs the full measure. */
.separation {
	clear: both;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: clamp(2rem, 2vw, 3.5rem) 0;
	border: 1px solid var(--line);
}

.separation__item {
	padding: clamp(1.4rem, 2.5vw, 2rem);
}

.separation__item + .separation__item {
	border-left: 1px solid var(--line);
}

.separation__num {
	margin: 0 0 1.1rem;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.17em;
}

.separation__item p:last-child {
	margin: 0;
	color: var(--paper);
	font-family: var(--serif);
	font-size: clamp(1.15rem, 1.7vw, 1.5rem);
	line-height: 1.3;
}

/* The lines that open and close the panel are set at the larger narrative
   scale used in The Crossing rather than the smaller prose around them. The
   closing line also takes the green; the lead-in keeps the prose colour. */
.separation-lead,
.separation-note {
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	line-height: 1.65;
}

.separation-note {
	color: var(--green-bright);
}

/* Declared here rather than in the main 900px block above, which this rule set
   would otherwise override on source order alone. */
@media (max-width: 900px) {
	.separation {
		grid-template-columns: 1fr;
	}

	.separation__item + .separation__item {
		border-top: 1px solid var(--line);
		border-left: 0;
	}
}

/* The illustration reads label, then the working, then the value it comes out
   at, so the large figure needs its own gap when it follows the em rather
   than preceding it. */
.share-example em + strong {
	margin-top: 0.35rem;
}

.green {
	color: var(--green-bright);
}

/* A green line takes its emphasis with it. Without this, `.story-prose strong`
   pulls the bold text back to paper and only the unbolded words stay green. */
.green strong {
	color: inherit;
}

/* Chapter 02 · The Moving Scale */
/* Worked example: one untouched wallet's balance across the migration.
   Multiples come from research/data/supply-multiple-checkpoints.json,
   rebased to the migration-open checkpoint (5.5×). */
.moving-example {
	width: 100%;
	border-top: 1px solid var(--line);
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.moving-example caption {
	padding: 0.9rem 1rem;
	color: var(--muted);
	font-size: 0.85rem;
	line-height: 1.5;
	text-align: left;
}

.moving-example th,
.moving-example td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--line-soft);
	text-align: left;
	vertical-align: baseline;
}

.moving-example thead th {
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.moving-example tbody th {
	color: var(--paper);
	font-family: var(--serif);
	font-size: 0.95rem;
	font-weight: 400;
}

.moving-example tbody th span {
	display: block;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.66rem;
}

.moving-example td {
	color: var(--paper);
	font-family: var(--mono);
	font-size: 0.8rem;
	text-align: right;
	white-space: nowrap;
}

.moving-example td:last-child {
	color: var(--green-bright);
}

.moving-example tfoot th,
.moving-example tfoot td {
	border-bottom: 0;
	color: var(--green);
	font-family: var(--mono);
	font-size: 0.66rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.moving-example tfoot code {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	letter-spacing: 0;
	text-transform: none;
}

.moving-example tfoot sup {
	font-size: 0.75em;
	line-height: 0;
}

.moving-example__note {
	margin: 0;
	padding: 0.9rem 1rem;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.85rem;
	line-height: 1.5;
}

.moving-share {
	margin-top: 2.25rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--line);
	background: var(--ink-soft);
}

.moving-share__head {
	display: flex;
	gap: 2rem;
	align-items: start;
	justify-content: space-between;
	margin-bottom: 1.75rem;
}

.moving-share__head .section-kicker {
	margin-bottom: 0.55rem;
}

.moving-share__lead,
.moving-share__note {
	margin: 0;
	color: var(--muted);
	font-size: 0.9rem;
}

.moving-share__multiple {
	flex: 0 0 auto;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: clamp(1.2rem, 2.5vw, 1.8rem);
}

.moving-share__comparison {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 2.25rem);
	align-items: center;
}

.moving-share__state {
	border: 1px solid var(--line-soft);
	background: var(--stone);
}

.moving-share__state > span {
	display: block;
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid var(--line-soft);
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.moving-share__state dl {
	margin: 0;
}

.moving-share__state dl > div {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	justify-content: space-between;
	padding: 0.8rem 0.9rem;
	border-bottom: 1px solid var(--line-soft);
}

.moving-share__state dl > div:last-child {
	border-bottom: 0;
}

.moving-share__state dt {
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.65rem;
}

.moving-share__state dd {
	margin: 0;
	color: var(--paper);
	font-size: 1rem;
}

.moving-share__arrow,
.moving-window__arrow {
	color: var(--green-bright);
	font-size: 1.5rem;
}

.moving-share__slider-label {
	display: block;
	margin-top: 1.5rem;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.moving-share__slider {
	width: 100%;
	margin: 0.7rem 0 0;
	accent-color: var(--green-bright);
}

.moving-share__scale {
	display: flex;
	justify-content: space-between;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.65rem;
}

.moving-share__note {
	margin-top: 1.2rem;
}

.moving-reversal {
	max-width: 880px;
	margin-top: 2rem;
}

.moving-after-example,
.moving-consequence,
.moving-close {
	margin-top: 0;
}

/* Desktop gets its spacing here for free: the tall floated evidence card sets
   the height of the .story-pair above, so this block already clears it. Once
   the pair stacks into a column the card ends the pair and this would butt
   straight against it, so restore a gap matching the stacked pair's own. */
@media (max-width: 900px) {
	.moving-close {
		margin-top: 2.5rem;
	}
}

.moving-window {
	padding: 1.25rem;
	border: 1px solid var(--line);
	background: var(--ink-soft);
}

.moving-window .section-kicker {
	margin-bottom: 1rem;
}

.moving-window__points {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 0.8rem;
	align-items: center;
}

.moving-window__points > div {
	min-width: 0;
}

.moving-window__points span,
.moving-window__points small {
	display: block;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.62rem;
	line-height: 1.5;
}

.moving-window__points strong {
	display: block;
	margin: 0.15rem 0;
	color: var(--paper);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 400;
	line-height: 1.1;
}

.moving-window > p:last-child {
	margin: 1rem 0 0;
	color: var(--muted);
	font-size: 0.85rem;
}

.moving-deep-dive {
	margin-top: 2rem;
}

.moving-deep-dive .story-details__body {
	max-width: none;
}

/* The two cards stack down the floated right column, the way evidence does in
   the rest of the chapter, rather than sitting side by side above the prose. */
.moving-deep-dive__stack {
	display: grid;
	gap: 1rem;
}

.moving-code-card {
	min-width: 0;
	padding: 1.25rem;
	border: 1px solid var(--line);
	background: var(--stone);
}

.moving-code-card .section-kicker {
	margin-bottom: 1rem;
}

/* Built on the same grammar as the contract record card: hairline-separated
   rows, a label on its own line and the expression under it in green mono,
   rather than one undifferentiated block of preformatted text. */
.code-record {
	margin: 0;
}

.code-record > div {
	padding: 0.95rem 0;
	border-top: 1px solid var(--line);
}

.code-record > div:first-child {
	padding-top: 0;
	border-top: 0;
}

.code-record > div:last-child {
	padding-bottom: 0;
}

.code-record dt {
	margin-bottom: 0.6rem;
	color: var(--paper);
	font-family: var(--serif);
	font-size: 1rem;
	line-height: 1.3;
}

.code-record dd {
	margin: 0;
	color: var(--green-bright);
}

/* Each expression is its own line, and a long one wraps instead of forcing the
   card to scroll sideways. */
.moving-code-card .code-record dd code {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--mono);
	font-size: 0.72rem;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.code-record__note {
	display: block;
	margin-top: 0.35rem;
	color: var(--muted);
	font-family: var(--serif);
	font-size: 0.9rem;
	line-height: 1.5;
}

/* Where to find the function in the linked source, set apart from the name so
   it reads as a reference rather than part of the signature. */
.code-record__line {
	margin-left: 0.6rem;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The left column of the source card is a function name, so it stays in
   monospace where the other card uses a serif label. */
.moving-code-card .code-record--fn dt code {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--mono);
	font-size: 0.78rem;
}

@media (max-width: 760px) {
	.moving-share__head {
		display: block;
	}

	.moving-share__multiple {
		display: block;
		margin-top: 1rem;
	}

	/* The containers stack; only the arrows between them turn to point down.
	   They were in this selector list too, which rotated each whole block 90°
	   and pushed the page into a horizontal scroll. */
	.moving-share__comparison,
	.moving-window__points {
		grid-template-columns: 1fr;
	}

	.moving-share__arrow,
	.moving-window__arrow {
		transform: rotate(90deg);
		justify-self: center;
	}
}

/* ---------------------------------------------------------------------------
   Source viewer

   A reusable modal for showing a file from the repository in place. Any link
   with data-source-modal opens here; data-modal-title and data-modal-language
   set the heading and the Prism grammar. Token colours are the page palette
   rather than a Prism theme, so the code reads like the rest of the site.
   --------------------------------------------------------------------------- */
.source-modal {
	width: min(1100px, 92vw);
	max-width: none;
	height: min(82vh, 900px);
	padding: 0;
	border: 1px solid var(--line);
	background: var(--ink-soft);
	color: var(--paper);
}

.source-modal::backdrop {
	background: rgba(9, 11, 10, 0.82);
}

.source-modal__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem clamp(1rem, 3vw, 1.6rem);
	border-bottom: 1px solid var(--line);
	background: var(--ink);
}

.source-modal__head .section-kicker {
	margin: 0;
}

.source-modal__path {
	margin: 0.35rem 0 0;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.7rem;
	word-break: break-all;
}

.source-modal__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.source-modal__raw,
.source-modal__close {
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--line);
	background: none;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		border-color 120ms ease,
		color 120ms ease;
}

/* Square, so the glyph sits centred rather than inheriting the word-sized
   padding the raw link uses. */
.source-modal__close {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	font-size: 0.85rem;
	line-height: 1;
}

.source-modal__raw:hover,
.source-modal__close:hover,
.source-modal__raw:focus-visible,
.source-modal__close:focus-visible {
	border-color: var(--green);
	color: var(--paper);
}

/* The file is long, so the panel scrolls rather than the page behind it. */
.source-modal__body {
	height: calc(100% - 5.5rem);
	overflow: auto;
	background: var(--ink);
}

.source-modal__pre {
	margin: 0;
	padding: clamp(1rem, 3vw, 1.6rem);
}

.source-modal__pre code.source-modal__code {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	color: var(--paper);
	font-family: var(--mono);
	font-size: 0.72rem;
	line-height: 1.7;
	white-space: pre;
	tab-size: 4;
}

/* Prism tokens, mapped onto the page palette. */
.source-modal__code .token.comment,
.source-modal__code .token.prolog {
	color: #5f6b5c;
	font-style: italic;
}

.source-modal__code .token.keyword,
.source-modal__code .token.boolean,
.source-modal__code .token.builtin {
	color: var(--green-bright);
}

.source-modal__code .token.string,
.source-modal__code .token.char {
	color: var(--warning);
}

.source-modal__code .token.number {
	color: #d7cfa4;
}

.source-modal__code .token.function,
.source-modal__code .token.class-name {
	color: var(--green);
}

.source-modal__code .token.operator,
.source-modal__code .token.punctuation {
	color: var(--muted);
}

@media (max-width: 640px) {
	.source-modal {
		width: 96vw;
		height: 88vh;
	}

	.source-modal__actions {
		gap: 0.6rem;
	}

	.source-modal__pre code.source-modal__code {
		font-size: 0.66rem;
	}
}

/* ---------------------------------------------------------------------------
   Compact interactive

   The share demo also runs inside a .story-pair, where it has the same 46%
   column the evidence cards get rather than the full measure. Everything here
   is the wide layout tightened to fit that column: two figures per row in each
   state, smaller gaps, shorter lines.
   --------------------------------------------------------------------------- */
.moving-share--compact {
	min-width: 0;
	padding: 1.15rem;
}

/* The kicker and the readout shared a row, which squeezed the kicker onto two
   lines. The kicker gets the full width and the readout drops to the second
   row beside the short lead line, where there is room for it. */
.moving-share--compact .moving-share__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	column-gap: 0.75rem;
	row-gap: 0.3rem;
	margin-bottom: 0.9rem;
}

/* Lifts the kicker and the lead out of their wrapper so both are grid items
   alongside the readout. */
.moving-share--compact .moving-share__head > div {
	display: contents;
}

.moving-share--compact .moving-share__head .section-kicker {
	grid-column: 1 / -1;
	margin-bottom: 0;
}

.moving-share--compact .moving-share__lead {
	grid-column: 1;
	margin-top: 0;
}

.moving-share--compact .moving-share__multiple {
	grid-column: 2;
	grid-row: 2;
	font-size: 1.15rem;
	white-space: nowrap;
}

.moving-share--compact .moving-share__comparison {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 0.5rem;
}

.moving-share--compact .moving-share__state {
	min-width: 0;
}

/* The base state already reads one figure per row, label left and value right
   under a hairline. At this width that is what the column wants, so the only
   changes are tighter padding and type — two figures per row forced both the
   labels and the values to wrap. */
.moving-share--compact .moving-share__state > span {
	padding: 0.55rem 0.7rem;
}

.moving-share--compact .moving-share__state dl > div {
	gap: 0.6rem;
	padding: 0.55rem 0.7rem;
}

.moving-share--compact .moving-share__state dt {
	font-size: 0.6rem;
}

.moving-share--compact .moving-share__state dd {
	font-size: 0.85rem;
	overflow-wrap: anywhere;
}

.moving-share--compact .moving-share__slider-label {
	margin-top: 0.9rem;
}

.moving-share--compact .moving-share__note {
	margin-bottom: 0;
}

/* Below the pair's own breakpoint the widget has the full width back, so the
   two states stack and the arrow turns to point down. */
@media (max-width: 900px) {
	.moving-share--compact .moving-share__comparison {
		grid-template-columns: 1fr;
	}

	.moving-share--compact .moving-share__arrow {
		transform: rotate(90deg);
		justify-self: center;
	}
}

/* Chapter 03 · comparison of the moving V1 balance scale and the published
   timing-bracket reductions. Framed like the Result comparison panels: a
   bordered card sitting in the story column, with the header divided from the
   plot, rather than the full-bleed band this section used to break out into. */
.bracket-scale-visual {
	margin-top: 1.55rem;
	margin-bottom: 1.55rem;
	padding-bottom: 25px;
	border: 1px solid var(--line-soft);
	background: var(--ink-soft);
	color: var(--muted);
	clear: both;
}

.bracket-scale-visual__inner {
	width: 100%;
	max-width: none;
	margin: 0 auto;
}

.bracket-scale-visual__head {
	padding: clamp(1.15rem, 2.4vw, 1.6rem);
	padding-bottom: 0;
}

.bracket-scale-visual__head .section-kicker {
	margin-bottom: 0.45rem;
}

.bracket-scale-visual__head h3 {
	margin: 0;
	color: var(--paper);
	font-family: var(--serif);
	font-size: clamp(1.7rem, 2.8vw, 2.6rem);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.08;
}

.bracket-scale-visual__lede {
	max-width: 62rem;
	margin: 0.45rem 0 0;
	color: var(--muted);
	font-size: 0.88rem;
	line-height: 1.55;
}

.bracket-brush {
	position: relative;
	padding: 0.45rem 0.35rem 0;
}

.bracket-scale-chart {
	width: 100%;
	min-height: 286px;
}

.bracket-scale-chart__fallback {
	display: grid;
	min-height: 260px;
	margin: 0;
	place-items: center;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.72rem;
	text-align: center;
}

.bracket-scale-chart .apexcharts-canvas,
.bracket-scale-chart .apexcharts-svg {
	background: transparent !important;
}

.bracket-scale-chart .apexcharts-tooltip,
.bracket-scale-chart .apexcharts-xaxistooltip {
	border: 1px solid var(--line) !important;
	background: var(--ink-soft) !important;
	box-shadow: none !important;
	color: var(--paper) !important;
}

.bracket-scale-chart .apexcharts-tooltip-title {
	border-bottom: 1px solid var(--line) !important;
	background: var(--stone) !important;
}

@media (max-width: 800px) {
	.bracket-scale-chart {
		min-height: 260px;
	}
}

/* Chapter 03 · The Brackets
   Use the site's standard story-pair float: one continuous narrative column
   on the left, with the full evidence stack at the same 46% width as the
   other chapter boxes on the right. */
.brackets-main-pair > .brackets-boxes {
	margin-top: 0.4rem;
}

.brackets-boxes.evidence-stack {
	gap: 1.5rem;
}

.brackets-record .bracket-schedule {
	border: 1px solid var(--line-soft);
	background: var(--ink);
}

.bracket-schedule__head {
	display: grid;
	grid-template-columns: minmax(7.5rem, 0.9fr) minmax(0, 1.6fr) 6.6rem;
	gap: 0.9rem;
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.bracket-schedule__head span:last-child {
	grid-column: 2 / 4;
}

.bracket-schedule__row {
	display: grid;
	grid-template-columns: minmax(7.5rem, 0.9fr) minmax(0, 1.6fr) 6.6rem;
	gap: 0.9rem;
	align-items: center;
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--line-soft);
}

.bracket-schedule__row:last-child {
	border-bottom: 0;
}

.bracket-schedule__time {
	color: var(--paper);
	font-family: var(--mono);
	font-size: 0.7rem;
	line-height: 1.35;
}

.bracket-schedule__bar {
	display: block;
	height: 0.45rem;
	background: var(--line-soft);
	overflow: hidden;
}

.bracket-schedule__bar i {
	display: block;
	width: var(--payout);
	height: 100%;
	background: var(--green-bright);
}

.bracket-schedule__amount {
	display: grid;
	gap: 0.15rem;
	text-align: right;
}

.bracket-schedule__amount strong {
	color: var(--paper);
	font-family: var(--serif);
	font-size: 1.45rem;
	font-weight: 400;
	line-height: 1;
}

.bracket-schedule__amount small {
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.55rem;
	line-height: 1.3;
	text-transform: uppercase;
}

.brackets-chapter .story-section[aria-labelledby="on-time-distribution-title"] {
	margin-top: clamp(2.25rem, 4vw, 4rem);
}

.brackets-cohort {
	margin-top: 2rem;
}

.brackets-cohort .ledger-metric:nth-child(2) small {
	overflow-wrap: anywhere;
	text-transform: none;
	letter-spacing: 0.04em;
}

.brackets-verify {
	max-width: 960px;
	margin-top: 0;
}
.brackets-verify .story-details__body {
	max-width: 900px;
}

/* No rule of its own: the disclosure above closes with the bottom border of
   .story-details, and a second line here read as a stray divider. */
.brackets-close {
	margin-top: clamp(2rem, 3vw, 3rem);
}

/* The question a chapter closes on, set larger than the body it follows.
   .brackets-close earns it by position; elsewhere it is marked explicitly. */
.brackets-close p:last-child,
p.closing-question {
	margin-bottom: 0;
	font-size: clamp(1.35rem, 2.2vw, 1.85rem);
}

@media (max-width: 720px) {
	.bracket-schedule__head {
		grid-template-columns: minmax(6rem, 1fr) minmax(0, 1.2fr) 5.4rem;
		gap: 0.65rem;
		padding-inline: 0.75rem;
	}

	.bracket-schedule__row {
		grid-template-columns: minmax(6rem, 1fr) minmax(0, 1.2fr) 5.4rem;
		gap: 0.65rem;
		padding-inline: 0.75rem;
	}

	.bracket-schedule__time {
		font-size: 0.64rem;
	}

	.bracket-schedule__amount strong {
		font-size: 1.2rem;
	}
}

@media (max-width: 480px) {
	.bracket-schedule__head {
		display: none;
	}

	.bracket-schedule__row {
		grid-template-columns: minmax(6.8rem, 1fr) minmax(0, 1fr) 4.8rem;
		padding: 0.8rem 0.65rem;
	}

	.bracket-schedule__bar {
		height: 0.35rem;
	}

	.bracket-schedule__amount small {
		font-size: 0.5rem;
	}
}

/* Chapter 03 · self-contained cohort/payout verifier */
#cohort-audit-check .story-details__body {
	max-width: none;
}

.cohort-audit-body {
	padding-top: 0.5rem;
}

.audit-method,
.audit-records {
	padding: clamp(1.25rem, 3vw, 2rem) 0;
}

.audit-method__head,
.audit-records__head {
	max-width: 780px;
	margin-bottom: 1.75rem;
}

.audit-method__head .section-kicker,
.audit-records__head .section-kicker {
	margin-bottom: 0.65rem;
}

.audit-method__head h4,
.audit-records__head h4 {
	margin: 0;
	color: var(--paper);
	font-size: clamp(1.55rem, 2.8vw, 2.25rem);
	font-weight: 400;
	line-height: 1.15;
}

.audit-method__head > p:last-child,
.audit-records__head > p:last-child {
	margin: 0.9rem 0 0;
	color: var(--muted);
	font-size: 0.95rem;
	line-height: 1.65;
}

.audit-steps {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.audit-steps > li {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: 1.25rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--line-soft);
}

.audit-step__num {
	padding-top: 0.18rem;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.audit-step__body {
	min-width: 0;
	max-width: 980px;
}

.audit-step__body h5 {
	margin: 0 0 0.65rem;
	color: var(--paper);
	font-size: 1.2rem;
	font-weight: 400;
}

.audit-step__body p {
	max-width: 78ch;
	margin: 0.55rem 0 0;
	color: var(--muted);
	font-size: 0.92rem;
	line-height: 1.68;
}

.audit-step__body strong {
	color: var(--paper);
	font-weight: 600;
}

.audit-facts {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(12rem, 0.8fr);
	gap: 1px;
	margin: 1rem 0 0;
	background: var(--line-soft);
	border: 1px solid var(--line);
}

.audit-facts > div {
	min-width: 0;
	padding: 0.85rem 1rem;
	background: var(--ink);
}

.audit-facts dt {
	margin-bottom: 0.3rem;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.audit-facts dd {
	min-width: 0;
	margin: 0;
	color: var(--paper);
	font-family: var(--mono);
	font-size: 0.72rem;
}

.audit-facts code {
	overflow-wrap: anywhere;
}

.audit-facts a,
.audit-primary-source a {
	color: var(--green-bright);
	text-underline-offset: 0.28em;
}

.audit-primary-source {
	font-family: var(--mono);
	font-size: 0.68rem !important;
}

/* `.audit-step__body p` caps the measure at 78ch, but ch is relative to the
   element's own font size: at this smaller size the same 78ch came out ~510px
   instead of ~705px and wrapped the links early. A row of links is not running
   prose, so it takes the full column. Selector matches that rule's specificity
   and follows it in source order. */
.audit-step__body p.audit-primary-source {
	max-width: none;
}

/* Several links share this line, so each one wraps as a whole rather than
   breaking mid-label and leaving a stray word on the next line. The gap keeps
   them apart now that they no longer rely on the whitespace between them. */
.audit-code-sources {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
}

.audit-code-sources a {
	white-space: nowrap;
}

.audit-route-wrap {
	margin-top: 1rem;
	overflow-x: auto;
	border: 1px solid var(--line);
	background: var(--ink);
}

.audit-route-table {
	width: 100%;
	/* The cells are nowrap, so the table can never squash and the floor only
	   needs to be its own natural width. A fixed 900px sat 10px wider than the
	   wrapper's content box, which left a scrollbar showing at every width. */
	min-width: max-content;
	border-collapse: collapse;
	font-family: var(--mono);
	font-size: 0.68rem;
	white-space: nowrap;
}

.audit-route-table th,
.audit-route-table td {
	padding: 0.65rem 0.75rem;
	border-bottom: 1px solid var(--line-soft);
	text-align: left;
	font-weight: 400;
}

.audit-route-table thead th {
	background: var(--stone);
	color: var(--green-bright);
	font-size: 0.57rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.audit-route-table tbody th {
	color: var(--paper);
}

.audit-route-table tbody tr:last-child th,
.audit-route-table tbody tr:last-child td {
	border-bottom: 0;
}

.audit-route-table .is-num {
	text-align: right;
}

.audit-route-table code {
	color: var(--muted);
}

.audit-route-table a {
	text-decoration: none;
}

.audit-route-table a:hover code {
	color: var(--paper);
}

.audit-check-status {
	max-width: 78ch;
	margin-top: 0.8rem !important;
	padding-left: 0.85rem;
	border-left: 2px solid var(--line);
	font-family: var(--mono);
	font-size: 0.7rem !important;
}

.audit-check-status.is-ok {
	border-left-color: var(--green);
	color: var(--green-bright);
}

.audit-check-status.is-warning {
	border-left-color: var(--warning);
	color: var(--warning);
}

.audit-reconciliation {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 1.5rem 0 0;
}

.audit-reconciliation strong {
	overflow-wrap: anywhere;
}

.audit-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--line);
}

.audit-tabs button {
	margin: 0 0 -1px;
	padding: 0.75rem 1rem;
	border: 1px solid transparent;
	border-bottom-color: var(--line);
	background: none;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.audit-tabs button:hover {
	color: var(--paper);
}

.audit-tabs button[aria-selected="true"] {
	border-color: var(--line);
	border-bottom-color: var(--ink);
	background: var(--ink);
	color: var(--green-bright);
}

.audit-tabs button:focus-visible {
	outline: 1px solid var(--green);
	outline-offset: -3px;
}

.cohort-audit {
	position: relative;
}

.audit-table-controls {
	margin-bottom: 0.8rem;
}

.audit-table-scroll {
	max-height: 30rem;
}

/* The purchase history is a reference list rather than the spine of the
   section, so its frame opens at half the height of the audit tables and the
   rest of the 31 rows come in by scrolling. */
.purchase-table-scroll {
	max-height: 23.5rem;
}

.purchase-table-scroll {
	isolation: isolate;
}

/* Chapter 04 purchase-scale explainer. Clicking a scale value replaces the
   table with the calculation behind that figure; the close button, Escape or a
   click outside brings the rows back. */
.purchase-scale-value:focus-visible,
.purchase-scale-popover__close:focus-visible,
.purchase-scale-popover__proof-toggle:focus-visible {
	outline: 1px solid var(--green);
	outline-offset: 2px;
}

.purchase-scale-value {
	padding: 0;
	border: 0;
	border-bottom: 1px dotted rgb(193 221 168 / 55%);
	background: none;
	color: var(--paper);
	font: inherit;
	cursor: pointer;
}

.purchase-scale-value:hover,
.purchase-scale-value:focus-visible,
.purchase-scale-value[aria-expanded="true"] {
	border-bottom-color: var(--green-bright);
	color: var(--green-bright);
}

/* The explanation takes the table's own rectangle rather than floating beside
   it: opening one swaps the rows for the calculation behind them, which needs
   no measuring against the column and cannot land off the edge of anything. It
   scrolls inside that frame when the contract proof is open. */
.purchase-scale-popover {
	position: absolute;
	inset: 0;
	z-index: 18;
	overflow: auto;
	padding: 1.05rem 1.1rem 1.15rem;
	border: 1px solid var(--green-bright);
	background: var(--stone);
	color: var(--paper);
	white-space: normal;
}

.purchase-scale-popover[hidden] {
	display: none;
}

.purchase-scale-popover__close {
	position: absolute;
	top: 0.5rem;
	right: 0.55rem;
	display: grid;
	width: 2rem;
	height: 2rem;
	padding: 0;
	place-items: center;
	border: 0;
	background: none;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
}

.purchase-scale-popover__close:hover {
	color: var(--paper);
}

.purchase-scale-popover__content {
	min-width: 0;
	padding-right: 1.7rem;
}

.purchase-scale-popover__kicker {
	margin: 0 0 0.42rem;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.purchase-scale-popover__title {
	margin: 0;
	color: var(--paper);
	font-family: var(--serif);
	font-size: clamp(1.15rem, 2vw, 1.55rem);
	font-weight: 400;
	line-height: 1.2;
}

.purchase-scale-popover__intro,
.purchase-scale-popover__note {
	margin: 0.65rem 0 0;
	color: var(--muted);
	font-family: var(--serif);
	font-size: 0.86rem;
	line-height: 1.58;
}

.purchase-scale-popover__equation,
.purchase-scale-popover__proof-equation {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.55rem;
	align-items: baseline;
	margin-top: 0.9rem;
	padding: 0.72rem 0.78rem;
	border: 1px solid var(--line);
	background: var(--ink-soft);
	font-family: var(--mono);
	font-size: 0.72rem;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.purchase-scale-popover__equation span,
.purchase-scale-popover__proof-equation span {
	color: var(--muted);
}

.purchase-scale-popover__equation b,
.purchase-scale-popover__proof-equation b {
	color: var(--green);
	font-weight: 400;
}

.purchase-scale-popover__equation strong,
.purchase-scale-popover__proof-equation strong {
	color: var(--green-bright);
	font-weight: 700;
}

.purchase-scale-mini {
	margin-top: 0.95rem;
}

.purchase-scale-mini__line {
	position: relative;
	height: 1px;
	margin: 0.6rem 0 0.45rem;
	background: var(--line);
}

.purchase-scale-mini__line::before,
.purchase-scale-mini__line::after {
	content: "";
	position: absolute;
	top: -0.22rem;
	width: 1px;
	height: 0.45rem;
	background: var(--muted);
}

.purchase-scale-mini__line::before {
	left: 0;
}

.purchase-scale-mini__line::after {
	right: 0;
}

.purchase-scale-mini__marker {
	position: absolute;
	top: 50%;
	width: 0.65rem;
	height: 0.65rem;
	border: 1px solid var(--green-bright);
	border-radius: 50%;
	background: var(--stone);
	transform: translate(-50%, -50%);
}

.purchase-scale-mini__labels {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: baseline;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.62rem;
}

.purchase-scale-mini__labels strong {
	color: var(--paper);
	font-size: 0.68rem;
	font-weight: 700;
	text-align: center;
}

.purchase-scale-mini__labels span:last-child {
	text-align: right;
}

.purchase-scale-popover__share {
	margin-top: 0.9rem;
	padding-top: 0.8rem;
	border-top: 1px solid var(--line-soft);
}

.purchase-scale-popover__share span {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.59rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.purchase-scale-popover__share code {
	display: block;
	color: var(--paper);
	font-family: var(--mono);
	font-size: 0.72rem;
	overflow-wrap: anywhere;
}

.purchase-scale-popover__proof-toggle {
	margin-top: 0.95rem;
	padding: 0.5rem 0;
	border: 0;
	border-bottom: 1px solid var(--green);
	background: none;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.purchase-scale-popover__proof {
	margin-top: 0.95rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--line);
}

.purchase-scale-popover__proof-status {
	margin: 0;
	color: var(--muted);
	font-size: 0.8rem;
	line-height: 1.55;
}

.purchase-scale-popover__proof-status.is-ok {
	color: var(--green-bright);
}

.purchase-scale-popover__proof-status.is-warning {
	color: var(--warning);
}

.purchase-scale-popover__proof-status.is-loading {
	color: var(--muted);
}

.purchase-scale-popover__proof-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 0.9rem 0 0;
	border: 1px solid var(--line);
}

.purchase-scale-popover__proof-grid > div {
	min-width: 0;
	padding: 0.68rem 0.75rem;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.purchase-scale-popover__proof-grid > div:nth-child(2n) {
	border-right: 0;
}

.purchase-scale-popover__proof-grid > div:nth-last-child(-n + 2) {
	border-bottom: 0;
}

.purchase-scale-popover__proof-grid dt {
	margin: 0 0 0.28rem;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.56rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.purchase-scale-popover__proof-grid dd {
	margin: 0;
	color: var(--paper);
	font-family: var(--mono);
	font-size: 0.68rem;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.purchase-scale-popover__proof-grid code {
	color: inherit;
	font-size: inherit;
}

.purchase-scale-popover__proof-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem 1rem;
	margin-top: 0.85rem;
	font-family: var(--mono);
	font-size: 0.63rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.purchase-scale-popover__proof-links a {
	color: var(--green-bright);
	text-underline-offset: 0.25em;
}

.purchase-scale-popover__proof-links a:hover,
.purchase-scale-popover__proof-links a:focus-visible {
	color: var(--paper);
}

/* The panel is as wide as the table it replaces, so the reading stays in one
   column on the left and the right half is held for the contract proof: its
   toggle sits at the top of that column and the answer opens underneath, in
   the space already reserved for it, instead of pushing the reading down. */
@media (min-width: 60rem) {
	/* The two columns are equal, so the gutter's centre is the content box's
	   centre: one hairline drawn there separates the reading from the proof and
	   runs the full height of whichever column is taller. */
	.purchase-scale-popover__content {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(1.75rem, 3vw, 3rem);
		align-content: start;
		background-image: linear-gradient(var(--line), var(--line));
		background-repeat: no-repeat;
		background-origin: content-box;
		background-position: center top;
		background-size: 1px 100%;
	}

	.purchase-scale-popover__kicker {
		grid-area: 1 / 1 / 2 / 2;
	}

	.purchase-scale-popover__title {
		grid-area: 2 / 1 / 3 / 2;
	}

	.purchase-scale-popover__intro {
		grid-area: 3 / 1 / 4 / 2;
	}

	.purchase-scale-popover__equation {
		grid-area: 4 / 1 / 5 / 2;
	}

	.purchase-scale-mini {
		grid-area: 5 / 1 / 6 / 2;
	}

	.purchase-scale-popover__share {
		grid-area: 6 / 1 / 7 / 2;
	}

	.purchase-scale-popover__note {
		grid-area: 7 / 1 / 8 / 2;
	}

	/* Top of the second column, level with the kicker: the margin that spaced
	   it from the note in the stacked layout would drop it out of line. */
	.purchase-scale-popover__proof-toggle {
		grid-area: 1 / 2 / 2 / 3;
		justify-self: start;
		margin-top: 0;
		padding-top: 0;
	}

	.purchase-scale-popover__proof {
		grid-area: 2 / 2 / 9 / 3;
		align-self: start;
	}
}

@media (max-width: 640px) {
	.purchase-scale-popover {
		padding: 0.9rem;
	}

	.purchase-scale-popover__content {
		padding-right: 1.45rem;
	}

	.purchase-scale-popover__proof-grid {
		grid-template-columns: 1fr;
	}

	.purchase-scale-popover__proof-grid > div,
	.purchase-scale-popover__proof-grid > div:nth-child(2n),
	.purchase-scale-popover__proof-grid > div:nth-last-child(-n + 2) {
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}

	.purchase-scale-popover__proof-grid > div:last-child {
		border-bottom: 0;
	}
}

/* The totals are what the table is for, so they hold the bottom edge of the
   frame rather than waiting at the end of 31 rows. The cells are what sticks:
   a sticky <tr> does nothing in most engines. The rule above them is drawn as
   an inset shadow because a collapsed border on a sticky cell scrolls away
   with the table. */
.purchase-table-scroll tfoot th,
.purchase-table-scroll tfoot td {
	position: sticky;
	bottom: 0;
	z-index: 1;
	/* A whole-pixel height keeps the inset rule on a whole pixel, matching
	   its copy in the scrollbar lane. The content alone is about 38.7px. */
	height: 39px;
	padding: 0.65rem 0.8rem;
	background: var(--stone);
	box-shadow: inset 0 1px 0 var(--line);
	color: var(--paper);
	font-weight: 400;
}

/* The last row's soft rule would collapse into the footer's top edge and
   push the inset rule a pixel down, off its copy in the scrollbar lane.
   Scrolled to the end, the footer's own rule sits there anyway. */
.purchase-table-scroll tbody tr:last-child td {
	border-bottom: 0;
}

.purchase-table-scroll tfoot th {
	text-align: left;
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--green-bright);
}

.audit-table-grid {
	min-width: 850px;
}

.audit-table-grid thead th[data-audit-sort] {
	white-space: nowrap;
	cursor: pointer;
}

.audit-table-grid thead th[data-audit-sort]:hover {
	color: var(--paper);
}

.audit-table-grid thead th[data-audit-sort]::after {
	content: "\25B2\A\25BC";
	display: inline-block;
	margin-left: 0.42rem;
	opacity: 0.2;
	font-size: 0.42rem;
	line-height: 1.05;
	white-space: pre;
	vertical-align: 0.08em;
}

.audit-table-grid thead th[aria-sort="ascending"]::after {
	content: "\25B2";
	opacity: 0.9;
	font-size: 0.5rem;
	line-height: 1;
}

.audit-table-grid thead th[aria-sort="descending"]::after {
	content: "\25BC";
	opacity: 0.9;
	font-size: 0.5rem;
	line-height: 1;
}

.audit-table-grid thead th[aria-sort]:not([aria-sort="none"]) {
	color: var(--paper);
}

.audit-table-grid tbody td {
	vertical-align: middle;
}

.audit-table-grid td a {
	white-space: nowrap;
}

.audit-status-on {
	color: var(--green-bright);
}

.audit-status-late {
	color: var(--warning);
}

.audit-table-note {
	max-width: 90ch;
}

@media (max-width: 900px) {
	.audit-reconciliation {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.audit-reconciliation > div:last-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.audit-steps > li {
		grid-template-columns: 2.2rem minmax(0, 1fr);
		gap: 0.75rem;
	}

	.audit-facts {
		grid-template-columns: 1fr;
	}

	.audit-reconciliation {
		grid-template-columns: 1fr;
	}

	.audit-reconciliation > div:last-child {
		grid-column: auto;
	}

	.audit-tabs {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.audit-tabs button {
		width: 100%;
	}

	.audit-table-scroll {
		max-height: 24rem;
	}

	.purchase-table-scroll {
		max-height: 12rem;
	}
}

/* Token version suffix: preserve the readable/copyable "$FLOKI V2" text
   while visually treating the version as a prominent suffix. */
.token-version {
	position: relative;
	top: -0.28em;
	display: inline-block;
	/* Running text keeps the full word space the formatter removes. A space in
	   the body serif is 0.24em of the surrounding text, and this em resolves
	   against the suffix's own 0.76em size, so the margin is 0.24 / 0.76. The
	   letter-spaced labels below sit flush instead. */
	margin-left: 0.32em;
	font-size: 0.76em;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Uppercase letter-spaced labels are all cap-height and already bold, so the
   suffix needs to sit smaller there than it does in running text. */
.ledger-metric span .token-version,
.balance-table__metrics span .token-version,
.supply-record__label .token-version,
thead th .token-version {
	top: -0.4em;
	margin-left: 0.02em;
	font-size: 0.68em;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* Compact narrative figures reveal their exact value without interrupting the prose.
   The tooltip is anchored to the figure itself, not to pointer position. */
.precise-number {
	position: relative;
	display: inline-block;
	/* A dashed text-decoration draws long dashes in the text's own colour and
	   sits tight under the baseline. Painting the rule as a repeating
	   background instead sets all three: a row of small green dots, and as far
	   below the figure as the padding puts it. */
	--precise-dot: var(--green);
	background-image: radial-gradient(
		circle,
		var(--precise-dot) 1px,
		transparent 1.2px
	);
	background-repeat: repeat-x;
	background-size: 6px 3px;
	background-position: 0 100%;
	cursor: pointer;
	outline: none;
}

/* The value is an element the script writes in, not generated content: a
   ::after cannot be selected, and the whole point of showing the exact figure
   is that it can be taken away. */
.precise-number__exact {
	position: absolute;
	z-index: 80;
	/* The script sets --precise-shift when the bubble opens, sliding it back
	   inside the viewport for figures near either edge. It moves `left`, not
	   the transform, so the correction lands at once instead of animating. */
	left: calc(50% + var(--precise-shift, 0px));
	bottom: calc(100% + 0.55rem);
	/* Closed, the bubble takes no space at all. At opacity 0 it still widened
	   the page, so a figure near the right edge gave phones a sideways scroll.
	   allow-discrete holds it on screen while it fades out. */
	display: none;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: 0.55rem;
	background: var(--stone);
	box-shadow: 0 0.55rem 1.5rem rgb(0 0 0 / 42%);
	color: var(--paper);
	/* Same face and size as the shorthand it expands, so the full figure reads
	   as that number written out rather than as a different kind of text. */
	font: inherit;
	line-height: 1.1;
	letter-spacing: 0;
	white-space: nowrap;
	cursor: text;
	opacity: 0;
	pointer-events: none;
	user-select: none;
	transform: translateX(-50%) translateY(0.2rem);
	transition:
		opacity 0.12s ease,
		transform 0.12s ease,
		display 0.12s;
	transition-behavior: allow-discrete;
}

/* The tail under the bubble: a square turned on its corner, sitting over the
   bubble's bottom edge. It paints above the bubble so its own fill hides the
   border running across it, leaving only the two diagonals that meet at the
   point, in the same colour as the border they continue. */
.precise-number::before {
	content: "";
	position: absolute;
	z-index: 81;
	left: 50%;
	bottom: calc(100% + 0.55rem);
	width: 0.6rem;
	height: 0.6rem;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--stone);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 50%) rotate(45deg) translateY(0.14rem);
	transition:
		opacity 0.12s ease,
		transform 0.12s ease;
}

.precise-number:hover .precise-number__exact,
.precise-number:focus-visible .precise-number__exact,
.precise-number.is-open .precise-number__exact,
.precise-number:hover::before,
.precise-number:focus-visible::before,
.precise-number.is-open::before {
	opacity: 1;
}

/* Open, it takes the pointer so the number can be swept and copied. */
.precise-number:hover .precise-number__exact,
.precise-number:focus-visible .precise-number__exact,
.precise-number.is-open .precise-number__exact {
	display: block;
	pointer-events: auto;
	user-select: text;
	transform: translateX(-50%) translateY(0);
}

/* Where the fade-in starts, now that the closed bubble is display: none. */
@starting-style {
	.precise-number:hover .precise-number__exact,
	.precise-number:focus-visible .precise-number__exact,
	.precise-number.is-open .precise-number__exact {
		opacity: 0;
		transform: translateX(-50%) translateY(0.2rem);
	}
}

.precise-number:hover::before,
.precise-number:focus-visible::before,
.precise-number.is-open::before {
	transform: translate(-50%, 50%) rotate(45deg);
}

.precise-number:focus-visible {
	--precise-dot: var(--green-bright);
}

/* Chapter 06 · supporting cards for the formula section */
.formula-evidence-stack {
	display: grid;
	gap: 1.25rem;
}

.formula-compare,
.formula-map,
.formula-fixed {
	padding: clamp(1rem, 2.4vw, 1.5rem);
	border: 1px solid var(--line-soft);
	background: var(--ink);
}

.formula-compare__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.formula-compare__col {
	padding: 1rem;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.01);
}

.formula-compare__eyebrow,
.formula-map__label,
.formula-fixed__title {
	display: block;
	margin-bottom: 0.65rem;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.formula-compare__col strong,
.formula-map__step strong,
.formula-fixed__value {
	display: block;
	color: var(--paper);
	font-family: var(--serif);
	font-size: clamp(1.35rem, 2.2vw, 1.9rem);
	font-weight: 400;
	line-height: 1.12;
}

.formula-compare__col span:not(.formula-compare__eyebrow),
.formula-map__group,
.formula-fixed__list li {
	color: var(--muted);
	font-size: 0.9rem;
	line-height: 1.55;
}

.formula-compare__arrow {
	margin: 0.4rem 0;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 1rem;
}

.formula-map {
	display: grid;
	gap: 0.8rem;
}

.formula-map__step,
.formula-map__group {
	padding: 0.9rem 1rem;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.015);
}

.formula-map__step--result strong {
	color: var(--green-bright);
}

.formula-map__operator {
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 1.1rem;
	text-align: center;
}

.formula-map__list,
.formula-fixed__list {
	margin: 0;
	padding-left: 1rem;
}

.formula-map__list li + li,
.formula-fixed__list li + li {
	margin-top: 0.35rem;
}

.formula-fixed {
	text-align: left;
}

.formula-fixed__value {
	margin-bottom: 0.35rem;
	font-size: clamp(2rem, 4vw, 3rem);
	color: var(--warning);
}

.formula-fixed__title {
	margin-bottom: 0.9rem;
}

@media (max-width: 900px) {
	.formula-compare__grid {
		grid-template-columns: 1fr;
	}
}

/* Positioning context for the Chapter 04 scale explainer only. */
.audit-records .balance-table:has(.purchase-table-scroll) {
	position: relative;
	overflow: visible;
}

.token-version--v1 {
	color: var(--warning);
}
.token-version--v2 {
	color: var(--green);
}

/* The coding marks V1 from V2 in ordinary prose. Where the words around it
   already carry a colour of their own — an amber label, a green column head, a
   link, a line of code — the suffix takes that colour instead, rather than
   breaking up text that is already set apart. */
:is(
	.ledger-metric > span,
	.balance-table__metrics > div > span,
	.supply-record__label,
	.section-kicker,
	.metric-eyebrow,
	.separation-note,
	.method-card__math,
	.audit-primary-source,
	thead th,
	code,
	a
) .token-version {
	color: inherit;
}

/* Chapter 09 · The Result */
.result-v2-totals,
.result-review-totals {
	margin-top: 0.55rem;
}

.result-comparison-eyebrow {
	margin: 2rem 0 0 !important;
}

.result-review-audit {
	margin-top: 1.35rem;
}

/* Chapter 05 enforcement chronology stays attached to the case-level prose.
   Its conclusion comes after the disclosure with a deliberate narrative gap. */
#nottingham-enforcement-history {
	margin-top: 0.75rem;
}

.nottingham-enforcement-conclusion {
	max-width: 760px;
	margin: 3rem 0 0;
}

.result-metrics {
	margin-top: 1.6rem;
	margin-bottom: 1.6rem;
}

.result-finding {
	margin: 1.4rem 0 1.7rem;
	padding: clamp(1.25rem, 2.8vw, 2rem);
	border: 1px solid var(--line);
	background: var(--ink-soft);
}

.result-finding > strong {
	display: block;
	margin-top: 0.45rem;
	padding-bottom: 0.95rem;
	border-bottom: 1px solid var(--line);
	color: var(--paper);
	font-family: var(--serif);
	font-size: clamp(2rem, 4.4vw, 3.6rem);
	font-weight: 400;
	letter-spacing: -0.035em;
	line-height: 1;
}

.result-finding > strong .precise-number {
	background-image: none;
}

.result-finding > p {
	max-width: 62ch;
	margin: 1rem 0 0;
	color: var(--muted);
	font-size: 0.95rem;
	line-height: 1.65;
}

.result-finding > p strong {
	color: var(--paper);
	font-weight: 500;
}

.result-error-map {
	margin-top: 1.55rem;
	margin-bottom: 1.55rem;
	border: 1px solid var(--line-soft);
	background: var(--ink-soft);
}
.result-aggregate-chart {
	margin: 1.55rem 0;
	border: 1px solid var(--line-soft);
	background: var(--ink-soft);
}

.result-aggregate-chart__head {
	padding: clamp(1.15rem, 2.4vw, 1.6rem);
	border-bottom: 1px solid var(--line-soft);
}

.result-aggregate-chart__head h4 {
	margin: 0.25rem 0 0.45rem;
	color: var(--paper);
	font-family: var(--serif);
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	font-weight: 400;
}

.result-aggregate-chart__head p {
	max-width: 66ch;
	margin: 0;
	color: var(--muted);
	font-size: 0.88rem;
	line-height: 1.55;
}

.result-aggregate-chart__plot {
	padding: 1.15rem clamp(1rem, 2.4vw, 1.6rem) 1.35rem;
}

.result-aggregate-chart__scale {
	position: relative;
	height: 0.85rem;
	margin: 0 4.9rem 0.5rem calc(min(28vw, 21rem) + 1rem);
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.58rem;
}

.result-aggregate-chart__scale span {
	position: absolute;
	top: 0;
}

.result-aggregate-chart__scale span:first-child {
	left: 0;
}

.result-aggregate-chart__scale .is-neutral {
	left: 80%;
	transform: translateX(-50%);
	color: var(--green-bright);
}

.result-aggregate-chart__scale span:last-child {
	right: 0;
}

.result-aggregate-chart__row {
	display: grid;
	grid-template-columns: minmax(13rem, 21rem) minmax(0, 1fr) 3.9rem;
	gap: 0.8rem 1rem;
	align-items: center;
}

.result-aggregate-chart__row + .result-aggregate-chart__row {
	margin-top: 1rem;
}

.result-aggregate-chart__label {
	min-width: 0;
}

.result-aggregate-chart__label strong,
.result-aggregate-chart__label span {
	display: block;
}

.result-aggregate-chart__label strong {
	color: var(--paper);
	font-size: 0.82rem;
	font-weight: 500;
	line-height: 1.35;
}

.result-aggregate-chart__label span {
	margin-top: 0.2rem;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.57rem;
	line-height: 1.4;
}

.result-aggregate-chart__bar {
	position: relative;
	height: 1.05rem;
	border: 1px solid var(--line);
	background: var(--stone);
	overflow: hidden;
}

.result-aggregate-chart__neutral {
	position: absolute;
	z-index: 3;
	top: -1px;
	bottom: -1px;
	left: 80%;
	width: 1px;
	background: var(--green-bright);
	pointer-events: none;
}

.result-aggregate-chart__fill {
	position: absolute;
	z-index: 1;
	inset: 0 auto 0 0;
}

.result-aggregate-chart__fill.is-other {
	background: var(--muted);
}

.result-aggregate-chart__fill.is-v2 {
	background: var(--green);
}

.result-aggregate-chart__fill.is-nottingham {
	background: #d98b7a;
}

.result-aggregate-chart__value {
	color: var(--paper);
	font-family: var(--mono);
	font-size: 0.86rem;
	font-weight: 600;
	text-align: right;
}

@media (max-width: 760px) {
	.result-aggregate-chart__scale {
		margin-left: 0;
		margin-right: 4.7rem;
	}

	.result-aggregate-chart__row {
		grid-template-columns: minmax(0, 1fr) 3.9rem;
		gap: 0.45rem 0.8rem;
	}

	.result-aggregate-chart__label {
		grid-column: 1 / -1;
	}

	.result-aggregate-chart__bar {
		grid-column: 1;
	}

	.result-aggregate-chart__value {
		grid-column: 2;
	}
}

#result-error-chart,
.result-error-map__chart-wrap {
	margin-bottom: 25px;
}

.result-error-map__head {
	display: flex;
	gap: 2rem;
	align-items: stretch;
	justify-content: space-between;
	padding: clamp(1.15rem, 2.4vw, 1.6rem);
	padding-bottom: 0;
}

.result-error-map__head h4 {
	margin: 0.25rem 0 0.45rem;
	color: var(--paper);
	font-family: var(--serif);
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	font-weight: 400;
}

.result-error-map__head p {
	margin: 0;
	color: var(--muted);
	font-size: 0.88rem;
	line-height: 1.55;
}

.result-error-map__tools {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.85rem;
	min-width: min(100%, 28rem);
}

.result-chart-toggle {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: min(100%, 28rem);
	border: 1px solid var(--line);
	background: var(--stone);
}

.result-chart-toggle button {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	justify-content: center;
	min-width: 0;
	padding: 0.72rem 0.9rem;
	border: 0;
	background: transparent;
	color: var(--muted);
	font-family: var(--mono);
	cursor: pointer;
	transition:
		background-color 0.18s ease,
		color 0.18s ease;
}

.result-chart-toggle button + button {
	border-left: 1px solid var(--line);
}

.result-chart-toggle--single {
	grid-template-columns: minmax(0, 1fr);
	width: min(100%, 21rem);
}

/* The arrow is a peer of the label here, not a secondary line of it, so it
   takes the label's size rather than the toggle's small caption size. */
.result-chart-toggle--single button span {
	font-size: 0.82rem;
	letter-spacing: 0;
}

.result-chart-toggle button strong {
	color: inherit;
	font-size: 0.82rem;
	font-weight: 700;
}

.result-chart-toggle button span {
	color: inherit;
	font-size: 0.62rem;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.result-chart-toggle
	button:hover:not(:disabled):not(.is-active):not([aria-pressed="true"]) {
	color: var(--paper);
}

.result-chart-toggle button.is-active,
.result-chart-toggle button[aria-pressed="true"] {
	background: var(--green);
	color: var(--ink);
	cursor: default;
}

.result-chart-toggle button:disabled {
	opacity: 0.48;
	cursor: progress;
}

.result-chart-toggle--single
	button:hover:not(:disabled):not(.is-active):not([aria-pressed="true"]) {
	background: var(--ink-soft);
	color: var(--muted);
}

.result-error-map__legend {
	display: flex;
	flex: 0 0 auto;
	margin-top: auto;
	flex-wrap: wrap;
	gap: 0.55rem 1rem;
	padding-top: 0.2rem;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.62rem;
}

.result-error-map__legend span {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	white-space: nowrap;
}

.result-error-map__legend i {
	display: inline-block;
	width: 0.52rem;
	height: 0.52rem;
	border-radius: 50%;
	background: var(--muted);
}

.result-error-map__legend .is-under {
	background: #d98b7a;
}

.result-error-map__legend .is-over {
	background: var(--green);
}

.result-error-map__legend .is-line {
	width: 1rem;
	height: 1px;
	border-radius: 0;
	background: var(--green-bright);
}

.result-error-map__chart-wrap {
	position: relative;
	min-height: 540px;
	/* Wider side gutters than the plot needs. The cohort chart gets its
	   breathing room from the axis title it reserves space for on the right;
	   this chart has no second axis, so without the padding its own y-axis
	   title and the 1.00 annotation sit right on the card's border. */
	padding: 0.45rem 1rem 0;
}

.result-error-map__chart {
	min-height: 430px;
}

/* Result chart zoom strip — the same navigator the migration cohort chart
   uses: the strip keeps the whole window, the plot below shows the selection. */
.result-brush {
	position: relative;
}

.result-overview-wrap,
.result-detail-wrap {
	position: relative;
	overflow: visible;
}

.result-overview-wrap {
	margin: 0.2rem 0 0.75rem;
}

.result-detail-wrap {
	margin-top: 0.2rem;
	/* On top of the wrapper's 1rem. The plot carries axis titles and the
	   1.00 annotation on both flanks; the strip above it does not, so it
	   keeps the narrower gutter. */
	padding-inline: 15px;
}

.result-overview-chart {
	width: 100%;
	min-height: 92px;
	margin: 0;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

.result-overview-chart *,
.result-error-map__chart * {
	outline: none !important;
}

.result-error-map__chart {
	outline: none !important;
}

/* Dragging across the plot crops to that span, so the pointer says so on the
   way in. */
.result-error-map__chart,
.result-error-map__chart .apexcharts-svg {
	cursor: crosshair;
}

/* The strip's drag handles are bare circles drawn by svg.select.js, so the
   resize cursor has to be set here rather than through an Apex option. */
.result-overview-chart .svg_select_points circle {
	cursor: ew-resize;
}

.result-overview-chart .apexcharts-tooltip {
	display: none !important;
}

/* A tooltip hanging over the drag box just gets in the way of the crop. */
.result-detail-wrap.is-dragging .apexcharts-tooltip {
	display: none !important;
}

@media (max-width: 700px) {
	/* Matches the shorter plot the chart's own responsive rule switches to. */
	.result-error-map__chart-wrap {
		min-height: 470px;
	}

	.result-error-map__chart {
		min-height: 360px;
	}
}

.result-error-map__fallback {
	position: absolute;
	inset: 1rem;
	display: grid;
	place-items: center;
	margin: 0;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.72rem;
	text-align: center;
	pointer-events: none;
}

.result-error-map__fallback[hidden] {
	display: none;
}

.result-error-map__note {
	margin: 0;
	padding: 0.85rem 1rem 1rem;
	border-top: 1px solid var(--line-soft);
	color: var(--muted);
	font-size: 0.78rem;
	line-height: 1.55;
}

.result-error-map__note strong {
	color: var(--paper);
	font-weight: 400;
}

.result-day-medians {
	margin-top: 1.2rem;
}

/* Apex wraps custom tooltip HTML in its own light-theme box. Strip that
   wrapper completely so only the site's tooltip surface is visible. */
.result-error-map .apexcharts-tooltip,
.result-error-map .apexcharts-tooltip.apexcharts-theme-light,
.result-error-map .apexcharts-tooltip.apexcharts-theme-dark {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow: visible !important;
}

.result-error-map .apexcharts-tooltip::before,
.result-error-map .apexcharts-tooltip::after,
.result-error-map .apexcharts-xaxistooltip::before,
.result-error-map .apexcharts-xaxistooltip::after,
.result-error-map .apexcharts-xaxistooltip-bottom::before,
.result-error-map .apexcharts-xaxistooltip-bottom::after,
.result-error-map .apexcharts-xaxistooltip-top::before,
.result-error-map .apexcharts-xaxistooltip-top::after {
	display: none !important;
	content: none !important;
}

.result-error-map .apexcharts-xaxistooltip,
.result-error-map .apexcharts-yaxistooltip,
.result-error-map .apexcharts-tooltip-marker {
	display: none !important;
}

.result-error-map .apexcharts-yaxistooltip::before,
.result-error-map .apexcharts-yaxistooltip::after,
.result-error-map .apexcharts-yaxistooltip-left::before,
.result-error-map .apexcharts-yaxistooltip-left::after,
.result-error-map .apexcharts-yaxistooltip-right::before,
.result-error-map .apexcharts-yaxistooltip-right::after {
	display: none !important;
	content: none !important;
}

.result-chart-tooltip {
	box-sizing: border-box;
	min-width: 17rem;
	padding: 0.75rem 0.85rem;
	background: var(--stone);
	border: 1px solid var(--line);
	border-radius: 0;
	box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
	color: var(--paper);
	font-family: var(--mono);
	font-size: 0.68rem;
}

.result-chart-tooltip > strong,
.result-chart-tooltip > span,
.result-chart-tooltip > small {
	display: block;
}

.result-chart-tooltip > strong {
	margin-bottom: 0.2rem;
	color: var(--green-bright);
	font-size: 0.74rem;
	font-weight: 500;
}

.result-chart-tooltip > span {
	margin-bottom: 0.65rem;
	color: var(--muted);
}

.result-chart-tooltip dl {
	margin: 0;
	border-top: 1px solid var(--line-soft);
}

.result-chart-tooltip dl > div {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	justify-content: space-between;
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--line-soft);
}

.result-chart-tooltip dt {
	color: var(--muted);
}

.result-chart-tooltip dd {
	margin: 0;
	color: var(--paper);
	text-align: right;
}

.result-chart-tooltip > small {
	margin-top: 0.6rem;
	color: var(--muted);
	font-size: 0.58rem;
}

.result-chart-tooltip__summary {
	margin: 0.75rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--line);
	color: var(--paper);
	font-family: var(--mono);
	font-size: 0.72rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1.45;
	text-align: center;
}

.result-chart-tooltip__summary em {
	font-style: normal;
	font-weight: 700;
}

.result-chart-tooltip__summary .is-above {
	color: var(--green-bright);
}

.result-chart-tooltip__summary .is-below {
	color: #d98b7a;
}

.result-reconciliation {
	margin-top: 1.5rem;
}

.result-reconciliation__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.2rem;
	align-items: flex-end;
	margin-bottom: 0.8rem;
}

.result-reconciliation__filters {
	flex: 0 0 auto;
	margin: 0;
}

.result-reconciliation__filters button.is-active,
.result-reconciliation__filters button[aria-pressed="true"] {
	border-color: var(--line);
	border-bottom-color: var(--ink);
	background: var(--ink);
	color: var(--green-bright);
}

.result-reconciliation__search {
	flex: 1 1 52ch;
	min-width: min(100%, 52ch);
	max-width: 48rem;
}

.result-reconciliation__count {
	margin-bottom: 0.7rem;
}

.result-reconciliation__scroll {
	max-height: 22 rem;
}

.result-reconciliation__table td.is-short,
.result-reconciliation__table td.is-over {
	font-weight: 500;
}

.result-reconciliation__table td.is-short {
	color: #d98b7a;
}

.result-reconciliation__table td.is-over {
	color: var(--green);
}

.result-reconciliation__foot {
	align-items: center;
}

.result-reconciliation__foot > span {
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.64rem;
}

/* Chapter 10 · current release reconciliation */
.reconciliation-release-totals {
	margin-top: 0.55rem;
}

.reconciliation-release__scroll {
	max-height: 34rem;
}

.reconciliation-release__table th:first-child,
.reconciliation-release__table td:first-child {
	min-width: 15.5rem;
}

.reconciliation-release__table th:nth-child(2),
.reconciliation-release__table td:nth-child(2) {
	min-width: 10.5rem;
}

.reconciliation-wallets {
	vertical-align: top;
}

.reconciliation-wallet {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.8rem;
	align-items: baseline;
	padding: 0.38rem 0;
	border-bottom: 1px solid var(--line-soft);
}

.reconciliation-wallet:first-child {
	padding-top: 0;
}

.reconciliation-wallet:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.reconciliation-wallet a {
	min-width: 0;
	font-family: var(--mono);
	font-size: 0.7rem;
	white-space: nowrap;
}

.reconciliation-wallet__balance {
	color: var(--muted);
	font-family: var(--mono);
	font-size: 0.68rem;
	white-space: nowrap;
}

.reconciliation-release__amount {
	color: var(--green-bright);
	font-weight: 700;
}

.reconciliation-release-close {
	margin-top: clamp(2rem, 4vw, 4rem);
}

/* Chapter 11 · The Remedy
   Keep the chapter itself spare. The closing line is the end of the historical
   record, so it is deliberately much larger than the ordinary chapter closes. */
.remedy-steps {
	display: grid;
	gap: 0;
	margin: 2rem 0;
	padding: 0;
	border-top: 1px solid var(--line);
	list-style: none;
	counter-reset: remedy-step;
}

.remedy-steps li {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	padding: 1.05rem 0;
	border-bottom: 1px solid var(--line);
	counter-increment: remedy-step;
}

.remedy-steps li::before {
	content: counter(remedy-step, decimal-leading-zero);
	padding-top: 0.18rem;
	color: var(--green-bright);
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.remedy-close {
	max-width: 1080px;
}

.remedy-total {
	max-width: 760px;
	margin: 0;
	font-size: clamp(1.1rem, 1.7vw, 1.35rem);
	line-height: 1.5;
}

.remedy-call {
	max-width: 760px;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	color: var(--green-bright);
	font-size: clamp(1.45rem, 2.5vw, 2.05rem);
	line-height: 1.25;
}

.remedy-final {
	max-width: 15ch;
	margin: clamp(4.5rem, 9vw, 8rem) 0 0;
	color: var(--green-bright);
	font-family: var(--serif);
	font-size: clamp(2.6rem, 5.5vw, 5.8rem);
	font-weight: 400;
	letter-spacing: -0.055em;
	line-height: 0.96;
}

@media (max-width: 760px) {
	.result-error-map__head {
		display: block;
	}

	.result-error-map__tools {
		align-items: stretch;
		width: 100%;
		min-width: 0;
		margin-top: 1rem;
	}

	.result-chart-toggle {
		width: 100%;
	}

	.result-chart-toggle button {
		flex-direction: column;
		gap: 0.15rem;
		align-items: center;
	}

	.result-error-map__chart-wrap,
	.result-error-map__chart {
		min-height: 360px;
	}

	.result-reconciliation__filters,
	.result-reconciliation__search {
		flex: 1 1 100%;
	}

	.result-reconciliation__filters {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.result-reconciliation__filters button {
		width: 100%;
	}

	.result-reconciliation__scroll {
		max-height: 23rem;
	}
}

@media (max-width: 480px) {
	.result-finding > strong {
		font-size: 1.55rem;
	}

	.result-error-map__chart-wrap,
	.result-error-map__chart {
		min-height: 330px;
	}
}

/* Shared text-field treatment: keep keyboard focus visible without the
   detached global focus rectangle used for links and buttons. */
input[type="search"],
input[type="number"] {
	border-radius: 0;
}

input[type="search"]:focus,
input[type="search"]:focus-visible,
input[type="number"]:focus,
input[type="number"]:focus-visible {
	outline: none;
	border-color: var(--green-bright);
	box-shadow: inset 0 0 0 1px var(--green-bright);
}

@media (max-width: 820px) {
	.the-token__copy {
		grid-template-columns: 1fr;
	}

	.the-token__copy p + p {
		padding-left: 0;
		border-top: 1px solid rgb(9 11 10 / 32%);
		border-left: 0;
	}

	.the-token__flow {
		grid-auto-flow: row;
		grid-template-columns: 1fr;
		gap: 0;
		justify-items: start;
	}

	.the-token__flow span {
		padding: 0.7rem 0;
	}

	.the-token__flow b {
		transform: rotate(90deg);
		transform-origin: center;
	}

	.the-token__definition {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.the-token__closing {
		max-width: 18ch;
	}
}

/* Sort indicators live on the header cell itself, not on a nested button. */
.table-sortable-head,
th[data-method-deposit-sort],
th[data-baseline-sort],
th[data-current-sort],
th[data-audit-sort],
th[data-result-sort],
th[data-sort] {
	white-space: nowrap;
	cursor: pointer;
}

.table-sortable-head::after,
th[data-method-deposit-sort]::after,
th[data-baseline-sort]::after,
th[data-current-sort]::after,
th[data-audit-sort]::after,
th[data-result-sort]::after,
th[data-sort]::after {
	content: "\25B2\A\25BC";
	display: inline-block;
	margin-left: 0.42rem;
	opacity: 0.2;
	font-size: 0.42rem;
	line-height: 0.85;
	white-space: pre;
	vertical-align: 0.08em;
}

.table-sortable-head[aria-sort="ascending"]::after,
th[data-method-deposit-sort][aria-sort="ascending"]::after,
th[data-baseline-sort][aria-sort="ascending"]::after,
th[data-current-sort][aria-sort="ascending"]::after,
th[data-audit-sort][aria-sort="ascending"]::after,
th[data-result-sort][aria-sort="ascending"]::after,
th[data-sort][aria-sort="ascending"]::after {
	content: "\25B2";
	opacity: 0.9;
	font-size: 0.5rem;
	line-height: 1;
}

.table-sortable-head[aria-sort="descending"]::after,
th[data-method-deposit-sort][aria-sort="descending"]::after,
th[data-baseline-sort][aria-sort="descending"]::after,
th[data-current-sort][aria-sort="descending"]::after,
th[data-audit-sort][aria-sort="descending"]::after,
th[data-result-sort][aria-sort="descending"]::after,
th[data-sort][aria-sort="descending"]::after {
	content: "\25BC";
	opacity: 0.9;
	font-size: 0.5rem;
	line-height: 1;
}

/* Dotted header definitions use the same visual cue as shorthand number tooltips. */
.column-help {
	--precise-dot: var(--green);
	display: inline-block;
	padding-bottom: 0.4em;
	background-image: radial-gradient(
		circle,
		var(--precise-dot) 1px,
		transparent 1.2px
	);
	background-repeat: repeat-x;
	background-size: 6px 3px;
	background-position: 0 100%;
	cursor: pointer;
	outline: none;
}

.column-help:hover,
.column-help:focus-visible {
	--precise-dot: var(--green-bright);
}

.column-help-tooltip {
	position: fixed;
	z-index: 120;
	box-sizing: border-box;
	max-width: min(24rem, calc(100vw - 24px));
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: 0.55rem;
	background: var(--stone);
	box-shadow: 0 0.55rem 1.5rem rgb(0 0 0 / 42%);
	color: var(--paper);
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	white-space: normal;
	pointer-events: none;
}

.column-help-tooltip::after {
	content: "";
	position: absolute;
	z-index: 121;
	/* The script sets this to the header's centre, measured from the panel's
	   own left edge; the centre of the panel is only right when it was not
	   pushed off the column by the edge of the window. */
	left: var(--tip-arrow, 50%);
	bottom: 0;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--stone);
	transform: translate(-50%, 50%) rotate(45deg);
}

/* Column headers use dotted help text only; no sort/info icons are shown. */
thead th::after,
thead th > button::after,
thead .table-sort-indicator,
thead .balance-table__info {
	content: none !important;
	display: none !important;
}

.result-review-audit {
	margin-bottom: 1.3rem;
}

/* Bracket chart interaction styles */
.bracket-drag-box {
	position: absolute;
	z-index: 30;
	border-left: 1px solid rgba(193, 221, 168, 0.55);
	border-right: 1px solid rgba(193, 221, 168, 0.55);
	background: rgba(193, 221, 168, 0.1);
	pointer-events: none;
}

/* Dragging across the detail plot crops to that span, so the pointer says
       so on the way in. */
.bracket-scale-chart,
.bracket-scale-chart .apexcharts-svg,
.bracket-scale-chart .apexcharts-bar-area {
	cursor: crosshair;
}

/* The strip's drag handles are bare circles drawn by svg.select.js, so the
       resize cursor has to be set here rather than through an Apex option. */
.bracket-overview-chart .svg_select_points circle {
	cursor: ew-resize;
}

.bracket-overview-wrap,
.bracket-detail-wrap {
	position: relative;
	overflow: visible;
}

.bracket-overview-wrap {
	margin: 0.2rem 0 0.75rem;
	/* .bracket-brush already contributes 0.35rem, so this brings the strip
	   to the same 1rem gutter the Result strips sit in. */
	padding-inline: 0.65rem;
}

.bracket-detail-wrap {
	margin-top: 0.2rem;
}

.bracket-overview-chart {
	width: 100%;
	min-height: 92px;
	margin: 0;
	outline: none !important;
}

.bracket-scale-chart {
	outline: none !important;
}

.bracket-overview-chart *,
.bracket-scale-chart * {
	outline: none !important;
}

.bracket-overview-chart {
	border: 0 !important;
	box-shadow: none !important;
}

.bracket-detail-tooltip {
	position: absolute;
	z-index: 40;
	min-width: 15rem;
	max-width: min(34rem, 84vw);
	padding: 0.72rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: 0.7rem;
	background: var(--ink-soft);
	color: var(--paper);
	box-shadow: none;
	font-family: var(--mono);
	pointer-events: none;
	white-space: nowrap;
	transform: translateX(-50%);
}

.bracket-detail-tooltip[hidden] {
	display: none;
}

.bracket-detail-tooltip::after {
	content: "";
	position: absolute;
	left: var(--pointer-left, 50%);
	bottom: -0.42rem;
	width: 0.72rem;
	height: 0.72rem;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--ink-soft);
	transform: translateX(-50%) rotate(45deg);
}

.bracket-detail-tooltip__time {
	display: block;
	margin-bottom: 0.38rem;
	color: var(--muted);
	font-size: 0.68rem;
	font-weight: 700;
}

.bracket-detail-tooltip__value {
	display: block;
	color: var(--paper);
	font-size: 0.72rem;
	font-weight: 700;
}

.bracket-overview-chart .apexcharts-tooltip,
.bracket-scale-chart .apexcharts-tooltip {
	display: none !important;
}