/* Rankings Watch — an editorial data desk: newsprint, hairline rules, ordinal numerals, typewriter figures. */

:root {
	--paper: oklch(97.4% 0.013 84);
	--paper-raised: oklch(99.2% 0.006 84);
	--paper-sunk: oklch(94.6% 0.016 84);
	--ink: oklch(21% 0.025 262);
	--ink-soft: oklch(36% 0.022 262);
	--muted: oklch(50% 0.018 262);
	--rule: oklch(85.5% 0.014 84);
	--rule-strong: oklch(22% 0.025 262);

	/* Colour carries meaning only: movement and the No. 1 slot. */
	--up: oklch(50% 0.13 150);
	--down: oklch(54% 0.19 31);
	--new: oklch(48% 0.17 262);
	--leader: oklch(70% 0.14 80);
	--leader-wash: oklch(94.5% 0.05 86);
	--focus: oklch(54% 0.19 31);

	--font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	--text-2xs: 0.6875rem;
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--text-lg: clamp(1.1875rem, 1.08rem + 0.5vw, 1.375rem);
	--text-xl: clamp(1.5rem, 1.22rem + 1.3vw, 2.25rem);
	--text-display: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);
	--text-wordmark: clamp(3rem, 1.4rem + 7.6vw, 7.5rem);

	--gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
	--section-gap: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
	--measure: 68ch;
	--page: 78rem;

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.12 0 0 0 0 0.16 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
	:root {
		--paper: oklch(17.5% 0.016 262);
		--paper-raised: oklch(21% 0.018 262);
		--paper-sunk: oklch(15% 0.014 262);
		--ink: oklch(93.5% 0.012 84);
		--ink-soft: oklch(82% 0.012 84);
		--muted: oklch(68% 0.016 262);
		--rule: oklch(31% 0.016 262);
		--rule-strong: oklch(90% 0.012 84);
		--up: oklch(76% 0.15 150);
		--down: oklch(71% 0.17 31);
		--new: oklch(75% 0.12 262);
		--leader: oklch(81% 0.14 82);
		--leader-wash: oklch(29% 0.05 82);
		--focus: oklch(78% 0.14 82);
	}
}

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

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

body {
	margin: 0;
	background-color: var(--paper);
	background-image: var(--grain);
	color: var(--ink);
	font-family: var(--font-serif);
	font-size: var(--text-base);
	line-height: 1.5;
	font-kerning: normal;
	text-rendering: optimizeLegibility;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);
	transition: text-decoration-color 150ms ease;
}

a:hover {
	text-decoration-color: currentColor;
}

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

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

.skip-link {
	position: absolute;
	left: var(--gutter);
	top: -3rem;
	padding: 0.5rem 0.75rem;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	z-index: 10;
}

.skip-link:focus {
	top: 0.5rem;
}

/* Masthead ------------------------------------------------------------------------------------ */

.masthead {
	border-bottom: 1px solid var(--rule-strong);
	box-shadow: 0 3px 0 -1px var(--paper), 0 4px 0 -1px var(--rule-strong);
	margin-bottom: 4px;
}

.masthead__inner {
	max-width: var(--page);
	margin: 0 auto;
	padding: clamp(0.75rem, 0.5rem + 1vw, 1.5rem) var(--gutter) 0;
	display: grid;
	justify-items: center;
	text-align: center;
}

.masthead__dateline,
.masthead__tagline {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.wordmark {
	/* Two words: on a phone they stack rather than overflow. */
	max-width: 100%;
	text-wrap: balance;
	font-size: var(--text-wordmark);
	font-weight: 600;
	font-variation-settings: "opsz" 72;
	letter-spacing: -0.035em;
	line-height: 0.92;
	text-decoration: none;
	margin: 0.2em 0 0.12em;
}

.wordmark:hover {
	color: var(--ink-soft);
}

.masthead__nav {
	margin-top: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 clamp(1rem, 0.4rem + 2.4vw, 2.75rem);
	border-top: 1px solid var(--rule);
	padding: 0.6rem 0;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media (max-width: 30rem) {
	.masthead__nav {
		gap: 0 0.85rem;
		font-size: var(--text-2xs);
		letter-spacing: 0.05em;
	}
}

.masthead__nav a {
	text-decoration: none;
	padding: 0.15rem 0;
	border-bottom: 2px solid transparent;
}

.masthead__nav a:hover {
	border-bottom-color: var(--rule);
}

.masthead__nav a[aria-current="page"] {
	border-bottom-color: var(--ink);
}

/* Page frame ---------------------------------------------------------------------------------- */

.main {
	max-width: var(--page);
	margin: 0 auto;
	padding: var(--section-gap) var(--gutter);
	display: grid;
	gap: var(--section-gap);
}

/* Grid children may shrink below their content, so wide charts and tables scroll inside their own box. */
.main > *,
.ranking > * {
	min-width: 0;
}

.section-title {
	margin: 0 0 1.25rem;
	padding-top: 0.55rem;
	border-top: 3px solid var(--rule-strong);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.page-head {
	max-width: var(--measure);
}

.page-title,
.ranking__title {
	margin: 0;
	font-size: var(--text-display);
	font-weight: 600;
	font-variation-settings: "opsz" 72;
	letter-spacing: -0.03em;
	line-height: 0.98;
	text-wrap: balance;
}

.standfirst {
	margin: 1rem 0 0;
	font-size: var(--text-lg);
	font-style: italic;
	line-height: 1.4;
	color: var(--ink-soft);
	max-width: var(--measure);
	text-wrap: pretty;
}

/* The ranking's answer in one sentence; the standfirst under it says where the list comes from. */
.ranking__lede {
	margin: 1rem 0 0;
	font-size: var(--text-lg);
	line-height: 1.4;
	color: var(--ink);
	max-width: var(--measure);
	text-wrap: pretty;
}

.ranking__lede + .standfirst {
	margin-top: 0.5rem;
	font-size: var(--text-base);
}

.kicker {
	margin: 0 0 0.9rem;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.kicker__order {
	color: var(--ink);
	font-weight: 600;
}

.empty,
.moves__empty {
	margin: 0;
	padding: 1.25rem 0;
	color: var(--ink-soft);
	font-style: italic;
}

.notice {
	margin: 0;
	padding: 0.85rem 1rem;
	border-left: 3px solid var(--down);
	background: var(--paper-sunk);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
}

/* Movement markers ----------------------------------------------------------------------------- */

.move {
	display: inline-block;
	min-width: 3.4ch;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: var(--muted);
}

.move--up {
	color: var(--up);
}

.move--down {
	color: var(--down);
}

.move--new {
	color: var(--new);
}

.move--new > span {
	padding: 0.05rem 0.3rem;
	border: 1px solid currentColor;
	border-radius: 2px;
	font-size: var(--text-2xs);
	letter-spacing: 0.08em;
}

/* The moves (front page lead) ------------------------------------------------------------------ */

.moves__head,
.board__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
}

.moves__head .section-title,
.board__head .section-title {
	flex: 1 0 100%;
	margin-bottom: 0;
}

.moves__all,
.board__note {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--muted);
	margin: 0.6rem 0 1.25rem;
}

.headlines {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.headline {
	padding: 0.9rem 0 1rem;
	border-bottom: 1px solid var(--rule);
}

.headline__meta {
	margin: 0 0 0.3rem;
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.headline__meta a {
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
}

.headline__meta a:hover {
	text-decoration: underline;
}

.headline__text {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: 500;
	line-height: 1.25;
	text-wrap: balance;
}

.headline--new_edition .headline__text {
	font-style: italic;
	color: var(--ink-soft);
}

.headline__more {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1.25rem;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--ink-soft);
}

.moves .headlines {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	column-gap: clamp(1.25rem, 0.5rem + 2.5vw, 3rem);
}

/* The first move is the lead story. */
.moves .headline:first-child {
	grid-column: 1 / -1;
	padding-bottom: 1.25rem;
}

.moves .headline:first-child .headline__text {
	font-size: var(--text-xl);
	font-weight: 600;
	font-variation-settings: "opsz" 60;
	letter-spacing: -0.015em;
	line-height: 1.12;
	max-width: 30ch;
}

/* The groups: an index of subjects, then one section per subject ------------------------------- */

.group-index {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem 1.5rem;
	padding: 0.85rem 0;
	border-block: 1px solid var(--rule);
}

.group-index__note {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--muted);
}

.group-index__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.group-index__list a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45rem;
	padding: 0.3rem 0.7rem 0.32rem;
	border: 1px solid var(--rule-strong);
	border-radius: 999px;
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	transition:
		background-color 160ms var(--ease-out),
		color 160ms var(--ease-out);
}

.group-index__list a:hover {
	background: var(--ink);
	color: var(--paper);
}

.group-index__count {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: 400;
	color: var(--muted);
}

.group-index__list a:hover .group-index__count {
	color: inherit;
}

.group {
	/* Jump links land with the heading clear of the window edge. */
	scroll-margin-top: 1rem;
}

.group__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1.25rem;
	margin-bottom: clamp(1rem, 0.7rem + 1vw, 1.5rem);
	padding-top: 0.6rem;
	border-top: 3px solid var(--rule-strong);
}

.group__title {
	margin: 0;
	font-size: var(--text-xl);
	font-weight: 600;
	font-variation-settings: "opsz" 60;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.group__blurb {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--muted);
}

.board__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
}

.board__grid > .tile.is-full {
	grid-column: 1 / -1;
}

/* Tiles widen only to fill a group's last row (see tileWidth in HomePage.tsx). */
@media (min-width: 40rem) and (max-width: 63.99rem) {
	.board__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.board__grid > .tile.is-wide-md {
		grid-column: 1 / -1;
	}

	.board__grid > .tile.is-wide-md .tile__list li {
		padding-block: 0.62rem;
		font-size: var(--text-lg);
	}
}

@media (min-width: 64rem) {
	.board__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.board__grid > .tile.is-wide-lg {
		grid-column: span 2;
	}

	/* A wide tile sets its list larger, so it fills the row's height instead of leaving a gap under five short lines. */
	.board__grid > .tile.is-wide-lg .tile__title {
		font-size: var(--text-xl);
		font-variation-settings: "opsz" 60;
		letter-spacing: -0.02em;
	}

	.board__grid > .tile.is-wide-lg .tile__list li {
		padding-block: 0.62rem;
		font-size: var(--text-lg);
	}
}

.tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1rem 1.1rem 0.9rem;
	background: var(--paper-raised);
	border: 1px solid var(--rule);
	border-top: 3px solid var(--rule-strong);
	box-shadow: 0 18px 32px -30px color-mix(in oklch, var(--ink) 55%, transparent);
	transition:
		transform 220ms var(--ease-out),
		box-shadow 220ms var(--ease-out);
	min-width: 0;
}

.tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 22px 36px -28px color-mix(in oklch, var(--ink) 60%, transparent);
}

.tile {
	container-type: inline-size;
}

/* In a narrow tile the value moves under the name rather than squeezing it. */
@container (max-width: 19rem) {
	.tile__list li {
		grid-template-columns: 2.2ch 4.2ch minmax(0, 1fr);
		row-gap: 0;
	}

	.tile__value {
		grid-column: 3;
	}
}

.tile__kicker {
	margin: 0 0 0.3rem;
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.tile__standin {
	text-transform: none;
	letter-spacing: 0.02em;
}

.tile__title {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.tile__title a {
	text-decoration: none;
}

.tile__title a::after {
	/* The whole tile is the link target for pointer users. */
	content: "";
	position: absolute;
	inset: 0;
}

.tile__title a:hover {
	text-decoration: underline;
}

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

.tile__list li {
	display: grid;
	grid-template-columns: 2.2ch 4.2ch minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.42rem 0;
	border-bottom: 1px solid var(--rule);
}

.tile__list li.is-leader {
	background: linear-gradient(90deg, var(--leader-wash), transparent 85%);
	box-shadow: inset 3px 0 0 var(--leader);
	padding-left: 0.5rem;
	margin-left: -0.5rem;
}

.tile__rank {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	font-weight: 600;
	text-align: right;
}

.tile__name {
	overflow-wrap: anywhere;
	line-height: 1.25;
}

.tile__value {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--ink-soft);
	white-space: nowrap;
}

.tile__latest {
	margin: 0;
	font-size: var(--text-sm);
	font-style: italic;
	color: var(--ink-soft);
	line-height: 1.35;
}

.tile__empty {
	margin: 0;
	padding: 1rem 0;
	border-top: 1px solid var(--rule);
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

.tile__foot {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.9rem;
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: 0.04em;
	color: var(--muted);
}

.tile__warn {
	color: var(--down);
}

.tile__more {
	margin-left: auto;
	position: relative;
	z-index: 1;
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
}

/* Ranking page --------------------------------------------------------------------------------- */

.ranking {
	display: grid;
	gap: var(--section-gap);
}

.facts {
	margin: 1.75rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem clamp(1.25rem, 0.5rem + 2.5vw, 2.75rem);
}

.facts__item dt {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.facts__item dd {
	margin: 0.15rem 0 0;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	font-weight: 500;
}

.source {
	margin: 1.25rem 0 0;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--ink-soft);
}

.source__note {
	color: var(--muted);
}

.ranking__list-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0 1rem;
}

.ranking__list-head .section-title {
	flex: 1 0 100%;
}

.ranking__compared {
	margin: -0.5rem 0 1rem;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--muted);
}

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

.ranking-table thead th {
	padding: 0 0.5rem 0.6rem;
	border-bottom: 1px solid var(--rule-strong);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: left;
}

.ranking-table td,
.ranking-table tbody th {
	padding: 0.7rem 0.5rem;
	border-bottom: 1px solid var(--rule);
	vertical-align: baseline;
	text-align: left;
	font-weight: 400;
}

.ranking-table tbody tr {
	transition: background-color 150ms ease;
}

.ranking-table tbody tr:hover {
	background: var(--paper-sunk);
}

.ranking-table .col-rank {
	width: 3.5ch;
	text-align: right;
	font-size: var(--text-lg);
	font-weight: 600;
	font-variation-settings: "opsz" 36;
}

.ranking-table thead .col-rank,
.ranking-table thead .col-value {
	font-size: var(--text-2xs);
}

.ranking-table .col-move {
	width: 5.5ch;
}

.ranking-table .col-name {
	font-size: var(--text-lg);
	line-height: 1.25;
}

.ranking-table .entity {
	text-decoration: none;
}

.ranking-table .entity:hover {
	text-decoration: underline;
}

.detail {
	display: block;
	margin-top: 0.15rem;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--muted);
}

.ranking-table .col-value {
	text-align: right;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	white-space: nowrap;
}

.ranking-table tr.is-leader {
	background: linear-gradient(90deg, var(--leader-wash), transparent 70%);
}

.ranking-table tr.is-leader .col-rank {
	box-shadow: inset 3px 0 0 var(--leader);
}

.ranking-table tr.is-new .col-rank {
	box-shadow: inset 3px 0 0 var(--new);
}

@media (max-width: 30rem) {
	.ranking-table .col-name,
	.ranking-table .col-rank {
		font-size: var(--text-base);
	}

	.ranking-table td,
	.ranking-table tbody th {
		padding: 0.55rem 0.3rem;
	}
}

/* Bump chart ---------------------------------------------------------------------------------- */

.bump {
	margin: 0;
	overflow-x: auto;
}

.bump__svg {
	display: block;
	width: 100%;
	min-width: 32rem;
	height: auto;
	font-family: var(--font-mono);
}

.bump__row line {
	stroke: var(--rule);
	stroke-width: 1;
}

.bump__row text,
.bump__tick {
	fill: var(--muted);
	font-size: 11px;
}

.bump__series path {
	fill: none;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.bump__series.is-muted path {
	stroke: color-mix(in oklch, var(--muted) 55%, transparent);
	stroke-width: 1.5;
}

.bump__series.is-muted circle {
	fill: var(--paper);
	stroke: color-mix(in oklch, var(--muted) 70%, transparent);
	stroke-width: 1.25;
}

.bump__series.is-muted .bump__label {
	fill: var(--muted);
	font-size: 11px;
}

.bump__series.is-lead path {
	stroke-width: 2.75;
}

.bump__series.is-lead circle {
	stroke: var(--paper);
	stroke-width: 1.5;
}

.bump__series.is-lead .bump__label {
	font-size: 12px;
	font-weight: 600;
	fill: var(--ink);
}

.bump__series.lead-1 path {
	stroke: var(--leader);
	stroke-width: 3.5;
}

.bump__series.lead-1 circle {
	fill: var(--leader);
}

.bump__series.lead-2 path {
	stroke: var(--ink);
}

.bump__series.lead-2 circle {
	fill: var(--ink);
}

.bump__series.lead-3 path {
	stroke: var(--ink-soft);
	stroke-dasharray: 6 4;
}

.bump__series.lead-3 circle {
	fill: var(--ink-soft);
}

/* Changes page --------------------------------------------------------------------------------- */

.filters {
	display: grid;
	gap: 0.6rem;
	justify-items: start;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
}

.filters__group {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	align-items: baseline;
	gap: 0.4rem 0.5rem;
	width: 100%;
}

.filters__label {
	color: var(--muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: var(--text-2xs);
}

.filters__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
}

@media (max-width: 40rem) {
	.filters__group {
		grid-template-columns: 1fr;
	}
}

.filters a {
	padding: 0.35rem 0.65rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	text-decoration: none;
	background: var(--paper-raised);
	transition:
		border-color 150ms ease,
		background-color 150ms ease;
}

.filters a:hover {
	border-color: var(--ink-soft);
}

.filters a[aria-current="page"] {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

.pager {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
}

/* Prose and data tables (about, status) -------------------------------------------------------- */

.prose {
	display: grid;
	gap: 1rem;
}

.prose > p,
.prose > ul {
	margin: 0;
	max-width: var(--measure);
}

.prose li + li {
	margin-top: 0.45rem;
}

.table-wrap {
	overflow-x: auto;
	border-top: 1px solid var(--rule-strong);
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums lining-nums;
}

.data-table caption {
	padding: 0.6rem 0;
	text-align: left;
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.data-table th,
.data-table td {
	padding: 0.6rem 0.75rem 0.6rem 0;
	border-bottom: 1px solid var(--rule);
	text-align: left;
	vertical-align: baseline;
}

.data-table thead th {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom-color: var(--rule-strong);
}

.data-table tbody th {
	font-weight: 500;
}

.data-table .num {
	text-align: right;
	font-family: var(--font-mono);
}

.health {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 600;
	white-space: nowrap;
}

.health::before {
	content: "\25CF\00a0";
}

.health--ok {
	color: var(--up);
}

.health--warn {
	color: var(--leader);
}

.health--bad {
	color: var(--down);
}

.health--idle {
	color: var(--muted);
}

.runs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

.run {
	padding: 0.05rem 0.4rem;
	border: 1px solid var(--rule);
	border-radius: 2px;
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	color: var(--ink-soft);
}

.run--failed {
	border-color: var(--down);
	color: var(--down);
}

.run--published,
.run--first,
.run--new_edition {
	border-color: var(--up);
	color: var(--up);
}

/* Colophon ------------------------------------------------------------------------------------- */

.colophon {
	border-top: 1px solid var(--rule-strong);
	margin-top: var(--section-gap);
}

.colophon__inner {
	max-width: var(--page);
	margin: 0 auto;
	padding: 1.5rem var(--gutter) 2.5rem;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--muted);
	display: grid;
	gap: 0.5rem;
}

.colophon p {
	margin: 0;
	max-width: 90ch;
}

/* Motion: a short staggered reveal, only for people who have not asked for less motion. ---------- */

@media (prefers-reduced-motion: no-preference) {
	@keyframes rise {
		from {
			opacity: 0;
			transform: translateY(10px);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

	.board__grid > .tile,
	.moves .headline,
	.ranking-table tbody tr {
		animation: rise 600ms var(--ease-out) both;
	}

	.board__grid > .tile:nth-child(2),
	.moves .headline:nth-child(2) {
		animation-delay: 40ms;
	}
	.board__grid > .tile:nth-child(3),
	.moves .headline:nth-child(3) {
		animation-delay: 80ms;
	}
	.board__grid > .tile:nth-child(4),
	.moves .headline:nth-child(4) {
		animation-delay: 120ms;
	}
	.board__grid > .tile:nth-child(5),
	.moves .headline:nth-child(5) {
		animation-delay: 160ms;
	}
	.board__grid > .tile:nth-child(6),
	.moves .headline:nth-child(6) {
		animation-delay: 200ms;
	}
	.board__grid > .tile:nth-child(7) {
		animation-delay: 240ms;
	}
	.board__grid > .tile:nth-child(8) {
		animation-delay: 280ms;
	}
	.board__grid > .tile:nth-child(9) {
		animation-delay: 320ms;
	}

	.ranking-table tbody tr:nth-child(n + 2) {
		animation-delay: 30ms;
	}
	.ranking-table tbody tr:nth-child(n + 4) {
		animation-delay: 60ms;
	}
	.ranking-table tbody tr:nth-child(n + 8) {
		animation-delay: 90ms;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tile,
	.tile:hover {
		transition: none;
		transform: none;
	}
}