@charset "UTF-8";
/* ==========================================================================
   Sovereign Terminal v10 — "Clinical"
   --------------------------------------------------------------------------
   A men's health publication. The warm-paper build this replaces was written
   for a wellness audience: cream ground, terracotta, a handwritten signature
   line. None of that survives. This reader wants the study, the number and
   the protocol, and the design has to look like it knows them.

   THE GROUND. Cool pale blue-grey, the colour of a clinical report rather
   than of uncoated stock. Content sits on it as TILES of unequal weight — a
   mosaic, not a card grid. Tile size is the hierarchy: the lead story takes
   seven columns, a figure takes three, and nothing is padded out to match
   its neighbour.

   COLOUR. Navy ink, one signal blue for every action and live state, and a
   single rust flag reserved for what is genuinely urgent. Rust appears at
   most twice on a page; if it is everywhere it is decoration, and this
   palette has none.

   TYPE. Two families with clearly separated jobs:
     Newsreader  — every headline, and the ITALIC that is this design's one
                   recurring gesture. The second line of a display pair is
                   set in italic at the same size: it reads as a spoken
                   emphasis rather than as a highlighted keyword.
     Inter Tight — body copy, navigation, figures, every label. Its narrow
                   set holds a long headline in a five-column tile without
                   needing a condensed face.

   No tracked-out capitals anywhere. Section labels are sentence case
   preceded by a short rule carrying the topic's colour — the rule does the
   work the capitals used to.

   RADIUS. Small and consistent on tiles (10px), full round on controls only.
   The reference's soft 24px corners belong to a pharmacy storefront; a
   publication carrying mortality data should not look pillowy.

   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 ──────────────────────────────────────────────────────────
	   Cool and pale, with enough blue in it that a white tile reads as
	   lifted rather than as a slightly different white. --tile-blue is the
	   filled tile the mosaic alternates in; --surface-sink is the deepest
	   flat value before navy. */
	--ground: #EEF1F6;
	--surface: #FFFFFF;
	--tile-blue: #E2E9F5;
	--tile-blue-deep: #D3DEEF;
	--surface-sink: #E6EBF3;

	/* ── Ink ─────────────────────────────────────────────────────────────
	   Navy rather than black or grey. Every step is measured against
	   --ground: -400 is the lightest that still clears AA at body size,
	   -500 clears it at 13px and above, and -600 is for rules and
	   decorative marks only, never for text. */
	--ink: #0B1B33;
	--ink-200: #1A2F4E;
	--ink-300: #33496B;
	--ink-400: #4C6285;
	--ink-500: #64789A;
	--ink-600: #A9B8CF;

	/* ── Signal ──────────────────────────────────────────────────────────
	   One blue carries every action, link and live state. Deliberately a
	   true mid blue rather than the reference's brighter royal: at this
	   value it holds AA as text on both the ground and the pale tile, so
	   links do not need a second darker variant to be readable in body
	   copy. */
	--signal: #1B3FA0;
	--signal-deep: #122D78;
	--signal-lift: #2F55BE;
	--signal-tint: #DCE5F8;
	--signal-wash: #EDF1FC;

	/* The rust flag. Reserved for genuinely live or urgent markers — never
	   for an ordinary button, and never more than twice on a page. */
	--flag: #C0442A;
	--flag-tint: #F7E3DE;

	/* ── Compatibility aliases ───────────────────────────────────────────
	   The warm build named its system colour --accent and its second voice
	   --lav, and both names are still used across the sidebar, archive,
	   single-post and utility sections. Rather than rename every call site —
	   which would touch several hundred lines to change nothing visible —
	   they are aliased onto the signal blue here.

	   --lav resolves to the same blue rather than to a second hue on
	   purpose: this design has ONE action colour, and the places that used
	   to reach for lavender (a section eyebrow, one button) are now supposed
	   to be either ink or signal. Anything that genuinely needs a second
	   voice should take a topic hue 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 hues. These match st_chip_palette() in functions.php — a
	   change in one has to be made in the other. All four are cool or
	   earthed enough to sit beside the signal blue without fighting it. */
	--teal: #0F6F73;
	--slate: #4A5B7A;
	--moss: #3D6B4A;
	--amber: #8A5A18;

	/* Tile tints for the figure and guide plates. */
	--tint-blue: #E2E9F5;
	--tint-teal: #DCEBEB;
	--tint-slate: #E3E7EF;
	--tint-sand: #EFE9DE;

	/* ── Lines and shadow ────────────────────────────────────────────────
	   Lines are cool and visible: this design separates with a real edge
	   rather than with shadow, so a tile keeps its shape on a tinted band.
	   Shadow is used sparingly and stays tight — a large soft drop under
	   every card is the SaaS-kit default and makes unequal tiles read as
	   equal ones. */
	--line: rgba(11, 27, 51, 0.12);
	--line-soft: rgba(11, 27, 51, 0.07);
	--line-firm: rgba(11, 27, 51, 0.22);

	--shade: 0 1px 2px rgba(11, 27, 51, 0.05);
	--shade-lift: 0 2px 4px rgba(11, 27, 51, 0.06), 0 12px 28px -18px rgba(11, 27, 51, 0.35);
	--shade-panel: 0 24px 60px -40px rgba(11, 27, 51, 0.5);

	/* ── Type ────────────────────────────────────────────────────────────── */
	--font-display: "Newsreader", "Times New Roman", Times, serif;
	--font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Display ramp. Newsreader is a variable serif with an optical size
	   axis; each step sets its own opsz so a 60px claim is drawn with finer
	   hairlines than a 17px tile title rather than scaled from one master. */
	--fs-claim: clamp(2.5rem, 5.4vw, 4.25rem);
	--fs-h1: clamp(2rem, 4.2vw, 3.25rem);
	--fs-h2: clamp(1.6rem, 2.9vw, 2.25rem);
	--fs-h3: clamp(1.2rem, 1.9vw, 1.5rem);
	--fs-h4: 1.0625rem;

	/* The figure ramp — the big numbers on the data tiles. Set in the body
	   face, not the serif: a statistic is data, and the serif is reserved
	   for the writing. */
	--fs-figure: clamp(2.5rem, 4.4vw, 3.5rem);

	--fs-lead: clamp(1.0625rem, 1.4vw, 1.1875rem);
	--fs-body: 1rem;
	--fs-small: 0.9375rem;
	--fs-meta: 0.8125rem;
	--fs-micro: 0.75rem;

	--track-tight: -0.018em;
	--track-claim: -0.028em;

	/* ── Radius ──────────────────────────────────────────────────────────
	   Tiles are barely rounded; only controls are pills. */
	--r-pill: 999px;
	--r-img: 8px;
	--r-card: 10px;
	--r-plate: 12px;
	--r-panel: 14px;

	/* ── Measure and rhythm ──────────────────────────────────────────────── */
	--measure: 68ch;
	--container: 1280px;
	--gutter: clamp(1.125rem, 3.5vw, 2.5rem);
	--band-y: clamp(3rem, 5.5vw, 4.75rem);
	--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, no shadow. */
.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-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 whole
   head is bounded by a rule at the top, which is what separates one section
   from the next now that there is no split column doing it. */
.band__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem);
	padding-top: 1rem;
	border-top: 1px solid var(--ink);
}

/* The section label. Sentence case, preceded by a short filled rule that
   carries the section's colour. The rule is the marker — capitals above a
   heading is the template tell this design is written against. */
.band__eyebrow {
	grid-column: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--ink-400);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0;
}

.band__eyebrow::before {
	content: "";
	width: 1.5rem;
	height: 3px;
	flex: none;
	background: var(--band-mark, var(--signal));
}

.band__title {
	grid-column: 1;
	margin: 0;
	max-width: 22ch;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-size: var(--fs-h2);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: var(--track-tight);
	color: var(--ink);
	text-wrap: balance;
}

/* The second half of a section heading, set in italic at the same size. This
   is the design's one recurring gesture and it belongs to headings only. */
.band__title em,
.title-em {
	font-style: italic;
	font-weight: 400;
}

.band__link {
	grid-column: 2;
	grid-row: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--signal);
	font-size: var(--fs-meta);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

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

.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.25rem;
	}
}

/* .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 ────────────────────────────────────────────── */
.h1, .h2, .h3 {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 500;
	letter-spacing: var(--track-tight);
	line-height: 1.1;
	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.18; }

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

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--ink-400);
	font-size: var(--fs-meta);
	font-weight: 600;
}

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

/* ── 5. Buttons, chips, marks ─────────────────────────────────────────────
   Controls are the only pills in this design. Everything else is a tile with
   a 10px corner, so a pill reads unambiguously as "this does something". */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1.4rem;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	background: var(--signal);
	color: #fff;
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: 0;
	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);
}

.btn:hover,
.btn:focus-visible {
	background: var(--signal-deep);
	color: #fff;
}

/* --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-deep);
}

/* The outlined control. Used where two actions sit together and only one is
   the point. */
.btn--ghost {
	background: transparent;
	border-color: var(--ink-600);
	color: var(--ink);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	background: transparent;
	border-color: var(--ink);
	color: var(--ink);
}

/* The old lavender secondary. Mapped onto the ink button so nothing that
   still asks for it renders unstyled. */
.btn--lav {
	background: var(--ink);
	color: #fff;
}

.btn--lav:hover,
.btn--lav:focus-visible {
	background: var(--ink-200);
}

/* On a navy ground the filled blue button loses its edge, so it inverts to
   white with navy text. */
.btn--on-accent,
.signal .btn--accent {
	background: #fff;
	color: var(--ink);
}

.btn--on-accent:hover,
.btn--on-accent:focus-visible,
.signal .btn--accent:hover,
.signal .btn--accent:focus-visible {
	background: var(--signal-tint);
	color: var(--ink);
}

.btn--sm {
	padding: 0.5rem 1rem;
	font-size: var(--fs-meta);
}

.btn--lg {
	padding: 0.85rem 1.75rem;
	font-size: var(--fs-body);
}

/* ── The arrow badge ──────────────────────────────────────────────────
   The warm build trailed a filled circular chevron after every label. That
   is the "→ on every button" tell, and at the scale it was drawn it also
   made each control look like two objects. It is now a bare chevron that
   only appears on standalone links, nudging on hover, and it is suppressed
   entirely inside a .btn — a button's job is already stated by its words. */
.arrow-badge {
	display: inline-grid;
	place-items: center;
	width: 0.75rem;
	height: 0.75rem;
	flex: none;
	color: currentColor;
	transition: transform var(--speed) var(--ease);
}

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

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

.btn .arrow-badge {
	display: none;
}

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

/* ── Topic chips ──────────────────────────────────────────────────────
   A chip is the topic's name in the topic's colour, on a pale ground with a
   left rule in the same colour. Not a filled pill: on a page carrying four
   or five of them, filled pills at card scale read as a row of buttons and
   pull rank over the headlines they sit above. */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.2rem 0.5rem 0.2rem 0.45rem;
	border-left: 3px solid var(--chip-bg, var(--signal));
	border-radius: 0 3px 3px 0;
	background: var(--surface-sink);
	color: var(--chip-bg, var(--signal));
	font-size: var(--fs-micro);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background var(--speed) var(--ease);
}

.chip:hover,
.chip:focus-visible {
	background: var(--signal-tint);
}

.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. */
.meta-row {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--ink-500);
	font-size: var(--fs-meta);
	font-variant-numeric: tabular-nums;
}

.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 white 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.

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

.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 display
   serif so the masthead carries the publication's voice even without art. */
.wordmark {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ink);
	line-height: 1;
}

.wordmark em {
	font-style: italic;
	font-weight: 400;
}

.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: 500;
	}

	.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);
	}

	.nav-subscribe {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		margin-top: 1.5rem;
		padding: 0.75rem 1.25rem;
		border-radius: var(--r-pill);
		background: var(--signal);
		color: #fff;
		font-size: var(--fs-small);
		font-weight: 600;
		text-decoration: none;
	}

	.nav-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 80;
		background: rgba(11, 27, 51, 0.45);
		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;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 0.75rem 1.25rem;
	background: var(--ink);
	color: #fff;
	font-size: var(--fs-small);
	font-weight: 600;
	text-decoration: none;
}

.skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
}

/* ── 7. Cards ─────────────────────────────────────────────────────────────
   One article vocabulary, two weights:

     .card--photo   a white tile with the photograph on top
     .card--plate   a flat tinted tile, no photography

   Both are TILES: 10px corner, a real 1px edge, no drop shadow at rest. The
   hover state raises the tile by one pixel and darkens its edge — it does not
   scale the photograph or float the card, both of which turn a page of news
   into a page of products. */
.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), transform var(--speed) var(--ease);
}

.card:hover {
	border-color: var(--line-firm);
	transform: translateY(-1px);
}

.card__media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--tile-blue);
}

.card__img,
.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

/* The topic label above a card headline. Reuses the chip's colour token but
   is set as plain coloured text — 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-decoration: none;
}

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

.card__title {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: var(--track-tight);
	color: var(--ink);
	text-wrap: pretty;
}

.card__title a {
	text-decoration: none;
}

.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;
}

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

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

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

.card__foot .arrow-badge {
	color: var(--ink-500);
}

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

/* The flat treatment. Takes the topic's colour as a left edge, which is what
   distinguishes one plate from its neighbour in a run of six. */
.card--plate {
	background: var(--tile-blue);
	border-color: transparent;
	border-left: 3px solid var(--card-accent, var(--signal));
	border-radius: 0 var(--r-card) var(--r-card) 0;
}

.card--plate:hover {
	background: var(--tile-blue-deep);
	border-color: transparent;
	border-left-color: var(--card-accent, var(--signal));
}

.card--plate .card__foot {
	border-top-color: rgba(11, 27, 51, 0.1);
}

/* ── 8. Front page ─────────────────────────────────────────────────────── */

/* ── The lead mosaic ──────────────────────────────────────────────────
   Twelve columns. The lead story takes seven and spans both rows of the
   upper block; the two side stories stack in the remaining five. Below
   them the claim takes four and the three figures share the other eight.

   The tiles are deliberately UNEQUAL. A row of equal cards is the SaaS kit;
   a mosaic where the lead is four times the area of a figure tile states the
   hierarchy without a single label saying "featured". */
.hero > .band__inner {
	padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem);
}

.mosaic {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--gap);
}

.mosaic__tile {
	position: relative;
	min-width: 0;
	border-radius: var(--r-card);
	overflow: hidden;
}

.mosaic__tile--lead {
	grid-column: span 7;
	grid-row: span 2;
}

/* The two side tiles share one grid cell beside the lead, stacked, splitting
   its height between them. They were laid out as two separate grid rows
   first: the lead spanned both, each side tile sized to its own content, and
   whatever height was left over fell out as a gap between them. Stacking the
   pair in a single cell and letting each take half is what keeps all three
   tiles flush along the bottom of the block whatever their headlines run to. */
.mosaic__side {
	grid-column: span 5;
	grid-row: span 2;
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: var(--gap);
	min-height: 0;
}

.mosaic__tile--side {
	min-height: 0;
}

.mosaic__tile--claim {
	grid-column: span 6;
}

/* The claim takes six columns and the three figures divide the other six —
   two each. Two is narrow, which is the point: a figure tile holds a number
   and three or four words, and giving it more room only stretches the label
   into a line of prose. */
.mosaic__tile--figure {
	grid-column: span 2;
}

/* ── The lead tile ──────────────────────────────────────────────────── */
.lead-tile {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	transition: border-color var(--speed) var(--ease);
}

.lead-tile:hover {
	border-color: var(--line-firm);
}

.lead-tile__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--tile-blue);
}

.lead-tile__img,
.lead-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lead-tile__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	flex: 1;
	padding: clamp(1.15rem, 2vw, 1.6rem);
}

.lead-tile__topic {
	color: var(--card-accent, var(--signal));
	font-size: var(--fs-micro);
	font-weight: 700;
	text-decoration: none;
}

.lead-tile__topic:hover,
.lead-tile__topic:focus-visible {
	text-decoration: underline;
}

.lead-tile__title {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: var(--track-tight);
	color: var(--ink);
	text-wrap: pretty;
}

.lead-tile__title a {
	text-decoration: none;
}

.lead-tile__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

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

.lead-tile__text {
	color: var(--ink-400);
	font-size: var(--fs-small);
	line-height: 1.5;
	max-width: 54ch;
}

.lead-tile .meta-row {
	margin-top: auto;
	padding-top: 0.5rem;
}

/* ── The two side tiles ─────────────────────────────────────────────── */
.side-tile {
	display: grid;
	grid-template-columns: 9rem minmax(0, 1fr);
	gap: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	transition: border-color var(--speed) var(--ease);
}

.side-tile:hover {
	border-color: var(--line-firm);
}

.side-tile__media {
	display: block;
	height: 100%;
	overflow: hidden;
	background: var(--tile-blue);
}

.side-tile__img,
.side-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.side-tile__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	padding: 0.9rem 1rem 0.95rem;
}

/* The media column keeps the tile's full height and crops to it, so the two
   side tiles stay the same shape whatever their headline lengths are. */
.side-tile__media {
	align-self: stretch;
}

.side-tile__topic {
	color: var(--card-accent, var(--signal));
	font-size: var(--fs-micro);
	font-weight: 700;
}

.side-tile__title {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: var(--track-tight);
	color: var(--ink);
	text-wrap: pretty;
}

.side-tile__title a {
	text-decoration: none;
}

.side-tile__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

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

/* Pushed to the foot of the tile. The pair splits the lead's height between
   them, so a two-line headline leaves room underneath either way — better
   that the tile is bounded top and bottom by content than that it trails off
   into white. */
.side-tile__read {
	margin-top: auto;
	color: var(--ink-500);
	font-size: var(--fs-meta);
	font-variant-numeric: tabular-nums;
}

/* ── The claim tile ─────────────────────────────────────────────────── */
.claim-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
	padding: clamp(1.25rem, 2vw, 1.75rem);
	background: var(--ink);
	color: #fff;
}

.claim-tile__title {
	margin: 0;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-size: clamp(1.75rem, 2.5vw, 2.25rem);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: var(--track-claim);
	color: #fff;
}

/* The italic second line — the design's recurring gesture. It is a whole
   line, not a highlighted word: emphasis on a clause reads as a voice, on a
   single word it reads as a template accenting a keyword. */
.claim-tile__title em {
	display: block;
	font-style: italic;
	font-weight: 400;
	color: var(--signal-tint);
}

.claim-tile__text {
	color: rgba(255, 255, 255, 0.76);
	font-size: var(--fs-small);
	line-height: 1.5;
}

/* ── The figure tiles ───────────────────────────────────────────────── */
.figure-tile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.15rem;
	padding: clamp(1rem, 1.6vw, 1.5rem);
	background: var(--tile-blue);
	border: 1px solid transparent;
}

.figure-tile__value {
	font-family: var(--font-body);
	font-size: var(--fs-figure);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.figure-tile__label {
	color: var(--ink-400);
	font-size: var(--fs-meta);
	font-weight: 500;
	line-height: 1.3;
}

@media (max-width: 1080px) {
	.mosaic__tile--lead {
		grid-column: span 12;
		grid-row: auto;
	}

	.mosaic__side {
		grid-column: span 12;
		grid-row: auto;
		grid-template-rows: none;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mosaic__tile--claim {
		grid-column: span 12;
	}

	.mosaic__tile--figure {
		grid-column: span 4;
	}
}

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

	.mosaic__tile--figure {
		grid-column: span 12;
	}

	.figure-tile {
		flex-direction: row;
		align-items: baseline;
		gap: 0.6rem;
	}

	.side-tile {
		grid-template-columns: 6rem minmax(0, 1fr);
	}
}

/* ── Topics ───────────────────────────────────────────────────────────
   Tall portrait tiles, one per beat: a large mark at the top, the beat's
   name under it, and the article count on a rule at the foot.

   The mark is drawn at 3.5rem rather than the 2.5rem the landscape version
   used, and its glyph fills more of that plate. This band is a set of DOORS
   into the archive, so the thing being pointed at should be the thing drawn
   at size — at 40px beside two lines of text it was smaller than the
   headline it sat next to, which is the opposite of what the band is for. */
/* Four across. Three left each tile ~400px wide for a two-word beat name and
   a short count, which is far more plate than the content needs; six made
   the mark look small inside a 187px tile. Four is the fit where the mark
   reads at size and the tile is not mostly empty. */
.topicrow {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gap);
}

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

.topiccard:hover,
.topiccard:focus-visible {
	border-color: var(--card-accent, var(--signal));
	transform: translateY(-2px);
}

/* The mark. A square tinted plate rather than a circle: circles are what the
   reference uses for its product categories, and squares sit better beside
   the tiles' own 10px corners.

   st_the_topic_icon() emits .topicmark and sets --mark-tint to the topic's
   own colour, so the glyph is drawn in that colour over a wash of it. */
.topicmark {
	display: inline-grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	flex: none;
	border-radius: var(--r-plate);
	background: color-mix(in srgb, var(--mark-tint, var(--signal)) 12%, #fff);
	color: var(--mark-tint, var(--signal));
	transition: background var(--speed) var(--ease);
}

.topicmark svg {
	width: 2.25rem;
	height: 2.25rem;
	stroke-width: 1.35;
}

/* On hover the mark fills with the topic's colour and the glyph knocks out —
   the one place a topic hue is used as a ground rather than as ink. */
.topiccard:hover .topicmark {
	background: var(--mark-tint, var(--signal));
	color: #fff;
}

.topiccard__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: var(--track-tight);
	text-wrap: balance;
}

/* The count sits on a rule at the foot of the tile, pushed there by
   margin-top:auto so every tile in the row ends on the same line whatever
   its name wraps to. */
.topiccard__count {
	width: 100%;
	margin-top: auto;
	padding-top: 0.7rem;
	border-top: 1px solid var(--line-soft);
	color: var(--ink-500);
	font-size: var(--fs-meta);
	font-variant-numeric: tabular-nums;
}

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

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

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

	.topicmark svg {
		width: 1.6rem;
		height: 1.6rem;
	}
}

/* ── Latest: the picture tiles ──────────────────────────────────────── */
.cardrow {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap);
}

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

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

/* ── Reading: the archive index ───────────────────────────────────────
   A NUMBERED list — the one place on the page where a numbered marker is
   honest, because this genuinely is a sequence: the archive in reverse date
   order, newest first.

   Each row is a three-part grid: the numeral in a fixed left channel, the
   headline and standfirst in the middle, the topic and facts right-aligned.
   The numerals are set in the display serif at figure scale and give the
   band an anchor down its left edge — as a plain two-column list this was an
   undifferentiated field of grey text with nothing for the eye to hold.

   One column, not two: a numbered sequence that runs down one column and
   jumps back to the top of a second reads as two lists, and the numbers stop
   meaning anything. */
.readlist {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: readlist;
}

.readlist__row {
	position: relative;
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 11rem);
	align-items: start;
	gap: 0 clamp(1rem, 2vw, 2rem);
	padding: 1.15rem 0;
	border-top: 1px solid rgba(11, 27, 51, 0.13);
	counter-increment: readlist;
	transition: background var(--speed) var(--ease);
}

.readlist__row:first-child {
	border-top: 0;
	padding-top: 0.35rem;
}

/* The hover fills the row's own gutter rather than the row box, so the tint
   runs the full bleed of the band and the rule above it is not broken. */
.readlist__row::before {
	content: "";
	position: absolute;
	inset: 0 calc(var(--gutter) * -0.5);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.6);
	opacity: 0;
	transition: opacity var(--speed) var(--ease);
	z-index: 0;
}

.readlist__row:hover::before {
	opacity: 1;
}

.readlist__num,
.readlist__body,
.readlist__meta {
	position: relative;
	z-index: 1;
}

/* The numeral. Padded to two digits by the counter style, set in the serif,
   and tinted in the row's own topic colour — so the left edge of the band
   carries the palette the same way every other section does. */
.readlist__num {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--row-accent, var(--signal));
	opacity: 0.45;
	font-variant-numeric: tabular-nums;
	transition: opacity var(--speed) var(--ease);
}

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

.readlist__row:hover .readlist__num {
	opacity: 1;
}

.readlist__body {
	min-width: 0;
}

.readlist__title {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: var(--track-tight);
	color: var(--ink);
	text-wrap: pretty;
}

.readlist__title a {
	text-decoration: none;
}

.readlist__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

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

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

/* The topic and facts sit right-aligned in their own channel, so the
   headlines all start on one line and the band scans vertically. */
.readlist__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.25rem;
	text-align: right;
	padding-top: 0.15rem;
}

.readlist__topic {
	color: var(--row-accent, var(--signal));
	font-size: var(--fs-micro);
	font-weight: 700;
	line-height: 1.3;
}

.readlist__facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.15rem 0.5rem;
	color: var(--ink-500);
	font-size: var(--fs-micro);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
	/* The meta channel folds under the headline; the numeral keeps its
	   column, because it is the device holding the band together. */
	.readlist__row {
		grid-template-columns: 3.25rem minmax(0, 1fr);
	}

	.readlist__meta {
		grid-column: 2;
		flex-direction: row;
		align-items: baseline;
		justify-content: flex-start;
		gap: 0.6rem;
		margin-top: 0.4rem;
		text-align: left;
		padding-top: 0;
	}

	.readlist__facts {
		justify-content: flex-start;
	}

	.readlist__num {
		font-size: 1.375rem;
	}
}

/* ── Guides: the long reads ───────────────────────────────────────────
   A navy panel — the only dark band in the flow of the page before the
   closing newsletter — carrying a feature plate at twice the width of the
   two beside it.

   The asymmetry is the argument: a band about depth should not offer three
   equal options. The longest piece is the recommendation and is given the
   room to say so; the other two are the alternatives. */
/* The panel carries its own padding, so the band contributes none above it
   and an ordinary band's worth below.

   This used to be a full --band-y gap, set when Guides sat directly above the
   navy newsletter panel and the two dark slabs needed separating. The reading
   list now runs between them, so the extra air is no longer doing anything. */
.guides > .band__inner {
	padding-block: 0 var(--band-y);
}

.guides__panel {
	position: relative;
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: var(--r-panel);
	background: var(--ink);
	color: #fff;
	/* The flourish is drawn inside the panel's rounded corners. */
	overflow: hidden;
	isolation: isolate;
}

/* The ribbon in the panel's top-right corner. A CSS background rather than an
   <img>: it is pure decoration with no subject, it has to bleed off the
   panel's edge, and it must not sit in the tab order or the accessibility
   tree.
   
   Drawn as a ::before so it can be layered under the content without giving
   the panel a background-image of its own — which would have to be composited
   with the navy fill in one shorthand and could not then be hidden
   independently at small sizes. */
.guides__panel::before {
	content: "";
	position: absolute;
	/* Pulled up and out so the ribbon runs off the top-right corner rather
	   than sitting politely inside it — a flourish that fits entirely within
	   its box reads as a sticker. */
	/* Lifted clear of the plates below it: the ribbon's tail runs downward,
	   and any lower it crossed the first tile's reading figure. */
	top: clamp(-7rem, -7vw, -4.5rem);
	right: clamp(-4rem, -5vw, -2.5rem);
	width: clamp(22rem, 38vw, 36rem);
	aspect-ratio: 900 / 694;
	background: url("../images/signal-flourish.png") no-repeat center / contain;
	/* Knocked back so it stays a texture behind the heading rather than a
	   second object competing with it. The ribbon's own blue is brighter than
	   this design's signal, so it is dimmed rather than recoloured. */
	opacity: 0.5;
	pointer-events: none;
	z-index: 0;
}

/* Everything in the panel sits above the flourish. */
.guides__head,
.guides .guiderow {
	position: relative;
	z-index: 1;
}

.guides__head {
	max-width: 46rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.guides__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin-bottom: 0.7rem;
	color: rgba(255, 255, 255, 0.68);
	font-size: var(--fs-meta);
	font-weight: 600;
}

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

.guides__title {
	margin: 0;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-size: var(--fs-h2);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: var(--track-claim);
	color: #fff;
}

.guides__title em {
	font-style: italic;
	font-weight: 400;
	color: var(--signal-tint);
}

.guides__sub {
	margin-top: 0.85rem;
	max-width: 54ch;
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--fs-small);
	line-height: 1.55;
}

/* Two columns for the feature, one each for the other two. */
.guiderow {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gap);
}

.guide {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 1.25rem 1.25rem 1.35rem;
	border-radius: var(--r-card);
	/* A translucent white well rather than a solid tint: on the navy panel a
	   pale opaque plate reads as a hole punched through it, where a wash of
	   white sits ON the navy and keeps the panel continuous. */
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
	transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.guide:hover {
	background: rgba(255, 255, 255, 0.11);
	border-color: rgba(255, 255, 255, 0.25);
}

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

/* The reading time as a display figure, on a rule across the top of the
   plate. On a band whose premise is "these are the long ones", the length is
   the reason to click, so it is set at figure scale rather than buried in a
   meta line at the foot. */
.guide__time {
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
	width: 100%;
	padding-bottom: 0.7rem;
	margin-bottom: 0.2rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.guide__timevalue {
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

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

.guide__timeunit {
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--fs-meta);
	font-weight: 500;
}

.guide__label {
	color: var(--signal-tint);
	font-size: var(--fs-micro);
	font-weight: 700;
}

.guide__title {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: var(--track-tight);
	color: #fff;
	text-wrap: pretty;
}

.guide--feature .guide__title {
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	line-height: 1.12;
}

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

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

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

.guide__text {
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--fs-small);
	line-height: 1.5;
	max-width: 46ch;
}

.guide__date {
	margin-top: auto;
	padding-top: 0.6rem;
	color: rgba(255, 255, 255, 0.5);
	font-size: var(--fs-meta);
}

@media (max-width: 900px) {
	.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;
	}
}

/* The small separator dot, kept for the single-post meta line. */
.guide__dot {
	display: inline-block;
	width: 1px;
	height: 0.8em;
	background: var(--ink-600);
	vertical-align: -0.05em;
}

/* ── Signal: the closing newsletter panel ─────────────────────────────
   The one navy field on the page. It closes the document the way the
   masthead opens it, and it is the only place the newsletter form appears
   in the flow of the page. */
.signal > .band__inner {
	padding-block: 0 var(--band-y);
}

.signal__panel {
	position: relative;
	/* The artwork is sized in cqw against this panel; see .signal__art. */
	container-type: inline-size;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
	padding: clamp(1.75rem, 4vw, 3.25rem);
	border-radius: var(--r-panel);
	background: var(--ink);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

/* The reader illustration, anchored to the panel's bottom-right corner and
   bled off both edges. It sits UNDER the content: the promises column runs
   above it, and the illustration fills the empty ground beneath them rather
   than taking a column of its own. */
.signal__art {
	position: absolute;
	/* Sat flush to the panel's edges first, which sheared the dumbbell and the
	   newspaper off at the crop. The figure reads as placed in the corner
	   rather than cut by it only if the whole object is inside the box. */
	right: clamp(0.5rem, 2vw, 2rem);
	bottom: 0;
	/* There is ~360px of empty ground under the promises column on a desktop
	   panel and the figure was using barely two thirds of it, which left it
	   reading as a small sticker in the corner rather than as the thing
	   anchoring that half of the panel.

	   Sized against the PANEL (cqw) rather than the viewport: the panel stops
	   growing at the 1280px container, so a vw-based width kept enlarging the
	   figure on a wide monitor while the ground under the promises stayed the
	   same — at 1920px that had closed the gap to 10px. Against the panel it
	   holds its proportion at every width. */
	width: clamp(17rem, 38cqw, 28rem);
	height: auto;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

/* The copy and the promises sit above the artwork. */
.signal__copy,
.promises {
	position: relative;
	z-index: 1;
}

.signal__copy {
	min-width: 0;
}

.signal__title {
	margin: 0 0 0.75rem;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: var(--track-claim);
	color: #fff;
	text-wrap: balance;
}

.signal__title em {
	display: block;
	font-style: italic;
	font-weight: 400;
	color: var(--signal-tint);
}

/* The form's own column in the panel. It is the widest element in the copy
   column on purpose — it is the one thing the panel is asking for. */
.signal__form {
	max-width: 30rem;
}

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

/* The four editorial commitments. A 2×2 grid of line-art marks — these are
   promises, not a sequence, so they are not numbered. */
.promises {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.25rem;
	align-content: start;
	padding-top: 0.35rem;
}

.promise {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
}

.promise__icon {
	display: inline-grid;
	place-items: center;
	width: 1.85rem;
	height: 1.85rem;
	flex: none;
	border-radius: var(--r-img);
	background: rgba(255, 255, 255, 0.1);
	color: var(--signal-tint);
}

.promise__icon svg {
	width: 1rem;
	height: 1rem;
}

.promise__text {
	color: rgba(255, 255, 255, 0.88);
	font-size: var(--fs-meta);
	font-weight: 500;
	line-height: 1.35;
}

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

	/* No spare ground in a single column: the illustration would sit behind
	   the consent text and the compliance footer. */
	.signal__art {
		display: none;
	}
}

@media (max-width: 700px) {
	/* At phone width the ribbon crowds the heading it is meant to sit behind. */
	.guides__panel::before {
		display: none;
	}
}

@media (max-width: 520px) {
	.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: 500;
	letter-spacing: var(--track-tight);
	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. */
.panel--subscribe {
	background: var(--signal-wash);
	border: 1px solid var(--signal-tint);
	box-shadow: none;
}

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

/* ── 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: 500;
	line-height: 1.28;
	letter-spacing: var(--track-tight);
}

.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 ───────────────────────────────────────────────────────────
   A navy slab in three parts: a masthead row carrying the brand and the beat
   rail, two columns under it, and the base bar.

   The previous build ran four equal columns of plain links and carried none
   of this design's devices — no leading rules on the headings, no serif, no
   topic colour. It read as a generic site footer bolted to the end of a
   designed page. What follows uses the same vocabulary as every other band:
   the rule-and-label heading, the topic hues, the italic gesture. */
.site-footer {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-block: clamp(2.5rem, 4.5vw, 3.5rem) 0;
	background: var(--ink);
	color: rgba(255, 255, 255, 0.82);
}

/* ── 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.35rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	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-display);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.72);
	text-wrap: pretty;
}

/* The italic close — this design's recurring gesture, in its last position on
   the page. */
.footer-brand__text em {
	display: block;
	font-style: italic;
	color: var(--signal-tint);
}

/* 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-meta);
	font-weight: 600;
	letter-spacing: 0;
	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 color-mix(in srgb, var(--beat-accent, var(--signal-lift)) 55%, #fff);
	border-radius: 0 4px 4px 0;
	background: rgba(255, 255, 255, 0.07);
	color: rgba(255, 255, 255, 0.88);
	font-size: var(--fs-meta);
	font-weight: 500;
	line-height: 1.3;
	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: 500;
	line-height: 1.25;
	letter-spacing: var(--track-tight);
}

.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-optical-sizing: auto;
	font-size: var(--fs-h1);
	font-weight: 500;
	line-height: 1.08;
	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-optical-sizing: auto;
	font-size: var(--fs-h1);
	font-weight: 500;
	line-height: 1.08;
	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-optical-sizing: auto;
	font-weight: 500;
	line-height: 1.2;
	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-display);
	font-size: 1.25rem;
	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;
}

.entry-content pre {
	padding: 1.2rem 1.35rem;
	border-radius: var(--r-img);
	background: var(--ink);
	color: var(--ground);
	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-optical-sizing: auto;
	font-size: var(--fs-h1);
	font-weight: 500;
	line-height: 1.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__collage,
	.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: 500;
	line-height: 1.25;
	letter-spacing: var(--track-tight);
	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 is the one place sage appears outside a topic dot —
   it is the colour of a completed action, not of a link. */
.notice-page__mark--ok {
	background: var(--signal-wash);
	color: var(--moss);
}

/* ── 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;
}