@charset "UTF-8";
/* ==========================================================================
   Sovereign Terminal v11 — "Ironclad"
   --------------------------------------------------------------------------
   A men's health publication, redrawn dark. The clinical blue-grey build this
   replaces was typeset like a medical journal: pale ground, navy serif, one
   polite signal blue. It read as careful, and it read as unisex. This one is
   built for the audience the title actually serves — men who train, who want
   the protocol and the number, and who respond to a page that looks like the
   gym at 6am rather than the waiting room at 11.

   THE GROUND is near-black. Not grey, not "dark mode": a true black-forward
   field (#0A0A0C) with content raised on it as CHARCOAL PLATES (#141418)
   separated by a hairline rather than by a shadow. Depth comes from value
   steps, not from blur — a soft drop shadow under every card is the SaaS-kit
   default and it turns unequal tiles into equal ones.

   COLOUR. One red does all the work: #E11D2E, hot and slightly cool-leaning
   so it stays legible on black without vibrating. It carries every action,
   every live state and every section marker. There is no second accent hue —
   the topic palette is a set of deliberately DESATURATED metals (steel, iron,
   brass, olive, rust) whose only job is to tell one beat from another. If a
   colour is not red, it is not asking for a click.

   TYPE. Two families, jobs strictly separated:
     Oswald  — every headline and every figure. A condensed grotesque cut for
               signage, set in CAPS at display sizes and tracked in tight.
               Condensed is the point: it lets a seven-word headline run at
               64px inside a half-width tile, which is the reference's voice.
     Barlow  — body copy, standfirsts, navigation, labels. A neutral
               low-contrast grotesque that sits quietly under Oswald and stays
               readable at 15px on black.

   Capitals are used DELIBERATELY here, unlike the build this replaces: they
   are the display voice, not decoration. Body copy is never set in caps.

   RADIUS. Near-square. 4px on plates, 3px on images, full round only on the
   circular arrow marks and the pill controls. The previous build's 10–14px
   corners read soft; this one is cut, not moulded.

   Sections in order:
      1  Tokens
      2  Reset / base
      3  Bands — the page's sections
      4  Typography primitives
      5  Buttons, chips, marks
      6  Header / navigation
      7  Cards — the shared article vocabulary
      8  Front page sections
      9  Sidebar panels
     10  Footer
     11  Archive / category
     12  Single post
     13  Static page
     14  Thank-you / 404
     15  Forms (opt-in, modal)
     16  Utilities, motion, print
   ========================================================================== */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root {
	/* ── Ground ──────────────────────────────────────────────────────────
	   Five steps of near-black. --ground is the page; --surface is the raised
	   plate a card sits on; --surface-lift is a card hovered or a panel that
	   needs to come forward one more step; --surface-sink is the inset well
	   (an image mat, a code block) that goes the other way.

	   The steps sit close together on purpose — 6 to 8 points apart — because
	   on a black page a large value jump reads as a hole rather than as a
	   layer. The hairline is what separates them; the fill only confirms it. */
	--ground: #0A0A0C;
	--surface: #141418;
	--surface-lift: #1C1C22;
	--surface-raised: #24242B;
	--surface-sink: #060608;

	/* ── Ink ─────────────────────────────────────────────────────────────
	   White down to mid-grey. Every step is measured against --surface: -400
	   is the lightest that still clears AA at body size, -500 clears it at
	   14px and above, and -600 is for rules and disabled marks only, never
	   for text a reader has to parse. */
	--ink: #F5F5F7;
	--ink-200: #D8D8DE;
	--ink-300: #ADADB8;
	--ink-400: #8A8A96;
	--ink-500: #6A6A76;
	--ink-600: #45454F;

	/* ── Signal ──────────────────────────────────────────────────────────
	   The one red. --signal is the flat fill on black; --signal-lift is the
	   hover, pushed BRIGHTER rather than darker because on a dark ground a
	   darker hover reads as disabled; --signal-deep is the pressed state and
	   the deep end of the gradient; the two washes are low-alpha fills for
	   chips and section glows.

	   Alpha rather than mixed hex for the washes: they sit on three different
	   plate values across the site and a fixed hex only matches one. */
	--signal: #E11D2E;
	--signal-lift: #FF3446;
	--signal-deep: #A50F1D;
	--signal-tint: rgba(225, 29, 46, 0.16);
	--signal-wash: rgba(225, 29, 46, 0.07);
	--signal-glow: rgba(225, 29, 46, 0.34);

	/* The red gradient on the CTA slab and the marquee. Two stops, both red —
	   a deepening, not a hue shift into orange or violet. */
	--signal-grad: linear-gradient(115deg, #E11D2E 0%, #8E0F1C 100%);

	/* The flag. On a black page an alarm cannot also be red, so genuinely
	   urgent markers take amber. Reserved: at most once on a page. */
	--flag: #F0A030;
	--flag-tint: rgba(240, 160, 48, 0.16);

	/* ── Compatibility aliases ───────────────────────────────────────────
	   Several hundred call sites across the sidebar, archive, single-post and
	   form sections still name the system colour --accent, and the old second
	   voice --lav. Both are aliased onto the red rather than renamed, which
	   would touch a great deal of code to change nothing visible.

	   --lav resolves to the same red on purpose: this design has ONE action
	   colour. Anything that genuinely needs a second voice takes a topic
	   metal by name. */
	--accent: var(--signal);
	--accent-deep: var(--signal-deep);
	--accent-tint: var(--signal-tint);
	--accent-wash: var(--signal-wash);
	--lav: var(--signal);

	/* The topic metals. These match st_chip_palette() in functions.php — a
	   change in one has to be made in the other. All five are desaturated and
	   mid-valued so they read as "a different beat" without competing with
	   the red for attention. */
	--steel: #5B7A99;
	--iron: #6E7480;
	--brass: #9A7B3F;
	--olive: #5F7248;
	--rust: #A05236;

	/* ── Lines and shadow ────────────────────────────────────────────────
	   On black a line is light at low alpha rather than dark. --line is the
	   ordinary plate edge, --line-soft an internal divider, --line-firm the
	   edge of something interactive or focused.

	   Shadow is nearly absent. What replaces it is --glow: a red bloom used
	   only on the primary control and the active marquee, because on a black
	   ground light is the only thing that can come forward. */
	--line: rgba(255, 255, 255, 0.10);
	--line-soft: rgba(255, 255, 255, 0.055);
	--line-firm: rgba(255, 255, 255, 0.20);

	--shade: 0 1px 2px rgba(0, 0, 0, 0.6);
	--shade-lift: 0 4px 12px rgba(0, 0, 0, 0.55), 0 18px 40px -24px rgba(0, 0, 0, 0.9);
	--shade-panel: 0 32px 80px -48px rgba(0, 0, 0, 1);
	--glow: 0 6px 24px -8px var(--signal-glow);

	/* ── Type ────────────────────────────────────────────────────────────── */
	--font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
	--font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Display ramp. Oswald is condensed, so each step runs LARGER than the
	   serif ramp it replaces at the same measure — a condensed cap at 72px
	   occupies roughly the width of a serif at 52px. The claim is deliberately
	   allowed to get very large on a wide viewport: the reference's hero is a
	   wall of type, and a timid clamp ceiling is what makes a homage to it
	   look like a template. */
	--fs-claim: clamp(2.75rem, 7vw, 5.75rem);
	--fs-h1: clamp(2.25rem, 5vw, 4rem);
	--fs-h2: clamp(1.75rem, 3.4vw, 2.75rem);
	--fs-h3: clamp(1.25rem, 2vw, 1.625rem);
	--fs-h4: 1.125rem;

	/* The figure ramp — the big numbers on the stat strip. Also Oswald: in
	   this design a statistic is shouted, not annotated. */
	--fs-figure: clamp(2.25rem, 4vw, 3.25rem);

	--fs-lead: clamp(1rem, 1.3vw, 1.125rem);
	--fs-body: 1rem;
	--fs-small: 0.9375rem;
	--fs-meta: 0.8125rem;
	--fs-micro: 0.6875rem;

	/* Display type is tracked IN; label capitals are tracked OUT. Two
	   different jobs, and they must not share a value. */
	--track-tight: -0.01em;
	--track-claim: -0.015em;
	--track-label: 0.14em;
	--track-label-wide: 0.2em;

	/* ── Radius ──────────────────────────────────────────────────────────
	   Cut, not moulded. Only the circular marks and controls are round. */
	--r-pill: 999px;
	--r-img: 3px;
	--r-card: 4px;
	--r-plate: 4px;
	--r-panel: 6px;

	/* ── Measure and rhythm ──────────────────────────────────────────────── */
	--measure: 68ch;
	--container: 1320px;
	--gutter: clamp(1.125rem, 3.5vw, 2.5rem);
	--band-y: clamp(3.25rem, 6vw, 5.5rem);
	--gap: clamp(0.75rem, 1.1vw, 1rem);

	/* The masthead logo cap, driven by the Customizer (st_logo_height). */
	--logo-h: 40px;

	--ease: cubic-bezier(0.2, 0.6, 0.3, 1);
	--speed: 180ms;
}

/* ── 2. Reset / base ─────────────────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* The sticky masthead would otherwise cover the target of every in-page
	   link. Its own height plus a line of air. */
	scroll-padding-top: 6rem;
}

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

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

/* The `hidden` attribute has to WIN.
   It only carries the browser default `display:none`, which is the weakest
   declaration there is, so any component rule that sets its own `display`
   silently defeats it — and anything toggled with `el.hidden = true` then
   never disappears. The subscribe modal is exactly that case: it is
   `display:grid` when open, and without this it could not be closed. */
[hidden] {
	display: none !important;
}

img { height: auto; }

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

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

button { cursor: pointer; }

ul, ol { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }

/* One focus treatment for the whole design: a signal-blue ring offset off
   the element. On navy grounds it would disappear, so there it goes white. */
:focus-visible {
	outline: 2px solid var(--signal);
	outline-offset: 3px;
	border-radius: 2px;
}

.site-footer :focus-visible,
.signal :focus-visible,
.st-modal__panel :focus-visible {
	outline-color: #FFFFFF;
}

/* ── 3. Bands ─────────────────────────────────────────────────────────────
   A BAND is a page section. Bands are separated by space; a band that needs
   setting apart takes a flat tint or the navy inversion rather than a rule.

   The warm build put every section head in its own narrow left column, which
   gave four consecutive card sections one shared spine. This design does not
   need that crutch, because its sections are not four identical grids: the
   mosaic, the figure strip, the topic rail and the guide row are already
   different shapes. So the head sits ABOVE its content on a single baseline,
   with the section label and its "view all" link on the same line — the way
   a newspaper sets a section front. .band--split is kept because archive and
   single templates still lay out against it. */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.band {
	position: relative;
}

.band__inner {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-block: var(--band-y);
}

/* A band that manages its own vertical space — the hero and the closing
   newsletter panel both do, because their padding belongs to the plate
   inside rather than to the section. */
.band--flush > .band__inner {
	padding-block: 0;
}

/* The tinted band: a flat inset plate one step darker than the page, so it
   reads as an inset well rather than as a raised card. On black, sinking is
   the only way to set a band apart without lighting it up. */
.band--tint {
	isolation: isolate;
}

.band--tint .band__body,
.band--tint .band__head {
	position: relative;
	z-index: 1;
}

.band--tint::before {
	content: "";
	position: absolute;
	inset: clamp(1rem, 2vw, 1.75rem) var(--gutter);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-panel);
	background: var(--surface-sink);
	z-index: 0;
}

/* ── The band head ───────────────────────────────────────────────────
   Label and link share a baseline; the heading sits under them. The head is
   bounded by a rule at the top whose first 5rem are RED — a tab, not a full
   hairline. It is the same device as the eyebrow's short rule scaled up to
   the width of a section, and it is what makes a page of stacked bands read
   as one publication rather than as a stack of unrelated grids. */
.band__head {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
	padding-top: 1.35rem;
	border-top: 1px solid var(--line);
}

.band__head::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 5rem;
	height: 3px;
	background: var(--band-mark, var(--signal));
}

/* The section label. Capitals tracked out, in red, with no rule of its own —
   the band head's red tab above it is already the marker, and repeating it
   here would draw two rules within 20px of each other. */
.band__eyebrow {
	grid-column: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--signal);
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
}

.band__title {
	grid-column: 1;
	margin: 0.4rem 0 0;
	max-width: 20ch;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.02;
	letter-spacing: var(--track-tight);
	color: var(--ink);
	text-wrap: balance;
}

/* The second half of a section heading goes red — the design's recurring
   gesture. See the note in section 4. */
.band__title em,
.title-em {
	font-style: normal;
	font-weight: 700;
	color: var(--signal);
}

.band__link {
	grid-column: 2;
	grid-row: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--ink-300);
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--speed) var(--ease);
}

.band__link:hover,
.band__link:focus-visible {
	color: var(--signal);
	text-decoration: none;
}

.band__body {
	min-width: 0;
}

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

	.band__link {
		grid-column: 1;
		grid-row: auto;
		margin-top: 0.5rem;
	}
}

/* .band--split is retained for the archive and single layouts, which put a
   sidebar beside their content. */
.band--split > .band__inner {
	display: block;
}

/* ── 4. Typography primitives ──────────────────────────────────────────────
   Oswald above, Barlow below, and a hard rule about capitals: DISPLAY type is
   set in caps and tracked in; LABEL type is set in caps and tracked out; body
   copy is never set in caps at all. The two caps treatments are doing opposite
   jobs — one is shouting a headline, the other is quietly naming a section —
   and giving them the same tracking is what makes a page of capitals turn to
   mush. */
.h1, .h2, .h3 {
	font-family: var(--font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--track-tight);
	line-height: 1.04;
	color: var(--ink);
	text-wrap: balance;
}

.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.12; }

/* The design's one recurring gesture, carried over from the build this
   replaces but re-cut for a condensed face: the second half of a display pair
   goes RED. On a serif the gesture was an italic — a spoken emphasis. On a
   condensed grotesque an italic is a mechanical slant and says nothing, so
   the emphasis moves into colour, which is what the reference does at every
   scale: one line white, the next line red.

   It is scoped to headings only. A red word inside body copy would read as a
   link that does not work. */
.h1 em, .h2 em, .h3 em,
.band__title em,
.title-em {
	font-style: normal;
	font-weight: 700;
	color: var(--signal);
}

.lead {
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--ink-300);
	max-width: 62ch;
}

/* The section label. Capitals, tracked well out, preceded by a short red
   rule. The rule is the marker that ties every section head, every card
   eyebrow and every panel heading on the site into one family. */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--signal);
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
}

.eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	flex: none;
	background: var(--band-mark, var(--signal));
}

/* ── 5. Buttons, chips, marks ─────────────────────────────────────────────
   The primary control is a RED SLAB: square-cut, capitals, tracked out, with
   a circular arrow riding inside its right end. That arrow is the one place
   this design keeps the circular badge — on the button it is not decoration,
   it is the thing the reference's eye lands on, and it is drawn INSIDE the
   control rather than trailing after it so the button stays one object.

   Square, not pill. A pill is friendly; this palette is not trying to be. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	padding: 0.9rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--r-card);
	background: var(--signal);
	color: #fff;
	font-family: var(--font-body);
	font-size: var(--fs-meta);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease),
		border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease),
		transform var(--speed) var(--ease);
}

/* Brighter on hover, not darker. On a black ground a control that darkens
   reads as disabled; the red has to come UP to read as live, and the glow
   does the rest. */
.btn:hover,
.btn:focus-visible {
	background: var(--signal-lift);
	color: #fff;
	box-shadow: var(--glow);
}

.btn:active {
	background: var(--signal-deep);
	transform: translateY(1px);
	box-shadow: none;
}

/* --accent is the historical name for the filled control; it stays so every
   existing call site keeps working. */
.btn--accent {
	background: var(--signal);
	color: #fff;
}

.btn--accent:hover,
.btn--accent:focus-visible {
	background: var(--signal-lift);
}

/* The outlined control. Used where two actions sit together and only one is
   the point — the reference's "Watch video" beside its "Get started". */
.btn--ghost {
	background: transparent;
	border-color: var(--line-firm);
	color: var(--ink);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	background: var(--surface-lift);
	border-color: var(--ink);
	color: var(--ink);
	box-shadow: none;
}

/* The old lavender secondary. Mapped onto a plate-filled control so nothing
   that still asks for it renders unstyled. */
.btn--lav {
	background: var(--surface-raised);
	color: var(--ink);
	border-color: var(--line);
}

.btn--lav:hover,
.btn--lav:focus-visible {
	background: var(--surface-lift);
	color: #fff;
	box-shadow: none;
}

/* On the red slab the filled red control has nothing to separate it from its
   ground, so it inverts to white with red text. */
.btn--on-accent,
.signal .btn--accent,
.cta-slab .btn--accent {
	background: #fff;
	color: var(--signal-deep);
}

.btn--on-accent:hover,
.btn--on-accent:focus-visible,
.signal .btn--accent:hover,
.signal .btn--accent:focus-visible,
.cta-slab .btn--accent:hover,
.cta-slab .btn--accent:focus-visible {
	background: var(--ink);
	color: var(--signal-deep);
	box-shadow: none;
}

.btn--sm {
	padding: 0.6rem 1.1rem;
	font-size: var(--fs-micro);
	gap: 0.5rem;
}

.btn--lg {
	padding: 1.05rem 2rem;
	font-size: var(--fs-small);
}

/* ── The arrow badge ──────────────────────────────────────────────────
   Two lives. On a standalone link it is a bare chevron that nudges on hover.
   INSIDE a .btn it becomes the reference's filled circular arrow, riding in
   the control's right end — which is the single most recognisable detail of
   the layouts this design is drawn from, and the one ornament it is worth
   spending a circle on. */
.arrow-badge {
	display: inline-grid;
	place-items: center;
	width: 0.8rem;
	height: 0.8rem;
	flex: none;
	color: currentColor;
	transition: transform var(--speed) var(--ease);
}

.arrow-badge svg {
	width: 0.75rem;
	height: 0.75rem;
	stroke-width: 2.5;
}

.arrow-badge--sm svg {
	width: 0.65rem;
	height: 0.65rem;
}

.btn .arrow-badge {
	width: 1.5rem;
	height: 1.5rem;
	margin-right: -0.55rem;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.18);
}

.btn .arrow-badge svg {
	width: 0.7rem;
	height: 0.7rem;
}

.btn--sm .arrow-badge {
	width: 1.25rem;
	height: 1.25rem;
	margin-right: -0.4rem;
}

/* On the inverted control the wash has to darken rather than lighten, or the
   circle disappears into the white. */
.btn--on-accent .arrow-badge,
.signal .btn--accent .arrow-badge,
.cta-slab .btn--accent .arrow-badge {
	background: var(--signal-tint);
}

.btn:hover .arrow-badge {
	transform: translateX(2px);
}

a:hover > .arrow-badge {
	transform: translateX(2px);
}

/* ── Topic chips ──────────────────────────────────────────────────────
   A chip is the topic's name in capitals, on a dark plate, with a left rule
   in the topic's metal. Not a filled pill: on a page carrying four or five of
   them, filled chips at card scale read as a row of buttons and pull rank
   over the headlines they sit above. The metal appears as the RULE and as the
   text, which is enough to identify a beat without lighting up the page. */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.55rem 0.25rem 0.5rem;
	border-left: 3px solid var(--chip-bg, var(--signal));
	border-radius: 0 var(--r-card) var(--r-card) 0;
	background: var(--surface-lift);
	color: var(--ink-200);
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
	line-height: 1.5;
	text-decoration: none;
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.chip:hover,
.chip:focus-visible {
	background: var(--surface-raised);
	color: #fff;
}

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

/* The meta row — reading time and date. Separated by a thin rule rather than
   by a middle dot. Tabular figures so a column of dates does not shift. */
.meta-row {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--ink-400);
	font-size: var(--fs-meta);
	font-variant-numeric: tabular-nums;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.meta-row > span + span::before,
.meta-row > span + time::before,
.meta-row > time + span::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.8em;
	margin-right: 0.6rem;
	vertical-align: -0.05em;
	background: var(--ink-600);
}

.meta-row--on-dark {
	color: rgba(255, 255, 255, 0.72);
}

.meta-row--on-dark > span + span::before,
.meta-row--on-dark > span + time::before {
	background: rgba(255, 255, 255, 0.35);
}

/* ── 6. Header / navigation ───────────────────────────────────────────────
   The masthead is a flat near-black bar with a hard bottom rule — no floating
   plate, no shadow that appears on scroll. A publication's masthead is a
   fixed piece of furniture, and the reference's own header is exactly this:
   opaque, ruled, unchanging.

   It sits one step DARKER than the page rather than lighter. A header that
   lifts off a black ground reads as a floating toolbar; one that sinks reads
   as the edge of the page, which is what this is.

   Layout: wordmark left, navigation centred, one filled control right. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--surface-sink);
	border-bottom: 1px solid var(--line);
}

/* Scrolled, the bar takes a translucent plate and a blur so a headline
   passing underneath stays readable without the masthead going opaque black
   and cutting the page in two. main.js adds the class. */
.site-header--scrolled {
	background: rgba(6, 6, 8, 0.88);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	backdrop-filter: saturate(140%) blur(12px);
	border-bottom-color: var(--line-firm);
}

.masthead {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.5rem;
	min-height: 4.5rem;
}

.masthead__brand {
	display: flex;
	align-items: center;
}

.masthead__brand a,
.masthead__brand .site-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--ink);
}

/* The Customizer's logo, capped by --logo-h.
   
   the_custom_logo() emits class="custom-logo" — it does NOT accept a class
   argument — so the masthead rule has to name that class. Styling
   .brand-mark alone meant nothing matched the element WordPress actually
   prints, and the Customizer's height setting did nothing on the front end.
   .brand-mark is kept alongside it for the text wordmark path. */
.masthead__brand .custom-logo,
.brand-mark {
	display: block;
	/* !important beats the width/height ATTRIBUTES WordPress prints on the
	   <img> (width="600" height="91"), which otherwise fix the intrinsic box
	   and leave the logo at full size whatever the setting says. */
	height: var(--logo-h) !important;
	width: auto !important;
	/* Height alone is not enough: a wide wordmark at 40px tall can still be
	   600px across, which pushes into the centred navigation. The width cap
	   is what keeps the three-cell masthead from collapsing. */
	max-width: min(320px, 40vw);
	/* contain, not cover: where the width cap does bite (a very wide mark, or
	   a narrow viewport) the logo must letterbox inside its box rather than
	   be stretched to fill it. */
	object-fit: contain;
}

/* The link WordPress wraps the logo in. Without this it is a block box the
   full width of its cell, so the mark cannot sit tight to the left edge. */
.masthead__brand .custom-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

/* The text wordmark, used when no logo has been uploaded. Set in the condensed
   display face in capitals, so the masthead carries the publication's voice
   even without art. */
.wordmark,
.site-logo {
	font-family: var(--font-display);
	font-size: 1.45rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--ink);
	line-height: 1;
	text-decoration: none;
}

.wordmark em,
.site-logo em {
	font-style: normal;
	color: var(--signal);
}

.nav-primary {
	min-width: 0;
	justify-self: center;
}

.nav-list {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.85rem);
}

/* Set in capitals and bold. Capitals need letterspacing to stay readable —
   at their natural fit the counters close up — and they are dropped a step
   in size, because a capital is optically larger than a lowercase letter at
   the same point size. */
.nav-list a {
	display: inline-block;
	padding: 0.35rem 0;
	color: var(--ink-200);
	font-size: var(--fs-meta);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.nav-list a:hover,
.nav-list a:focus-visible {
	color: var(--ink);
	border-bottom-color: var(--signal);
}

.nav-list .current-menu-item > a,
.nav-list .current_page_item > a {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

.masthead__util {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	justify-self: end;
}

/* The masthead's one filled control. Larger than the .btn--sm it used to
   take: it is the only action in a row of plain links, and at small size it
   read as one more item in the menu rather than as the thing to press.
   Capitalised with the navigation so the two agree. */
.masthead__cta {
	padding: 0.7rem 1.5rem;
	font-size: var(--fs-meta);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* The drawer's own header and the drawer subscribe link: mobile only. */
.nav-head,
.nav-subscribe {
	display: none;
}

.menu-pill {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--surface);
	color: var(--ink);
}

.menu-pill__bars {
	display: grid;
	gap: 4px;
	width: 1rem;
}

.menu-pill__bars span {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
}

.nav-scrim {
	display: none;
}

/* ── Below 1080px: the drawer ────────────────────────────────────────── */
@media (max-width: 1080px) {
	.masthead {
		grid-template-columns: auto minmax(0, 1fr);
		min-height: 4rem;
	}

	.masthead__util {
		grid-column: 2;
	}

	.masthead__cta {
		display: none;
	}

	.menu-pill {
		display: inline-flex;
	}

	/* The panel that slides is .nav-primary, NOT .nav-menu — main.js toggles
	   .is-open on #nav-primary, and styling the inner wrapper instead left
	   the drawer permanently shut. */
	.nav-primary {
		position: fixed;
		inset: 0 0 0 auto;
		z-index: 90;
		width: min(21rem, 86vw);
		padding: 1.25rem var(--gutter) 2rem;
		background: var(--surface);
		border-left: 1px solid var(--line);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--speed) var(--ease), visibility var(--speed) var(--ease);
		overflow-y: auto;
	}

	.nav-primary.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.nav-menu {
		display: block;
	}

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

	.nav-head__title {
		font-family: var(--font-display);
		font-size: 1.125rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: var(--track-label);
		color: var(--ink-300);
	}

	.nav-close {
		display: inline-grid;
		place-items: center;
		width: 2.25rem;
		height: 2.25rem;
		padding: 0;
		border: 1px solid var(--line);
		border-radius: var(--r-card);
		background: transparent;
		color: var(--ink);
	}

	.nav-close svg {
		width: 1rem;
		height: 1rem;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.75;
		stroke-linecap: round;
	}

	.nav-list {
		display: grid;
		gap: 0;
		align-items: stretch;
	}

	.nav-list li + li {
		border-top: 1px solid var(--line-soft);
	}

	/* In the drawer the links are their own list rather than a row inside a
	   masthead, so they take a reading size. Capitals are kept for
	   consistency with the desktop bar but tracked a little tighter, since
	   at this size they no longer need the extra air. */
	.nav-list a {
		display: block;
		padding: 0.85rem 0;
		font-size: 0.9375rem;
		letter-spacing: 0.05em;
		border-bottom: 0;
	}

	.nav-list a:hover,
	.nav-list a:focus-visible {
		border-bottom-color: transparent;
		color: var(--signal);
	}

	/* The drawer's own subscribe control. Square-cut and capitalised like
	   every other button on the site — it was the last pill left, and at the
	   foot of a list of square-cut links it read as a stray from another
	   design. Full width, because it is the only action in the panel. */
	.nav-subscribe {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.6rem;
		margin-top: 1.5rem;
		padding: 0.9rem 1.25rem;
		border-radius: var(--r-card);
		background: var(--signal);
		color: #fff;
		font-size: var(--fs-micro);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: var(--track-label);
		text-decoration: none;
	}

	.nav-subscribe:hover,
	.nav-subscribe:focus-visible {
		background: var(--signal-lift);
	}

	.nav-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 80;
		background: rgba(4, 4, 6, 0.72);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--speed) var(--ease), visibility var(--speed) var(--ease);
	}

	.nav-scrim.is-open {
		opacity: 1;
		visibility: visible;
	}
}

/* main.js sets this on <body> while the drawer is open, so the page behind
   the panel does not scroll under it. */
body.nav-open {
	overflow: hidden;
}

/* The drawer lives inside .site-header, which is position:sticky with its own
   z-index — so it opens a stacking context, and the panel's z-index:90 is
   resolved INSIDE it rather than against the scrim. The panel therefore
   rendered behind the scrim it is supposed to sit above, and the whole drawer
   came up dimmed.
   
   Raising the header above the scrim while the drawer is open fixes it
   without moving the markup: the panel keeps its place in the document, and
   the header returns to its own layer as soon as the drawer closes. */
@media (max-width: 1080px) {
	body.nav-open .site-header {
		z-index: 100;
	}
}

/* The reading-progress bar on single posts. A single signal-blue line at the
   very top of the viewport. */
.read-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 70;
	height: 2px;
	background: transparent;
	pointer-events: none;
}

.read-progress__fill {
	height: 100%;
	width: 0;
	background: var(--signal);
	transition: width 80ms linear;
}

/* The skip link takes the SIGNAL red rather than the ink ramp. It appears
   over whatever happens to be at the top of the page — usually the hero
   photograph — so it needs a ground of its own that is legible against
   anything, and red-on-white is the one pair in this palette that always is. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 0.75rem 1.25rem;
	background: var(--signal);
	color: #fff;
	font-size: var(--fs-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
	text-decoration: none;
}

.skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
}
/* ── 7. Cards ─────────────────────────────────────────────────────────────
   One article vocabulary, two treatments:

     .card--photo   a charcoal plate with the photograph on top
     .card--plate   a flat plate, no photography

   Both are TILES: a 4px corner, a real 1px edge, no drop shadow at rest.
   Hover does three things at once and all of them are value, not motion: the
   plate lifts one step, the edge goes red, and a red rule wipes across the
   top of the tile. Nothing scales and nothing floats — a photograph that
   zooms under the cursor turns a page of news into a page of products.

   The top rule is drawn with a scaleX transform on a pseudo-element rather
   than by animating border-width, so it costs no layout and wipes from the
   left rather than appearing all at once. */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	overflow: hidden;
	transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease),
		transform var(--speed) var(--ease);
}

.card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 2;
	background: var(--card-accent, var(--signal));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 240ms var(--ease);
}

.card:hover,
.card:focus-within {
	background: var(--surface-lift);
	border-color: var(--line-firm);
	transform: translateY(-2px);
}

.card:hover::before,
.card:focus-within::before {
	transform: scaleX(1);
}

/* The photograph sits in a mat one step darker than the plate, so a picture
   with a light edge still reads as inset rather than as bleeding off. The
   image is desaturated slightly at rest and comes to full colour on hover —
   a restraint that keeps a grid of six stock photographs from turning into a
   quilt, and gives the hover somewhere to go that is not motion. */
.card__media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--surface-sink);
}

.card__img,
.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.8) contrast(1.05) brightness(0.9);
	transition: filter 260ms var(--ease);
}

.card:hover .card__img,
.card:hover .card__media img {
	filter: saturate(1) contrast(1.05) brightness(1);
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1;
	padding: 1.15rem 1.2rem 1.2rem;
}

/* The topic label above a card headline. Reuses the chip's colour token but
   is set as plain coloured capitals — inside a card, a bordered chip competes
   with the tile's own edge. */
.card__topic {
	align-self: flex-start;
	color: var(--card-accent, var(--signal));
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
	text-decoration: none;
}

.card__topic:hover,
.card__topic:focus-visible {
	color: var(--ink);
}

.card__title {
	font-family: var(--font-display);
	font-size: 1.3125rem;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.1;
	letter-spacing: var(--track-tight);
	color: var(--ink);
	text-wrap: pretty;
}

.card__title a {
	text-decoration: none;
	transition: color var(--speed) var(--ease);
}

.card__title a:hover,
.card__title a:focus-visible {
	color: var(--signal);
}

/* The headline covers the whole tile, so the card is clickable anywhere
   without nesting a second link around the photograph. */
.card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.card__text {
	color: var(--ink-400);
	font-size: var(--fs-small);
	line-height: 1.55;
}

.card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 0.8rem;
	border-top: 1px solid var(--line-soft);
}

.card__read {
	color: var(--ink-500);
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
	font-variant-numeric: tabular-nums;
}

.card__foot .arrow-badge {
	color: var(--ink-500);
	transition: color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.card:hover .card__foot .arrow-badge {
	color: var(--signal);
	transform: translateX(3px);
}

/* The flat treatment. No photograph, so the topic's metal does the
   identifying work as a left edge — which is what distinguishes one plate
   from its neighbour in a run of six. */
.card--plate {
	background: var(--surface);
	border-color: var(--line-soft);
	border-left: 3px solid var(--card-accent, var(--signal));
	border-radius: 0 var(--r-card) var(--r-card) 0;
}

.card--plate::before {
	display: none;
}

.card--plate:hover {
	background: var(--surface-lift);
	border-color: var(--line);
	border-left-color: var(--card-accent, var(--signal));
}

.card--plate .card__foot {
	border-top-color: var(--line-soft);
}
/* ── 8. Front page ─────────────────────────────────────────────────────── */

/* ── The hero ─────────────────────────────────────────────────────────
   One photograph, full bleed, with the lead story's headline typeset over
   it and the newsroom's figures along the foot.

   The slab breaks OUT of the container to the full viewport width. Every
   other band on the site is measured; this one is not, and that is what
   makes it read as the top of a publication rather than as the first card
   in a stack. `width:100vw` with a negative margin rather than `margin-inline:
   calc(50% - 50vw)` alone, because the latter mis-measures inside a grid
   parent, and the hero sits inside .band__inner.

   The headline is capped at 16ch. A condensed face at 92px will happily run
   forty characters across a wide monitor, and a single line of type that
   wide cannot be read as a headline — the eye loses the line. Capping the
   MEASURE rather than the size is what keeps the type enormous and still
   legible. */
.hero {
	position: relative;
	isolation: isolate;
	background: var(--surface-sink);
	overflow: hidden;
}

.hero__art {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__img,
.hero__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Pulled down and desaturated so white type holds over any photograph,
	   including the bright gym shots this kind of site runs. The picture is
	   the atmosphere here, not the subject — the headline is the subject. */
	filter: saturate(0.55) contrast(1.1) brightness(0.45);
}

/* Two scrims, both necessary. The vertical one lifts the foot of the slab so
   the stat strip reads; the horizontal one darkens the left third so the
   headline does, without flattening the whole picture to grey. */
.hero__art::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(10, 10, 12, 0.97) 0%, rgba(10, 10, 12, 0.55) 45%, rgba(10, 10, 12, 0.3) 100%),
		linear-gradient(to right, rgba(10, 10, 12, 0.9) 0%, rgba(10, 10, 12, 0.35) 55%, rgba(10, 10, 12, 0) 100%);
}

.hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-block: clamp(3.5rem, 9vw, 7.5rem) 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* With no featured image the slab has no picture to hold type over, so it
   falls back to the flat ground and loses the extra top padding the scrim
   was there to balance. */
.hero:not(.hero--has-art) {
	background: var(--ground);
	border-bottom: 1px solid var(--line);
}

.hero__copy {
	grid-column: 1;
	max-width: 46rem;
	min-width: 0;
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.1rem;
	padding: 0.3rem 0.7rem;
	border-left: 3px solid var(--signal);
	background: rgba(225, 29, 46, 0.14);
	color: #fff;
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
	text-decoration: none;
	transition: background var(--speed) var(--ease);
}

a.hero__eyebrow:hover,
a.hero__eyebrow:focus-visible {
	background: var(--signal);
}

/* The measure is capped in CH, not the size in px. A condensed face at 92px
   will happily run forty characters across a wide monitor and the eye loses
   the line; capping the measure keeps the type enormous and still readable.

   18ch rather than a tighter cap because a real news headline is not the
   reference's four-word slogan — "One type of sleep linked to lower risk of
   83 diseases" is the job this hero actually has to do, and at 14ch it ran to
   five lines and pushed the stat strip off the screen. The size steps down a
   little from the slogan ramp for the same reason: a headline that wraps to
   four lines is a wall, not a hero. */
.hero__title {
	max-width: 18ch;
	margin: 0 0 1.1rem;
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 5.6vw, 4.5rem);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 0.94;
	letter-spacing: var(--track-claim);
	color: #fff;
	text-wrap: balance;
}

/* With no lead story the h1 is the publication's own claim — four short
   words, which can and should take the full display ramp. */
.hero:not(.hero--has-art) .hero__title {
	max-width: 14ch;
	font-size: var(--fs-claim);
}

.hero__title a {
	text-decoration: none;
	transition: color var(--speed) var(--ease);
}

.hero__title a:hover,
.hero__title a:focus-visible {
	color: var(--signal-lift);
}

.hero__title em {
	display: block;
	font-style: normal;
	color: var(--signal);
}

.hero__text {
	max-width: 46ch;
	margin-bottom: 1.75rem;
	color: var(--ink-200);
	font-size: var(--fs-lead);
	line-height: 1.6;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

/* On the hero the ghost button sits over a photograph, so its border has to
   be brighter than the one it takes on a flat plate or it disappears. */
.hero .btn--ghost {
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.hero .btn--ghost:hover,
.hero .btn--ghost:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
}

.hero__meta {
	display: flex;
}

/* ── The hero rail ────────────────────────────────────────────────────
   The two stories after the lead, stacked at the slab's right edge on a
   translucent plate. They are deliberately small: the lead is the band, and
   these are a footnote to it. */
.hero__rail {
	grid-column: 2;
	display: grid;
	gap: 0.5rem;
	width: min(21rem, 30vw);
	padding: 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--r-card);
	background: rgba(10, 10, 12, 0.6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.hero__railhead {
	color: var(--signal);
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
}

.railcard {
	position: relative;
	display: grid;
	grid-template-columns: 4.25rem minmax(0, 1fr);
	align-items: center;
	gap: 0.75rem;
	padding-top: 0.65rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.railcard__media {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--r-img);
	background: var(--surface-sink);
}

.railcard__img,
.railcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.8) brightness(0.9);
}

.railcard__title {
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.14;
	letter-spacing: 0;
	color: #fff;
}

.railcard__title a {
	text-decoration: none;
}

.railcard__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.railcard:hover .railcard__title a {
	color: var(--signal-lift);
}

.railcard__read {
	display: block;
	margin-top: 0.2rem;
	color: var(--ink-400);
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
}

/* ── The stat strip ───────────────────────────────────────────────────
   Three figures across the foot of the hero, divided by hairlines and
   sitting on the slab's bottom edge. The numerals are the condensed display
   face at figure scale: on this site a statistic is shouted, not annotated. */
.statstrip {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.statstrip__item {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 1.35rem 1.25rem 1.5rem 0;
}

.statstrip__item + .statstrip__item {
	padding-left: clamp(1rem, 3vw, 2.5rem);
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.statstrip__value {
	font-family: var(--font-display);
	font-size: var(--fs-figure);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--track-tight);
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.statstrip__label {
	color: var(--ink-300);
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
}

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

	/* The rail is supporting material. On a narrow screen it would push the
	   stat strip below the fold for no gain, so it goes. */
	.hero__rail {
		display: none;
	}
}

@media (max-width: 700px) {
	.statstrip {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;
	}

	.statstrip__item {
		padding: 1rem 0.5rem 1.15rem 0;
	}

	.statstrip__item + .statstrip__item {
		padding-left: 0.85rem;
	}

	.statstrip__label {
		font-size: 0.625rem;
		letter-spacing: 0.08em;
	}
}

/* ── The marquee ──────────────────────────────────────────────────────
   A red tape of beat names running edge to edge between the hero and the
   first content band. Signage, and the detail that makes this family of
   layouts recognisable — but the words are real links to real archives, so
   it earns its place as a second navigation rather than as decoration.

   The loop works by printing the run twice and translating the track by
   exactly half its width: at -50% the second copy sits precisely where the
   first began, so the reset is invisible. Both copies must therefore be
   identical, which is why the duplicate is aria-hidden and its links are
   taken out of the tab order rather than being left as real duplicates.

   Paused on hover so a reader can actually hit a link that is moving. */
.marquee {
	position: relative;
	overflow: hidden;
	background: var(--signal);
	border-block: 1px solid var(--signal-deep);
}

.marquee__track {
	display: flex;
	width: max-content;
	animation: st-marquee 42s linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
	animation-play-state: paused;
}

.marquee__run {
	display: flex;
	align-items: center;
	flex: none;
}

.marquee__item {
	display: flex;
	align-items: center;
}

/* The separator is a diamond drawn with a rotated square, on the item rather
   than between items, so the rhythm continues across the seam where the two
   runs meet. */
.marquee__item::after {
	content: "";
	width: 5px;
	height: 5px;
	margin-inline: clamp(1.25rem, 3vw, 2.75rem);
	background: rgba(255, 255, 255, 0.55);
	transform: rotate(45deg);
}

.marquee__item a {
	display: block;
	padding-block: 0.85rem;
	color: #fff;
	font-family: var(--font-display);
	font-size: clamp(0.875rem, 1.5vw, 1.0625rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
	text-decoration: none;
	white-space: nowrap;
	opacity: 0.92;
	transition: opacity var(--speed) var(--ease);
}

.marquee__item a:hover,
.marquee__item a:focus-visible {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

@keyframes st-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* A strip of text moving across the screen is exactly what this preference
   exists to stop. The tape keeps its colour and its links and simply holds
   still; it overflows, so it scrolls by hand like any other overflow. */
@media (prefers-reduced-motion: reduce) {
	.marquee__track {
		animation: none;
	}

	.marquee {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.marquee::-webkit-scrollbar {
		display: none;
	}
}

/* ── Latest: the picture cards ────────────────────────────────────────── */
.cardrow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	gap: clamp(1rem, 1.8vw, 1.5rem);
}

/* ── Topics: the doors ────────────────────────────────────────────────
   Tall portrait tiles, each carrying a large line-art mark, the beat's name
   and its article count. The mark is drawn at 3rem rather than at icon size
   because the icon IS the content of this tile — everything else on it is a
   caption. */
.topicrow {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.4vw, 1.125rem);
}

.topiccard {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	min-height: 11.5rem;
	padding: 1.35rem 1.25rem 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--surface);
	color: var(--ink);
	text-decoration: none;
	overflow: hidden;
	transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease),
		transform var(--speed) var(--ease);
}

/* The topic's metal as a bar down the left edge, revealed on hover. At rest
   the tile is neutral; the colour is the reward for pointing at it, which
   keeps a row of eight doors from reading as eight different brands. */
.topiccard::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--card-accent, var(--signal));
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 240ms var(--ease);
}

.topiccard:hover,
.topiccard:focus-visible {
	background: var(--surface-lift);
	border-color: var(--line-firm);
	transform: translateY(-2px);
}

.topiccard:hover::before,
.topiccard:focus-visible::before {
	transform: scaleY(1);
}

.topicmark {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: auto;
	color: var(--card-accent, var(--signal));
	transition: color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.topicmark svg {
	width: 100%;
	height: 100%;
	stroke-width: 1.35;
}

.topiccard:hover .topicmark {
	color: var(--signal);
	transform: translateY(-2px);
}

.topiccard__title {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--ink);
}

.topiccard__count {
	padding-top: 0.55rem;
	width: 100%;
	border-top: 1px solid var(--line-soft);
	color: var(--ink-500);
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
	.topicrow {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.topicrow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.topiccard {
		min-height: 9.5rem;
		padding: 1.1rem 1rem 1rem;
	}

	.topicmark {
		width: 2.25rem;
		height: 2.25rem;
	}
}

/* ── Reading: the archive index ───────────────────────────────────────
   The one list on the page. Each row is a numeral, a headline with its
   standfirst, and the meta at the right. The numerals are the anchor down
   the band's left edge — without them the section is a field of grey text.

   Counter rather than markup: the <ol> already numbers itself for assistive
   tech, so the visible numeral is generated content and is aria-hidden at
   the element. */
.readlist {
	counter-reset: st-read;
	border-top: 1px solid var(--line);
}

.readlist__row {
	counter-increment: st-read;
	position: relative;
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) auto;
	align-items: start;
	gap: clamp(1rem, 2.5vw, 2rem);
	padding: clamp(1.1rem, 2vw, 1.5rem) 0;
	border-bottom: 1px solid var(--line);
	transition: background var(--speed) var(--ease);
}

/* The hover plate bleeds past the row's own box so it reads as a full-width
   band rather than as a rectangle inset from the gutters. */
.readlist__row::before {
	content: "";
	position: absolute;
	inset: 0 calc(var(--gutter) * -0.5);
	z-index: 0;
	background: var(--surface);
	opacity: 0;
	transition: opacity var(--speed) var(--ease);
}

.readlist__row:hover::before,
.readlist__row:focus-within::before {
	opacity: 1;
}

.readlist__row > * {
	position: relative;
	z-index: 1;
}

.readlist__num {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: var(--track-tight);
	color: var(--ink-600);
	font-variant-numeric: tabular-nums;
	transition: color var(--speed) var(--ease);
}

.readlist__num::before {
	content: counter(st-read, decimal-leading-zero);
}

.readlist__row:hover .readlist__num,
.readlist__row:focus-within .readlist__num {
	color: var(--row-accent, var(--signal));
}

.readlist__title {
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 1.9vw, 1.5rem);
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.12;
	letter-spacing: var(--track-tight);
	color: var(--ink);
	text-wrap: pretty;
}

.readlist__title a {
	text-decoration: none;
	transition: color var(--speed) var(--ease);
}

.readlist__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.readlist__row:hover .readlist__title a,
.readlist__title a:focus-visible {
	color: var(--signal);
}

.readlist__text {
	margin-top: 0.35rem;
	max-width: 62ch;
	color: var(--ink-400);
	font-size: var(--fs-small);
	line-height: 1.55;
}

.readlist__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.35rem;
	text-align: right;
	white-space: nowrap;
}

.readlist__topic {
	color: var(--row-accent, var(--signal));
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
}

.readlist__facts {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--ink-500);
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}

.readlist__facts > * + *::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.75em;
	margin-right: 0.5rem;
	vertical-align: -0.05em;
	background: var(--ink-600);
}

@media (max-width: 760px) {
	.readlist__row {
		grid-template-columns: 2.75rem minmax(0, 1fr);
		gap: 0.75rem 1rem;
	}

	.readlist__meta {
		grid-column: 2;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 0.75rem;
		text-align: left;
	}

	.readlist__text {
		display: none;
	}
}

/* ── Guides: the long reads ───────────────────────────────────────────
   A raised charcoal panel with a red top edge, carrying its own head and a
   row of three plates — one feature at twice the width of the two beside it.
   The panel is the page's strongest claim on a reader's time, so it is the
   one band that is drawn as an object rather than as content on the ground. */
.guides__panel {
	position: relative;
	padding: clamp(2rem, 4vw, 3.25rem);
	border: 1px solid var(--line);
	border-radius: var(--r-panel);
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(225, 29, 46, 0.1) 0%, rgba(225, 29, 46, 0) 55%),
		var(--surface);
	overflow: hidden;
}

/* The red edge along the top of the panel. */
.guides__panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--signal-grad);
}

.guides__head {
	max-width: 44rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.guides__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.75rem;
	color: var(--signal);
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
}

.guides__eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	background: var(--signal);
}

.guides__title {
	margin-bottom: 0.75rem;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: var(--track-tight);
	color: #fff;
}

.guides__title em {
	font-style: normal;
	color: var(--signal);
}

.guides__sub {
	max-width: 54ch;
	color: var(--ink-300);
	font-size: var(--fs-lead);
	line-height: 1.6;
}

.guiderow {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.4vw, 1.125rem);
}

.guide {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 1.35rem 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--surface-lift);
	transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease),
		transform var(--speed) var(--ease);
}

.guide:hover,
.guide:focus-within {
	background: var(--surface-raised);
	border-color: var(--line-firm);
	transform: translateY(-2px);
}

/* The feature takes half the row; the two alternatives take a quarter each. */
.guide--feature {
	grid-column: span 2;
}

/* The reading time as a figure. On a band whose premise is "these are the
   long ones", the length is the reason to click. */
.guide__time {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	color: var(--signal);
}

.guide__timevalue {
	font-family: var(--font-display);
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: var(--track-tight);
	font-variant-numeric: tabular-nums;
}

.guide--feature .guide__timevalue {
	font-size: 3rem;
}

.guide__timeunit {
	color: var(--ink-400);
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
}

.guide__label {
	color: var(--ink-400);
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
}

.guide__title {
	font-family: var(--font-display);
	font-size: 1.1875rem;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.12;
	letter-spacing: var(--track-tight);
	color: var(--ink);
	text-wrap: pretty;
}

.guide--feature .guide__title {
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
}

.guide__title a {
	text-decoration: none;
	transition: color var(--speed) var(--ease);
}

.guide__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.guide:hover .guide__title a,
.guide__title a:focus-visible {
	color: var(--signal);
}

.guide__text {
	color: var(--ink-400);
	font-size: var(--fs-small);
	line-height: 1.55;
}

.guide__date {
	margin-top: auto;
	padding-top: 0.75rem;
	width: 100%;
	border-top: 1px solid var(--line-soft);
	color: var(--ink-500);
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
}

/* The dot separator the single-post meta row borrows from this band. */
.guide__dot {
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: var(--r-pill);
	background: var(--ink-600);
	vertical-align: 0.2em;
}

@media (max-width: 1000px) {
	.guiderow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.guide--feature {
		grid-column: span 2;
	}
}

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

	.guide--feature {
		grid-column: span 1;
	}
}

/* ── Signal: the closing newsletter slab ──────────────────────────────
   The one place on the site where the red is a GROUND rather than a mark.
   That is what makes it the loudest thing below the hero, and it is why the
   red appears nowhere else at this scale — a second red panel would cost
   this one all its force.

   Two columns: the form on the left, the four editorial promises on the
   right. The reader's illustration the previous build anchored here is gone;
   it depicted a different audience and it sat on a palette this design no
   longer has. */
.signal__panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: start;
	gap: clamp(2rem, 5vw, 4.5rem);
	padding: clamp(2.25rem, 5vw, 4rem);
	border-radius: var(--r-panel);
	background: var(--signal-grad);
	color: #fff;
	overflow: hidden;
}

/* A dark vignette in the bottom-right so the flat gradient has some depth
   and the promises column does not float on plain colour. */
.signal__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(90% 120% at 100% 100%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 60%);
	pointer-events: none;
}

.signal__copy,
.promises {
	position: relative;
	z-index: 1;
}

.signal__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.9rem;
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
}

.signal__eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	background: rgba(255, 255, 255, 0.7);
}

.signal__title {
	max-width: 18ch;
	margin-bottom: 0.9rem;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: var(--track-tight);
	color: #fff;
}

/* On the red slab the emphasis cannot go red. It goes to a deep near-black
   instead, which is the same gesture — one line in the other colour — read
   against the opposite ground. */
.signal__title em {
	display: block;
	font-style: normal;
	color: rgba(10, 10, 12, 0.72);
}

.signal__sub {
	max-width: 54ch;
	margin-bottom: 1.5rem;
	color: rgba(255, 255, 255, 0.88);
	font-size: var(--fs-small);
	line-height: 1.6;
}

.signal__form {
	max-width: 32rem;
}

/* ── The promises ─────────────────────────────────────────────────────── */
.promises {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1rem;
	align-self: center;
}

.promise {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding-top: 0.9rem;
	border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.promise__icon {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	color: #fff;
}

.promise__icon svg {
	width: 100%;
	height: 100%;
}

.promise__text {
	color: #fff;
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1.35;
}

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

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

/* ── 9. Sidebar panels ────────────────────────────────────────────────────
   The article column's companion. Panels are plates on the ground, sticky as
   a group so the column travels with a long article. */
.layout__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.layout__main { min-width: 0; }

.sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	position: sticky;
	top: 6rem;
}

.panel {
	padding: 1.5rem 1.4rem;
	border-radius: var(--r-card);
	background: var(--surface);
	box-shadow: var(--shade);
}

.panel__heading {
	margin: 0 0 0.6rem;
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0;
	color: var(--ink);
}

.panel__intro {
	margin: 0 0 1.1rem;
	color: var(--ink-400);
	font-size: var(--fs-meta);
	line-height: 1.55;
}

/* The subscribe panel is the one coloured plate in the column. */
/* The sidebar's subscribe panel. It is the same offer as the slab that closes
   the front page, so it is MARKED with the red rather than filled with it —
   a red top edge and a red heading on the ordinary charcoal plate. Two red
   grounds on one page would cost the closing slab all its force, and this one
   sits beside body copy a reader is in the middle of. */
.panel--subscribe {
	background: var(--surface-lift);
	border: 1px solid var(--line);
	border-top: 3px solid var(--signal);
	box-shadow: none;
}

.panel--subscribe .panel__heading { color: var(--signal); }

/* ── Topic list ───────────────────────────────────────────────────────── */
.cat-list {
	display: flex;
	flex-direction: column;
}

.cat-list__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--line-soft);
	color: var(--ink-300);
	font-size: var(--fs-small);
	text-decoration: none;
	transition: color var(--speed) var(--ease);
}

.cat-list__item:last-child .cat-list__link { border-bottom: 0; }

.cat-list__name {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

/* The topic's hue survives as the small dot before its name. */
.cat-list__name::before {
	content: "";
	width: 7px;
	height: 7px;
	flex: none;
	border-radius: 50%;
	background: var(--cat-accent, var(--accent));
}

.cat-list__link:hover,
.cat-list__link:focus-visible { color: var(--accent); }

.cat-list__count {
	color: var(--ink-500);
	font-size: var(--fs-meta);
	font-variant-numeric: tabular-nums;
}

/* ── Mini list ────────────────────────────────────────────────────────── */
.minilist {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.minilist__item {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
}

.minilist__media {
	flex: none;
	width: 4.5rem;
	border-radius: 10px;
	overflow: hidden;
	background: var(--surface-sink);
	aspect-ratio: 1;
}

.minilist__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.minilist__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.minilist__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.18;
	letter-spacing: 0;
}

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

.minilist__title a:hover,
.minilist__title a:focus-visible { color: var(--accent); }

.minilist__meta,
.minilist__date {
	color: var(--ink-500);
	font-size: var(--fs-micro);
}

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

	.sidebar {
		position: static;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	}
}

/* ── 10. Footer ───────────────────────────────────────────────────────────
   Three parts: a masthead row carrying the brand and the beat rail, two
   columns under it, and the base bar.

   It sits one step DARKER than the page and is ruled off along its top edge,
   which is the only way to end a dark page — a footer that goes lighter
   reads as another content band and the page never closes.

   NOTE: this slab used to take `var(--ink)`, which was navy in the build this
   replaces. In this palette --ink is near-WHITE, so that rule painted a white
   footer and left its white text invisible. The ground is named explicitly
   here rather than through the ink ramp, because "the footer is the darkest
   thing on the page" is a statement about the ground, not about the text. */
.site-footer {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-block: clamp(2.5rem, 4.5vw, 3.5rem) 0;
	border-top: 1px solid var(--line);
	background: var(--surface-sink);
	color: var(--ink-300);
}

/* ── The masthead row ─────────────────────────────────────────────────
   Brand left, beats right, ruled off underneath. */
.footer-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: start;
	padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-brand__mark,
.footer-brand .custom-logo {
	display: inline-block;
	width: auto;
	max-width: min(15rem, 60%);
	height: auto;
	max-height: none;
}

/* A logo uploaded in the Customizer is almost always drawn for a light
   ground, so on the navy slab it is knocked back to white. brightness(0)
   flattens it to black first, then invert() takes it to white — which keeps
   a multi-colour mark legible instead of leaving it to fight the navy. */
.footer-brand .custom-logo {
	filter: brightness(0) invert(1);
	opacity: 0.92;
}

.footer-brand__mark {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: #fff;
	text-decoration: none;
}

/* The brand line is set in the display serif, not the body face: it is the
   publication's statement of itself rather than UI copy, and it is the last
   piece of editorial voice on the page. */
.footer-brand__text {
	margin-top: 1rem;
	max-width: 40ch;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.72);
	text-wrap: pretty;
}

/* The close — this design's recurring gesture in its last position on the
   page. The footer sits on the near-black ground, so the emphasis takes the
   red itself rather than the wash it would need on a coloured panel. */
.footer-brand__text em {
	display: block;
	margin-top: 0.35rem;
	font-style: normal;
	font-weight: 600;
	color: var(--signal);
}

/* Every footer heading takes the same short rule that labels a section
   anywhere else on the site. */
.footer-col__heading {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 1.1rem;
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
	color: #fff;
}

.footer-col__heading::before {
	content: "";
	width: 1.25rem;
	height: 3px;
	flex: none;
	background: var(--signal-lift);
}

/* ── The beat rail ────────────────────────────────────────────────────
   The topics as chips, each in its own colour with its article count. A
   wrapping rail rather than a column of links: it carries eight beats in the
   height a list gives four, and it is the one place in the footer that shows
   the palette. */
.footer-beats__rail {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.footer-beat {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.7rem 0.4rem 0.6rem;
	border-left: 3px solid var(--beat-accent, var(--signal));
	border-radius: 0 4px 4px 0;
	background: rgba(255, 255, 255, 0.07);
	color: rgba(255, 255, 255, 0.88);
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--track-label);
	line-height: 1.4;
	text-decoration: none;
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.footer-beat:hover,
.footer-beat:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.footer-beat__count {
	color: rgba(255, 255, 255, 0.45);
	font-size: var(--fs-micro);
	font-variant-numeric: tabular-nums;
}

/* ── The columns ──────────────────────────────────────────────────────
   The latest articles beside a short "how we work" column. Two columns, not
   four: the newsletter panel sits directly above the footer, so the column
   that repeated it has gone, and the topics moved into the rail above. */
.footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	padding-block: clamp(1.75rem, 3vw, 2.5rem);
}

/* The latest list runs two-up inside its own column, so four articles fit in
   the height two used to take. */
.minilist--footer {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem clamp(1.25rem, 2vw, 2rem);
}

.minilist--footer .minilist__item {
	padding-left: 0.85rem;
	/* Mixed toward white for the same reason as the label above it. */
	border-left: 2px solid color-mix(in srgb, var(--row-accent, #fff) 55%, #fff);
}

/* The topic, in the topic's own colour — the same treatment the reading list
   and the cards use. The footer used to drop the palette entirely. */
/* The topic hues are picked to hold WHITE TEXT on a light ground, so used raw
   on the navy slab the darker ones disappear — and one of them is the ink
   hue itself, which is this footer's background, so that beat's label was
   invisible rather than merely dim.

   A brightness() filter cannot fix that: it scales a colour toward white but
   leaves a value equal to the ground still equal to it after scaling. Mixing
   each hue with white instead guarantees a floor of contrast whatever the
   starting value, while keeping enough of the hue to tell one beat from
   another. */
.minilist--footer .minilist__topic {
	display: block;
	margin-bottom: 0.2rem;
	color: color-mix(in srgb, var(--row-accent, var(--signal-tint)) 45%, #fff);
	font-size: var(--fs-micro);
	font-weight: 700;
}

.minilist--footer .minilist__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.18;
	letter-spacing: 0;
}

.minilist--footer .minilist__title a {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
}

.minilist--footer .minilist__title a:hover,
.minilist--footer .minilist__title a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

.minilist--footer .minilist__meta,
.minilist--footer .minilist__date {
	display: block;
	margin-top: 0.25rem;
	color: rgba(255, 255, 255, 0.45);
	font-size: var(--fs-micro);
}

/* ── How we work ──────────────────────────────────────────────────────
   Three editorial commitments, each on its own ruled row. Not bulleted: a
   disc in front of a three-item list is decoration, and the rule already
   separates them. */
.footer-notes {
	display: grid;
	gap: 0;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.footer-notes li {
	padding: 0.6rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.68);
	font-size: var(--fs-meta);
	line-height: 1.45;
}

.footer-notes li:first-child {
	padding-top: 0;
}

.footer-notes li:last-child {
	border-bottom: 0;
}

.footer-contact {
	display: inline-block;
	color: #fff;
	font-size: var(--fs-meta);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	padding-bottom: 1px;
	transition: border-color var(--speed) var(--ease);
}

.footer-contact:hover,
.footer-contact:focus-visible {
	border-bottom-color: #fff;
}

/* Kept for any template still rendering the old plain link column. */
.footer-links {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.footer-links a {
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--fs-meta);
	text-decoration: none;
	transition: color var(--speed) var(--ease);
}

.footer-links a:hover,
.footer-links a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

.footer-col__text {
	margin: 0 0 1.1rem;
	color: rgba(255, 255, 255, 0.62);
	font-size: var(--fs-meta);
	line-height: 1.6;
}

/* ── The base bar ─────────────────────────────────────────────────────── */
.footer-base {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

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

.footer-copy {
	margin: 0;
	color: rgba(255, 255, 255, 0.5);
	font-size: var(--fs-micro);
}

.footer-legal__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.footer-legal__menu a {
	color: rgba(255, 255, 255, 0.5);
	font-size: var(--fs-micro);
	text-decoration: none;
}

.footer-legal__menu a:hover,
.footer-legal__menu a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

@media (max-width: 900px) {
	.footer-top,
	.footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 520px) {
	.minilist--footer {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── 11. Archive / category ─────────────────────────────────────────────── */
/* The head brings its own rhythm and always sits inside a band, so it adds
   nothing at the top (the band's padding is already there) and only a
   closing gap at the bottom. Stacking both left a screen of dead cream above
   every archive title. */
.page-head {
	padding-block: 0 clamp(1.25rem, 2.5vw, 2rem);
}

.page-head__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin-bottom: 0.7rem;
	color: var(--ink-400);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0;
}

.page-head__eyebrow::before {
	content: "";
	width: 1.5rem;
	height: 3px;
	flex: none;
	background: var(--signal);
}

.page-head__title {
	margin: 0;
	max-width: 20ch;
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 0.98;
	letter-spacing: var(--track-claim);
	text-wrap: balance;
}

.page-head__text {
	margin-top: 1rem;
	max-width: 56ch;
	color: var(--ink-400);
	font-size: var(--fs-lead);
	line-height: 1.6;
}

.archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--gap);
}

/* ── Pagination ───────────────────────────────────────────────────────── */
.pagination {
	display: flex;
	justify-content: center;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.75rem;
	border-radius: var(--r-pill);
	color: var(--ink-300);
	font-size: var(--fs-meta);
	font-weight: 500;
	text-decoration: none;
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.pagination .page-numbers:hover {
	background: var(--signal-tint);
	color: var(--signal-deep);
}

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

/* ── 12. Single post ────────────────────────────────────────────────────── */
/* The article head runs the FULL width of its band rather than being held to
   a text measure. A headline is display type, not reading type: at 46rem a
   long one broke to three or four short lines with a wide empty channel
   beside it, which read as a column that had failed to fill rather than as a
   deliberate measure. The standfirst below it keeps its own measure, so the
   prose is still set to a comfortable line length. */
.post-head {
	padding-block: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2rem);
	max-width: none;
}

.post-head__title {
	margin: 0.75rem 0 0;
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 0.98;
	letter-spacing: var(--track-claim);
	/* Capped in characters rather than rems, and set wide: display type takes
	   a longer line than prose does, so this is high enough that an ordinary
	   headline runs one or two lines across the band, and low enough that a
	   very long one still turns rather than running the full 1280px. */
	max-width: 34ch;
	text-wrap: balance;
}

/* The standfirst is prose, so it keeps a reading measure even though the
   headline above it no longer does. */
.post-head__standfirst {
	margin-top: 1.1rem;
	max-width: 58ch;
	color: var(--ink-400);
	font-size: var(--fs-lead);
	line-height: 1.6;
}

.post-hero {
	margin-bottom: clamp(2rem, 4vw, 3rem);
	border-radius: var(--r-plate);
	overflow: hidden;
	background: var(--surface-sink);
	aspect-ratio: 16 / 9;
}

.post-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── The byline ───────────────────────────────────────────────────────── */
.byline {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	color: var(--ink-400);
	font-size: var(--fs-meta);
}

.byline__avatar {
	width: 2.25rem;
	height: 2.25rem;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
}

.byline--lg .byline__avatar {
	width: 2.75rem;
	height: 2.75rem;
}

.byline--plain .byline__avatar { display: none; }

.byline__stack {
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
}

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

.byline__role {
	color: var(--ink-500);
	font-size: var(--fs-micro);
}

.byline__sep { opacity: 0.4; }

.meta-row {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--ink-500);
	font-size: var(--fs-meta);
}

.card__sep { opacity: 0.4; }

/* ── The article body ─────────────────────────────────────────────────
   The one place on the site with a long measure. Serif headings step down
   inside it; body copy stays Inter, because a full article set in a display
   serif is a magazine affectation rather than a reading improvement. */
.entry-content {
	max-width: var(--measure);
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--ink-200);
}

.entry-content > * + * { margin-top: 1.4em; }

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: var(--font-display);
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.12;
	letter-spacing: var(--track-tight);
	color: var(--ink);
	margin-top: 2.2em;
	text-wrap: balance;
}

.entry-content h2 { font-size: 1.75rem; }
.entry-content h3 { font-size: 1.4rem; }
.entry-content h4 { font-size: 1.18rem; }

.entry-content a {
	color: var(--accent);
	text-decoration-color: var(--signal-tint);
	text-decoration-thickness: 2px;
}

.entry-content a:hover,
.entry-content a:focus-visible {
	text-decoration-color: currentColor;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.3em;
}

.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }

.entry-content li + li { margin-top: 0.5em; }

.entry-content li::marker { color: var(--accent); }

.entry-content img,
.entry-content figure img {
	border-radius: var(--r-img);
}

.entry-content figcaption {
	margin-top: 0.6rem;
	color: var(--ink-500);
	font-size: var(--fs-meta);
}

.entry-content blockquote {
	padding: 1.4rem 1.6rem;
	border-radius: var(--r-img);
	background: var(--signal-wash);
	font-family: var(--font-body);
	font-size: 1.1875rem;
	line-height: 1.4;
	letter-spacing: var(--track-tight);
	color: var(--signal-deep);
}

.entry-content blockquote p + p { margin-top: 0.6em; }

.entry-content hr {
	height: 1px;
	border: 0;
	background: var(--line);
	margin-block: 2.5em;
}

.entry-content code {
	padding: 0.15em 0.4em;
	border-radius: 5px;
	background: var(--surface-sink);
	font-size: 0.9em;
}

/* On a dark page a code block cannot invert to "dark" — it is already there.
   It sinks instead, and takes a hairline so it still reads as a distinct
   object inside the prose. */
.entry-content pre {
	padding: 1.2rem 1.35rem;
	border: 1px solid var(--line);
	border-radius: var(--r-img);
	background: var(--surface-sink);
	color: var(--ink-200);
	overflow-x: auto;
}

.entry-content pre code {
	padding: 0;
	background: none;
	color: inherit;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-small);
}

.entry-content th,
.entry-content td {
	padding: 0.7rem 0.85rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
}

.entry-content th {
	font-weight: 600;
	color: var(--ink);
}

/* ── Share row ────────────────────────────────────────────────────────── */
.share-row {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex-wrap: wrap;
}

.share-row__label {
	margin-right: 0.2rem;
	color: var(--ink-500);
	font-size: var(--fs-meta);
}

.share-row__link {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--surface-sink);
	color: var(--ink-300);
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.share-row__link svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: currentColor;
}

.share-row__link:hover,
.share-row__link:focus-visible {
	background: var(--accent);
	color: #fff;
}

/* ── 13. Static page ────────────────────────────────────────────────────── */
.page-content {
	max-width: var(--measure);
}

/* ── 14. Thank-you / 404 ────────────────────────────────────────────────── */
.notice-page {
	display: grid;
	place-items: center;
	min-height: 52vh;
	padding-block: clamp(3rem, 8vw, 6rem);
	text-align: center;
}

.notice-page__inner {
	max-width: 34rem;
}

.notice-page__mark {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	margin: 0 auto 1.5rem;
	border-radius: 50%;
	background: var(--signal-tint);
	color: var(--accent);
}

.notice-page__mark svg {
	width: 2rem;
	height: 2rem;
}

.notice-page__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: var(--track-claim);
}

.notice-page__text {
	margin-top: 1rem;
	color: var(--ink-400);
	font-size: var(--fs-lead);
	line-height: 1.6;
}

.notice-page__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 2rem;
}

/* ── 15. Forms ──────────────────────────────────────────────────
   The search field's styles lived here. There is no search on this site —
   st_disable_search() closes the endpoint and filters get_search_form() to
   an empty string — so the rules had nothing left to style and are gone.

   The newsletter opt-in is the only form the theme ships, and it carries its
   own stylesheet at inc/optin-form/optin-form.css. */

/* ── 16. Utilities, motion, print ───────────────────────────────────────── */
.site-main {
	display: block;
}

/* Reveal-on-scroll. main.js adds .is-in once an element enters the viewport;
   without scripting the .no-js body rule below leaves everything visible, so
   content is never hidden behind a script that failed to load. */
.reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}

.reveal.is-in {
	opacity: 1;
	transform: none;
}

body.no-js .reveal {
	opacity: 1;
	transform: none;
}

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

	.reveal {
		opacity: 1;
		transform: none;
	}

	.card:hover,
	.topiccard:hover,
	.guide:hover,
	.collage__item:hover {
		transform: none;
	}
}

@media print {
	.site-header,
	.site-footer,
	.sidebar,
	.share-row,
	.read-progress,
	.hero__rail,
	.marquee,
	.signal {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.entry-content { max-width: none; }

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		color: #555;
	}
}

/* ── 17. Single-post furniture ────────────────────────────────────────────
   Added after the section rewrite: the pieces the article template uses that
   are not shared with any listing. Kept together at the end rather than
   scattered into sections 11–14, so the article page's own vocabulary is in
   one place. */
.post-head__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.post-head__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line-soft);
}

.post-head__facts {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--ink-500);
	font-size: var(--fs-meta);
}

/* The article body's own max-width is set by .entry-content; the head above
   it spans the full band. */
.single-article .post-head {
	max-width: none;
	padding-bottom: clamp(1.5rem, 3vw, 2rem);
}

.single-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 2.5rem;
}

.single-tags__label {
	margin-right: 0.25rem;
	color: var(--ink-500);
	font-size: var(--fs-meta);
}

/* WordPress prints tag links bare, so they are styled by element here rather
   than by a class the template controls. */
.single-tags a {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	border-radius: var(--r-pill);
	background: var(--surface-sink);
	color: var(--ink-300);
	font-size: var(--fs-micro);
	text-decoration: none;
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.single-tags a:hover,
.single-tags a:focus-visible {
	background: var(--accent);
	color: #fff;
}

.single-share {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line-soft);
}

/* ── Previous / next ──────────────────────────────────────────────────
   Two plates, the second right-aligned so the pair reads as a spread. */
.postnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
	margin-top: 2.5rem;
}

.postnav__item {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.1rem 1.25rem;
	border-radius: var(--r-card);
	background: var(--surface);
	box-shadow: var(--shade);
	text-decoration: none;
	transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.postnav__item:hover,
.postnav__item:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--shade-lift);
}

/* A lone "next" sits in the right-hand column rather than drifting left. */
.postnav__item--next {
	grid-column: 2;
	text-align: right;
}

.postnav__label {
	color: var(--lav);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0;
}

.postnav__title {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.18;
	letter-spacing: 0;
	color: var(--ink);
}

.postnav__item:hover .postnav__title { color: var(--accent); }

@media (max-width: 620px) {
	.postnav { grid-template-columns: 1fr; }

	.postnav__item--next {
		grid-column: 1;
		text-align: left;
	}
}

/* ── Notice pages ─────────────────────────────────────────────────────── */
.notice-page__note {
	margin-top: 1rem;
	color: var(--ink-500);
	font-size: var(--fs-meta);
	line-height: 1.6;
}

/* The confirmation tick. A completed action is not an action, so it does not
   take the signal red — it takes the olive from the topic metals, which is
   the one green in this palette and reads as "done" without inviting a
   second click. */
.notice-page__mark--ok {
	background: rgba(95, 114, 72, 0.18);
	color: #8FA86F;
}

/* ── Page-level spacing ───────────────────────────────────────────────
   These templates own their own head spacing, so the band's default block
   padding would double it. */
.page-band > .band__inner,
.page-main .page-head {
	padding-top: 0;
}

.page-band .page-head {
	padding-top: clamp(2.5rem, 5vw, 4rem);
}

.listing > .band__inner {
	padding-top: 0;
}

/* The head band above a listing closes with the head's own padding, so the
   band adds none. Keyed off a class rather than :has(), whose support is not
   universal enough to hang layout on. */
.band--head > .band__inner {
	padding-bottom: 0;
}

/* The article starts close under the masthead. The band's default --band-y
   is sized for a front-page section with a rule above it; on an article
   there is nothing above the headline, so a full band's worth of space just
   pushed the story down the screen. */
.layout--single > .band__inner {
	padding-top: clamp(1.75rem, 3vw, 2.5rem);
	padding-bottom: clamp(2rem, 4vw, 3rem);
}

.related > .band__inner {
	padding-top: 0;
}