/* ==========================================================================
   Naija Money Guide — main stylesheet
   --------------------------------------------------------------------------
   Contents
   1.  Design tokens
   2.  Reset and base
   3.  Typography
   4.  Links, buttons and forms
   5.  Layout primitives
   6.  Media
   7.  Tables
   8.  Accessibility utilities
   9.  Print
   Component layers (header, cards, article, footer, boxes) are appended in
   later build stages, each under its own numbered heading.
   ========================================================================== */

/* 1. Design tokens
   ========================================================================== */

:root {
	/* Palette. Greens carry the brand; the neutrals do the reading work. */
	--nmg-green: #0C4A38;   /* Primary. Headers, buttons, active states. */
	--nmg-green-dark: #083729;  /* Pressed states, footer base. */
	--nmg-leaf: #157A5B;    /* Accent. Links, hover, small emphasis. */
	--nmg-soft: #E4F0EA;    /* Secondary tint. Section flags, quiet fills. */
	--nmg-ink: #14211B;     /* Body text. Charcoal, warmed slightly green. */
	--nmg-muted: #5F6B65;   /* Metadata, captions, secondary text. */
	--nmg-mist: #F5F7F6;    /* Page-level alternating background. */
	--nmg-line: #E2E8E4;    /* Borders and rules. */
	--nmg-white: #FFFFFF;

	/* Semantic colours for the finance content boxes. */
	--nmg-warn-bg: #FDF6E7;
	--nmg-warn-line: #EEDCB2;
	--nmg-warn-ink: #7A4E06;
	--nmg-alert-bg: #FBEEEC;
	--nmg-alert-line: #EFD1CB;
	--nmg-alert-ink: #8E2A2A;

	/* Type. Serif for editorial voice, sans for interface and figures. */
	--nmg-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--nmg-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--nmg-text-base: 18px;
	--nmg-text-sm: 0.875rem;
	--nmg-text-xs: 0.8125rem;
	--nmg-h1: clamp(1.9rem, 1.35rem + 2.4vw, 2.8rem);
	--nmg-h2: clamp(1.45rem, 1.2rem + 1.1vw, 1.95rem);
	--nmg-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
	--nmg-h4: 1.1rem;

	--nmg-leading-tight: 1.2;
	--nmg-leading-snug: 1.35;
	--nmg-leading-body: 1.7;

	/* Spacing scale. */
	--nmg-s1: 0.25rem;
	--nmg-s2: 0.5rem;
	--nmg-s3: 0.75rem;
	--nmg-s4: 1rem;
	--nmg-s5: 1.5rem;
	--nmg-s6: 2rem;
	--nmg-s7: 3rem;
	--nmg-s8: 4rem;
	--nmg-s9: 5.5rem;

	/* Widths. */
	--nmg-wrap: 1180px;      /* Standard page container. */
	--nmg-wrap-wide: 1320px; /* Full-width editorial rows. */
	--nmg-measure: 760px;    /* Article text column. */

	/* Radii, scaled by hierarchy rather than applied uniformly. */
	--nmg-r-xs: 3px;
	--nmg-r-sm: 6px;
	--nmg-r-md: 10px;
	--nmg-r-lg: 14px;
	--nmg-r-pill: 999px;

	/* Shadows are tinted with the brand green so they read as depth, not dirt. */
	--nmg-shadow-sm: 0 1px 2px rgba(12, 74, 56, 0.06);
	--nmg-shadow: 0 1px 2px rgba(12, 74, 56, 0.05), 0 6px 16px -8px rgba(12, 74, 56, 0.14);

	--nmg-focus: 0 0 0 3px rgba(21, 122, 91, 0.35);
}

/* 2. Reset and base
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--nmg-white);
	color: var(--nmg-ink);
	font-family: var(--nmg-font-sans);
	font-size: var(--nmg-text-base);
	line-height: var(--nmg-leading-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Respect a reduced-motion preference everywhere, including smooth scroll. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

/* 3. Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--nmg-s3);
	font-family: var(--nmg-font-serif);
	font-weight: 600;
	line-height: var(--nmg-leading-tight);
	color: var(--nmg-ink);
	text-wrap: balance;
}

h1 {
	font-size: var(--nmg-h1);
	letter-spacing: -0.015em;
}

h2 {
	font-size: var(--nmg-h2);
	letter-spacing: -0.01em;
}

h3 {
	font-size: var(--nmg-h3);
}

h4 {
	font-size: var(--nmg-h4);
}

p {
	margin: 0 0 var(--nmg-s5);
}

ul,
ol {
	margin: 0 0 var(--nmg-s5);
	padding-left: 1.35em;
}

li + li {
	margin-top: var(--nmg-s2);
}

small {
	font-size: var(--nmg-text-sm);
}

strong,
b {
	font-weight: 600;
}

hr {
	height: 1px;
	margin: var(--nmg-s7) 0;
	border: 0;
	background: var(--nmg-line);
}

/* Section kicker: the category a story belongs to. Structural, not decorative
   — it tells the reader which desk the piece came from before they read on. */
.nmg-kicker {
	display: inline-block;
	font-family: var(--nmg-font-sans);
	font-size: var(--nmg-text-xs);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--nmg-leaf);
	text-decoration: none;
}

.nmg-kicker:hover,
.nmg-kicker:focus-visible {
	color: var(--nmg-green);
	text-decoration: underline;
}

/* Metadata: dates, authors, reading time. Sans-serif and quiet. */
.nmg-meta {
	font-size: var(--nmg-text-sm);
	line-height: 1.5;
	color: var(--nmg-muted);
}

.nmg-meta a {
	color: inherit;
}

/* 4. Links, buttons and forms
   ========================================================================== */

a {
	color: var(--nmg-leaf);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

a:hover {
	color: var(--nmg-green);
}

:focus-visible {
	outline: 2px solid var(--nmg-leaf);
	outline-offset: 2px;
	border-radius: var(--nmg-r-xs);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

.nmg-button,
.nmg-button:visited {
	display: inline-flex;
	align-items: center;
	gap: var(--nmg-s2);
	padding: 0.7em 1.35em;
	border: 1px solid var(--nmg-green);
	border-radius: var(--nmg-r-sm);
	background: var(--nmg-green);
	color: var(--nmg-white);
	font-family: var(--nmg-font-sans);
	font-size: var(--nmg-text-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nmg-button:hover,
.nmg-button:focus-visible {
	background: var(--nmg-leaf);
	border-color: var(--nmg-leaf);
	color: var(--nmg-white);
}

.nmg-button--quiet,
.nmg-button--quiet:visited {
	background: transparent;
	border-color: var(--nmg-line);
	color: var(--nmg-green);
}

.nmg-button--quiet:hover,
.nmg-button--quiet:focus-visible {
	background: var(--nmg-soft);
	border-color: var(--nmg-soft);
	color: var(--nmg-green);
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
select {
	width: 100%;
	padding: 0.65em 0.85em;
	border: 1px solid var(--nmg-line);
	border-radius: var(--nmg-r-sm);
	background: var(--nmg-white);
	font-size: var(--nmg-text-sm);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	border-color: var(--nmg-leaf);
	outline: none;
	box-shadow: var(--nmg-focus);
}

::placeholder {
	color: var(--nmg-muted);
	opacity: 1;
}

/* 5. Layout primitives
   ========================================================================== */

.nmg-container {
	width: 100%;
	max-width: var(--nmg-wrap);
	margin-inline: auto;
	padding-inline: var(--nmg-s4);
}

.nmg-container--wide {
	max-width: var(--nmg-wrap-wide);
}

.nmg-container--text {
	max-width: var(--nmg-measure);
}

/* Vertical rhythm between page sections. One rule owns section spacing so
   later component styles never have to fight it. */
.nmg-section {
	padding-block: var(--nmg-s7);
}

.nmg-section--tint {
	background: var(--nmg-mist);
}

.nmg-section + .nmg-section--tint,
.nmg-section--tint + .nmg-section {
	padding-block: var(--nmg-s7);
}

/* Section heading row: title on the left, "view all" link on the right. */
.nmg-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--nmg-s3);
	margin-bottom: var(--nmg-s5);
	padding-bottom: var(--nmg-s3);
	border-bottom: 2px solid var(--nmg-green);
}

.nmg-section__title {
	margin: 0;
	font-size: var(--nmg-h2);
}

.nmg-section__more {
	font-family: var(--nmg-font-sans);
	font-size: var(--nmg-text-sm);
	font-weight: 600;
	color: var(--nmg-green);
	text-decoration: none;
	white-space: nowrap;
}

.nmg-section__more:hover,
.nmg-section__more:focus-visible {
	text-decoration: underline;
}

/* Card grid. Mobile-first: one column, then two, then three. */
.nmg-grid {
	display: grid;
	gap: var(--nmg-s5);
	grid-template-columns: 1fr;
}

@media (min-width: 560px) {
	.nmg-grid--2,
	.nmg-grid--3,
	.nmg-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.nmg-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.nmg-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Content + sidebar shell, used on single posts and archives. */
.nmg-shell {
	display: grid;
	gap: var(--nmg-s7);
	grid-template-columns: 1fr;
	padding-block: var(--nmg-s6) var(--nmg-s8);
}

@media (min-width: 1024px) {
	.nmg-has-sidebar .nmg-shell {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--nmg-s8);
	}
}

/* 6. Media
   ========================================================================== */

img,
picture,
video,
iframe,
svg {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
	border-style: none;
}

figure {
	margin: 0 0 var(--nmg-s5);
}

figcaption,
.wp-element-caption {
	margin-top: var(--nmg-s2);
	font-family: var(--nmg-font-sans);
	font-size: var(--nmg-text-xs);
	line-height: 1.5;
	color: var(--nmg-muted);
}

/* Placeholder shown when a post has no featured image. Neutral by design —
   never a fake image or logo. */
.nmg-thumb--empty {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	background:
		linear-gradient(135deg, transparent 47%, var(--nmg-line) 47%, var(--nmg-line) 53%, transparent 53%),
		var(--nmg-mist);
}

/* 7. Tables
   ========================================================================== */

/* Finance articles lean on tables heavily, so the wrapper scrolls rather than
   letting a wide comparison break the page. The scroll region is focusable so
   keyboard users can reach it. */
.nmg-table-wrap {
	overflow-x: auto;
	margin: 0 0 var(--nmg-s5);
	border: 1px solid var(--nmg-line);
	border-radius: var(--nmg-r-md);
	-webkit-overflow-scrolling: touch;
}

.nmg-table-wrap:focus-visible {
	box-shadow: var(--nmg-focus);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--nmg-font-sans);
	font-size: var(--nmg-text-sm);
	/* Tabular figures keep naira amounts aligned column to column. */
	font-variant-numeric: tabular-nums;
}

caption {
	padding: var(--nmg-s3) var(--nmg-s4);
	color: var(--nmg-muted);
	font-size: var(--nmg-text-xs);
	text-align: left;
}

th,
td {
	padding: var(--nmg-s3) var(--nmg-s4);
	border-bottom: 1px solid var(--nmg-line);
	text-align: left;
	vertical-align: top;
}

thead th {
	background: var(--nmg-soft);
	color: var(--nmg-green);
	font-weight: 600;
	white-space: nowrap;
}

tbody tr:last-child td {
	border-bottom: 0;
}

/* 8. Accessibility utilities
   ========================================================================== */

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

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
}

.nmg-skip-link {
	position: absolute;
	top: -100px;
	left: var(--nmg-s4);
	z-index: 999;
	padding: var(--nmg-s3) var(--nmg-s4);
	background: var(--nmg-green);
	color: var(--nmg-white);
	border-radius: 0 0 var(--nmg-r-sm) var(--nmg-r-sm);
	font-size: var(--nmg-text-sm);
	font-weight: 600;
	text-decoration: none;
	transition: top 0.15s ease;
}

.nmg-skip-link:focus {
	top: 0;
	color: var(--nmg-white);
}

[hidden] {
	display: none !important;
}

/* 9. Print
   ========================================================================== */

@media print {
	.nmg-site-header,
	.nmg-site-footer,
	.nmg-sidebar,
	.nmg-ad,
	.nmg-newsletter,
	.nmg-related {
		display: none !important;
	}

	body {
		font-size: 12pt;
		color: #000;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 10pt;
	}
}

/* 10. Site header
   ========================================================================== */

.nmg-site-header {
	position: relative;
	z-index: 40;
	background: var(--nmg-white);
	border-bottom: 1px solid var(--nmg-line);
}

.nmg-header__inner {
	display: flex;
	align-items: center;
	gap: var(--nmg-s4);
	min-height: 68px;
	padding-block: var(--nmg-s3);
}

@media (min-width: 1024px) {
	.nmg-header__inner {
		min-height: 84px;
		flex-wrap: wrap;
	}
}

/* Branding
   -------------------------------------------------------------------------- */

.nmg-branding {
	flex: 1 1 auto;
	min-width: 0;
}

.nmg-branding .custom-logo-link {
	display: inline-block;
	line-height: 0;
}

.nmg-branding .custom-logo {
	width: auto;
	max-height: 46px;
}

@media (min-width: 1024px) {
	.nmg-branding .custom-logo {
		max-height: 56px;
	}
}

.nmg-branding__name {
	margin: 0;
	font-family: var(--nmg-font-serif);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

@media (min-width: 768px) {
	.nmg-branding__name {
		font-size: 1.6rem;
	}
}

.nmg-branding__name a {
	color: var(--nmg-green);
	text-decoration: none;
}

.nmg-branding__tagline {
	display: none;
	margin: 2px 0 0;
	font-size: var(--nmg-text-xs);
	color: var(--nmg-muted);
}

@media (min-width: 768px) {
	.nmg-branding__tagline {
		display: block;
	}
}

/* Desktop navigation
   -------------------------------------------------------------------------- */

.nmg-nav--desktop {
	display: none;
}

@media (min-width: 1024px) {
	.nmg-nav--desktop {
		display: block;
		order: 3;
		flex: 1 1 100%;
		border-top: 1px solid var(--nmg-line);
	}
}

.nmg-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nmg-nav__list li {
	position: relative;
	margin: 0;
}

.nmg-nav__list > li > a {
	display: block;
	padding: 0.9rem 0.95rem;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--nmg-ink);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.nmg-nav__list > li:first-child > a {
	padding-left: 0;
}

.nmg-nav__list > li > a:hover,
.nmg-nav__list > li > a:focus-visible {
	color: var(--nmg-green);
	border-bottom-color: var(--nmg-green);
}

.nmg-nav__list > .current-menu-item > a,
.nmg-nav__list > .current-menu-parent > a,
.nmg-nav__list > .current-menu-ancestor > a {
	color: var(--nmg-green);
	font-weight: 600;
	border-bottom-color: var(--nmg-green);
}

/* Dropdowns open on hover and on keyboard focus (see navigation.js). */
.nmg-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	min-width: 220px;
	margin: 0;
	padding: var(--nmg-s2) 0;
	list-style: none;
	background: var(--nmg-white);
	border: 1px solid var(--nmg-line);
	border-radius: var(--nmg-r-md);
	box-shadow: var(--nmg-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.nmg-nav__list li:hover > .sub-menu,
.nmg-nav__list li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nmg-nav__list .sub-menu a {
	display: block;
	padding: 0.5rem 1rem;
	font-size: 0.9rem;
	color: var(--nmg-ink);
	text-decoration: none;
}

.nmg-nav__list .sub-menu a:hover,
.nmg-nav__list .sub-menu a:focus-visible {
	background: var(--nmg-soft);
	color: var(--nmg-green);
}

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

.nmg-header__actions {
	display: flex;
	align-items: center;
	gap: var(--nmg-s1);
	margin-left: auto;
}

.nmg-iconbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--nmg-r-sm);
	background: transparent;
	color: var(--nmg-ink);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.nmg-iconbutton:hover,
.nmg-iconbutton:focus-visible {
	background: var(--nmg-soft);
	color: var(--nmg-green);
}

@media (min-width: 1024px) {
	.nmg-iconbutton--menu {
		display: none;
	}
}

/* Swap the hamburger for a close mark while the menu is open. */
.nmg-iconbutton__close {
	display: none;
}

.nmg-iconbutton[aria-expanded="true"] .nmg-iconbutton__open {
	display: none;
}

.nmg-iconbutton[aria-expanded="true"] .nmg-iconbutton__close {
	display: inline-flex;
}

.nmg-iconbutton[aria-expanded="true"] {
	background: var(--nmg-soft);
	color: var(--nmg-green);
}

/* Search panel
   -------------------------------------------------------------------------- */

.nmg-search-panel {
	padding-block: var(--nmg-s4);
	background: var(--nmg-mist);
	border-top: 1px solid var(--nmg-line);
}

.nmg-search-form {
	display: flex;
	gap: var(--nmg-s2);
	max-width: 640px;
	margin-inline: auto;
}

.nmg-search-form__input {
	flex: 1 1 auto;
}

.nmg-search-form__submit {
	flex: 0 0 auto;
}

@media (max-width: 519px) {
	.nmg-search-form__submit span {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Mobile navigation
   -------------------------------------------------------------------------- */

.nmg-mobile-nav {
	max-height: calc(100vh - 68px);
	overflow-y: auto;
	padding-block: var(--nmg-s3) var(--nmg-s5);
	background: var(--nmg-white);
	border-top: 1px solid var(--nmg-line);
	box-shadow: var(--nmg-shadow);
}

@media (min-width: 1024px) {
	.nmg-mobile-nav {
		display: none;
	}
}

.nmg-mobile-nav__list,
.nmg-mobile-nav .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nmg-mobile-nav__list li {
	margin: 0;
}

.nmg-mobile-nav__list > li > a {
	display: block;
	padding: 0.85rem 0;
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--nmg-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--nmg-line);
}

.nmg-mobile-nav__list > li > a:hover,
.nmg-mobile-nav__list > li > a:focus-visible {
	color: var(--nmg-green);
}

.nmg-mobile-nav__list > .current-menu-item > a {
	color: var(--nmg-green);
	font-weight: 600;
}

/* Subcategories sit indented under their parent, always visible — a finance
   reader looking for "Digital Loans" should not have to hunt for it. */
.nmg-mobile-nav .sub-menu {
	padding: var(--nmg-s2) 0 var(--nmg-s3) var(--nmg-s4);
	border-bottom: 1px solid var(--nmg-line);
}

.nmg-mobile-nav .sub-menu a {
	display: block;
	padding: 0.4rem 0;
	font-size: 0.95rem;
	color: var(--nmg-muted);
	text-decoration: none;
}

.nmg-mobile-nav .sub-menu a:hover,
.nmg-mobile-nav .sub-menu a:focus-visible {
	color: var(--nmg-green);
}

/* Stop the page behind an open panel from scrolling on touch devices. */
.nmg-panel-open,
.nmg-panel-open body {
	overflow: hidden;
}

@media (min-width: 1024px) {
	.nmg-panel-open,
	.nmg-panel-open body {
		overflow: visible;
	}
}

/* 11. Advertisement slots
   ========================================================================== */

.nmg-ad {
	display: block;
	margin-block: var(--nmg-s5);
	padding: var(--nmg-s3);
	background: var(--nmg-mist);
	border: 1px solid var(--nmg-line);
	border-radius: var(--nmg-r-md);
	text-align: center;
}

.nmg-ad--header {
	margin: 0;
	border: 0;
	border-bottom: 1px solid var(--nmg-line);
	border-radius: 0;
}

/* The label is small but never hidden: readers must be able to tell paid
   placement from editorial content at a glance. */
.nmg-ad__label {
	display: block;
	margin-bottom: var(--nmg-s2);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--nmg-muted);
}

.nmg-ad__unit {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	overflow: hidden;
}

.nmg-ad__unit img,
.nmg-ad__unit iframe {
	margin-inline: auto;
}

/* 12. Site footer
   ========================================================================== */

.nmg-site-footer {
	margin-top: var(--nmg-s8);
	padding-block: var(--nmg-s7) var(--nmg-s5);
	background: var(--nmg-green);
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--nmg-text-sm);
}

.nmg-footer__columns {
	display: grid;
	gap: var(--nmg-s6);
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.nmg-footer__columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.nmg-footer__columns {
		grid-template-columns: 1.6fr 1fr 1fr 1fr;
		gap: var(--nmg-s7);
	}
}

.nmg-footer__logo .custom-logo {
	max-height: 44px;
	width: auto;
	/* Most logos are dark; on the green field they need to read as white. */
	filter: brightness(0) invert(1);
}

.nmg-footer__name {
	margin: 0 0 var(--nmg-s3);
	font-family: var(--nmg-font-serif);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.nmg-footer__name a {
	color: var(--nmg-white);
	text-decoration: none;
}

.nmg-footer__blurb {
	max-width: 42ch;
	margin: var(--nmg-s3) 0 var(--nmg-s4);
	line-height: 1.65;
}

.nmg-footer__heading {
	margin: 0 0 var(--nmg-s3);
	font-family: var(--nmg-font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--nmg-white);
}

.nmg-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nmg-footer__list li {
	margin: 0 0 var(--nmg-s2);
}

.nmg-footer__list a,
.nmg-footer__blurb a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

.nmg-footer__list a:hover,
.nmg-footer__list a:focus-visible {
	color: var(--nmg-white);
	text-decoration: underline;
}

/* Social links
   -------------------------------------------------------------------------- */

.nmg-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nmg-s2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nmg-social li {
	margin: 0;
}

.nmg-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--nmg-r-pill);
	color: var(--nmg-white);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nmg-social__link:hover,
.nmg-social__link:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--nmg-white);
}

/* Footer bottom
   -------------------------------------------------------------------------- */

.nmg-footer__bottom {
	margin-top: var(--nmg-s6);
	padding-top: var(--nmg-s5);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.nmg-footer__note {
	max-width: 78ch;
	margin: 0 0 var(--nmg-s3);
	font-size: var(--nmg-text-xs);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.68);
}

.nmg-footer__copyright {
	margin: 0;
	font-size: var(--nmg-text-xs);
	color: rgba(255, 255, 255, 0.68);
}

/* 13. Article card
   ========================================================================== */

.nmg-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.nmg-card__media {
	display: block;
	overflow: hidden;
	margin-bottom: var(--nmg-s3);
	border-radius: var(--nmg-r-md);
	background: var(--nmg-mist);
	line-height: 0;
}

.nmg-card__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.nmg-card:hover .nmg-card__media img {
	transform: scale(1.03);
}

.nmg-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--nmg-s2);
	min-width: 0;
}

.nmg-card__title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: var(--nmg-leading-snug);
	letter-spacing: -0.005em;
}

.nmg-card__title a {
	color: var(--nmg-ink);
	text-decoration: none;
}

.nmg-card__title a:hover,
.nmg-card__title a:focus-visible {
	color: var(--nmg-green);
	text-decoration: underline;
	text-decoration-color: var(--nmg-leaf);
}

.nmg-card__excerpt {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--nmg-muted);
}

.nmg-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nmg-s2);
	margin: var(--nmg-s1) 0 0;
	font-size: var(--nmg-text-xs);
}

.nmg-meta__sep {
	color: var(--nmg-line);
}

/* Hero variant: the lead story of a section or of the page. */
.nmg-card--hero .nmg-card__media img {
	aspect-ratio: 16 / 9;
}

.nmg-card--hero .nmg-card__title {
	font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
	line-height: 1.22;
}

.nmg-card--hero .nmg-card__excerpt {
	font-size: 1rem;
	color: var(--nmg-ink);
}

/* Compact variant: thumbnail beside the headline, for dense lists. */
.nmg-card--compact {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: var(--nmg-s3);
	align-items: start;
}

@media (min-width: 480px) {
	.nmg-card--compact {
		grid-template-columns: 108px minmax(0, 1fr);
		gap: var(--nmg-s4);
	}
}

.nmg-card--compact .nmg-card__media {
	margin-bottom: 0;
	border-radius: var(--nmg-r-sm);
}

.nmg-card--compact .nmg-card__title {
	font-size: 0.9875rem;
}

@media (min-width: 480px) {
	.nmg-card--compact .nmg-card__title {
		font-size: 1.0625rem;
	}
}

/* 14. Latest Money News bar
   ========================================================================== */

.nmg-newsbar {
	background: var(--nmg-green);
	color: var(--nmg-white);
}

.nmg-newsbar__inner {
	display: flex;
	align-items: stretch;
	gap: 0;
}

/* The label anchors the strip and stays put while the headlines scroll. */
.nmg-newsbar__label {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin: 0;
	padding: var(--nmg-s3) var(--nmg-s4) var(--nmg-s3) 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--nmg-white);
}

.nmg-newsbar__label::after {
	content: "";
	display: block;
	width: 1px;
	height: 1.1em;
	margin-left: var(--nmg-s4);
	background: rgba(255, 255, 255, 0.3);
}

.nmg-newsbar__list {
	display: flex;
	gap: var(--nmg-s5);
	flex: 1 1 auto;
	margin: 0;
	padding: var(--nmg-s3) 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.nmg-newsbar__list::-webkit-scrollbar {
	display: none;
}

.nmg-newsbar__item {
	display: flex;
	align-items: baseline;
	gap: var(--nmg-s2);
	margin: 0;
	white-space: nowrap;
}

.nmg-newsbar__item a {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--nmg-white);
	text-decoration: none;
}

.nmg-newsbar__item a:hover,
.nmg-newsbar__item a:focus-visible {
	color: var(--nmg-white);
	text-decoration: underline;
}

.nmg-newsbar__date {
	font-size: var(--nmg-text-xs);
	color: rgba(255, 255, 255, 0.6);
}

/* 15. Featured stories
   ========================================================================== */

.nmg-featured {
	padding-block: var(--nmg-s6) var(--nmg-s7);
}

.nmg-featured__grid {
	display: grid;
	gap: var(--nmg-s6);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.nmg-featured__grid {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		gap: var(--nmg-s7);
		align-items: start;
	}
}

/* The four supporting stories are a ruled list, not four more cards. The rules
   do the grouping work that a box would otherwise do, which keeps the lead
   story clearly dominant. */
.nmg-featured__rest {
	display: flex;
	flex-direction: column;
	gap: var(--nmg-s4);
}

.nmg-featured__rest .nmg-card + .nmg-card {
	padding-top: var(--nmg-s4);
	border-top: 1px solid var(--nmg-line);
}

.nmg-featured__lead .nmg-card__media {
	border-radius: var(--nmg-r-lg);
}

.nmg-featured__lead .nmg-card__title {
	font-size: clamp(1.55rem, 1.15rem + 1.8vw, 2.3rem);
	letter-spacing: -0.018em;
}

/* 16. Section lead layout
   ========================================================================== */

.nmg-lead {
	display: grid;
	gap: var(--nmg-s6);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.nmg-lead {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: var(--nmg-s7);
		align-items: start;
	}
}

.nmg-lead__rest {
	display: flex;
	flex-direction: column;
	gap: var(--nmg-s4);
}

.nmg-lead__rest .nmg-card + .nmg-card {
	padding-top: var(--nmg-s4);
	border-top: 1px solid var(--nmg-line);
}

/* 17. Newsletter
   ========================================================================== */

.nmg-newsletter {
	display: grid;
	gap: var(--nmg-s5);
	padding: var(--nmg-s6);
	background: var(--nmg-soft);
	border-radius: var(--nmg-r-lg);
}

@media (min-width: 860px) {
	.nmg-newsletter--section {
		grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
		gap: var(--nmg-s7);
		align-items: center;
		padding: var(--nmg-s7);
	}
}

.nmg-newsletter__title {
	margin: 0 0 var(--nmg-s2);
	font-size: var(--nmg-h3);
	color: var(--nmg-green);
}

.nmg-newsletter__desc {
	margin: 0;
	max-width: 52ch;
	font-size: 0.9375rem;
	color: var(--nmg-ink);
}

.nmg-subscribe {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nmg-s2);
}

.nmg-subscribe__input {
	flex: 1 1 220px;
	background: var(--nmg-white);
	border-color: transparent;
}

.nmg-subscribe__button {
	flex: 0 0 auto;
}

.nmg-newsletter__consent,
.nmg-newsletter__setup {
	margin: var(--nmg-s3) 0 0;
	font-size: var(--nmg-text-xs);
	line-height: 1.55;
	color: var(--nmg-muted);
}

.nmg-newsletter__setup {
	padding: var(--nmg-s3);
	background: var(--nmg-white);
	border: 1px dashed var(--nmg-line);
	border-radius: var(--nmg-r-sm);
}

/* Sidebar variant stacks and loses the large padding. */
.nmg-newsletter--sidebar {
	padding: var(--nmg-s5);
}

.nmg-newsletter--sidebar .nmg-newsletter__title {
	font-size: 1.15rem;
}

/* 18. About block
   ========================================================================== */

.nmg-about {
	max-width: 68ch;
	margin-inline: auto;
	padding: var(--nmg-s6);
	border: 1px solid var(--nmg-line);
	border-radius: var(--nmg-r-lg);
	text-align: center;
}

.nmg-about__title {
	margin: 0 0 var(--nmg-s3);
	font-size: var(--nmg-h3);
}

.nmg-about__text {
	margin: 0 0 var(--nmg-s5);
	color: var(--nmg-muted);
}

.nmg-about__action {
	margin: 0;
}

/* 19. Breadcrumbs
   ========================================================================== */

.nmg-breadcrumbs {
	margin-bottom: var(--nmg-s4);
	font-size: var(--nmg-text-xs);
	color: var(--nmg-muted);
}

.nmg-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nmg-s2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nmg-breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: var(--nmg-s2);
	margin: 0;
}

.nmg-breadcrumbs a {
	color: var(--nmg-muted);
	text-decoration: none;
}

.nmg-breadcrumbs a:hover,
.nmg-breadcrumbs a:focus-visible {
	color: var(--nmg-green);
	text-decoration: underline;
}

.nmg-breadcrumbs__sep {
	color: var(--nmg-line);
}

.nmg-breadcrumbs [aria-current="page"] {
	color: var(--nmg-ink);
	/* Long headlines should not push the trail into three lines. */
	display: inline-block;
	max-width: 32ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

/* 20. Article header
   ========================================================================== */

.nmg-article__header {
	max-width: var(--nmg-measure);
	margin-bottom: var(--nmg-s5);
}

.nmg-article__kicker {
	display: inline-block;
	margin-bottom: var(--nmg-s2);
	font-size: var(--nmg-text-sm);
	font-weight: 600;
}

.nmg-article__title {
	margin: 0 0 var(--nmg-s3);
	font-size: clamp(1.75rem, 1.25rem + 2.4vw, 2.65rem);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.02em;
}

/* The deck is the promise the headline made, in one sentence. Larger than body
   text and in the serif, so it reads as part of the article rather than as
   metadata. */
.nmg-article__deck {
	margin: 0 0 var(--nmg-s5);
	font-family: var(--nmg-font-serif);
	font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
	line-height: 1.5;
	color: var(--nmg-muted);
}

/* Byline
   -------------------------------------------------------------------------- */

.nmg-byline {
	display: flex;
	align-items: center;
	gap: var(--nmg-s3);
	padding: var(--nmg-s4) 0;
	border-top: 1px solid var(--nmg-line);
	border-bottom: 1px solid var(--nmg-line);
}

.nmg-byline__avatar {
	flex: 0 0 auto;
	line-height: 0;
}

.nmg-avatar {
	border-radius: var(--nmg-r-pill);
}

.nmg-byline__text {
	min-width: 0;
}

.nmg-byline__author {
	margin: 0 0 2px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--nmg-ink);
}

.nmg-byline__author a {
	color: inherit;
	text-decoration: none;
}

.nmg-byline__author a:hover,
.nmg-byline__author a:focus-visible {
	color: var(--nmg-green);
	text-decoration: underline;
}

.nmg-byline__dates {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nmg-s2) var(--nmg-s4);
	margin: 0;
	font-size: var(--nmg-text-xs);
}

.nmg-byline__item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* An article that has genuinely been revised says so in the brand colour —
   on a finance site, freshness is information the reader is looking for. */
.nmg-byline__item--updated {
	color: var(--nmg-leaf);
	font-weight: 500;
}

.nmg-article__figure {
	max-width: var(--nmg-wrap);
	margin: 0 0 var(--nmg-s6);
}

.nmg-article__figure img {
	width: 100%;
	border-radius: var(--nmg-r-lg);
}

/* 21. Article body
   ========================================================================== */

/* Everything inside the article is capped at the reading measure. Wide and
   full-width blocks are allowed to break out deliberately, below. */
.nmg-article__body > * {
	max-width: var(--nmg-measure);
	margin-inline: 0;
}

.nmg-article__body {
	font-family: var(--nmg-font-serif);
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	line-height: 1.75;
}

.nmg-article__body p {
	margin: 0 0 var(--nmg-s5);
}

.nmg-article__body h2 {
	margin: var(--nmg-s7) 0 var(--nmg-s3);
	font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
	scroll-margin-top: var(--nmg-s5);
}

.nmg-article__body h3 {
	margin: var(--nmg-s6) 0 var(--nmg-s3);
	font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
	scroll-margin-top: var(--nmg-s5);
}

.nmg-article__body h4 {
	margin: var(--nmg-s5) 0 var(--nmg-s2);
	font-size: 1.075rem;
}

.nmg-article__body ul,
.nmg-article__body ol {
	margin: 0 0 var(--nmg-s5);
	padding-left: 1.4em;
}

.nmg-article__body li {
	margin-bottom: var(--nmg-s2);
}

.nmg-article__body li::marker {
	color: var(--nmg-leaf);
}

.nmg-article__body a {
	color: var(--nmg-leaf);
	text-decoration: underline;
	text-decoration-color: rgba(21, 122, 91, 0.35);
}

.nmg-article__body a:hover,
.nmg-article__body a:focus-visible {
	text-decoration-color: currentColor;
}

.nmg-article__body blockquote {
	margin: var(--nmg-s6) 0;
	padding: 0 0 0 var(--nmg-s5);
	border-left: 3px solid var(--nmg-green);
	font-size: 1.1em;
	line-height: 1.55;
	color: var(--nmg-ink);
}

.nmg-article__body blockquote p:last-child {
	margin-bottom: 0;
}

.nmg-article__body cite {
	display: block;
	margin-top: var(--nmg-s3);
	font-family: var(--nmg-font-sans);
	font-size: var(--nmg-text-sm);
	font-style: normal;
	color: var(--nmg-muted);
}

.nmg-article__body img {
	border-radius: var(--nmg-r-md);
}

.nmg-article__body figure {
	margin-bottom: var(--nmg-s6);
}

.nmg-article__body code {
	padding: 0.15em 0.4em;
	background: var(--nmg-mist);
	border-radius: var(--nmg-r-xs);
	font-size: 0.9em;
}

/* Tables in articles are sans-serif and may run wider than the text measure,
   because a five-column comparison squeezed to 760px is unreadable. */
.nmg-article__body table {
	margin-bottom: var(--nmg-s5);
}

.nmg-article__body .wp-block-table {
	max-width: var(--nmg-measure);
	overflow-x: auto;
}

.nmg-article__body .wp-block-table table {
	border: 1px solid var(--nmg-line);
	border-radius: var(--nmg-r-md);
	overflow: hidden;
}

/* Wide and full alignments break out of the measure on desktop only. */
@media (min-width: 1024px) {
	.nmg-article__body .alignwide,
	.nmg-article__body .wp-block-table.alignwide {
		max-width: min(100%, 980px);
	}
}

.nmg-article__body .alignfull {
	max-width: 100%;
}

/* 22. Sources, disclaimer, tags
   ========================================================================== */

.nmg-sources {
	margin: var(--nmg-s7) 0 var(--nmg-s5);
	padding: var(--nmg-s5);
	background: var(--nmg-mist);
	border-radius: var(--nmg-r-md);
	font-family: var(--nmg-font-sans);
	font-size: var(--nmg-text-sm);
}

.nmg-sources__title {
	margin: 0 0 var(--nmg-s3);
	font-family: var(--nmg-font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--nmg-green);
}

.nmg-sources__list {
	margin: 0;
	padding-left: 1.2em;
	color: var(--nmg-muted);
}

.nmg-sources__list li {
	margin-bottom: var(--nmg-s2);
	line-height: 1.55;
	/* Long government URLs should wrap rather than force a scrollbar. */
	overflow-wrap: anywhere;
}

.nmg-disclaimer {
	display: flex;
	gap: var(--nmg-s3);
	margin: var(--nmg-s5) 0;
	padding: var(--nmg-s4);
	background: var(--nmg-soft);
	border-radius: var(--nmg-r-md);
}

.nmg-disclaimer__icon {
	flex: 0 0 auto;
	color: var(--nmg-green);
	line-height: 1;
	padding-top: 2px;
}

.nmg-disclaimer__text {
	margin: 0;
	font-family: var(--nmg-font-sans);
	font-size: var(--nmg-text-sm);
	line-height: 1.6;
	color: var(--nmg-ink);
}

.nmg-disclaimer__label {
	font-weight: 600;
	color: var(--nmg-green);
}

.nmg-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nmg-s3);
	margin: var(--nmg-s6) 0 0;
	padding-top: var(--nmg-s5);
	border-top: 1px solid var(--nmg-line);
	font-family: var(--nmg-font-sans);
}

.nmg-tags__label {
	font-size: var(--nmg-text-xs);
	font-weight: 600;
	color: var(--nmg-muted);
}

.nmg-tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nmg-s2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nmg-tags__list li {
	margin: 0;
}

.nmg-tags__list a {
	display: inline-block;
	padding: 0.28em 0.7em;
	background: var(--nmg-mist);
	border-radius: var(--nmg-r-xs);
	font-size: var(--nmg-text-xs);
	color: var(--nmg-muted);
	text-decoration: none;
}

.nmg-tags__list a:hover,
.nmg-tags__list a:focus-visible {
	background: var(--nmg-soft);
	color: var(--nmg-green);
}

.nmg-pagelinks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nmg-s2);
	margin: var(--nmg-s6) 0;
	font-family: var(--nmg-font-sans);
	font-size: var(--nmg-text-sm);
}

.nmg-pagelinks__link {
	display: inline-block;
	min-width: 2.2em;
	padding: 0.3em 0.6em;
	border: 1px solid var(--nmg-line);
	border-radius: var(--nmg-r-sm);
	text-align: center;
}

/* 23. Author box
   ========================================================================== */

.nmg-authorbox {
	display: flex;
	flex-direction: column;
	gap: var(--nmg-s4);
	max-width: var(--nmg-measure);
	margin: var(--nmg-s7) 0 0;
	padding: var(--nmg-s5);
	border: 1px solid var(--nmg-line);
	border-radius: var(--nmg-r-lg);
}

@media (min-width: 560px) {
	.nmg-authorbox {
		flex-direction: row;
		align-items: flex-start;
	}
}

.nmg-authorbox__avatar {
	flex: 0 0 auto;
	line-height: 0;
}

.nmg-authorbox__label {
	margin: 0 0 2px;
	font-size: var(--nmg-text-xs);
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--nmg-muted);
}

.nmg-authorbox__name {
	margin: 0 0 var(--nmg-s2);
	font-size: 1.15rem;
}

.nmg-authorbox__name a {
	color: var(--nmg-ink);
	text-decoration: none;
}

.nmg-authorbox__name a:hover,
.nmg-authorbox__name a:focus-visible {
	color: var(--nmg-green);
	text-decoration: underline;
}

.nmg-authorbox__bio {
	margin: 0 0 var(--nmg-s3);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--nmg-muted);
}

.nmg-authorbox__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nmg-s4);
	margin: 0;
	font-size: var(--nmg-text-sm);
	font-weight: 500;
}

/* 24. Related posts and post navigation
   ========================================================================== */

.nmg-related {
	margin-top: var(--nmg-s8);
}

.nmg-postnav {
	display: grid;
	gap: var(--nmg-s4);
	margin-top: var(--nmg-s7);
}

@media (min-width: 640px) {
	.nmg-postnav {
		grid-template-columns: repeat(2, 1fr);
	}
}

.nmg-postnav__link {
	display: block;
	padding: var(--nmg-s4);
	border: 1px solid var(--nmg-line);
	border-radius: var(--nmg-r-md);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.nmg-postnav__link:hover,
.nmg-postnav__link:focus-visible {
	background: var(--nmg-mist);
	border-color: var(--nmg-soft);
}

/* When there is no previous article, the next one stays on the right rather
   than jumping to the left where "previous" should be. */
.nmg-postnav__link--next:only-child {
	grid-column: 2;
	text-align: right;
}

.nmg-postnav__label {
	display: block;
	margin-bottom: var(--nmg-s1);
	font-size: var(--nmg-text-xs);
	font-weight: 500;
	color: var(--nmg-muted);
}

.nmg-postnav__title {
	display: block;
	font-family: var(--nmg-font-serif);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--nmg-ink);
}

/* 25. Sidebar and widgets
   ========================================================================== */

.nmg-sidebar__inner {
	display: flex;
	flex-direction: column;
	gap: var(--nmg-s5);
}

@media (min-width: 1024px) {
	/* The sidebar follows the reader down long guides, but only when it is
	   short enough to fit — otherwise it scrolls normally. */
	.nmg-sidebar__inner {
		position: sticky;
		top: var(--nmg-s4);
		max-height: calc(100vh - var(--nmg-s6));
		overflow-y: auto;
		scrollbar-width: thin;
	}
}

.nmg-widget {
	padding-bottom: var(--nmg-s5);
	border-bottom: 1px solid var(--nmg-line);
	font-size: var(--nmg-text-sm);
}

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

.nmg-widget__title {
	margin: 0 0 var(--nmg-s4);
	padding-bottom: var(--nmg-s2);
	border-bottom: 2px solid var(--nmg-green);
	font-family: var(--nmg-font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--nmg-green);
}

.nmg-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nmg-widget li {
	margin-bottom: var(--nmg-s3);
	line-height: 1.5;
}

.nmg-widget a {
	color: var(--nmg-ink);
	text-decoration: none;
}

.nmg-widget a:hover,
.nmg-widget a:focus-visible {
	color: var(--nmg-green);
	text-decoration: underline;
}

.nmg-widget__post {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: var(--nmg-s3);
	align-items: start;
}

.nmg-widget__thumb {
	line-height: 0;
}

.nmg-widget__thumb img,
.nmg-widget__thumb .nmg-thumb--empty {
	border-radius: var(--nmg-r-sm);
	aspect-ratio: 10 / 7;
	object-fit: cover;
}

.nmg-widget__link {
	display: block;
	font-family: var(--nmg-font-serif);
	font-weight: 600;
	line-height: 1.35;
}

.nmg-widget__text .nmg-meta {
	display: block;
	margin-top: 2px;
	font-size: var(--nmg-text-xs);
}

/* 26. Comments
   ========================================================================== */

.nmg-comments {
	max-width: var(--nmg-measure);
	margin-top: var(--nmg-s8);
	padding-top: var(--nmg-s6);
	border-top: 1px solid var(--nmg-line);
}

.nmg-comments__title {
	margin: 0 0 var(--nmg-s5);
	font-size: var(--nmg-h3);
}

.nmg-comments__list,
.nmg-comments__list .children {
	margin: 0 0 var(--nmg-s6);
	padding: 0;
	list-style: none;
}

.nmg-comments__list .children {
	margin: var(--nmg-s4) 0 0 var(--nmg-s4);
	padding-left: var(--nmg-s4);
	border-left: 2px solid var(--nmg-line);
}

.nmg-comments__list .comment-body {
	padding: var(--nmg-s4) 0;
	border-bottom: 1px solid var(--nmg-line);
	font-size: 0.9375rem;
}

.nmg-comments__list .comment-author {
	display: flex;
	align-items: center;
	gap: var(--nmg-s2);
	font-size: 0.9375rem;
	font-weight: 600;
}

.nmg-comments__list .comment-author img {
	border-radius: var(--nmg-r-pill);
}

.nmg-comments__list .comment-meta,
.nmg-comments__list .comment-metadata {
	margin-bottom: var(--nmg-s3);
	font-size: var(--nmg-text-xs);
	color: var(--nmg-muted);
}

.nmg-comments__list .reply {
	font-size: var(--nmg-text-xs);
	font-weight: 600;
}

.nmg-comment-form label {
	display: block;
	margin-bottom: var(--nmg-s1);
	font-size: var(--nmg-text-sm);
	font-weight: 500;
}

.nmg-comment-form p {
	margin-bottom: var(--nmg-s4);
}

.nmg-comments__closed {
	padding: var(--nmg-s4);
	background: var(--nmg-mist);
	border-radius: var(--nmg-r-md);
	font-size: var(--nmg-text-sm);
	color: var(--nmg-muted);
}

/* 27. Finance content blocks
   ========================================================================== */

/* One shared shell, four semantic variants. The left border does the
   identifying work — colour alone never carries the meaning, because the icon
   and the written label are always present too. */
.nmg-box {
	margin: var(--nmg-s6) 0;
	padding: var(--nmg-s4) var(--nmg-s5);
	background: var(--nmg-mist);
	border: 1px solid var(--nmg-line);
	border-left: 4px solid var(--nmg-muted);
	border-radius: var(--nmg-r-md);
	font-family: var(--nmg-font-sans);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.nmg-box__title {
	display: flex;
	align-items: center;
	gap: var(--nmg-s2);
	margin: 0 0 var(--nmg-s2);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

.nmg-box__icon {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}

.nmg-box__content > *:last-child {
	margin-bottom: 0;
}

.nmg-box__content p {
	margin: 0 0 var(--nmg-s3);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.nmg-box__content ul,
.nmg-box__content ol {
	margin: 0 0 var(--nmg-s3);
	padding-left: 1.3em;
}

.nmg-box__content li {
	margin-bottom: var(--nmg-s2);
	font-size: 0.9375rem;
}

/* Important information — the house green. */
.nmg-box--info-box {
	background: var(--nmg-soft);
	border-color: rgba(12, 74, 56, 0.14);
	border-left-color: var(--nmg-green);
}

.nmg-box--info-box .nmg-box__title {
	color: var(--nmg-green);
}

/* Warning — amber, reserved for scams and real risk so it keeps its force. */
.nmg-box--warning-box {
	background: var(--nmg-warn-bg);
	border-color: var(--nmg-warn-line);
	border-left-color: var(--nmg-warn-ink);
}

.nmg-box--warning-box .nmg-box__title {
	color: var(--nmg-warn-ink);
}

/* Quick answer — white on a green rule, so it reads as the article speaking
   rather than as an aside. Usually sits near the top of the piece. */
.nmg-box--quick-answer {
	background: var(--nmg-white);
	border-color: var(--nmg-line);
	border-left-color: var(--nmg-leaf);
}

.nmg-box--quick-answer .nmg-box__title {
	color: var(--nmg-leaf);
}

.nmg-box--quick-answer .nmg-box__content p {
	font-size: 1rem;
	color: var(--nmg-ink);
}

/* Key takeaways — the one box with a fill, because it is a summary the reader
   may scroll back to find. */
.nmg-box--key-takeaways {
	background: var(--nmg-soft);
	border-color: rgba(12, 74, 56, 0.14);
	border-left-color: var(--nmg-green);
}

.nmg-box--key-takeaways .nmg-box__title {
	color: var(--nmg-green);
}

.nmg-box--key-takeaways .nmg-box__content ul {
	margin-bottom: 0;
	padding-left: 0;
	list-style: none;
}

.nmg-box--key-takeaways .nmg-box__content li {
	position: relative;
	padding-left: 1.6em;
}

/* Tick marks instead of bullets: these are conclusions, not a list of items. */
.nmg-box--key-takeaways .nmg-box__content li::before {
	content: "";
	position: absolute;
	left: 0.15em;
	top: 0.5em;
	width: 0.62em;
	height: 0.34em;
	border-left: 2px solid var(--nmg-leaf);
	border-bottom: 2px solid var(--nmg-leaf);
	transform: rotate(-45deg);
}

/* Example calculation — tabular figures so the numbers line up down the
   column, which is the whole point of showing the working. */
.nmg-box--calculation {
	background: var(--nmg-white);
	border-color: var(--nmg-line);
	border-left-color: var(--nmg-ink);
	font-variant-numeric: tabular-nums;
}

.nmg-box--calculation .nmg-box__title {
	color: var(--nmg-ink);
}

.nmg-box--calculation .nmg-box__content p {
	font-variant-numeric: tabular-nums;
}

.nmg-box--calculation .nmg-box__content strong {
	color: var(--nmg-green);
}

/* Boxes stay inside the reading measure even when the article allows wider
   content around them. */
.nmg-article__body .nmg-box {
	max-width: var(--nmg-measure);
}

/* 28. Archive headers and listings
   ========================================================================== */

.nmg-archive-header {
	max-width: var(--nmg-measure);
	margin-bottom: var(--nmg-s6);
	padding-bottom: var(--nmg-s5);
	border-bottom: 1px solid var(--nmg-line);
}

.nmg-archive-header--compact {
	margin-bottom: var(--nmg-s5);
	padding-bottom: var(--nmg-s4);
}

.nmg-archive-header__eyebrow {
	margin: 0 0 var(--nmg-s1);
	font-size: var(--nmg-text-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--nmg-leaf);
}

.nmg-archive-header__title {
	margin: 0;
	font-size: clamp(1.7rem, 1.3rem + 1.9vw, 2.4rem);
	letter-spacing: -0.018em;
}

.nmg-archive-header__query {
	color: var(--nmg-green);
}

.nmg-archive-header__description {
	margin-top: var(--nmg-s3);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--nmg-muted);
}

.nmg-archive-header__description p:last-child {
	margin-bottom: 0;
}

.nmg-archive-header__search {
	margin-top: var(--nmg-s4);
	max-width: 520px;
}

.nmg-archive-header__search .nmg-search-form {
	margin-inline: 0;
}

/* Subcategory filter row on category pages. */
.nmg-subnav {
	margin-bottom: var(--nmg-s6);
}

.nmg-subnav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nmg-s2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nmg-subnav__list li {
	margin: 0;
}

.nmg-subnav__list a {
	display: inline-block;
	padding: 0.4em 0.9em;
	border: 1px solid var(--nmg-line);
	border-radius: var(--nmg-r-pill);
	font-family: var(--nmg-font-sans);
	font-size: var(--nmg-text-sm);
	font-weight: 500;
	color: var(--nmg-ink);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nmg-subnav__list a:hover,
.nmg-subnav__list a:focus-visible {
	background: var(--nmg-soft);
	border-color: var(--nmg-soft);
	color: var(--nmg-green);
}

/* The lead story on a category page, sized between a hero and a card. */
.nmg-archive-lead {
	padding-bottom: var(--nmg-s6);
	margin-bottom: var(--nmg-s6);
	border-bottom: 1px solid var(--nmg-line);
}

@media (min-width: 768px) {
	.nmg-archive-lead .nmg-card--hero {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: var(--nmg-s5);
		align-items: center;
	}

	.nmg-archive-lead .nmg-card--hero .nmg-card__media {
		margin-bottom: 0;
	}
}

/* Search results read as rows rather than a grid: the excerpt matters more
   than the picture when someone is scanning for an answer. */
.nmg-list {
	display: flex;
	flex-direction: column;
	gap: var(--nmg-s5);
}

/* 29. Pagination
   ========================================================================== */

.nmg-pagination {
	margin-top: var(--nmg-s7);
	padding-top: var(--nmg-s5);
	border-top: 1px solid var(--nmg-line);
}

.nmg-pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--nmg-s2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nmg-pagination__item {
	margin: 0;
}

.nmg-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px keeps every target within reach of a thumb. */
	min-width: 44px;
	height: 44px;
	padding-inline: var(--nmg-s3);
	border: 1px solid var(--nmg-line);
	border-radius: var(--nmg-r-sm);
	font-family: var(--nmg-font-sans);
	font-size: var(--nmg-text-sm);
	font-weight: 500;
	color: var(--nmg-ink);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nmg-pagination a.page-numbers:hover,
.nmg-pagination a.page-numbers:focus-visible {
	background: var(--nmg-soft);
	border-color: var(--nmg-soft);
	color: var(--nmg-green);
}

.nmg-pagination .page-numbers.current {
	background: var(--nmg-green);
	border-color: var(--nmg-green);
	color: var(--nmg-white);
}

.nmg-pagination .page-numbers.dots {
	border-color: transparent;
	color: var(--nmg-muted);
}

/* 30. Pages, empty states and 404
   ========================================================================== */

.nmg-page {
	max-width: var(--nmg-measure);
	margin-inline: auto;
	padding-block: var(--nmg-s6) var(--nmg-s8);
}

.nmg-article--page .nmg-article__header {
	margin-bottom: var(--nmg-s5);
	padding-bottom: var(--nmg-s4);
	border-bottom: 1px solid var(--nmg-line);
}

.nmg-empty {
	max-width: 560px;
	margin: var(--nmg-s6) 0;
	padding: var(--nmg-s6);
	background: var(--nmg-mist);
	border-radius: var(--nmg-r-lg);
}

.nmg-empty__title {
	margin: 0 0 var(--nmg-s2);
	font-size: var(--nmg-h3);
}

.nmg-empty__text {
	margin: 0 0 var(--nmg-s4);
	font-size: 0.9375rem;
	color: var(--nmg-muted);
}

.nmg-empty__search {
	margin-bottom: var(--nmg-s4);
}

.nmg-empty__search .nmg-search-form {
	margin-inline: 0;
}

.nmg-empty__action {
	margin: 0;
}

.nmg-404 {
	max-width: var(--nmg-wrap);
	margin-inline: auto;
	padding-block: var(--nmg-s8);
	text-align: center;
}

.nmg-404__code {
	margin: 0 0 var(--nmg-s2);
	font-size: var(--nmg-text-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nmg-leaf);
}

.nmg-404__title {
	margin: 0 0 var(--nmg-s3);
	font-size: clamp(1.7rem, 1.3rem + 2vw, 2.5rem);
}

.nmg-404__text {
	max-width: 52ch;
	margin: 0 auto var(--nmg-s5);
	color: var(--nmg-muted);
}

.nmg-404__search {
	max-width: 520px;
	margin: 0 auto var(--nmg-s7);
}

.nmg-404__subtitle {
	margin: 0 0 var(--nmg-s4);
	font-family: var(--nmg-font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--nmg-muted);
}

.nmg-404__topics {
	margin-bottom: var(--nmg-s8);
}

.nmg-404__topics .nmg-subnav__list {
	justify-content: center;
}

.nmg-404__recent {
	text-align: left;
}

.nmg-404__recent .nmg-404__subtitle {
	text-align: center;
}