/* ==========================================================================
   Civic Record
   Swiss institutional directory. Composed and symmetric (variance 0.20),
   data-dense (density 0.60), still (motion 0.10).
   ========================================================================== */

@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo.woff2') format('woff2-variations');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Source Sans 3';
	src: url('../fonts/source-sans-3.woff2') format('woff2-variations');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Palette. Neutrals are biased cool, toward the navy, so nothing reads as
	   default grey. */
	--bg: #f5f6f9;
	--surface: #ffffff;
	--ink: #0e1424;
	--muted: #5a6479;
	--line: #d8dce5;
	--line-strong: #b9c0cf;
	--accent: #030e4e;
	--accent-tint: #e8eaf2;
	--signal: #c2410c;

	/* Ordered ramp for the six financial-health grades. */
	--grade-a: #15803d;
	--grade-b: #4d7c0f;
	--grade-c: #a16207;
	--grade-d: #c2410c;
	--grade-e: #9a3412;
	--grade-f: #7f1d1d;

	--font-display: 'Archivo', system-ui, sans-serif;
	--font-body: 'Source Sans 3', system-ui, sans-serif;

	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 28px;
	--space-xl: 48px;
	--space-xxl: 80px;

	--radius-sm: 2px;
	--radius-md: 3px;

	/* One shared container so every section aligns on the same left edge. */
	--container: 1200px;
	--measure: 68ch;
}

/* Author-origin reset. :where() keeps specificity at zero so component rules
   always win, which is what stops headings silently falling back to body type. */
:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol) {
	margin: 0;
	padding: 0;
}

:where(ul, ol) {
	list-style: none;
}

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

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
}

/* Display type sits tight. Big type needs less leading, not more. */
h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.011em;
}

h1 {
	font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.9rem);
	line-height: 1.05;
	letter-spacing: -0.019em;
}

h2 {
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
}

h3 {
	font-size: 1.08rem;
}

a {
	color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover {
	color: var(--signal);
}

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

/* Figures must align in columns, everywhere they appear. */
.num,
table td,
table th {
	font-variant-numeric: tabular-nums;
}

.num {
	font-family: var(--font-display);
	font-feature-settings: 'tnum' 1;
}

/* --------------------------------------------------------------- structure */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-lg);
}

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

.skip-link {
	position: absolute;
	left: -9999px;
}

.skip-link:focus {
	left: var(--space-md);
	top: var(--space-md);
	z-index: 100;
	background: var(--accent);
	color: #fff;
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-md);
}

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

.site-header {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	min-height: 64px;
}

.site-brand {
	display: inline-flex;
	align-items: baseline;
	gap: 1px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.18rem;
	letter-spacing: -0.02em;
	color: var(--accent);
	text-decoration: none;
	white-space: nowrap;
}

.site-brand__mark {
	background: var(--accent);
	color: #fff;
	padding: 1px 6px 2px;
	border-radius: var(--radius-sm);
	margin-left: 3px;
}

/* Navigation stays on one line at desktop. */
.site-nav {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	margin-left: auto;
	font-size: 0.94rem;
}

.site-nav a {
	color: var(--ink);
	text-decoration: none;
	padding-block: 4px;
	border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
	color: var(--accent);
	border-bottom-color: var(--signal);
}

/* ------------------------------------------------------------- breadcrumbs */

.breadcrumbs {
	font-size: 0.85rem;
	color: var(--muted);
	padding-top: var(--space-lg);
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.breadcrumbs li::after {
	content: '/';
	margin-left: var(--space-sm);
	color: var(--line-strong);
}

.breadcrumbs li:last-child::after {
	content: '';
}

.breadcrumbs a {
	color: var(--muted);
}

/* ------------------------------------------------------- profile masthead */

.masthead {
	padding-block: var(--space-lg) var(--space-xl);
	border-bottom: 1px solid var(--line);
	background: var(--surface);
}

.masthead__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm) var(--space-md);
	margin-top: var(--space-sm);
	font-size: 0.92rem;
	color: var(--muted);
}

.masthead__code {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--accent);
	background: var(--accent-tint);
	padding: 2px 7px;
	border-radius: var(--radius-sm);
	letter-spacing: 0.02em;
}

/* Key figures. Numbers are the largest thing on the page. */
.keyfigures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--space-lg);
	margin-top: var(--space-xl);
	border-top: 1px solid var(--line);
	padding-top: var(--space-lg);
}

.keyfigure__value {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.15rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.keyfigure__label {
	display: block;
	margin-top: 2px;
	font-size: 0.82rem;
	color: var(--muted);
}

.keyfigure__note {
	display: block;
	font-size: 0.76rem;
	color: var(--line-strong);
}

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

.layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--space-xxl);
	align-items: start;
	padding-block: var(--space-xl) var(--space-xxl);
}

.sidebar {
	position: sticky;
	top: var(--space-md);
	font-size: 0.92rem;
}

@media (max-width: 900px) {
	.layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-xl);
	}

	.sidebar {
		position: static;
	}
}

/* ----------------------------------------------------------------- section */

.section + .section {
	margin-top: var(--space-xxl);
}

.section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-sm) var(--space-md);
	padding-bottom: var(--space-sm);
	border-bottom: 2px solid var(--ink);
	margin-bottom: var(--space-md);
}

.section__source {
	font-size: 0.8rem;
	color: var(--muted);
}

.subsection {
	margin-top: var(--space-lg);
}

.subsection__title {
	font-family: var(--font-display);
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--muted);
	padding-bottom: var(--space-xs);
	border-bottom: 1px solid var(--line);
	margin-bottom: var(--space-sm);
}

/* ------------------------------------------------------------------ tables */

/* Long tables scroll inside their own container so the page never does. */
.table-scroll {
	overflow-x: auto;
	border-bottom: 1px solid var(--line);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--surface);
	font-family: var(--font-display);
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
	text-align: right;
	padding: var(--space-sm) var(--space-md);
	border-bottom: 1px solid var(--line-strong);
	/* The one permitted elevation: rows pass beneath the header. */
	box-shadow: 0 1px 0 0 rgba(3, 14, 78, 0.09);
	white-space: nowrap;
}

thead th:first-child {
	text-align: left;
}

tbody th {
	font-weight: 400;
	text-align: left;
	padding: var(--space-sm) var(--space-md);
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}

tbody td {
	text-align: right;
	padding: var(--space-sm) var(--space-md);
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}

tbody tr:hover th,
tbody tr:hover td {
	background: var(--accent-tint);
}

td.is-empty {
	color: var(--line-strong);
}

/* --------------------------------------------------------------- scorecard */

/* The one bordered panel on the site. It earns its edges by aggregating five
   measures into a single judgement. */
.scorecard {
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
}

.scorecard__head {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--line);
}

.grade {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	flex: none;
	border-radius: var(--radius-md);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 1;
	color: #fff;
	background: var(--muted);
}

.grade--a { background: var(--grade-a); }
.grade--b { background: var(--grade-b); }
.grade--c { background: var(--grade-c); }
.grade--d { background: var(--grade-d); }
.grade--e { background: var(--grade-e); }
.grade--f { background: var(--grade-f); }

.grade--sm {
	width: 26px;
	height: 26px;
	font-size: 0.92rem;
	border-radius: var(--radius-sm);
}

.scorecard__label {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.22rem;
	line-height: 1.15;
}

.scorecard__sub {
	font-size: 0.84rem;
	color: var(--muted);
}

.component {
	padding-block: var(--space-md);
	border-bottom: 1px solid var(--line);
}

.component:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.component__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-md);
}

.component__name {
	font-weight: 600;
	font-size: 0.94rem;
}

.component__value {
	font-family: var(--font-display);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.component__note {
	margin-top: var(--space-xs);
	font-size: 0.84rem;
	color: var(--muted);
}

/* A bar, not an animation. Motion is near zero by design. */
.meter {
	height: 4px;
	margin-top: var(--space-sm);
	background: var(--line);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.meter__fill {
	display: block;
	height: 100%;
	background: var(--accent);
}

/* ------------------------------------------------------------ council bars */

.seatbar {
	display: flex;
	height: 10px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	margin-bottom: var(--space-md);
	background: var(--line);
}

.seatbar__part {
	height: 100%;
}

.party-list {
	display: grid;
	gap: 1px;
}

.party {
	display: grid;
	grid-template-columns: 10px 1fr auto auto;
	align-items: center;
	gap: var(--space-sm);
	padding-block: 5px;
	font-size: 0.9rem;
	border-bottom: 1px solid var(--line);
}

.party__key {
	width: 10px;
	height: 10px;
	border-radius: var(--radius-sm);
	background: var(--muted);
}

.party__seats {
	font-family: var(--font-display);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.party__share {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	min-width: 3.4em;
	text-align: right;
}

/* ----------------------------------------------------------------- people */

.people {
	display: grid;
	gap: 0;
}

.person {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: var(--space-md);
	padding-block: var(--space-sm);
	border-bottom: 1px solid var(--line);
	font-size: 0.94rem;
}

.person__role {
	color: var(--muted);
	font-size: 0.86rem;
}

.person__name {
	font-weight: 600;
}

.person__tag {
	font-size: 0.78rem;
	color: var(--muted);
	font-weight: 400;
}

@media (max-width: 560px) {
	.person {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
}

/* ------------------------------------------------------------------- lists */

.definition {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: var(--space-sm) var(--space-md);
	font-size: 0.94rem;
}

.definition dt {
	color: var(--muted);
}

.definition dd {
	overflow-wrap: anywhere;
}

.linklist li {
	border-bottom: 1px solid var(--line);
}

.linklist a {
	display: block;
	padding-block: 7px;
	font-size: 0.92rem;
}

.taglist {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-sm);
	font-size: 0.9rem;
}

.taglist li::after {
	content: ',';
	color: var(--muted);
}

.taglist li:last-child::after {
	content: '';
}

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

.btn {
	display: inline-block;
	background: var(--accent);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.92rem;
	padding: 9px var(--space-md);
	border-radius: var(--radius-md);
	border: 1px solid var(--accent);
	text-decoration: none;
}

.btn:hover {
	background: #0a1660;
	color: #fff;
}

.btn--line {
	background: transparent;
	color: var(--accent);
}

.btn--line:hover {
	background: var(--accent-tint);
	color: var(--accent);
}

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

.site-footer {
	background: var(--accent);
	color: #c9cede;
	padding-block: var(--space-xl);
	font-size: 0.9rem;
}

.site-footer a {
	color: #fff;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--space-lg);
}

.site-footer h2 {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #fff;
	margin-bottom: var(--space-sm);
}

.site-footer li {
	padding-block: 3px;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-lg);
	margin-top: var(--space-xl);
	padding-top: var(--space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 0.86rem;
}

.site-footer__note {
	margin-top: var(--space-md);
	color: #a8b0c6;
	font-size: 0.84rem;
	max-width: 78ch;
}

/* ------------------------------------------------------------------- forms */

.msa-form {
	max-width: 34rem;
	margin-top: var(--space-lg);
}

.msa-form__field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: var(--space-md);
}

.msa-form label {
	font-family: var(--font-display);
	font-size: 0.76rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--muted);
}

.msa-form input[type='text'],
.msa-form input[type='email'],
.msa-form select,
.msa-form textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	padding: 9px 10px;
}

.msa-form textarea {
	resize: vertical;
	line-height: 1.55;
}

.msa-form input:focus-visible,
.msa-form select:focus-visible,
.msa-form textarea:focus-visible {
	outline: 2px solid var(--signal);
	outline-offset: 1px;
	border-color: var(--accent);
}

.msa-form__hint {
	font-size: 0.86rem;
	color: var(--muted);
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--font-body);
	font-weight: 400;
}

.msa-form__actions {
	margin-top: var(--space-lg);
}

/* The honeypot is removed from the flow entirely rather than hidden with
   display:none, which some bots check for. */
.msa-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-notice {
	margin-top: var(--space-md);
	padding: var(--space-md);
	border-radius: var(--radius-md);
	border-left: 3px solid var(--muted);
	background: var(--surface);
	font-size: 0.96rem;
}

.form-notice--ok {
	border-left-color: var(--grade-a);
}

.form-notice--error {
	border-left-color: var(--signal);
}

/* ------------------------------------------------------------ election hub */

.election-hero {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	padding-block: var(--space-xl);
}

.election-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-xxl);
	align-items: center;
}

.election-hero h1 {
	max-width: 18ch;
}

.election-hero__count {
	text-align: right;
	border-left: 4px solid var(--signal);
	padding-left: var(--space-lg);
}

.election-hero__count .num {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.6rem, 1.8rem + 3vw, 4.4rem);
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--signal);
	font-variant-numeric: tabular-nums;
}

.election-hero__count span:last-child {
	display: block;
	margin-top: 4px;
	font-family: var(--font-display);
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--muted);
}

@media (max-width: 760px) {
	.election-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-lg);
	}

	.election-hero__count {
		text-align: left;
		border-left: 0;
		border-top: 4px solid var(--signal);
		padding-left: 0;
		padding-top: var(--space-md);
	}
}

.tag-coalition {
	display: inline-block;
	margin-left: 5px;
	padding: 1px 6px;
	border: 1px solid var(--signal);
	border-radius: var(--radius-sm);
	font-family: var(--font-display);
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--signal);
	white-space: nowrap;
}

/* ----------------------------------------------------------------- articles */

.topic-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

.topic-nav a {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 5px 10px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-md);
	font-size: 0.88rem;
	text-decoration: none;
	color: var(--ink);
	background: var(--surface);
}

.topic-nav a:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.topic-nav span {
	font-family: var(--font-display);
	font-size: 0.76rem;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

.article-list {
	display: grid;
	gap: 0;
}

.article-item {
	padding-block: var(--space-lg);
	border-bottom: 1px solid var(--line);
}

.article-item:first-child {
	padding-top: 0;
}

.article-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-md);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	font-family: var(--font-display);
	font-weight: 600;
}

.article-item__meta a {
	color: var(--signal);
	text-decoration: none;
}

.article-item h2 {
	margin-top: var(--space-xs);
	font-size: clamp(1.2rem, 1rem + 0.7vw, 1.55rem);
	max-width: 34ch;
}

.article-item h2 a {
	color: var(--ink);
	text-decoration: none;
}

.article-item h2 a:hover {
	color: var(--accent);
}

.article-item p {
	margin-top: var(--space-xs);
	max-width: var(--measure);
	color: var(--muted);
	font-size: 0.96rem;
}

.article-title {
	max-width: 24ch;
}

.article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: var(--space-xxl);
	align-items: start;
	padding-block: var(--space-xl) var(--space-xxl);
}

@media (max-width: 900px) {
	.article-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-xl);
	}
}

/* Running prose in an article, held to a comfortable measure. */
.article-body > p,
.article-body > ul,
.article-body > ol,
.article-body > blockquote {
	max-width: var(--measure);
	margin-top: var(--space-md);
	font-size: 1.03rem;
	line-height: 1.62;
}

.article-body > h2 {
	margin-top: var(--space-xl);
	padding-bottom: var(--space-sm);
	border-bottom: 2px solid var(--ink);
	max-width: 30ch;
}

.article-body > h3 {
	margin-top: var(--space-lg);
	max-width: 34ch;
}

.article-body > ul,
.article-body > ol {
	padding-left: 1.15rem;
}

.article-body > ul li {
	list-style: disc;
	margin-top: 5px;
}

.article-body > ol li {
	list-style: decimal;
	margin-top: 5px;
}

.article-body .table-scroll {
	margin-top: var(--space-lg);
}

/* A pulled-out number, used where one figure carries the story. */
.keynote {
	margin-top: var(--space-lg);
	padding: var(--space-lg);
	background: var(--surface);
	border-left: 3px solid var(--signal);
	border-radius: var(--radius-md);
}

.keynote strong {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.keynote span {
	display: block;
	margin-top: 4px;
	font-size: 0.94rem;
	color: var(--muted);
	max-width: 52ch;
}

.pagination {
	margin-top: var(--space-xl);
	padding-top: var(--space-md);
	border-top: 1px solid var(--line);
	font-family: var(--font-display);
	font-size: 0.92rem;
}

.pagination .page-numbers {
	padding: 4px 9px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	text-decoration: none;
	margin-right: 4px;
}

.pagination .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

/* ---------------------------------------------------------------- home page */

/* The hero is one moment: headline, one line of subtext, and the search that
   most visitors came for. It fits the first viewport at desktop. */
.hero {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	padding-block: var(--space-xl) var(--space-lg);
}

.hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: var(--space-xxl);
	align-items: center;
}

/* The measure is set so the headline lands on two lines at desktop, which is
   the cap the design holds; a third line here is a font-size error, not copy. */
.hero h1 {
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3.05rem);
	line-height: 1.02;
	letter-spacing: -0.025em;
	max-width: 22ch;
}

.hero__sub {
	margin-top: var(--space-md);
	max-width: 46ch;
	font-size: 1.03rem;
	color: var(--muted);
}

.hero__search {
	display: flex;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
	max-width: 520px;
}

.hero__search input[type='search'] {
	flex: 1;
	min-width: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-md);
	padding: 10px 12px;
}

.hero__search input[type='search']:focus-visible {
	outline: 2px solid var(--signal);
	outline-offset: 1px;
	border-color: var(--accent);
}

.hero__map {
	max-width: 420px;
	margin-inline: auto;
	width: 100%;
}

@media (max-width: 900px) {
	.hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-lg);
	}

	.hero__map {
		display: none; /* The province table below carries the same navigation. */
	}
}

/* National figures. A dl rather than a row of cards. */
.figures-strip {
	background: var(--accent);
	color: #fff;
	padding-block: var(--space-lg);
}

.figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-lg);
	margin: 0;
}

.figures dt {
	font-family: var(--font-display);
	font-size: 0.74rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #a8b0c6;
}

.figures dd {
	margin: 2px 0 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.figures p {
	font-size: 0.82rem;
	color: #c9cede;
}

/* Election notice. Signal colour, because this is the one live, changing thing. */
.election {
	border-bottom: 1px solid var(--line);
	background: var(--surface);
	padding-block: var(--space-lg);
}

.election__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-xl);
	align-items: center;
}

.election h2 {
	font-size: 1.15rem;
}

.election p {
	margin-top: var(--space-xs);
	max-width: 62ch;
	font-size: 0.95rem;
	color: var(--muted);
}

.election__count {
	text-align: right;
	border-left: 3px solid var(--signal);
	padding-left: var(--space-md);
}

.election__count .num {
	display: block;
	font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem);
	font-weight: 700;
	line-height: 1;
	color: var(--signal);
}

.election__count span:last-child {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--muted);
}

@media (max-width: 700px) {
	.election__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-md);
	}

	.election__count {
		text-align: left;
	}
}

.home-sections {
	padding-block: var(--space-xxl);
}

.extremes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-xl);
	margin-top: var(--space-lg);
}

.ranked li {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-sm);
	padding-block: 6px;
	border-bottom: 1px solid var(--line);
	font-size: 0.95rem;
}

.ranked__score {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

.home-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

/* --------------------------------------------------------------- comparison */

.compare-picker {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-md);
	align-items: end;
	padding: var(--space-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-xl);
}

.compare-picker__slot {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.compare-picker label {
	font-family: var(--font-display);
	font-size: 0.74rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--muted);
}

.compare-picker select {
	width: 100%;
	font-family: var(--font-body);
	font-size: 0.94rem;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	padding: 7px 8px;
}

.compare-picker select:focus-visible {
	outline: 2px solid var(--signal);
	outline-offset: 1px;
}

.compare-picker__actions {
	display: flex;
	align-items: flex-end;
}

.compare-table th[scope='col'] a {
	font-family: var(--font-display);
	font-weight: 700;
	text-decoration: none;
	color: var(--accent);
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.98rem;
}

.compare-table th[scope='col'] {
	text-align: right;
	vertical-align: bottom;
}

.compare-table th[scope='col']:first-child {
	text-align: left;
}

.compare-table__sub {
	display: block;
	margin-top: 2px;
	font-weight: 400;
	font-size: 0.72rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--muted);
}

/* Best and worst are carried by weight and a rule, not by colour alone: the
   grade ramp is the only place colour encodes meaning on this site. */
.compare-table td.is-best,
.compare-table td.is-worst {
	font-weight: 700;
}

.compare-table td.is-best {
	box-shadow: inset 3px 0 0 0 var(--grade-a);
}

.compare-table td.is-worst {
	box-shadow: inset 3px 0 0 0 var(--signal);
}

.stat-source {
	margin-top: var(--space-sm);
	font-size: 0.8rem;
	color: var(--muted);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The map leads; the reading column sits beside it. */
.map-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: var(--space-xxl);
	align-items: start;
}

@media (max-width: 980px) {
	.map-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-xl);
	}
}

/* -------------------------------------------------------------------- maps */

.map {
	margin: 0;
}

.map svg {
	display: block;
	width: 100%;
	height: auto;
}

.map__shape {
	fill: var(--accent-tint);
	stroke: var(--surface);
	stroke-width: 0.6;
	stroke-linejoin: round;
}

/* Hover is an instant fill change, not a transition. Motion is near zero. */
.map__link:hover .map__shape,
.map__link:focus .map__shape {
	fill: var(--signal);
	stroke: var(--surface);
	stroke-width: 1.2;
}

.map__link:focus {
	outline: none;
}

.map__link:focus-visible .map__shape {
	stroke: var(--ink);
	stroke-width: 1.6;
}

.map__link.is-current .map__shape {
	fill: var(--accent);
}

/* Grade ramp, shared by the choropleth fills and the legend keys. */
.map__shape--a { fill: var(--grade-a); }
.map__shape--b { fill: var(--grade-b); }
.map__shape--c { fill: var(--grade-c); }
.map__shape--d { fill: var(--grade-d); }
.map__shape--e { fill: var(--grade-e); }
.map__shape--f { fill: var(--grade-f); }
.map__shape--none { fill: var(--line); }

/* Province borders drawn over the municipality fills for orientation. */
.map__overlay path {
	fill: none;
	stroke: var(--ink);
	stroke-width: 1.1;
	stroke-linejoin: round;
	pointer-events: none;
}

.map__labels text {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	fill: var(--accent);
	text-anchor: middle;
	pointer-events: none;
}

.map--provinces .map__shape {
	fill: var(--surface);
	stroke: var(--line-strong);
	stroke-width: 1;
}

.map--provinces .map__link:hover .map__shape {
	fill: var(--accent-tint);
	stroke: var(--accent);
}

.map--provinces .map__link.is-current .map__shape {
	fill: var(--accent);
}

/* Locator on a municipality profile. */
.map--locator {
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface);
	padding: var(--space-md);
}

.map__context {
	fill: var(--bg);
	stroke: var(--line-strong);
	stroke-width: 0.8;
	stroke-linejoin: round;
}

.map__selected {
	fill: var(--signal);
	stroke: var(--ink);
	stroke-width: 0.6;
	stroke-linejoin: round;
}

.map--locator figcaption {
	margin-top: var(--space-sm);
	font-size: 0.82rem;
	color: var(--muted);
}

.map__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm) var(--space-md);
	margin-top: var(--space-md);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--line);
	font-size: 0.84rem;
}

.map__legend-title {
	font-family: var(--font-display);
	font-size: 0.76rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--muted);
}

.map__key {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

/* Legend keys are HTML, so they need background rather than the SVG fill the
   map shapes use. */
.map__key-swatch {
	width: 12px;
	height: 12px;
	border-radius: var(--radius-sm);
	background: var(--line);
}

.map__key-swatch--a { background: var(--grade-a); }
.map__key-swatch--b { background: var(--grade-b); }
.map__key-swatch--c { background: var(--grade-c); }
.map__key-swatch--d { background: var(--grade-d); }
.map__key-swatch--e { background: var(--grade-e); }
.map__key-swatch--f { background: var(--grade-f); }

/* A still page is the intended result, but respect the preference anyway. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}