/**
 * Mönster — theme styles.
 *
 * Reads the tokens in tokens.css. Ordered: base, primitives, layout, header,
 * footer, then one block per screen, then the editor-facing block styles,
 * then responsive.
 *
 * Two house rules, both learned the hard way on this family of themes:
 *   1. Never style a bare element inside a component that also contains
 *      utility spans (`.mn-card p` will eat a `.mn-kicker`). Scope to `>`
 *      or to the class.
 *   2. Flat colour and rules only. No box-shadow, no gradient, anywhere.
 */

/* ══════════════════════════════════════════════════════════════════
   1 · Base
   ══════════════════════════════════════════════════════════════════ */

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--mn-sticky-top) + 12px);
}

body {
	background: var(--mn-cream);
	color: var(--mn-body);
	font-family: var(--mn-serif);
	font-weight: 300;
	font-size: 20px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-optical-sizing: auto;
	/* Swedish place names are long and the display sizes are large: without
	   this, "Skinnarviksberget" at 22px pushes a 320px viewport sideways. */
	overflow-wrap: break-word;
}

::selection {
	background: var(--mn-amber);
	color: var(--mn-ink);
}

a {
	color: var(--mn-ink);
	text-decoration: none;
	transition: color var(--mn-ease), background-color var(--mn-ease), border-color var(--mn-ease);
}

a:hover {
	color: var(--mn-tomato-text);
}

/* The one focus treatment. The prototype had none; this is production. */
:focus-visible {
	outline: 2px solid var(--mn-tomato);
	outline-offset: 2px;
	border-radius: 2px;
}

.mn-on-dark :focus-visible,
.mn-hubhead :focus-visible {
	outline-color: var(--mn-amber);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

.mn-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mn-skip {
	position: absolute;
	top: -60px;
	left: 16px;
	z-index: 200;
	padding: 13px 20px;
	border-radius: var(--mn-r-pill);
	background: var(--mn-ink);
	color: var(--mn-cream);
	font: 700 15px/1 var(--mn-display);
}

.mn-skip:focus {
	top: 12px;
	color: var(--mn-cream);
}

/* ══════════════════════════════════════════════════════════════════
   2 · Primitives
   ══════════════════════════════════════════════════════════════════ */

.mn-wrap {
	max-width: var(--mn-container);
	margin-inline: auto;
	padding-inline: var(--mn-gutter);
}

/* Full-bleed band with a contained child. */
.mn-band {
	position: relative;
	overflow: hidden;
}

.mn-band--dark {
	background: var(--mn-ink);
	color: var(--mn-on-dark-body);
}

.mn-band--surface {
	background: var(--mn-surface);
}

.mn-kicker {
	display: block;
	font: 500 11px/1 var(--mn-mono);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--mn-muted);
}

.mn-label {
	display: block;
	font: 600 10px/1 var(--mn-mono);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mn-muted);
}

.mn-meta {
	display: block;
	font: 500 10px/1.4 var(--mn-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mn-muted);
}

.mn-badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 9px;
	padding: 8px 15px;
	border-radius: var(--mn-r-pill);
	background: var(--mn-accent, var(--mn-tomato));
	color: var(--mn-on-accent, var(--mn-on-tomato));
	font: 600 11px/1 var(--mn-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
}

a.mn-badge:hover {
	background: var(--mn-ink);
	color: var(--mn-cream);
}

.mn-h1 {
	font: 800 clamp(38px, 9.6px + 4.444vw, 62px) / 0.98 var(--mn-display);
	letter-spacing: -0.04em;
	color: var(--mn-ink);
	text-wrap: pretty;
}

.mn-h2 {
	font: 700 clamp(24px, 16.9px + 1.111vw, 30px) / 1 var(--mn-display);
	letter-spacing: -0.03em;
	color: var(--mn-ink);
	text-wrap: pretty;
}

.mn-standfirst {
	font: 300 clamp(18px, 13.26px + 0.741vw, 22px) / 1.5 var(--mn-serif);
	color: var(--mn-body);
	max-width: 56ch;
}

/* Section head: H2 left, a link or note right. */
.mn-sectionhead {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	flex-wrap: wrap;
}

.mn-sectionhead--ruled {
	padding-bottom: 16px;
	border-bottom: var(--mn-rule-heavy);
}

.mn-seeall {
	font: 400 14px/1 var(--mn-serif);
	letter-spacing: .14em;
	color: var(--mn-amber);
	white-space: nowrap;
}

.mn-seeall:hover {
	color: var(--mn-cream);
}

/* Buttons */
.mn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 17px 28px;
	border: 1px solid transparent;
	border-radius: var(--mn-r-pill);
	font: 700 15px/1 var(--mn-display);
	text-align: center;
	cursor: pointer;
}

.mn-btn--primary {
	background: var(--mn-ink);
	color: var(--mn-cream);
}

.mn-btn--primary:hover {
	background: var(--mn-tomato);
	color: var(--mn-cream);
}

.mn-btn--ghost {
	background: transparent;
	border-color: rgba(30, 26, 23, .3);
	color: var(--mn-ink);
	font-weight: 400;
	padding: 17px 26px;
}

.mn-btn--ghost:hover {
	background: var(--mn-tint-ghost);
	color: var(--mn-ink);
}

.mn-btn--amber {
	background: var(--mn-amber);
	color: var(--mn-on-amber);
	padding: 15px 24px;
}

.mn-btn--amber:hover {
	background: var(--mn-cream);
	color: var(--mn-ink);
}

/* Pill — nav items, tags, sort controls, pagination. */
.mn-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--mn-rule-mid);
	border-radius: var(--mn-r-pill);
	background: transparent;
	color: var(--mn-ink);
	font: 400 15px/1 var(--mn-display);
	white-space: nowrap;
}

.mn-pill:hover,
.mn-pill:focus-visible {
	background: var(--mn-ink);
	color: var(--mn-cream);
}

.mn-pill--on {
	background: var(--mn-ink);
	color: var(--mn-cream);
	border-color: var(--mn-ink);
}

.mn-pill--mono {
	font: 500 11px/1 var(--mn-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 9px 14px;
}

/* Underline link — text with a 2px accent rule under it. */
.mn-ulink {
	align-self: flex-start;
	padding-bottom: 3px;
	border-bottom: 2px solid var(--mn-tomato);
	font: 700 15px/1.3 var(--mn-display);
	color: var(--mn-ink);
}

.mn-ulink:hover {
	color: var(--mn-tomato-text);
}

/* Image mat — the flat fallback behind a card that has no picture yet. */
.mn-mat {
	position: relative;
	display: block;
	overflow: hidden;
	background-color: var(--mn-surface);
	background-image: var(--mn-mat);
}

.mn-mat > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mn-mat--dark {
	background-color: var(--mn-ink-soft);
	background-image: var(--mn-mat-dark);
}

.mn-mat--deep {
	background-color: var(--mn-surface-deep);
}

/* Ad slot */
.mn-ad {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.mn-ad__label {
	font: 500 9px/1 var(--mn-mono);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mn-muted);
}

.mn-ad__frame {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	overflow: hidden;
}

.mn-ad--placeholder .mn-ad__frame {
	border: 1px dashed rgba(30, 26, 23, .3);
	border-radius: var(--mn-r-sm);
	background: rgba(30, 26, 23, .02);
	font: 500 10px/1 var(--mn-mono);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mn-muted);
	text-align: center;
	padding: 12px;
}

.mn-ad--leaderboard .mn-ad__frame {
	min-height: 104px;
}

.mn-ad--incontent .mn-ad__frame {
	min-height: 280px;
}

.mn-ad--skyscraper .mn-ad__frame {
	min-height: 600px;
}

/* ══════════════════════════════════════════════════════════════════
   3 · Logo
   ══════════════════════════════════════════════════════════════════ */

.mn-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

.mn-logo__mark {
	flex: 0 0 auto;
	display: block;
}

.mn-logo__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mn-logo__name {
	font: 800 21px/1 var(--mn-display);
	letter-spacing: -0.035em;
	color: var(--mn-ink);
}

.mn-logo__tld {
	font: 500 8.5px/1 var(--mn-mono);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--mn-muted);
}

.mn-logo--dark .mn-logo__name {
	color: var(--mn-cream);
}

.mn-logo--dark .mn-logo__tld {
	color: var(--mn-on-dark-muted);
}

.mn-logo--sm .mn-logo__name {
	font-size: 19px;
}

.mn-logo__img {
	max-height: 46px;
	width: auto;
}

/* ══════════════════════════════════════════════════════════════════
   4 · Header
   ══════════════════════════════════════════════════════════════════ */

.mn-head {
	position: relative;
	z-index: 20;
	background: var(--mn-cream);
	border-bottom: 1px solid var(--mn-rule-edge);
}

.mn-head__utility {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-block: 9px;
	border-bottom: 1px solid var(--mn-rule-faint);
	font: 500 10px/1.4 var(--mn-mono);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mn-muted);
}

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

.mn-head__utility a:hover {
	color: var(--mn-ink);
}

.mn-head__utilityright {
	display: flex;
	align-items: center;
	gap: 18px;
}

.mn-head__divider {
	width: 1px;
	height: 11px;
	background: var(--mn-rule-mid);
}

.mn-head__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding-block: 20px;
}

.mn-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.mn-nav ul {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mn-nav .mn-nav__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--mn-rule-mid);
	border-radius: var(--mn-r-pill);
	font: 400 15px/1 var(--mn-display);
	color: var(--mn-ink);
	white-space: nowrap;
}

.mn-nav .mn-nav__link:hover,
.mn-nav .mn-nav__link:focus-visible {
	background: var(--mn-ink);
	color: var(--mn-cream);
}

/* Current section keeps the accent it owns, as a rule not a fill. */
.mn-nav .current-menu-item > .mn-nav__link,
.mn-nav .current-menu-parent > .mn-nav__link,
.mn-nav .current-menu-ancestor > .mn-nav__link {
	border-color: var(--mn-accent, var(--mn-ink));
	border-width: 2px;
	padding-block: 9px;
}

/* One level of children, opened on hover and on focus. */
.mn-nav li {
	position: relative;
}

.mn-nav .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 40;
	display: none;
	flex-direction: column;
	gap: 0;
	min-width: 230px;
	padding: 8px;
	border: 1px solid var(--mn-rule-mid);
	border-radius: var(--mn-r-md);
	background: var(--mn-cream);
}

.mn-nav li:hover > .sub-menu,
.mn-nav li:focus-within > .sub-menu {
	display: flex;
}

.mn-nav .sub-menu .mn-nav__link {
	border: 0;
	border-radius: var(--mn-r-thumb);
	width: 100%;
	min-height: 40px;
	padding: 9px 12px;
	white-space: normal;
}

.mn-head__tools {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mn-burger {
	display: none;
	align-items: center;
	gap: 9px;
}

.mn-icon {
	flex: 0 0 auto;
}

/* Search panel, revealed by the header pill. */
.mn-searchpanel {
	display: none;
	padding-bottom: 22px;
}

.mn-searchpanel.is-open {
	display: block;
}

.mn-searchform {
	display: flex;
	gap: 8px;
	max-width: 560px;
	margin-left: auto;
}

.mn-searchform__field {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: 13px 18px;
	border: 1px solid var(--mn-rule-mid);
	border-radius: var(--mn-r-pill);
	background: transparent;
	font: 400 16px/1.2 var(--mn-serif);
	color: var(--mn-ink);
}

.mn-searchform__field::placeholder {
	color: var(--mn-muted);
	opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════
   5 · Footer
   ══════════════════════════════════════════════════════════════════ */

.mn-foot {
	background: var(--mn-ink);
	padding-top: 56px;
	color: var(--mn-on-dark-body);
}

.mn-foot__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 44px;
	padding-bottom: 44px;
}

.mn-foot__brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mn-foot__blurb {
	max-width: 32ch;
	font: 300 17px/1.55 var(--mn-serif);
	color: var(--mn-on-dark-desc);
}

.mn-foot__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mn-foot__head {
	font: 600 10px/1 var(--mn-mono);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mn-amber);
}

.mn-foot__col ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mn-foot__col a {
	font: 300 17px/1.35 var(--mn-serif);
	color: var(--mn-on-dark-body);
}

.mn-foot__col a:hover {
	color: var(--mn-cream);
}

.mn-newsletter {
	display: flex;
	gap: 8px;
	padding-top: 4px;
	flex-wrap: wrap;
}

.mn-newsletter__field {
	flex: 1 1 180px;
	min-width: 0;
	min-height: 44px;
	padding: 13px 16px;
	border: 1px solid var(--mn-rule-dark-mid);
	border-radius: var(--mn-r-pill);
	background: transparent;
	font: 400 15px/1.2 var(--mn-serif);
	color: var(--mn-cream);
}

.mn-newsletter__field::placeholder {
	color: var(--mn-on-dark-muted);
	opacity: 1;
}

.mn-newsletter__submit {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 13px 20px;
	border: 0;
	border-radius: var(--mn-r-pill);
	background: var(--mn-amber);
	color: var(--mn-on-amber);
	font: 700 14px/1 var(--mn-display);
}

.mn-newsletter__submit:hover {
	background: var(--mn-cream);
}

.mn-newsletter__note {
	flex: 1 0 100%;
	font: 500 10px/1.5 var(--mn-mono);
	letter-spacing: .1em;
	color: var(--mn-on-dark-muted);
}

.mn-foot__legal {
	border-top: 1px solid var(--mn-rule-dark);
}

.mn-foot__legalinner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding-block: 20px;
	font: 500 10px/1.6 var(--mn-mono);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mn-on-dark-muted);
}

.mn-foot__legalinner ul {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mn-foot__legalinner a {
	color: var(--mn-on-dark-muted);
}

.mn-foot__legalinner a:hover {
	color: var(--mn-cream);
}

/* ══════════════════════════════════════════════════════════════════
   6 · Home
   ══════════════════════════════════════════════════════════════════ */

.mn-hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--mn-rule-edge);
}

.mn-hero__shapes {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.mn-hero__shape {
	position: absolute;
	border-radius: 50%;
}

.mn-hero__shape--a {
	width: 380px;
	height: 380px;
	top: -120px;
	right: -70px;
	background: var(--mn-tomato);
}

.mn-hero__shape--b {
	width: 180px;
	height: 180px;
	top: 160px;
	right: 250px;
	background: var(--mn-sky);
}

.mn-hero__shape--c {
	width: 260px;
	height: 260px;
	bottom: -90px;
	right: 130px;
	border-radius: 260px 260px 0 0;
	background: var(--mn-leaf);
}

.mn-hero__inner {
	position: relative;
	padding-block: 64px 76px;
}

.mn-hero__text {
	max-width: 680px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.mn-hero__title {
	font: 800 clamp(44px, 3.7px + 6.296vw, 78px) / 0.94 var(--mn-display);
	letter-spacing: -0.045em;
	color: var(--mn-ink);
	text-wrap: pretty;
}

.mn-hero__standfirst {
	max-width: 46ch;
	font: 300 20px/1.55 var(--mn-serif);
	color: var(--mn-body);
}

.mn-hero__actions {
	display: flex;
	gap: 12px;
	padding-top: 8px;
	flex-wrap: wrap;
}

/* Numbered category rows */
.mn-rows {
	padding-block: 8px 56px;
}

.mn-row {
	display: grid;
	grid-template-columns: 104px 1fr 300px;
	align-items: center;
	gap: 28px;
	padding-block: 26px;
	border-bottom: 1px solid var(--mn-rule-mid);
	color: var(--mn-ink);
}

.mn-row:hover {
	background: var(--mn-tint-hover);
	color: var(--mn-ink);
}

.mn-row__n {
	font: 800 clamp(38px, 21.4px + 2.593vw, 52px) / 1 var(--mn-display);
	letter-spacing: -0.05em;
	color: var(--mn-accent-display, var(--mn-tomato-display));
}

.mn-row__text {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.mn-row__title {
	font: 700 clamp(21px, 13.9px + 1.111vw, 27px) / 1.1 var(--mn-display);
	letter-spacing: -0.025em;
	color: var(--mn-ink);
}

.mn-row__body {
	font: 300 17px/1.5 var(--mn-serif);
	color: var(--mn-body-alt);
}

.mn-row__pic {
	height: 96px;
	border-radius: var(--mn-r-pill);
}

/* Card grid — This week, Related, Search results */
.mn-cardgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.mn-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--mn-ink);
}

.mn-card__pic {
	height: 180px;
	border-radius: var(--mn-r-sm);
}

.mn-card__kicker {
	font: 500 10px/1 var(--mn-mono);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mn-accent-text, var(--mn-tomato-text));
}

.mn-card__title {
	font: 700 20px/1.2 var(--mn-display);
	letter-spacing: -0.02em;
	color: var(--mn-ink);
	text-wrap: pretty;
}

.mn-card:hover .mn-card__title {
	color: var(--mn-tomato-text);
}

.mn-card__excerpt {
	font: 300 16px/1.5 var(--mn-serif);
	color: var(--mn-body-alt);
}

/* On dark, the accent kicker becomes amber and the title lifts to amber. */
.mn-band--dark .mn-card__kicker {
	color: var(--mn-amber);
}

.mn-band--dark .mn-card__title {
	color: var(--mn-cream);
}

.mn-band--dark .mn-card:hover .mn-card__title {
	color: var(--mn-amber);
}

.mn-band--dark .mn-card__excerpt {
	color: var(--mn-on-dark-body);
}

.mn-band__inner {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-block: 56px 64px;
}

.mn-band--dark .mn-h2 {
	color: var(--mn-cream);
}

/* Seasons */
.mn-seasons {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.mn-season {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 210px;
	padding: 26px 22px 28px;
	border-radius: var(--mn-r-lg);
	background: var(--mn-season-bg, var(--mn-surface));
	color: var(--mn-season-fg, var(--mn-ink));
}

.mn-season__months {
	font: 500 10px/1 var(--mn-mono);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mn-season-label, var(--mn-leaf-text));
}

.mn-season__title {
	font: 700 26px/1.05 var(--mn-display);
	letter-spacing: -0.03em;
	color: var(--mn-season-fg, var(--mn-ink));
}

.mn-season__text {
	font: 300 16px/1.5 var(--mn-serif);
	color: var(--mn-season-body, var(--mn-body-alt));
}

a.mn-season:hover {
	color: var(--mn-season-fg, var(--mn-ink));
	outline: 2px solid var(--mn-ink);
	outline-offset: -2px;
}

/* Trust panel */
.mn-trust {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--mn-rule-mid);
	border-radius: var(--mn-r-xl);
	overflow: hidden;
}

.mn-trust__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	padding: 44px 40px 48px;
}

.mn-trust__title {
	font: 700 clamp(26px, 16.5px + 1.481vw, 34px) / 1.08 var(--mn-display);
	letter-spacing: -0.03em;
	color: var(--mn-ink);
	text-wrap: pretty;
}

.mn-trust__body {
	max-width: 44ch;
	font: 300 18px/1.6 var(--mn-serif);
	color: var(--mn-body);
}

.mn-trust__kicker {
	color: var(--mn-tomato-text);
	letter-spacing: .2em;
	font-size: 10px;
}

.mn-trust__pic {
	min-height: 300px;
}

/* ══════════════════════════════════════════════════════════════════
   7 · Article
   ══════════════════════════════════════════════════════════════════ */

.mn-crumbs {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding-top: 20px;
	font: 500 10px/1.6 var(--mn-mono);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mn-muted);
}

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

.mn-crumbs a:hover {
	color: var(--mn-tomato-text);
}

.mn-crumbs [aria-current] {
	color: var(--mn-ink);
}

.mn-titleblock {
	max-width: 800px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 28px;
}

.mn-byline {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding-block: 18px;
	border-top: 1px solid var(--mn-rule-mid);
	border-bottom: 1px solid var(--mn-rule-mid);
}

.mn-byline__avatar {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	overflow: hidden;
	/* A ground, so an author with no avatar — or a Gravatar request that never
	   returns — still reads as a disc rather than a hole in the byline. */
	background: var(--mn-surface);
}

.mn-byline__avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.mn-byline__who {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.mn-byline__name {
	font: 600 15px/1.3 var(--mn-display);
	color: var(--mn-ink);
}

.mn-byline__dates {
	display: flex;
	flex-direction: column;
	gap: 3px;
	text-align: right;
	margin-left: auto;
}

/* The green checked date is the site's trust signal. It is deliberately the
   only place leaf is used as small type outside a category context. */
.mn-byline__checked {
	color: var(--mn-leaf-text);
}

.mn-figure {
	margin-top: 28px;
}

.mn-figure__pic {
	height: clamp(220px, 37vw, 440px);
	border-radius: var(--mn-r-xl);
}

.mn-figure__caption,
.mn-prose figcaption {
	margin-top: 12px;
	font: 300 italic 14px/1.5 var(--mn-serif);
	color: var(--mn-muted);
}

.mn-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--mn-sidebar);
	gap: 64px;
	align-items: start;
	padding-block: 52px 72px;
}

.mn-layout--wide {
	grid-template-columns: minmax(0, 1fr);
}

/* ── Prose ───────────────────────────────────────────────────────── */

.mn-prose {
	max-width: var(--mn-measure);
	display: flex;
	flex-direction: column;
	gap: 26px;
	font: 300 20px/1.75 var(--mn-serif);
	color: var(--mn-body);
}

.mn-prose > * {
	margin: 0;
}

/* The About page runs full width, so its prose gets a wider measure and lets
   the pattern blocks (principles, team, contact cards) break out of it. */
.mn-prose--wide {
	max-width: none;
}

/* Full-width pattern blocks are page sections, not paragraphs, so they get
   the section rhythm rather than the prose gap. */
.mn-prose--wide > .wp-block-columns {
	margin-block: 26px;
}

.mn-prose--wide > .wp-block-columns:first-child {
	margin-top: 0;
}

.mn-prose--wide > .wp-block-columns:last-child {
	margin-bottom: 0;
}

.mn-prose--wide > p,
.mn-prose--wide > h2,
.mn-prose--wide > h3,
.mn-prose--wide > h4,
.mn-prose--wide > ul,
.mn-prose--wide > ol,
.mn-prose--wide > blockquote {
	max-width: var(--mn-measure);
}

.mn-comment__reply a {
	color: var(--mn-tomato-text);
}

.mn-prose > p:first-child,
.mn-prose > .is-style-mn-lead {
	font-weight: 400;
	font-size: 21px;
	line-height: 1.7;
	color: var(--mn-ink-soft);
}

.mn-prose > h2 {
	margin-top: 22px;
	font: 700 clamp(26px, 16.5px + 1.481vw, 34px) / 1.1 var(--mn-display);
	letter-spacing: -0.03em;
	color: var(--mn-ink);
	text-wrap: pretty;
}

.mn-prose > h3 {
	margin-top: 12px;
	font: 700 25px/1.2 var(--mn-display);
	letter-spacing: -0.025em;
	color: var(--mn-ink);
	text-wrap: pretty;
}

.mn-prose > h4 {
	font: 700 21px/1.25 var(--mn-display);
	letter-spacing: -0.02em;
	color: var(--mn-ink);
}

.mn-prose a {
	color: var(--mn-ink);
	border-bottom: 1px solid var(--mn-tomato);
	padding-bottom: 1px;
}

.mn-prose a:hover {
	color: var(--mn-tomato-text);
	border-bottom-color: var(--mn-tomato-text);
}

.mn-prose > ul,
.mn-prose > ol {
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mn-prose > ul {
	list-style: none;
	padding-left: 0;
}

.mn-prose > ul > li {
	position: relative;
	padding-left: 26px;
}

.mn-prose > ul > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.72em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--mn-accent, var(--mn-tomato));
}

.mn-prose > ol {
	list-style: decimal;
}

.mn-prose > ol > li::marker {
	font: 600 17px var(--mn-mono);
	color: var(--mn-accent-text, var(--mn-tomato-text));
}

.mn-prose strong,
.mn-prose b {
	font-weight: 500;
	color: var(--mn-ink-soft);
}

.mn-prose img {
	border-radius: var(--mn-r-sm);
}

.mn-prose > figure,
.mn-prose > .wp-block-image {
	display: flex;
	flex-direction: column;
}

.mn-prose > hr,
.mn-prose > .wp-block-separator {
	width: 100%;
	height: 0;
	border: 0;
	border-top: 1px solid var(--mn-rule-mid);
}

.mn-prose > .wp-block-separator.is-style-mn-ticket {
	border-top: 2px dashed var(--mn-ink);
}

.mn-prose > table,
.mn-prose .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font: 300 17px/1.5 var(--mn-serif);
}

.mn-prose .wp-block-table th,
.mn-prose .wp-block-table td,
.mn-prose > table th,
.mn-prose > table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--mn-rule-mid);
	text-align: left;
	vertical-align: top;
}

.mn-prose .wp-block-table th,
.mn-prose > table th {
	font: 600 10px/1.4 var(--mn-mono);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--mn-muted);
}

.mn-prose .wp-block-table,
.mn-prose > table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.mn-mat__caption {
	position: absolute;
	inset: auto 12px 12px;
	font: 500 9.5px/1.5 var(--mn-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mn-body-alt);
}

.mn-mat--dark .mn-mat__caption {
	color: var(--mn-on-dark-caption);
}

.mn-row__pic .mn-mat__caption {
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.mn-prose > pre,
.mn-prose .wp-block-code {
	overflow-x: auto;
	padding: 20px 22px;
	border: 1px solid var(--mn-rule-mid);
	border-radius: var(--mn-r-sm);
	background: var(--mn-surface);
	font: 400 14px/1.6 var(--mn-mono);
	color: var(--mn-ink-soft);
}

.mn-prose .wp-block-embed__wrapper {
	position: relative;
}

.mn-prose .wp-block-embed iframe {
	max-width: 100%;
	border-radius: var(--mn-r-sm);
}

/* Pull quote — a solid accent panel. */
.mn-prose blockquote,
.mn-quote {
	padding: 32px 34px;
	border-radius: var(--mn-r-xl);
	background: var(--mn-sky);
	color: var(--mn-on-sky);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mn-prose blockquote > p,
.mn-quote > p {
	font: 400 clamp(22px, 16.07px + 0.926vw, 27px) / 1.35 var(--mn-serif);
	color: var(--mn-on-sky);
}

.mn-prose blockquote cite,
.mn-prose blockquote .wp-block-quote__citation,
.mn-quote cite {
	font: 500 10px/1.6 var(--mn-mono);
	font-style: normal;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mn-on-sky-soft);
}

.mn-prose blockquote a {
	color: var(--mn-on-sky);
	border-bottom-color: var(--mn-on-sky-soft);
}

/* ── In-article components ───────────────────────────────────────── */

/* Numbered stop */
.mn-stop {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	padding-block: 20px;
	border-top: 1px solid var(--mn-rule);
}

.mn-stop__n {
	font: 800 30px/1 var(--mn-display);
	letter-spacing: -0.04em;
	color: var(--mn-accent-display, var(--mn-tomato-display));
}

.mn-stop__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mn-stop__title {
	font: 700 22px/1.15 var(--mn-display);
	letter-spacing: -0.02em;
	color: var(--mn-ink);
	text-wrap: pretty;
}

.mn-stop__body {
	font: 300 19px/1.7 var(--mn-serif);
	color: var(--mn-body);
}

/* Practical callout */
.mn-practical {
	border: var(--mn-rule-heavy);
	border-radius: var(--mn-r-xl);
	overflow: hidden;
}

.mn-practical__head {
	padding: 14px 24px;
	background: var(--mn-amber);
}

.mn-practical__head .mn-label {
	color: var(--mn-on-amber);
	font-size: 11px;
	letter-spacing: .18em;
}

.mn-practical__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 24px 26px;
}

.mn-practical__row {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	gap: 18px;
	align-items: baseline;
	padding-bottom: 11px;
	border-bottom: 1px solid rgba(30, 26, 23, .14);
}

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

.mn-practical__k {
	font: 500 10px/1.4 var(--mn-mono);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--mn-muted);
}

.mn-practical__v {
	font: 300 18px/1.5 var(--mn-serif);
	color: var(--mn-ink-soft);
}

/* Tag row */
.mn-tags {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding-top: 20px;
	border-top: 1px solid var(--mn-rule-mid);
}

.mn-tags .mn-pill {
	font-size: 14px;
	padding: 9px 15px;
	border-color: var(--mn-rule-strong);
}

/* Corrections log */
.mn-corrections {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 24px 24px;
	border-radius: var(--mn-r-lg);
	background: var(--mn-surface);
}

.mn-corrections__item {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	gap: 18px;
	align-items: baseline;
	padding-bottom: 11px;
	border-bottom: 1px solid rgba(30, 26, 23, .14);
}

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

.mn-corrections__date {
	font: 500 10px/1.4 var(--mn-mono);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--mn-muted);
}

.mn-corrections__note {
	font: 300 17px/1.5 var(--mn-serif);
	color: var(--mn-ink-soft);
}

/* ── Sidebar ─────────────────────────────────────────────────────── */

.mn-rail {
	position: sticky;
	top: var(--mn-sticky-top);
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
}

.mn-toc {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 22px 26px;
	border-radius: var(--mn-r-lg);
	background: var(--mn-surface);
}

/* The contents module is a <details> so it can collapse on narrow viewports.
   On wide ones it is simply an open list, so neither the native marker nor the
   caret should be visible. */
.mn-toc__details > summary {
	list-style: none;
}

.mn-toc__details > summary::-webkit-details-marker,
.mn-toc__details > summary::marker {
	display: none;
	content: "";
}

.mn-toc__caret {
	display: none;
}

.mn-toc__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mn-toc__link {
	display: block;
	padding-left: 12px;
	border-left: 2px solid var(--mn-rule-mid);
	font: 400 16px/1.35 var(--mn-serif);
	color: var(--mn-body);
}

.mn-toc__link:hover,
.mn-toc__link:focus-visible,
.mn-toc__item.is-current .mn-toc__link {
	color: var(--mn-tomato-text);
	border-left-color: var(--mn-tomato);
}

.mn-glance {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 22px 26px;
	border-radius: var(--mn-r-lg);
	background: var(--mn-leaf);
}

.mn-glance .mn-label {
	color: var(--mn-on-leaf-soft);
}

.mn-glance__stat {
	font: 700 22px/1.15 var(--mn-display);
	letter-spacing: -0.02em;
	color: var(--mn-on-leaf);
}

.mn-glance__note {
	font: 300 16px/1.5 var(--mn-serif);
	color: var(--mn-on-leaf-soft);
}

/* Related */
.mn-related {
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding-block: 52px 60px;
}

.mn-related .mn-card__pic {
	height: 170px;
}

/* ══════════════════════════════════════════════════════════════════
   8 · Pillar hub / archive
   ══════════════════════════════════════════════════════════════════ */

.mn-hubhead {
	position: relative;
	overflow: hidden;
	background: var(--mn-accent, var(--mn-sky));
	color: var(--mn-on-accent, var(--mn-on-sky));
}

.mn-hubhead__shape {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.mn-hubhead__shape--a {
	width: 340px;
	height: 340px;
	top: -140px;
	right: -60px;
	background: rgba(251, 246, 236, .14);
}

.mn-hubhead__shape--b {
	width: 240px;
	height: 240px;
	bottom: -120px;
	right: 230px;
	background: rgba(30, 26, 23, .12);
}

.mn-hubhead__inner {
	position: relative;
	padding-bottom: 60px;
}

.mn-hubhead .mn-crumbs {
	margin-bottom: 38px;
}

/* The colour goes on both; the margin must not, or each link becomes a
   38px-tall flex item and the trail breaks across two lines. */
.mn-hubhead .mn-crumbs,
.mn-hubhead .mn-crumbs a {
	color: var(--mn-on-accent-soft, var(--mn-on-sky-soft));
}

.mn-hubhead .mn-crumbs a:hover,
.mn-hubhead .mn-crumbs [aria-current] {
	color: var(--mn-on-accent, var(--mn-on-sky));
}

.mn-hubhead__text {
	max-width: 660px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mn-hubhead__kicker {
	font-size: 11px;
	letter-spacing: .24em;
	color: var(--mn-on-accent-soft, var(--mn-on-sky-soft));
}

.mn-hubhead__title {
	font: 800 clamp(40px, 9.2px + 4.815vw, 66px) / 0.96 var(--mn-display);
	letter-spacing: -0.04em;
	color: var(--mn-on-accent, var(--mn-on-sky));
	text-wrap: pretty;
}

.mn-hubhead__standfirst {
	max-width: 52ch;
	font: 300 21px/1.55 var(--mn-serif);
	color: var(--mn-on-accent-soft, var(--mn-on-sky-soft));
}

/* Amber hubs invert: ink type on the fill. */
[data-mn-accent="amber"] .mn-hubhead__shape--a {
	background: rgba(30, 26, 23, .12);
}

[data-mn-accent="amber"] .mn-hubhead__shape--b {
	background: rgba(30, 26, 23, .07);
}

/* Subtopic cards */
.mn-subtopics {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.mn-subtopic {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 22px 20px 24px;
	border: 1px solid var(--mn-rule-mid);
	border-radius: var(--mn-r-md);
	color: var(--mn-ink);
}

.mn-subtopic:hover {
	background: var(--mn-surface);
	color: var(--mn-ink);
}

.mn-subtopic__count {
	font: 800 26px/1 var(--mn-display);
	letter-spacing: -0.04em;
	color: var(--mn-accent-display, var(--mn-sky-display));
}

.mn-subtopic__title {
	font: 700 18px/1.15 var(--mn-display);
	letter-spacing: -0.02em;
	color: var(--mn-ink);
}

.mn-subtopic__text {
	font: 300 15px/1.45 var(--mn-serif);
	color: var(--mn-body-alt);
}

/* Featured guide */
.mn-feature {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	border: 1px solid var(--mn-rule-mid);
	border-radius: var(--mn-r-xl);
	overflow: hidden;
	color: var(--mn-ink);
}

.mn-feature:hover {
	color: var(--mn-ink);
}

.mn-feature__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 15px;
	padding: 40px 38px 44px;
}

.mn-feature__kicker {
	font-size: 10px;
	letter-spacing: .2em;
	color: var(--mn-tomato-text);
}

.mn-feature__title {
	font: 700 clamp(27px, 14px + 2.037vw, 38px) / 1.06 var(--mn-display);
	letter-spacing: -0.035em;
	color: var(--mn-ink);
	text-wrap: pretty;
}

.mn-feature:hover .mn-feature__title {
	color: var(--mn-tomato-text);
}

.mn-feature__body {
	max-width: 44ch;
	font: 300 18px/1.6 var(--mn-serif);
	color: var(--mn-body);
}

.mn-feature__meta {
	padding-top: 4px;
}

.mn-feature__pic {
	min-height: 330px;
}

/* Guide list */
.mn-guide {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) 190px 110px;
	align-items: center;
	gap: 26px;
	padding-block: 20px;
	border-bottom: 1px solid var(--mn-rule);
	color: var(--mn-ink);
}

.mn-guide:hover {
	background: var(--mn-tint-hover);
	color: var(--mn-ink);
}

.mn-guide__pic {
	height: 78px;
	border-radius: var(--mn-r-thumb);
}

.mn-guide__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mn-guide__title {
	font: 700 21px/1.2 var(--mn-display);
	letter-spacing: -0.02em;
	color: var(--mn-ink);
	text-wrap: pretty;
}

.mn-guide:hover .mn-guide__title {
	color: var(--mn-tomato-text);
}

.mn-guide__sub {
	font: 300 16px/1.45 var(--mn-serif);
	color: var(--mn-body-alt);
}

.mn-guide__tag {
	color: var(--mn-accent-text, var(--mn-tomato-text));
}

.mn-guide__read {
	text-align: right;
}

/* Pagination */
.mn-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding-top: 34px;
}

.mn-pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.mn-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 4px;
	border: 1px solid var(--mn-rule-strong);
	border-radius: 50%;
	font: 400 13px/1 var(--mn-display);
	color: var(--mn-ink);
}

.mn-pagination .page-numbers.current {
	background: var(--mn-ink);
	border-color: var(--mn-ink);
	color: var(--mn-cream);
	font-weight: 600;
}

.mn-pagination a.page-numbers:hover {
	background: var(--mn-ink);
	border-color: var(--mn-ink);
	color: var(--mn-cream);
}

.mn-pagination .next,
.mn-pagination .prev {
	width: auto;
	padding: 0 18px;
	border-radius: var(--mn-r-pill);
}

.mn-pagination .dots {
	border-color: transparent;
}

/* FAQ */
.mn-faq {
	display: flex;
	flex-direction: column;
}

.mn-faq__item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	padding-block: 22px;
	border-top: 1px solid var(--mn-rule-mid);
}

.mn-faq__q {
	font: 700 21px/1.25 var(--mn-display);
	letter-spacing: -0.02em;
	color: var(--mn-ink);
	text-wrap: pretty;
}

.mn-faq__a {
	font: 300 18px/1.6 var(--mn-serif);
	color: var(--mn-body);
}

/* ══════════════════════════════════════════════════════════════════
   9 · About / trust page
   ══════════════════════════════════════════════════════════════════ */

.mn-pagehead {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--mn-rule-edge);
}

.mn-pagehead__shape {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.mn-pagehead__shape--a {
	width: 280px;
	height: 280px;
	top: -100px;
	right: 80px;
	background: var(--mn-amber);
}

.mn-pagehead__shape--b {
	width: 300px;
	height: 300px;
	bottom: -110px;
	right: -40px;
	background: var(--mn-plum);
}

.mn-pagehead__inner {
	position: relative;
	padding-block: 60px 66px;
}

.mn-pagehead__text {
	max-width: 640px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mn-pagehead__title {
	font: 800 clamp(38px, 9.6px + 4.444vw, 62px) / 0.97 var(--mn-display);
	letter-spacing: -0.042em;
	color: var(--mn-ink);
	text-wrap: pretty;
}

.mn-pagehead__standfirst {
	max-width: 50ch;
	font: 300 21px/1.6 var(--mn-serif);
	color: var(--mn-body);
}

.mn-principles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.mn-principle {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px 24px 32px;
	border-radius: var(--mn-r-lg);
	background: var(--mn-surface);
}

.mn-principle__dot {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--mn-accent, var(--mn-tomato));
}

.mn-principle__title {
	font: 700 23px/1.15 var(--mn-display);
	letter-spacing: -0.025em;
	color: var(--mn-ink);
	text-wrap: pretty;
}

.mn-principle__text {
	font: 300 17px/1.55 var(--mn-serif);
	color: var(--mn-body);
}

.mn-process {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

.mn-process__intro {
	position: sticky;
	top: var(--mn-sticky-top);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mn-process__title {
	font: 700 clamp(26px, 17.9px + 1.27vw, 32px) / 1.06 var(--mn-display);
	letter-spacing: -0.03em;
	color: var(--mn-ink);
	text-wrap: pretty;
}

.mn-process__lede {
	font: 300 17px/1.6 var(--mn-serif);
	color: var(--mn-body-alt);
}

.mn-process__list {
	display: flex;
	flex-direction: column;
}

.mn-process__step {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 22px;
	align-items: start;
	padding-block: 22px;
	border-top: 1px solid var(--mn-rule-mid);
}

.mn-process__n {
	font: 800 28px/1 var(--mn-display);
	letter-spacing: -0.04em;
	color: var(--mn-accent-display, var(--mn-tomato-display));
}

.mn-process__text {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.mn-process__steptitle {
	font: 700 21px/1.2 var(--mn-display);
	letter-spacing: -0.02em;
	color: var(--mn-ink);
}

.mn-process__stepbody {
	font: 300 18px/1.6 var(--mn-serif);
	color: var(--mn-body);
}

.mn-team {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.mn-member {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.mn-member__pic {
	height: 200px;
	border-radius: var(--mn-r-md);
}

.mn-member__name {
	font: 700 19px/1.15 var(--mn-display);
	letter-spacing: -0.02em;
	color: var(--mn-ink);
}

.mn-member__role {
	color: var(--mn-accent-text, var(--mn-tomato-text));
}

.mn-member__bio {
	font: 300 16px/1.5 var(--mn-serif);
	color: var(--mn-body-alt);
}

.mn-contactcards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.mn-contactcard {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 38px 34px 42px;
	border-radius: var(--mn-r-xl);
}

.mn-contactcard--dark {
	background: var(--mn-ink);
}

.mn-contactcard--dark .mn-label {
	color: var(--mn-amber);
	letter-spacing: .2em;
}

.mn-contactcard--outline {
	border: var(--mn-rule-heavy);
}

.mn-contactcard--outline .mn-label {
	color: var(--mn-tomato-text);
	letter-spacing: .2em;
}

.mn-contactcard__title {
	font: 700 28px/1.1 var(--mn-display);
	letter-spacing: -0.03em;
	color: var(--mn-ink);
	text-wrap: pretty;
}

.mn-contactcard--dark .mn-contactcard__title {
	color: var(--mn-cream);
}

.mn-contactcard__body {
	max-width: 40ch;
	font: 300 18px/1.6 var(--mn-serif);
	color: var(--mn-body);
}

.mn-contactcard--dark .mn-contactcard__body {
	color: var(--mn-on-dark-body);
}

.mn-contactcard__rows {
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding-top: 4px;
}

.mn-contactcard__row {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 16px;
	align-items: baseline;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--mn-rule-edge);
}

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

.mn-contactcard__v {
	font: 300 18px/1.4 var(--mn-serif);
	color: var(--mn-ink-soft);
}

.mn-contactcard__v a {
	color: var(--mn-ink-soft);
	border-bottom: 1px solid var(--mn-tomato);
}

/* ══════════════════════════════════════════════════════════════════
   10 · Sections, search, 404, comments
   ══════════════════════════════════════════════════════════════════ */

.mn-section {
	padding-block: 56px 20px;
}

.mn-section--tight {
	padding-block: 44px 0;
}

.mn-section--last {
	padding-block: 56px 76px;
}

.mn-section__stack {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.mn-empty {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	max-width: 56ch;
	padding-block: 60px 80px;
}

.mn-empty__title {
	font: 800 clamp(32px, 17.78px + 2.222vw, 44px) / 1 var(--mn-display);
	letter-spacing: -0.04em;
	color: var(--mn-ink);
}

.mn-empty__body {
	font: 300 19px/1.7 var(--mn-serif);
	color: var(--mn-body);
}

.mn-searchsummary {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-block: 44px 8px;
}

/* Comments */
.mn-comments {
	display: flex;
	flex-direction: column;
	gap: 26px;
	max-width: var(--mn-measure);
	padding-block: 8px 72px;
}

.mn-comments__list {
	display: flex;
	flex-direction: column;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mn-comments__list .children {
	list-style: none;
	margin: 22px 0 0;
	padding-left: 26px;
	border-left: 2px solid var(--mn-rule-mid);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.mn-comment {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 24px 24px;
	border-radius: var(--mn-r-lg);
	background: var(--mn-surface);
}

.mn-comment__head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.mn-comment__author {
	font: 600 15px/1.3 var(--mn-display);
	color: var(--mn-ink);
}

.mn-comment__body {
	font: 300 18px/1.6 var(--mn-serif);
	color: var(--mn-body);
}

.mn-comment__body > p + p {
	margin-top: 12px;
}

.mn-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mn-form label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font: 600 10px/1 var(--mn-mono);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mn-muted);
}

.mn-form input[type="text"],
.mn-form input[type="email"],
.mn-form input[type="url"],
.mn-form input[type="search"],
.mn-form textarea {
	width: 100%;
	min-height: 44px;
	padding: 13px 16px;
	border: 1px solid var(--mn-rule-mid);
	border-radius: var(--mn-r-md);
	background: transparent;
	font: 300 18px/1.5 var(--mn-serif);
	color: var(--mn-ink);
}

.mn-form textarea {
	min-height: 160px;
	resize: vertical;
}

/* ══════════════════════════════════════════════════════════════════
   11 · Editor block styles shared with the front end
   ══════════════════════════════════════════════════════════════════ */

/*
 * Numbered stops.
 *
 * Deliberately NOT a grid. A list item written in the editor is
 * "<strong>Title</strong>body text" — that trailing text node is a bare child,
 * and a bare text node in a grid container becomes an anonymous grid item. It
 * would land in the 56px numeral column and run the row to a thousand pixels.
 * An absolutely positioned numeral over left padding keeps the text in normal
 * flow, whatever the editor types.
 */
.mn-prose > ol.is-style-mn-stops,
.is-style-mn-stops {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	counter-reset: mn-stop;
}

.is-style-mn-stops > li {
	position: relative;
	padding: 20px 0 20px 76px;
	border-top: 1px solid var(--mn-rule);
	counter-increment: mn-stop;
	font: 300 19px/1.7 var(--mn-serif);
	color: var(--mn-body);
}

.is-style-mn-stops > li::before {
	content: counter(mn-stop, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 20px;
	font: 800 30px/1 var(--mn-display);
	letter-spacing: -0.04em;
	color: var(--mn-accent-display, var(--mn-tomato-display));
}

.is-style-mn-stops > li > strong:first-child {
	display: block;
	margin-bottom: 6px;
	font: 700 22px/1.15 var(--mn-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--mn-ink);
}

/* ══════════════════════════════════════════════════════════════════
   11b · The same components, built out of core Columns
   ══════════════════════════════════════════════════════════════════

   The About page patterns are core Columns and Groups carrying the theme's
   classes, so the editor can rearrange them. Core lays Columns out with flex;
   these rules keep the designed gaps and alignment without fighting it, and
   they win over the grid declarations above by being more specific. */

.wp-block-columns.mn-principles,
.wp-block-columns.mn-contactcards,
.wp-block-columns.mn-team {
	display: flex;
	gap: 16px;
	align-items: stretch;
	margin-block: 0;
}

.wp-block-columns.mn-contactcards,
.wp-block-columns.mn-team {
	gap: 20px;
}

.wp-block-columns.mn-process {
	display: flex;
	gap: 56px;
	align-items: flex-start;
	margin-block: 0;
}

.wp-block-column.mn-process__intro {
	flex-grow: 0;
	position: sticky;
	top: var(--mn-sticky-top);
}

.wp-block-column.mn-principle,
.wp-block-column.mn-contactcard {
	display: flex;
	flex-direction: column;
}

.wp-block-column.mn-principle > *,
.wp-block-column.mn-contactcard > *,
.mn-process__step > * {
	margin-block: 0;
}

/* Core's flow layout adds a 26px block-gap margin between siblings. Inside
   these components the gap is already set on the flex container, so the two
   compound and the rows fall apart. Zero the margins, keep the gaps. */
.mn-process__step > *,
.mn-process__text > *,
.mn-process__intro > *,
.mn-principle > *,
.mn-contactcard > *,
.mn-contactcard__rows > *,
.wp-block-group.is-style-mn-practical > * {
	margin-block: 0;
}

.mn-process__text {
	gap: 7px;
}

/* A key/value table inside the contact card loses its own frame. */
.mn-contactcard__rows,
.mn-contactcard .wp-block-table {
	margin: 0;
}

.mn-contactcard--dark .is-style-mn-keyvalue td:last-child {
	color: var(--mn-on-dark-body);
}

/* The practical callout as a group: its table sits flush inside the border. */
.wp-block-group.is-style-mn-practical .wp-block-table {
	margin: 0;
}

@media (max-width: 900px) {
	.wp-block-columns.mn-process {
		flex-direction: column;
		gap: 24px;
	}

	.wp-block-column.mn-process__intro {
		position: static;
		flex-basis: auto !important;
	}
}

/* ══════════════════════════════════════════════════════════════════
   12 · Responsive
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
	.mn-hero__shape--b {
		right: 180px;
	}
}

@media (max-width: 1080px) {
	.mn-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
	}

	.mn-rail {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		align-items: start;
		max-width: var(--mn-measure);
	}

	/* The TOC becomes a collapsed summary once it is out of the margin. */
	.mn-toc {
		grid-column: 1 / -1;
		padding: 0;
	}

	.mn-toc__details > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 44px;
		padding: 16px 22px;
		cursor: pointer;
	}

	.mn-toc__caret {
		display: block;
		transition: transform var(--mn-ease);
	}

	.mn-toc__details[open] > .mn-toc__caret,
	.mn-toc__details[open] > summary .mn-toc__caret {
		transform: rotate(180deg);
	}

	.mn-toc__details[open] > summary {
		border-bottom: 1px solid var(--mn-rule-mid);
	}

	.mn-toc__details > .mn-toc__list {
		padding: 18px 22px 22px;
	}

	.mn-toc__caret {
		font: 500 10px/1 var(--mn-mono);
		color: var(--mn-muted);
	}

	.mn-process {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.mn-process__intro {
		position: static;
	}
}

@media (max-width: 1024px) {
	.mn-subtopics,
	.mn-team {
		grid-template-columns: repeat(2, 1fr);
	}

	.mn-guide {
		grid-template-columns: 120px minmax(0, 1fr) 150px;
		gap: 20px;
	}

	.mn-guide__read {
		display: none;
	}

	.mn-seasons {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	:root {
		--mn-gutter: 24px;
	}

	/* The decorative discs must never sit behind the headline. */
	.mn-hero__shapes,
	.mn-pagehead__shape,
	.mn-hubhead__shape {
		display: none;
	}

	.mn-row {
		grid-template-columns: 72px minmax(0, 1fr);
	}

	.mn-row__pic {
		display: none;
	}

	.mn-cardgrid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mn-trust,
	.mn-feature {
		grid-template-columns: minmax(0, 1fr);
	}

	.mn-trust__pic,
	.mn-feature__pic {
		min-height: 240px;
		order: -1;
	}

	.mn-principles,
	.mn-contactcards {
		grid-template-columns: minmax(0, 1fr);
	}

	.mn-faq__item {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
}

@media (max-width: 860px) {
	.mn-head__bar {
		gap: 16px;
	}

	.mn-burger {
		display: inline-flex;
	}

	.mn-nav {
		display: none;
		width: 100%;
		order: 3;
		padding-bottom: 20px;
	}

	.mn-nav.is-open {
		display: block;
	}

	.mn-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.mn-nav .mn-nav__link {
		width: 100%;
	}

	.mn-nav .sub-menu {
		position: static;
		display: flex;
		border: 0;
		border-left: 2px solid var(--mn-rule-mid);
		border-radius: 0;
		padding: 8px 0 8px 12px;
		margin-top: 8px;
	}

	.mn-searchform {
		margin-left: 0;
		max-width: none;
	}
}

@media (max-width: 720px) {
	.mn-foot__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}

	.mn-foot__brand {
		grid-column: 1 / -1;
	}

	.mn-guide {
		grid-template-columns: 100px minmax(0, 1fr);
	}

	.mn-guide__tag {
		display: none;
	}

	.mn-practical__row,
	.mn-corrections__item,
	.mn-contactcard__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.mn-byline__dates {
		text-align: left;
		margin-left: 0;
		width: 100%;
	}
}

@media (max-width: 640px) {
	body {
		font-size: 19px;
	}

	.mn-head__utility {
		flex-wrap: wrap;
		gap: 8px 18px;
	}

	.mn-cardgrid,
	.mn-subtopics,
	.mn-team,
	.mn-seasons,
	.mn-rail {
		grid-template-columns: minmax(0, 1fr);
	}

	.mn-hero__inner {
		padding-block: 48px 56px;
	}

	.mn-hero__actions .mn-btn {
		flex: 1 1 100%;
	}

	.mn-row {
		grid-template-columns: 56px minmax(0, 1fr);
		gap: 18px;
		align-items: start;
	}

	.mn-guide {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.mn-guide__pic {
		height: 160px;
	}

	.mn-prose {
		gap: 22px;
	}

	.mn-prose blockquote,
	.mn-quote {
		padding: 24px 22px;
	}

	.mn-practical__body,
	.mn-trust__text,
	.mn-feature__text,
	.mn-contactcard {
		padding-inline: 22px;
	}

	.mn-layout {
		padding-block: 36px 56px;
	}

	.mn-stop,
	.mn-process__step {
		grid-template-columns: 42px minmax(0, 1fr);
		gap: 14px;
	}

	.is-style-mn-stops > li {
		padding-left: 52px;
	}

	.mn-stop__n,
	.is-style-mn-stops > li::before,
	.mn-process__n {
		font-size: 24px;
	}
}

/* Below this the masthead cannot hold two labelled pills beside the wordmark,
   so both controls become their icons. Each keeps its aria-label and its 44px
   target — the handoff says hit targets grow on touch, never shrink. */
@media (max-width: 440px) {
	.mn-head__tools .mn-pill__label {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.mn-head__tools .mn-pill {
		width: 44px;
		padding-inline: 0;
	}

	.mn-head__bar {
		gap: 12px;
	}

	.mn-logo__tld {
		letter-spacing: .2em;
	}
}

@media (max-width: 420px) {
	.mn-foot__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ══════════════════════════════════════════════════════════════════
   13 · Print
   ══════════════════════════════════════════════════════════════════ */

@media print {
	.mn-head__utility,
	.mn-nav,
	.mn-head__tools,
	.mn-rail,
	.mn-ad,
	.mn-related,
	.mn-foot__grid {
		display: none !important;
	}

	body {
		background: #fff;
		font-size: 12pt;
	}

	.mn-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}