/**
 * Sovereign Terminal — main.css
 *
 * Swiss brutalist newsroom. Off-white paper edge to edge, black plates, one
 * red accent, and a heavy expanded grotesque carrying every headline.
 *
 * The rules of the design:
 *   - No radius. No shadow. No gradient. Structure is plates and hairlines.
 *   - One accent. Red marks the desk, the action and the negative figure.
 *     Green appears only on a positive market number, where red is taken.
 *   - Headlines are the artwork. They run large, tight and expanded; the
 *     photograph supports them rather than the other way round.
 *
 * Contents
 *   1.  Tokens
 *   2.  Reset & base
 *   3.  Layout shell
 *   4.  Header
 *   5.  Navigation
 *   6.  Bands & section heads
 *   7.  Cards
 *   8.  Lead & market bar
 *   9.  Section layouts
 *   10. Single post
 *   11. Archive & pagination
 *   12. Sidebar
 *   13. Newsletter
 *   14. Footer
 *   15. Widgets
 *   16. Utilities & responsive
 */

/* ═══ 1. Tokens ═══════════════════════════════════════════════════════════ */

:root {
	/* Surfaces. The paper runs edge to edge — there is no surround. */
	--paper: #f2f0ed;
	--paper-2: #e7e4e0;
	--plate: #0a0a0a;
	--plate-2: #17171a;

	/* Ink */
	--ink: #0a0a0a;
	--ink-2: #4a4a4a;
	--ink-3: #7a7873;
	--ink-invert: #f2f0ed;

	/* The one accent. */
	--red: #e0261c;
	--red-deep: #b21b13;

	/* The second signal, reserved for positive market figures. */
	--green: #007a4d;

	/* Rules */
	--fog: #cfcbc5;
	--fog-strong: #a8a49d;
	--fog-dark: #2e2e33;

	/* Type. One variable family; the display voice is the same face pushed to
	   the far corner of both axes — weight 900, width 125%. See
	   .st-display below, which every headline rule composes. */
	--font-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;

	/* Measure */
	--page-w: 1440px;
	--gutter: 2rem;

	--logo-h: 40px;

	/* Rhythm */
	--band-y: 4.5rem;
	--card-gap: 2rem;
}

/* ═══ 2. Reset & base ═════════════════════════════════════════════════════ */

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

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

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

/* The display voice.
 *
 * Archivo's width is a variable axis, not a second family, so the expanded
 * cut is reached with font-stretch rather than by naming a different face.
 * Every element that speaks in the display voice is listed here once, so the
 * width can never drift out of step with the family and weight below.
 *
 * Browsers without variable-font support ignore font-stretch and fall back to
 * the normal width at the requested weight, which still reads correctly — the
 * headlines are simply narrower. */
h1, h2, h3, h4, h5, h6,
.site-logo,
.nav-drawer__title,
.nav-drawer .nav-list a,
.band__title,
.page-title,
.card__title,
.rowcard__rank,
.rowcard__title,
.lead__title,
.feature__title,
.entry-title,
.market-fig__value,
.post-nav__title,
.related__title,
.panel__heading,
.cat-row__count,
.newsletter-band__title,
.newsletter-band__form-title,
.st-modal__title,
.footer-col__heading,
.political-control-widget h3,
.political-period__years,
.political-period__value,
.market-history__title,
.market-stat__value,
.market-event__year,
.market-event__title,
.market-event__change {
	font-stretch: 125%;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Every figure in the design aligns in a column somewhere, so tabular
   numerals are the default rather than an opt-in. */
time,
.figure,
.card__date,
.market-fig__value,
.cat-row__count { font-variant-numeric: tabular-nums; }

::selection {
	background: var(--red);
	color: #fff;
}

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

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--ink);
	color: var(--paper);
	padding: .8rem 1.2rem;
	font-weight: 700;
}
.skip-link:focus {
	left: 0;
}

/* ═══ 3. Layout shell ═════════════════════════════════════════════════════ */

.container {
	width: 100%;
	max-width: var(--page-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site-main { display: block; }

/* ═══ 4. Header ═══════════════════════════════════════════════════════════ */

.site-header {
	border-bottom: 2px solid var(--ink);
	background: var(--paper);
}

/* Logo left, desks centre, the one action right — the reference's row. */
.masthead {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 2rem;
	min-height: 84px;
	padding-block: 1rem;
}

.masthead__brand { justify-self: start; }

.masthead__nav { justify-self: center; }

.masthead__action { justify-self: end; }

/* The Customizer logo and the text fallback share one height budget. */
.site-header .custom-logo-link,
.stickybar__brand .custom-logo-link {
	display: block;
}

.custom-logo {
	max-height: var(--logo-h);
	width: auto;
	object-fit: contain;
}

.site-logo {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem);
	letter-spacing: -0.03em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--ink);
}

/* The red dot after the wordmark — the references both carry one. It marks
   the brand, so it is drawn rather than typed. */
.site-logo::after {
	content: "";
	display: inline-block;
	width: .34em;
	height: .34em;
	margin-left: .22em;
	vertical-align: baseline;
	background: var(--red);
}

/* The subscribe control. The only red plate in the header, so it reads as
   the single action the bar offers. */
.header-cta {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	background: var(--red);
	color: #fff;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: .8rem 1.3rem;
	border: 0;
	cursor: pointer;
	transition: background .15s ease;
}
.header-cta:hover,
.header-cta:focus-visible { background: var(--ink); }

.header-cta svg {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
}

/* The burger. Three bars, square ends, no chrome. */
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.menu-toggle span {
	display: block;
	width: 26px;
	height: 3px;
	background: var(--ink);
}

/* ── The condensed bar that slides in on scroll ───────────────────────── */

.site-header--sticky {
	position: fixed;
	inset: 0 0 auto;
	z-index: 90;
	background: var(--paper);
	border-bottom: 2px solid var(--ink);
	transform: translateY(-100%);
	transition: transform .22s ease;
}
.site-header--sticky.is-visible { transform: translateY(0); }

.stickybar {
	max-width: var(--page-w);
	margin-inline: auto;
	padding: .65rem var(--gutter);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 2rem;
}

.stickybar__brand { justify-self: start; }
.stickybar .nav-primary { justify-self: center; }
.stickybar .custom-logo { max-height: calc(var(--logo-h) * .8); }
.stickybar .site-logo { font-size: 1.15rem; }

.stickybar__action { justify-self: end; }
.stickybar .header-cta { padding: .55rem 1rem; font-size: .72rem; }

/* ═══ 5. Navigation ═══════════════════════════════════════════════════════ */

/* One row, never two.
 *
 * A wrapped nav does not just look wrong — it changes the header's HEIGHT,
 * and the sticky bar and the scroll offset are both measured from that. The
 * gap therefore shrinks with the viewport instead of the row breaking, and
 * below the nav breakpoint the whole menu moves into the drawer anyway.
 *
 * The clamp is in vw so the gap gives way gradually rather than stepping at a
 * breakpoint: .9rem where the burger is about to take over (1000px), opening
 * to 2rem at 1440px and wider.
 *
 * The preferred term is the line through those two points — 17.6px at 1000px
 * and 32px at 1440px is 3.27vw - 18.9px. */
.nav-list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(.9rem, 3.27vw - 18.9px, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Items keep their words intact; the gap is what absorbs the pressure. */
.nav-list > li { flex: none; }

/* Uppercase, and a step bolder and tighter to carry it.
 *
 * Caps set at the same size and weight as sentence case read lighter and run
 * wider, so the size drops slightly and the tracking opens a little — caps
 * need more space between letters than lowercase does, which is why the
 * letter-spacing goes up while the size comes down. */
.nav-list a {
	position: relative;
	display: block;
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding-block: .4rem;
	color: var(--ink);
	/* A label is one unit. "100 Years of the Stock Market" breaking across
	   two lines would reintroduce the wrap the row above forbids. */
	white-space: nowrap;
}

/* A red underscore that grows from the left. It signals the desk you are on
   as well as the one you are pointing at, so it is state, not decoration. */
.nav-list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .18s ease;
}
.nav-list a:hover::after,
.nav-list a:focus-visible::after,
.nav-list .current-menu-item > a::after,
.nav-list .current-menu-parent > a::after,
.nav-list .current-menu-ancestor > a::after { transform: scaleX(1); }

/* One level of sub-menu. Square black plate, no radius. */
.nav-list li { position: relative; }

.nav-list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	min-width: 200px;
	background: var(--ink);
	list-style: none;
	margin: 0;
	padding: .4rem 0;
	display: none;
}
.nav-list li:hover > .sub-menu,
.nav-list li:focus-within > .sub-menu { display: block; }

/* The sub-menu stays in sentence case. Caps are the top row's signal that it
   is navigation furniture; repeating them one level down would make the panel
   shout, and a long category name in caps wraps badly in a 200px box. */
.nav-list .sub-menu a {
	padding: .55rem 1.1rem;
	color: var(--paper);
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
}
.nav-list .sub-menu a::after { display: none; }
.nav-list .sub-menu a:hover { background: var(--red); }

/* ── The drawer ───────────────────────────────────────────────────────── */

.nav-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 120;
	width: min(88vw, 420px);
	background: var(--ink);
	color: var(--paper);
	padding: 1.5rem;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform .24s ease;
}
.nav-drawer.is-open { transform: translateX(0); }

.nav-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 1.2rem;
	margin-bottom: 1.2rem;
	border-bottom: 1px solid var(--fog-dark);
}

.nav-drawer__title {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.nav-close {
	width: 40px;
	height: 40px;
	background: none;
	border: 0;
	color: var(--paper);
	cursor: pointer;
	display: grid;
	place-items: center;
}
.nav-close svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
}

/* In the drawer the list stacks and each desk gets a full-width rule. */
.nav-drawer .nav-list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.nav-drawer .nav-list > li { border-bottom: 1px solid var(--fog-dark); }

.nav-drawer .nav-list a {
	color: var(--paper);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	padding: .85rem 0;
	/* The drawer stacks, so a long label SHOULD wrap here — the nowrap that
	   keeps the horizontal row on one line is undone. */
	white-space: normal;
}
.nav-drawer .nav-list a::after { display: none; }
.nav-drawer .nav-list a:hover { color: var(--red); }

.nav-drawer .sub-menu {
	position: static;
	display: block;
	background: none;
	padding: 0 0 .7rem .9rem;
	border-left: 2px solid var(--red);
	margin-bottom: .7rem;
}
.nav-drawer .sub-menu a {
	font-family: var(--font-body);
	font-size: .9rem;
	font-weight: 600;
	text-transform: none;
	padding: .35rem 0;
}
.nav-drawer .sub-menu a:hover { background: none; color: var(--red); }

.nav-scrim {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: rgba(10, 10, 10, .55);
	opacity: 0;
	visibility: hidden;
	transition: opacity .24s ease, visibility .24s ease;
}
.nav-scrim.is-open {
	opacity: 1;
	visibility: visible;
}

/* ═══ 6. Bands & section heads ════════════════════════════════════════════ */

.band { padding-block: var(--band-y); }

.band--tight { padding-block: 2.5rem var(--band-y); }

/* The one recessed band, for contrast against the paper. */
.band--recess {
	background: var(--paper-2);
	border-block: 1px solid var(--fog);
}

.band__inner {
	width: 100%;
	max-width: var(--page-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* The section head. A red square marks the desk, the name runs in display
   type beside it, and the archive link anchors the right end of the rule. */
.band__head {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1rem;
	padding-bottom: .9rem;
	margin-bottom: 2.25rem;
	border-bottom: 2px solid var(--ink);
}

.band__mark {
	width: 14px;
	height: 14px;
	background: var(--red);
	flex: none;
}

.band__title {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem);
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}
.band__title a:hover { color: var(--red); }

.band__more {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ink-2);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
.band__more:hover { color: var(--red); }

.band__more svg {
	width: 11px;
	height: 11px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
}

/* The page-header used by archives, pages and the 404. */
.page-header {
	padding-bottom: 1.1rem;
	margin-bottom: 2.5rem;
	border-bottom: 2px solid var(--ink);
}

.page-header__mark {
	display: block;
	width: 42px;
	height: 6px;
	background: var(--red);
	margin-bottom: 1.1rem;
}

.page-title {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.5rem);
	line-height: .96;
	letter-spacing: -0.035em;
	text-transform: uppercase;
}

/* Desk names are short, so a page title normally runs at full size. A long
   page title — an About page, a policy document — steps down like every other
   headline. */
.lead--medium .page-title {
	font-size: clamp(2rem, 1.3rem + 2.3vw, 3.2rem);
	line-height: 1;
}

.lead--long .page-title {
	font-size: clamp(1.7rem, 1.15rem + 1.7vw, 2.5rem);
	line-height: 1.03;
	letter-spacing: -0.025em;
}

.archive-description {
	margin-top: 1rem;
	max-width: 62ch;
	color: var(--ink-2);
	font-size: 1rem;
}

/* ═══ 7. Cards ════════════════════════════════════════════════════════════ */

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

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

/* A card is the image, the desk, the headline and the date — nothing else
   holds it together, which is why the divider does the work. */
.card {
	display: flex;
	flex-direction: column;
	position: relative;
}

/* The hairline between grid columns.
 *
 * Drawn as a border in the MIDDLE of the gap — the card keeps its full track
 * width and the rule is pushed out into the gutter, so every column measures
 * the same. Padding the card instead would make the first column wider than
 * its neighbours, and its headline would then wrap on a different word. */
.grid--3 .card + .card,
.grid--4 .card + .card {
	border-left: 1px solid var(--fog);
	margin-left: calc(var(--card-gap) / -2);
	padding-left: calc(var(--card-gap) / 2);
	box-sizing: content-box;
	width: 100%;
}

.card__media {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--paper-2);
	margin-bottom: 1rem;
}

.card__media--4x3 { aspect-ratio: 4 / 3; }
.card__media--16x9 { aspect-ratio: 16 / 9; }
.card__media--1x1 { aspect-ratio: 1 / 1; }

.card__img,
.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Desaturated at rest, full colour on approach: the references run their
	   portraits in black and white and let the red do the talking. */
	filter: grayscale(1) contrast(1.05);
	transition: filter .3s ease, transform .4s ease;
}
.card:hover .card__img,
.card:hover .card__media img {
	filter: grayscale(0) contrast(1);
	transform: scale(1.03);
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	flex: 1;
}

/* The desk marker above a headline. A red square and the name — no pill, no
   background plate, no tracked-out caps. */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--font-body);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--red);
	align-self: flex-start;
}

.eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	background: currentColor;
	flex: none;
}
.eyebrow:hover { color: var(--ink); }

.card__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.12rem;
	line-height: 1.12;
	letter-spacing: -0.015em;
}
.card__title a { background-image: linear-gradient(var(--red), var(--red));
	background-size: 0 2px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size .22s ease;
}
.card__title a:hover { background-size: 100% 2px; }

.card__excerpt {
	font-size: .9rem;
	color: var(--ink-2);
	line-height: 1.55;
	margin: 0;
}

/* Every standfirst on the site stops at three lines.
 *
 * WordPress builds an excerpt by word count, so its length varies with the
 * words rather than with the space the layout has: one card's excerpt ran six
 * lines while its neighbour's ran three, and the cards in a row then stopped
 * lining up. Three lines is enough to say what the story is and short enough
 * that the headline above still leads.
 *
 * -webkit-line-clamp is the standard way to do this — it is in every engine
 * despite the prefix. The overflow and display pair are what it needs to take
 * effect; without them the text is not clipped at all.
 *
 * The [...] WordPress appends is inside the clamped text, so on a long excerpt
 * it is simply cut along with the rest and the browser's own ellipsis takes
 * over at the end of the third line. */
.card__excerpt,
.lead__excerpt,
.feature__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.card__date {
	margin-top: auto;
	padding-top: .3rem;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--ink-3);
	text-transform: uppercase;
}

/* ── The numbered row-card used by the feature rail ───────────────────── */

.rowcard {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: start;
	padding-top: 1rem;
	border-top: 1px solid var(--fog);
}

/* The rank is real information here — the rail is ordered by recency — so
   the number earns its place. */
.rowcard__rank {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--red);
	letter-spacing: -0.04em;
}

.rowcard__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .98rem;
	line-height: 1.16;
	margin-bottom: .35rem;
}
.rowcard__title a:hover { color: var(--red); }

.rowcard__date {
	font-size: .72rem;
	font-weight: 600;
	color: var(--ink-3);
	text-transform: uppercase;
	letter-spacing: .03em;
}

/* ═══ 8. Lead & market bar ════════════════════════════════════════════════ */

/* The front page's opening story. Headline left, photograph right sitting
   over an offset red plate — the reference's single most characteristic
   move, adapted from a portrait to a news photograph. */
/* The text column takes the larger share: a news lead is carried by its
   headline and standfirst, and a half-and-half split at this page width gives
   the photograph more room than it can use — a 4:5 crop across 700px stands
   over 800px tall and pushes the market bar off the screen on its own. */
.lead {
	display: grid;
	grid-template-columns: 1.12fr 1fr;
	gap: 3.5rem;
	/* stretch, so the photograph takes its height from the headline beside
	   it rather than dictating the height of the whole band. */
	align-items: stretch;
}

.lead__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Centred against the photograph, which is the taller of the two when the
	   headline is short. */
	justify-content: center;
	gap: 1.25rem;
}

.lead__meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ink-3);
}

/* News headlines are long, and an uppercase display face at full size turns a
   twelve-word title into nine lines that push the rest of the page off the
   screen. The size is therefore set from the headline's own length, which the
   template measures and hands over as --title-len:
 *
 *   short  (< 40 chars)  the full 4.6rem — the reference's poster treatment
 *   medium (40–75)       3.3rem, still clearly the loudest thing on the page
 *   long   (> 75)        2.5rem, where the job is to be read, not to shout
 *
 * Done with container-relative clamps rather than a script, so it costs
 * nothing and cannot flash the wrong size before JS runs. */
.lead__title {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(2rem, 1.2rem + 3.2vw, 4.6rem);
	line-height: .94;
	letter-spacing: -0.035em;
	text-transform: uppercase;
}

.lead--medium .lead__title {
	font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.3rem);
	line-height: .98;
	letter-spacing: -0.03em;
}

.lead--long .lead__title {
	font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.5rem);
	line-height: 1.02;
	letter-spacing: -0.025em;
}
.lead__title a:hover { color: var(--red); }

.lead__excerpt {
	max-width: 46ch;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0;
}

/* The lead's call to action. A black plate with a red square that slides
   across it on approach. */
.lead__cta {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	background: var(--ink);
	color: var(--paper);
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 1rem 1.6rem;
	transition: background .18s ease;
}
.lead__cta:hover { background: var(--red); }

.lead__cta svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
}

/* The red plate. Offset behind the photograph, top-right, as the references
   place theirs. */
/* 4:5 is the references' portrait crop. A news photograph is rarely a
   portrait, and at this column width that ratio alone stands taller than the
   viewport.
 *
 * The photograph therefore fills its column's WIDTH and takes its HEIGHT from
 * the text beside it — align-items: stretch on the grid plus height: 100%
 * here. The aspect-ratio is only a floor for the case where the headline is
 * short enough that the text column is the shorter of the two.
 *
 * Capping the height directly instead would leave the element narrower than
 * its column, because aspect-ratio would then solve for width. */
.lead__media {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	min-height: min(28rem, 60vh);
}

.lead__media::before {
	content: "";
	position: absolute;
	top: -1.5rem;
	right: -1.5rem;
	width: 62%;
	height: 62%;
	background: var(--red);
	z-index: 0;
}

.lead__media img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.06);
	transition: filter .35s ease;
}
.lead__media:hover img { filter: grayscale(0) contrast(1); }

/* ── The market bar ───────────────────────────────────────────────────── */

/* A black strip across the page, carrying four editorial figures about the
   market's long record. It is the reference's stats band, adapted from a
   portfolio's "80+ projects" to something a finance reader can use. */
.market-bar {
	background: var(--ink);
	color: var(--paper);
}

.market-bar__inner {
	max-width: var(--page-w);
	margin-inline: auto;
	padding: 2.5rem var(--gutter);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

.market-fig {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding-left: 1.75rem;
	border-left: 1px solid var(--fog-dark);
}
.market-fig:first-child {
	padding-left: 0;
	border-left: 0;
}

/* Neutral by default. Colour is a claim about direction, and most of these
   figures are counts rather than movements. */
.market-fig__value {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(2rem, 1.4rem + 2vw, 3.1rem);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--paper);
}

/* The green is lifted well above the --green token: at 007A4D on black it
   fails contrast, and this is the one number on the page that must read at a
   glance. */
.market-fig__value--pos { color: #23c47f; }
.market-fig__value--neg { color: var(--red); }

.market-fig__label {
	font-size: .76rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #a5a29c;
}

/* ═══ 9. Section layouts ══════════════════════════════════════════════════ */

/* ── feature ──────────────────────────────────────────────────────────── */

.feature {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 3rem;
	align-items: center;
	margin-bottom: 2.75rem;
}

.feature__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
}

/* The red plate returns here, offset to the lower left so the band does not
   simply repeat the lead's composition. */
.feature__media::before {
	content: "";
	position: absolute;
	left: -1.25rem;
	bottom: -1.25rem;
	width: 55%;
	height: 55%;
	background: var(--red);
	z-index: 0;
}

.feature__media img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	transition: filter .35s ease;
}
.feature__media:hover img { filter: grayscale(0) contrast(1); }

.feature__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.feature__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.9rem);
	line-height: 1;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}
.feature__title a:hover { color: var(--red); }

.feature__excerpt {
	max-width: 50ch;
	font-size: .98rem;
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0;
}

.railrow {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--card-gap);
}

/* ── split ────────────────────────────────────────────────────────────── */

.section-split {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 3rem;
	align-items: start;
}

/* In the split the photograph sits ABOVE its headline rather than beside it,
   so there is no text column to take its height from: it goes back to a fixed
   ratio, and the front-page lead's stretch rules are unwound. */
.section-split__lead .lead__media {
	height: auto;
	min-height: 0;
	aspect-ratio: 16 / 10;
	margin-bottom: 1.5rem;
}
.section-split__lead .lead__media::before { display: none; }

.section-split__lead .lead__body { gap: .8rem; }

/* The split lead sits in a narrower column than the front page's lead, so it
   starts a step down. The length classes then move it from there, which is
   why each one is qualified rather than overridden wholesale. */
.section-split__lead .lead__title {
	font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem);
	line-height: .98;
}

.section-split__lead.lead--medium .lead__title {
	font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.5rem);
	line-height: 1;
}

.section-split__lead.lead--long .lead__title {
	font-size: clamp(1.45rem, 1.05rem + 1.2vw, 2rem);
	line-height: 1.04;
	letter-spacing: -0.02em;
}

.section-split__side {
	display: grid;
	gap: 1.5rem;
	align-content: start;
	padding-left: 3rem;
	border-left: 1px solid var(--fog);
}

.section-split__side .card__title { font-size: 1.05rem; }

/* ═══ 10. Single post ═════════════════════════════════════════════════════ */

.content-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 4rem;
	align-items: start;
}

.entry-header {
	padding-bottom: 1.5rem;
	margin-bottom: 2rem;
	border-bottom: 2px solid var(--ink);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

/* Sized from the headline's length, exactly as the front page's lead is —
   see §8. A long news title at the full display size fills the screen before
   the photograph or the first paragraph ever appear. */
.entry-title {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(2rem, 1.3rem + 2.9vw, 3.8rem);
	line-height: .97;
	letter-spacing: -0.035em;
	text-transform: uppercase;
}

.lead--medium .entry-title {
	font-size: clamp(1.8rem, 1.2rem + 2vw, 2.9rem);
	line-height: 1;
	letter-spacing: -0.03em;
}

.lead--long .entry-title {
	font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.3rem);
	line-height: 1.04;
	letter-spacing: -0.025em;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.entry-media {
	margin: 0 0 2.25rem;
}
.entry-media img { width: 100%; }

/* No max-width: the body copy runs the full width of its column. On a single
   post that column is already narrowed by the sidebar beside it; on a page it
   is the container. */
.entry-content {
	font-size: 1.06rem;
	line-height: 1.72;
}

.entry-content > * + * { margin-top: 1.35rem; }

.entry-content h2 {
	font-size: 1.75rem;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	margin-top: 2.75rem;
	padding-top: 1rem;
	border-top: 2px solid var(--ink);
}

.entry-content h3 {
	font-size: 1.3rem;
	font-weight: 700;
	margin-top: 2.25rem;
}

.entry-content a {
	color: var(--ink);
	box-shadow: inset 0 -2px 0 var(--red);
	transition: background .15s ease, color .15s ease;
}
.entry-content a:hover {
	background: var(--red);
	color: #fff;
	box-shadow: none;
}

.entry-content blockquote {
	margin: 2rem 0;
	padding-left: 1.5rem;
	border-left: 5px solid var(--red);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.25;
	letter-spacing: -0.015em;
}
.entry-content blockquote p { margin-bottom: .6rem; }
.entry-content blockquote cite {
	display: block;
	font-family: var(--font-body);
	font-size: .82rem;
	font-weight: 600;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ink-3);
}

.entry-content ul,
.entry-content ol { padding-left: 1.3rem; }
.entry-content li + li { margin-top: .45rem; }

.entry-content ul { list-style: none; padding-left: 0; }
.entry-content ul li {
	position: relative;
	padding-left: 1.5rem;
}
.entry-content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .6em;
	width: 8px;
	height: 8px;
	background: var(--red);
}

.entry-content img { margin-block: 1.5rem; }

.entry-content code {
	background: var(--paper-2);
	padding: .15em .4em;
	font-size: .9em;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: .94rem;
}
.entry-content th,
.entry-content td {
	padding: .7rem .8rem;
	text-align: left;
	border-bottom: 1px solid var(--fog);
}
.entry-content th {
	background: var(--ink);
	color: var(--paper);
	font-weight: 700;
	text-transform: uppercase;
	font-size: .78rem;
	letter-spacing: .04em;
}

/* ── Share ────────────────────────────────────────────────────────────── */

.share-row {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 2px solid var(--ink);
}

.share-row__label {
	margin-right: .5rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.share-row__link {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 2px solid var(--ink);
	color: var(--ink);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.share-row__link svg { width: 17px; height: 17px; fill: currentColor; }
.share-row__link:hover {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
}

/* ── Previous / next ──────────────────────────────────────────────────── */

/* auto-fit rather than a fixed pair: the newest and oldest posts have only
   one neighbour, and a fixed two-column grid would leave a black plate beside
   an empty cell. The template prints only the items that exist, so a lone
   plate simply spans the row. */
.post-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	margin-top: 2.5rem;
}

.post-nav__item {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.4rem;
	background: var(--ink);
	color: var(--paper);
	min-height: 100%;
	transition: background .15s ease;
}
.post-nav__item:hover { background: var(--plate-2); }

.post-nav__item--next { text-align: right; }

.post-nav__label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--red);
}

.post-nav__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.15;
}
.post-nav__title:hover { color: var(--red); }

/* ── Related ──────────────────────────────────────────────────────────── */

.related { margin-top: 3.5rem; }

.related__title {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.6rem;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	padding-bottom: .8rem;
	margin-bottom: 2rem;
	border-bottom: 2px solid var(--ink);
}

/* ═══ 11. Archive & pagination ════════════════════════════════════════════ */

.archive-list { min-width: 0; }

.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--ink);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: .7rem;
	border: 2px solid var(--ink);
	font-weight: 700;
	font-size: .88rem;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pagination .page-numbers:hover {
	background: var(--ink);
	color: var(--paper);
}
.pagination .page-numbers.current {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
}
.pagination .page-numbers.dots {
	border-color: transparent;
}

.pagination .screen-reader-text { display: none; }

.no-results {
	padding: 4rem 0;
	font-size: 1.05rem;
	color: var(--ink-2);
}

/* ═══ 12. Sidebar ═════════════════════════════════════════════════════════ */

.sidebar {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	min-width: 0;
}

.panel {
	border: 2px solid var(--ink);
	padding: 1.5rem;
	background: var(--paper);
}

/* The newsletter panel inverts, so the one thing in the rail that asks for
   an action is the one thing that is black. */
.panel--dark {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

.panel__heading {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	padding-bottom: .7rem;
	margin-bottom: 1.1rem;
	border-bottom: 2px solid currentColor;
}

.panel__text {
	font-size: .9rem;
	line-height: 1.55;
	color: var(--ink-2);
	margin-bottom: 1.1rem;
}
.panel--dark .panel__text { color: #a5a29c; }

/* ── The category table ───────────────────────────────────────────────── */

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

.cat-row + .cat-row { border-top: 1px solid var(--fog); }

.cat-row__link {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 1rem;
	padding: .75rem 0;
	transition: padding-left .18s ease, color .18s ease;
}
.cat-row__link:hover {
	color: var(--red);
	padding-left: .5rem;
}

.cat-row__name {
	font-weight: 600;
	font-size: .94rem;
}

.cat-row__count {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: .82rem;
	color: var(--ink-3);
}
.cat-row__link:hover .cat-row__count { color: var(--red); }

/* ═══ 13. Newsletter ══════════════════════════════════════════════════════ */

/* The band. Black plate, the pitch left, the form on paper at the right. */
.newsletter-band {
	background: var(--ink);
	color: var(--paper);
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 3.5rem;
	padding: 3.25rem;
}

.newsletter-band__pitch {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}

.newsletter-band__mark {
	width: 42px;
	height: 6px;
	background: var(--red);
}

.newsletter-band__title {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem);
	line-height: .98;
	letter-spacing: -0.035em;
	text-transform: uppercase;
}

.newsletter-band__text {
	max-width: 44ch;
	color: #a5a29c;
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

/* Each promise gets a rule and a red index. A subscription is a list of
   what lands in the inbox, so the rows are the content. */
.newsletter-band__features {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.newsletter-band__features li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: baseline;
	padding: .8rem 0;
	border-top: 1px solid var(--fog-dark);
	font-size: .94rem;
	color: #cac7c1;
}

.newsletter-band__features li::before {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--red);
	align-self: center;
}

.newsletter-band__features strong {
	color: var(--paper);
	font-weight: 700;
}

.newsletter-band__form {
	background: var(--paper);
	color: var(--ink);
	padding: 2rem;
	align-self: start;
}

.newsletter-band__form-title {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.15rem;
	text-transform: uppercase;
	padding-bottom: .7rem;
	margin-bottom: 1.2rem;
	border-bottom: 2px solid var(--ink);
}

/* ── The form skin ────────────────────────────────────────────────────── */
/* The markup is unchanged — only the surface it wears. */

.st-optin__field { margin-bottom: 1rem; }

.st-optin__input {
	width: 100%;
	padding: .95rem 1rem;
	background: var(--paper);
	border: 2px solid var(--ink);
	font-size: .95rem;
	transition: border-color .15s ease;
}
.st-optin__input::placeholder { color: var(--ink-3); }

/* Focus keeps the ink border and adds a ring, rather than turning the field
   red. Red is this design's error colour, and a field that goes red the
   moment it is focused tells the reader they have done something wrong
   before they have typed anything — which is exactly what the autofocused
   modal was doing. */
.st-optin__input:focus {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 3px rgba(10, 10, 10, .18);
}

.st-optin__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.st-optin__consent { margin-bottom: 1.1rem; }

.st-optin__consent-label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .65rem;
	align-items: start;
	cursor: pointer;
}

.st-optin__checkbox {
	width: 18px;
	height: 18px;
	margin: .15rem 0 0;
	accent-color: var(--red);
	cursor: pointer;
	flex: none;
}

.st-optin__consent-text {
	font-size: .78rem;
	line-height: 1.5;
	color: var(--ink-2);
}
.st-optin__consent-text a {
	color: var(--ink);
	box-shadow: inset 0 -1px 0 var(--red);
}
.st-optin__consent-text a:hover { color: var(--red); }

.st-optin__submit {
	width: 100%;
	padding: 1rem 1.2rem;
	background: var(--red);
	color: #fff;
	border: 0;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: .88rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s ease;
}
.st-optin__submit:hover:not(:disabled) { background: var(--ink); }
.st-optin__submit:disabled { opacity: .55; cursor: not-allowed; }

.st-optin__message {
	margin: .9rem 0 0;
	font-size: .85rem;
	line-height: 1.5;
}
.st-optin__message.is-error { color: var(--red); }
.st-optin__message.is-success { color: var(--green); }

.st-optin__footer {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	margin-top: 1rem;
	padding-top: .8rem;
	border-top: 1px solid var(--fog);
	font-size: .68rem;
	color: var(--ink-3);
}

/* ── The modal ────────────────────────────────────────────────────────── */

.st-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: 1.5rem;
}
.st-modal[hidden] { display: none; }

/* A real element rather than a background on .st-modal, because it carries
   the close-on-click handler — clicking the dialog must not dismiss it. */
.st-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, .8);
}

.st-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 460px);
	max-height: 92vh;
	overflow-y: auto;
	background: var(--paper);
	border: 2px solid var(--ink);
	padding: 2.25rem;
}

/* The one place a small label above a heading earns its keep: the modal
   arrives with no surrounding page to say what it is. */
.st-modal__kicker {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: .75rem;
}
.st-modal__kicker::before {
	content: "";
	width: 8px;
	height: 8px;
	background: currentColor;
}

.st-modal__title {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.7rem;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	margin-bottom: .6rem;
}

.st-modal__sub {
	font-size: .94rem;
	line-height: 1.55;
	color: var(--ink-2);
	margin-bottom: 1.5rem;
}

.st-modal__close {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 44px;
	background: var(--ink);
	color: var(--paper);
	border: 0;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background .15s ease;
}
.st-modal__close:hover { background: var(--red); }

/* ═══ 14. Footer ══════════════════════════════════════════════════════════ */

.site-footer {
	background: var(--ink);
	color: var(--paper);
	margin-top: 0;
}

.site-footer__inner {
	max-width: var(--page-w);
	margin-inline: auto;
	padding: 4.5rem var(--gutter) 0;
}

/* Four columns: the brand, two link lists, and the subscribe pitch. The link
   lists are the narrowest — they hold single words — so the brand and the
   pitch, which both carry sentences, take the wider tracks. */
.footer__grid {
	display: grid;
	grid-template-columns: 1.5fr .85fr .85fr 1.3fr;
	gap: 3rem;
	padding-bottom: 3.5rem;
}

.footer-brand {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: flex-start;
}

/* The Customizer logo is uploaded for the light header, so on the black
   footer plate a dark mark would disappear.
 *
 * brightness(0) invert(1) rather than a plain invert(1): the theme cannot know
 * what colours the uploaded file holds, and inverting an arbitrary colour logo
 * produces whatever the complement happens to be — for a blue mark, a washed
 * mustard. Flattening to black FIRST and then inverting gives a clean white
 * silhouette from any input, which is what a single-colour plate wants.
 *
 * The trade is that the footer mark loses its brand colour. That is the right
 * trade here: it is legible from any upload, and the red dot beside the
 * wordmark already carries the accent. */
.footer-brand__mark .custom-logo {
	max-height: 56px;
	width: auto;
	filter: brightness(0) invert(1);
}

.footer-brand__mark .site-logo {
	color: var(--paper);
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
}

.footer-brand__text {
	max-width: 38ch;
	font-size: .92rem;
	line-height: 1.65;
	color: #a5a29c;
	margin: 0;
}

.footer-col__heading {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: .92rem;
	letter-spacing: .02em;
	text-transform: uppercase;
	padding-bottom: .7rem;
	margin-bottom: 1.1rem;
	border-bottom: 1px solid var(--fog-dark);
}

.footer-links {
	display: flex;
	flex-direction: column;
}

.footer-links a {
	padding: .5rem 0;
	font-size: .92rem;
	color: #cac7c1;
	transition: color .15s ease, padding-left .18s ease;
}
.footer-links a:hover {
	color: var(--red);
	padding-left: .4rem;
}

/* ── The subscribe column ─────────────────────────────────────────────── */

.footer-pitch {
	font-size: .92rem;
	line-height: 1.6;
	color: #a5a29c;
	margin-bottom: 1.25rem;
}

/* The footer's one action, and the only red on the plate. Full width of its
   column so it reads as a control rather than a link in a list. */
.footer-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	width: 100%;
	padding: .95rem 1.2rem;
	background: var(--red);
	color: #fff;
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	transition: background .15s ease;
}
.footer-cta:hover,
.footer-cta:focus-visible { background: var(--paper); color: var(--ink); }

.footer-cta svg {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
}

.footer-base {
	border-top: 1px solid var(--fog-dark);
}

.footer-base__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.5rem;
}

.footer-copy {
	margin: 0;
	font-size: .8rem;
	color: #7a7873;
}

.footer-base__mark {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: var(--red);
}

/* ── Back to top ──────────────────────────────────────────────────────── */

.to-top {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 80;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	background: var(--red);
	color: #fff;
	border: 0;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, visibility .2s ease, transform .2s ease, background .15s ease;
}
.to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.to-top:hover { background: var(--ink); }
.to-top svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
}

/* ═══ 15. Widgets ═════════════════════════════════════════════════════════ */

/* ── Political Control Over Time ──────────────────────────────────────── */
/* Restyled to the palette: the two parties become the design's own two
   plates rather than borrowed party blues and reds. */

.political-control-widget {
	border: 2px solid var(--ink);
	background: var(--paper);
	padding: 1.5rem;
}

.political-control-widget h3 {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	padding-bottom: .7rem;
	margin-bottom: 1.1rem;
	border-bottom: 2px solid var(--ink);
}

.political-timeline {
	display: grid;
	gap: 0;
}

.political-period {
	position: relative;
	padding: .75rem 0 .75rem 1rem;
	border-left: 5px solid var(--fog-strong);
	border-top: 1px solid var(--fog);
}
.political-period:first-child { border-top: 0; }

.political-period--republican { border-left-color: var(--red); }
.political-period--democrat { border-left-color: var(--ink); }

.political-period__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
}

.political-period__years {
	font-family: var(--font-display);
	font-size: .92rem;
	font-weight: 800;
}

.political-period__party {
	font-size: .62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #fff;
	background: var(--fog-strong);
	padding: .2rem .5rem;
	white-space: nowrap;
}
.political-period--republican .political-period__party { background: var(--red); }
.political-period--democrat .political-period__party { background: var(--ink); }

.political-period__return {
	display: flex;
	align-items: baseline;
	gap: .45rem;
	margin-top: .3rem;
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--ink-3);
}

.political-period__value {
	font-family: var(--font-display);
	font-size: .94rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: none;
}
.political-period__value--pos { color: var(--green); }
.political-period__value--neg { color: var(--red); }
.political-period__value--tbd { color: var(--ink-3); }

.political-control-widget .widget-footer {
	margin-top: 1.1rem;
	padding-top: .8rem;
	border-top: 1px solid var(--fog);
}

.political-control-widget .disclaimer {
	font-size: .7rem;
	line-height: 1.5;
	color: var(--ink-3);
	margin: 0;
}

/* ── A Century of Decades ─────────────────────────────────────────────── */
/* The front page's closing section: eleven columns on a black plate, one per
   decade, rising from or falling below a centre line. Drawn in CSS from
   server-rendered heights — there is no canvas and no charting library. */

.century {
	background: var(--ink);
	color: var(--paper);
	padding: 3.25rem;
}

.century__head {
	max-width: 62ch;
	margin-bottom: 3rem;
}

.century__mark {
	display: block;
	width: 42px;
	height: 6px;
	background: var(--red);
	margin-bottom: 1.25rem;
}

.century__title {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.8rem);
	line-height: 1;
	letter-spacing: -0.035em;
	text-transform: uppercase;
	margin-bottom: .9rem;
}

.century__standfirst {
	font-size: 1rem;
	line-height: 1.6;
	color: #a5a29c;
	margin: 0;
}

/* The chart is a <dl> laid out as a grid — one auto-sized track per decade,
   so adding or removing a decade from the dataset needs no change here. */
.century__chart {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: .5rem;
	margin: 0;
}

/* Each column holds one decade's <dt> and <dd>s. */
.century-col {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .5rem;
	min-width: 0;
}

/* <dd> carries a browser default indent that would push every figure off its
   own column. */
.century-col dd { margin: 0; }

.century-col__value {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: .8rem;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.century-col--up .century-col__value { color: #23c47f; }
.century-col--down .century-col__value { color: var(--red); }

/* The track is a fixed-height box with the zero line drawn across it. Gaining
   decades grow upward from that line; losing decades hang below it.
 *
 * The two directions share one track height, so the axis stays level across
 * every column. The upper band is the taller of the two because the worst
 * decade on record (-0.9%) is a fraction of the best (+19.4%) — a symmetric
 * axis would spend half the chart drawing nothing. */
.century-col__track {
	position: relative;
	height: 190px;
}

/* The zero line. Drawn on the track rather than as a border on the bar, so it
   runs the full width of the column whichever way the bar goes. */
.century-col__track::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 76%;
	height: 2px;
	background: var(--fog-dark);
}

/* The inline height is already a share of the whole TRACK — PHP folds the
   band split into it — so the bar only needs to know which side of the zero
   line it starts from. */
.century-col__bar {
	position: absolute;
	left: 0;
	width: 100%;
	background: var(--paper);
	transition: background .15s ease;
}

/* A gaining decade sits ON the line and grows up. */
.century-col--up .century-col__bar { bottom: 24%; }

/* A losing decade hangs FROM the line and grows down, so a loss is read as a
   loss rather than as a very small gain. */
.century-col--down .century-col__bar {
	top: 76%;
	background: var(--red);
}

.century-col:hover .century-col__bar { background: #23c47f; }
.century-col--down:hover .century-col__bar { background: var(--red-deep); }

.century-col__label {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: .82rem;
	letter-spacing: -0.01em;
}

/* The decade's headline event. Hidden below the widest layout, where eleven
   columns leave roughly 80px each and a sentence cannot land. */
.century-col__note {
	font-size: .68rem;
	line-height: 1.35;
	color: #7a7873;
}

/* ── The two facts and the link ───────────────────────────────────────── */

.century__foot {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: 2.5rem;
	align-items: end;
	margin-top: 2.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--fog-dark);
}

.century-fact {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	/* A flex item will not shrink below its content by default, and
	   "1950s +19.4%" set in the display face is wider than a 320px column. */
	min-width: 0;
}

.century-fact__label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #7a7873;
}

/* The decade and its figure are separate spans so the pair can break onto two
   lines on a narrow phone instead of forcing the column open. */
.century-fact__value {
	display: flex;
	flex-wrap: wrap;
	gap: 0 .5rem;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	font-stretch: 125%;
}
.century-fact__value--up { color: #23c47f; }
.century-fact__value--down { color: var(--red); }

.century-fact__note {
	font-size: .82rem;
	color: #a5a29c;
}

.century__more {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .9rem 1.4rem;
	background: var(--red);
	color: #fff;
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
.century__more:hover,
.century__more:focus-visible { background: var(--paper); color: var(--ink); }

.century__more svg {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
}

.century__disclaimer {
	margin: 1.75rem 0 0;
	font-size: .74rem;
	line-height: 1.5;
	color: #7a7873;
	max-width: 72ch;
}

/* ── 100 Years of the Stock Market ────────────────────────────────────── */

/* minmax(0, 1fr) rather than the implicit single track.
 *
 * Chart.js writes a pixel width onto its <canvas>, and the chart plate adds
 * padding and a border on top of it. A default grid track takes its minimum
 * from that widest child, so the canvas was setting the width of the stats
 * row, the controls and the events list too — every sibling inherited a track
 * wider than the page. Pinning the minimum to 0 lets the track follow the
 * container, and the canvas scales down inside it as Chart.js intends. */
.market-history-dashboard {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
}

/* What stands in the dashboard's place until the JSON and Chart.js land. */
.market-history__loading {
	padding: 3rem 0;
	font-size: .92rem;
	color: var(--ink-3);
	border-block: 2px solid var(--ink);
	margin: 0;
}

.market-history__header { max-width: 60ch; }

.market-history__title {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	margin-bottom: .6rem;
}

.market-history__subtitle {
	color: var(--ink-2);
	font-size: 1rem;
	margin: 0;
}

/* The dashboard's own stat row reuses the market bar's treatment, on paper
   rather than on the black plate. */
/* Four fixed tracks rather than auto-fit.
 *
 * auto-fit with a minmax floor was overflowing narrow phones: the floor is
 * resolved against the grid's own width, so a track could end up wider than
 * the container that was meant to constrain it. The count is known — the
 * dashboard always prints four figures — so stating it is both simpler and
 * exact, and the breakpoints below step it down explicitly.
 *
 * minmax(0, 1fr) rather than 1fr, because a bare 1fr track has an automatic
 * minimum of its content's width, and a long label would push the row open
 * again. */
.market-history__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	border-block: 2px solid var(--ink);
}

.market-stat {
	padding: 1.5rem 1.5rem 1.5rem 1.75rem;
	border-left: 1px solid var(--fog);
}
.market-stat:first-child { border-left: 0; padding-left: 0; }

.market-stat__value {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1;
	color: var(--red);
}

.market-stat__label {
	display: block;
	font-size: .76rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--ink-3);
	margin-top: .45rem;
}

.market-history__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.market-history__btn {
	padding: .8rem 1.3rem;
	border: 2px solid var(--ink);
	border-right-width: 0;
	background: var(--paper);
	font-family: var(--font-body);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--ink);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.market-history__btn:last-child { border-right-width: 2px; }
.market-history__btn:hover { background: var(--paper-2); }
.market-history__btn.is-active {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
}
.market-history__btn.is-active + .market-history__btn { border-left-color: var(--red); }

.market-history__chart {
	border: 2px solid var(--ink);
	background: var(--paper);
	padding: 1.5rem;
	min-height: 360px;
	position: relative;
}

.market-history__events { display: grid; gap: 0; }

.market-event {
	display: grid;
	grid-template-columns: 100px 1fr auto;
	gap: 1.5rem;
	align-items: baseline;
	padding: 1.1rem 0;
	border-top: 1px solid var(--fog);
}
.market-event:first-child { border-top: 2px solid var(--ink); }
.market-event:last-child { border-bottom: 2px solid var(--ink); }

.market-event__year {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 900;
	letter-spacing: -0.03em;
}

.market-event__title {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 800;
	margin-bottom: .25rem;
}

.market-event__text {
	font-size: .88rem;
	color: var(--ink-2);
	line-height: 1.5;
	margin: 0;
}

.market-event__change {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	white-space: nowrap;
}
.market-event__change--pos { color: var(--green); }
.market-event__change--neg { color: var(--red); }

.market-history__disclaimer {
	font-size: .78rem;
	color: var(--ink-3);
	margin: 0;
	max-width: 70ch;
}

/* ═══ 16. Utilities & responsive ══════════════════════════════════════════ */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* A plain text link with the design's underline behaviour. */
.link-red {
	font-weight: 700;
	color: var(--red);
	box-shadow: inset 0 -2px 0 currentColor;
}
.link-red:hover { color: var(--ink); }

/* WordPress core alignment classes */
.alignleft { float: left; margin: .4rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .4rem 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }
.alignwide,
.alignfull { width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-block-image figcaption {
	font-size: .8rem;
	color: var(--ink-3);
	padding-top: .5rem;
	border-top: 1px solid var(--fog);
	margin-top: .6rem;
}

.sticky .card__title::before {
	content: "";
	display: inline-block;
	width: .5em;
	height: .5em;
	margin-right: .4em;
	background: var(--red);
}

/* ── Breakpoints ──────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
	:root { --band-y: 3.5rem; --card-gap: 1.5rem; }

	.lead { gap: 2.5rem; }
	.feature { gap: 2rem; }
	.section-split { gap: 2rem; }
	.section-split__side { padding-left: 2rem; }
	.content-sidebar { gap: 2.5rem; }
	.footer__grid { gap: 2rem; }
}

@media (max-width: 1080px) {
	.content-sidebar { grid-template-columns: 1fr; }

	/* The rail becomes a row of panels rather than a column under the
	   article, so it does not push the footer a full screen down. */
	.sidebar {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: start;
	}

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

	.section-split { grid-template-columns: 1fr; }
	.section-split__side {
		grid-template-columns: repeat(2, 1fr);
		padding-left: 0;
		padding-top: 2rem;
		border-left: 0;
		border-top: 1px solid var(--fog);
	}

	.feature { grid-template-columns: 1fr; }
	.feature__media { aspect-ratio: 16 / 9; }

	/* Stacked, so there is no longer a text column beside the photograph for
	   it to take its height from — back to a fixed ratio. */
	.lead {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.lead__media {
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 10;
	}
	.lead__media::before { top: -1rem; right: -1rem; }

	.newsletter-band { grid-template-columns: 1fr; gap: 2.5rem; padding: 2.5rem; }
}

/* ── The nav's breakpoint ─────────────────────────────────────────────── */
/* Below this the desks move into the drawer rather than wrapping the
   masthead onto a second row, which would double the header's height. */
@media (max-width: 1000px) {
	.menu-toggle { display: inline-flex; }

	.nav-primary { display: none; }

	/* Two cells left: the mark and the burger. The subscribe control moves
	   into the drawer, where it is the last thing in the list. */
	.masthead { grid-template-columns: 1fr auto; }
	.masthead__action { display: none; }

	.stickybar { grid-template-columns: 1fr auto; }
	.stickybar .nav-primary { display: none; }
}

@media (max-width: 860px) {
	:root { --band-y: 3rem; }

	.grid--4 { grid-template-columns: repeat(2, 1fr); }
	.railrow { grid-template-columns: 1fr; }
	.market-bar__inner { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }

	.market-fig:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.market-event { grid-template-columns: 70px 1fr; gap: .75rem 1rem; }
	.market-event__change { grid-column: 2; }

	/* The link drops under the two facts rather than squeezing them. */
	.century__foot {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 1.75rem;
	}
	.century__more {
		grid-column: 1 / -1;
		justify-content: center;
	}

	/* Two-by-two, so each figure keeps a readable track. */
	.market-history__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.market-stat:nth-child(-n+2) { border-top: 0; }
	.market-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
	.market-stat:nth-child(n+3) { border-top: 1px solid var(--fog); }
}

@media (max-width: 640px) {
	:root {
		--band-y: 2.5rem;
		--gutter: 1.25rem;
		--card-gap: 1.75rem;
	}

	.grid--2,
	.grid--3,
	.grid--4 { grid-template-columns: 1fr; }

	/* The hairline offsets only make sense in a multi-column grid. */
	.grid--3 .card + .card,
	.grid--4 .card + .card {
		padding-left: 0;
		margin-left: 0;
		padding-top: var(--card-gap);
		border-top: 1px solid var(--fog);
	}

	.sidebar { grid-template-columns: 1fr; }
	.section-split__side { grid-template-columns: 1fr; }
	.footer__grid { grid-template-columns: 1fr; }
	.post-nav { grid-template-columns: 1fr; }
	.post-nav__item--next { text-align: left; }

	.masthead { min-height: 68px; }

	/* The archive link drops under the desk name rather than fighting it for
	   a share of a 320px row, where "All World News" cannot fit beside a
	   display-weight title without forcing the page wider. */
	.band__head {
		grid-template-columns: auto 1fr;
		row-gap: .6rem;
	}
	.band__more {
		grid-column: 1 / -1;
		white-space: normal;
	}

	.newsletter-band { padding: 1.75rem; }
	.newsletter-band__form { padding: 1.5rem; }

	.market-history__stats { grid-template-columns: minmax(0, 1fr); }
	.market-stat,
	.market-stat:nth-child(odd),
	.market-stat:nth-child(n+3) {
		padding: 1.1rem 0;
		border-left: 0;
		border-top: 1px solid var(--fog);
	}
	.market-stat:first-child { border-top: 0; }

	/* The canvas needs the width more than the plate needs the padding. */
	.market-history__chart { padding: .75rem; min-height: 300px; }

	.market-history__controls { flex-direction: column; }
	.market-history__btn {
		border-right-width: 2px;
		border-bottom-width: 0;
	}
	.market-history__btn:last-child { border-bottom-width: 2px; }

	.panel { padding: 1.25rem; }
	.st-modal__dialog { padding: 1.75rem; }
	.to-top { right: 1rem; bottom: 1rem; }

	/* ── The century chart turns on its side ──────────────────────────
	   Eleven vertical columns across a phone gives each about 25px, which is
	   narrower than the figure that labels it. Rotated into rows, each decade
	   gets a full line: the label, a bar growing from the left, and the
	   figure — the same data, read top to bottom instead of left to right. */
	.century { padding: 1.75rem; }

	.century__head { margin-bottom: 2rem; }

	/* One decade per row instead of one per column. */
	.century__chart {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: 0;
	}

	.century-col {
		display: grid;
		grid-template-columns: 3.4rem 1fr 4rem;
		align-items: center;
		gap: .75rem;
		padding: .6rem 0;
		border-top: 1px solid var(--fog-dark);
	}
	.century-col:first-child { border-top: 0; }

	/* Source order is figure, bar, label, note — the row wants label, bar,
	   figure, so the three are reordered and the note is dropped. */
	.century-col__label { grid-column: 1; grid-row: 1; font-size: .88rem; }

	/* The zero line moves from horizontal to vertical: it now runs UP the
	   track near its left edge, gains extending right of it and losses left,
	   which is the same reading as the desktop chart turned on its side. */
	.century-col__track {
		grid-column: 2;
		grid-row: 1;
		height: 22px;
	}

	.century-col__track::after {
		top: 0;
		bottom: 0;
		left: 24%;
		right: auto;
		width: 2px;
		height: auto;
	}

	/* Horizontal now: the share becomes a width and the bar fills the row's
	   height. The inline height is overridden with !important because it is
	   set as a style attribute, which no selector can outrank. */
	.century-col__bar {
		top: 0;
		bottom: auto;
		width: var(--bar, 100%);
		height: 100% !important;
	}

	/* A gain starts at the zero line and runs right. */
	.century-col--up .century-col__bar { left: 24%; }

	/* A loss starts at the line and runs LEFT, so the direction still carries
	   the meaning rather than the colour carrying it alone. */
	.century-col--down .century-col__bar {
		left: auto;
		right: 76%;
	}

	.century-col__value {
		grid-column: 3;
		grid-row: 1;
		text-align: right;
		font-size: .84rem;
	}

	.century-col__note { display: none; }

	/* minmax(0, 1fr): a bare 1fr takes its minimum from its widest child, and
	   the display-face figures are wider than a 320px phone. */
	.century__foot { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.century-fact__note { font-size: .8rem; }
}

@media (max-width: 420px) {
	.market-bar__inner { grid-template-columns: 1fr; gap: 1.25rem; }
	.market-fig {
		padding-left: 0;
		border-left: 0;
		padding-top: 1.25rem;
		border-top: 1px solid var(--fog-dark);
	}
	.market-fig:first-child { padding-top: 0; border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}