@charset "UTF-8";
/* ==========================================================================
   Sovereign Terminal v7 — "Deck" redesign
   --------------------------------------------------------------------------
   The page is a pale blue-grey board. Every section is a PLATE: a large,
   generously rounded white panel floating on that board, carrying its own
   micro-header (wordmark left, eyebrow right), its content, and a footer
   hairline terminated by a short black progress marker. It reads as a deck of
   presentation slides stacked vertically — which is exactly the reference.

   The palette is monochrome on purpose. There is no accent hue: emphasis is
   carried by INVERSION (a black plate among white ones, a black pill among
   outlined ones) rather than by colour. That is what makes the few photographs
   and the category chips register at all.

   Typography is two faces:
     Space Grotesk — every headline, every numeral, the wordmark. Set tight
                     (-0.03em and below) and heavy, as in the reference.
     Inter         — eyebrows, meta, body copy, buttons, nav. Uppercase
                     micro-caps at 11px with wide tracking need even caps, and
                     a display grotesque at that size closes up.

   Token names are NEW. The old navy and violet aliases are gone along with
   the accent Customizer control that drove them; nothing in the theme refers
   to them any more. (Never write those legacy names with a trailing star here:
   the star-slash pair would close this comment early and take the whole token
   block down with it.)

   Sections in order:
      1  Tokens
      2  Reset / base
      3  Typography primitives
      4  Plates — the structural motif
      5  Buttons, pills, chips, badges
      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  Utilities, motion, print
   ========================================================================== */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root {
	/* ── Ground ──────────────────────────────────────────────────────────
	   The board behind every plate. A pale blue-grey, not a neutral: the
	   reference's ground is unmistakably cool, and it is what makes the white
	   plates read as floating rather than as the page itself. */
	--board: #E4E8EF;
	--board-deep: #D7DCE5;

	/* Plate surfaces. --plate is the white slide; --plate-2 a whisper-grey
	   inset used for wells inside a plate; --plate-3 an image placeholder. */
	--plate: #F4F6F9;
	--plate-pure: #FFFFFF;
	--plate-2: #EDF0F4;
	--plate-3: #E2E6EC;

	/* ── Ink ─────────────────────────────────────────────────────────────
	   Near-black with a trace of blue so it sits in the same family as the
	   board rather than reading as a warm black dropped onto a cool ground.
	   -100 headline, -500 the quietest meta. Every step clears AA on --plate. */
	--ink: #111315;
	--ink-100: #111315;
	--ink-200: #24282C;
	--ink-300: #3E444B;
	--ink-400: #5A626B;
	--ink-500: #767E88;
	--ink-600: #98A0AA;

	/* Ink INVERTED — the dark plate and the dark cards. Text on black is set
	   a touch off-white; pure white on pure black vibrates at display sizes. */
	--dark: #121417;
	--dark-2: #191C20;
	--dark-3: #23272C;
	--on-dark: #F2F4F7;
	--on-dark-dim: #A8B0BA;
	--on-dark-faint: rgba(242, 244, 247, 0.42);

	/* Hairlines. --line is the plate's internal division; --line-firm holds a
	   heading; --line-dark is the same idea inside an inverted panel. */
	--line: rgba(17, 19, 21, 0.12);
	--line-soft: rgba(17, 19, 21, 0.07);
	--line-firm: rgba(17, 19, 21, 0.26);
	--line-dark: rgba(242, 244, 247, 0.16);
	--line-dark-soft: rgba(242, 244, 247, 0.09);

	/* ── Type ────────────────────────────────────────────────────────────── */
	--font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Fluid display scale. The reference's headlines are LARGE and set in two
	   or three tight lines, so the top of the ramp is generous and the tracking
	   goes negative as the size grows. */
	--fs-hero: clamp(2.2rem, 5.4vw, 4.2rem);
	--fs-display: clamp(1.9rem, 4.2vw, 3.1rem);
	--fs-h1: clamp(1.75rem, 3.4vw, 2.6rem);
	--fs-h2: clamp(1.4rem, 2.4vw, 1.95rem);
	--fs-h3: clamp(1.08rem, 1.5vw, 1.3rem);
	--fs-lead: clamp(1rem, 1.35vw, 1.15rem);
	--fs-body: 1rem;
	--fs-sm: 0.875rem;
	--fs-xs: 0.8125rem;
	--fs-micro: 0.6875rem;

	/* The eyebrow: 11px caps, wide tracking. Used verbatim across plates. */
	--track-eyebrow: 0.14em;
	--track-tight: -0.03em;
	--track-tighter: -0.045em;

	/* ── Rhythm ──────────────────────────────────────────────────────────── */
	--gap: clamp(0.9rem, 1.6vw, 1.4rem);
	--gap-lg: clamp(1.4rem, 2.8vw, 2.25rem);
	--container: 1280px;
	--container-narrow: 780px;

	/* Plate geometry. The reference's plates are softly but decisively
	   rounded — far rounder than a card, not a pill. --plate-pad is the
	   internal gutter; it shrinks on phones where a 48px inset would leave the
	   headline nowhere to go. */
	--plate-radius: clamp(14px, 2vw, 26px);
	--plate-pad: clamp(1.25rem, 3.4vw, 3rem);
	--plate-gap: clamp(0.9rem, 1.8vw, 1.5rem);

	/* Inner components — the numbered problem cards, chips, buttons. */
	--radius: 12px;
	--radius-sm: 8px;
	--radius-lg: 18px;
	--radius-pill: 999px;

	--logo-h: 40px;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur: 0.32s;

	/* The plate's lift. Deliberately soft and low-contrast: the plates are
	   separated from the board by their own whiteness, and a hard shadow would
	   turn the deck into a stack of app cards. */
	--lift: 0 1px 2px rgba(17, 19, 21, 0.04), 0 12px 32px -12px rgba(17, 19, 21, 0.14);
	--lift-hi: 0 2px 4px rgba(17, 19, 21, 0.05), 0 22px 48px -16px rgba(17, 19, 21, 0.2);
}

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	color-scheme: light;
	/* Header height plus the plate gutter, so an in-page anchor never lands
	   with its heading tucked under the masthead. */
	scroll-padding-top: 120px;
}

body {
	background: var(--board);
	color: var(--ink-200);
	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%;
}

img {
	height: auto;
}

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

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

button {
	background: none;
	border: 0;
	cursor: pointer;
}

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

:focus-visible {
	outline: 2px solid var(--ink-100);
	outline-offset: 3px;
	border-radius: 3px;
}

/* On an inverted surface the black ring disappears; flip it to the light ink. */
.plate--dark :focus-visible,
.site-footer :focus-visible,
.trending :focus-visible {
	outline-color: var(--on-dark);
}

::selection {
	background: var(--ink-100);
	color: var(--plate-pure);
}

.container {
	width: min(100% - 2rem, var(--container));
	margin-inline: auto;
}

.container--narrow {
	width: min(100% - 2rem, var(--container-narrow));
	margin-inline: auto;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--ink-100);
	color: var(--plate-pure);
	font-size: var(--fs-sm);
	font-weight: 600;
	border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
	left: 0;
}

.screen-reader-text,
.u-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── 3. Typography primitives ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: var(--track-tight);
	color: var(--ink-100);
	text-wrap: balance;
}

/* The eyebrow. Every plate carries one top-right, and sections use it above
   their headline. 11px Inter caps with wide tracking — the single most
   repeated piece of furniture in the design. */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-400);
	line-height: 1;
}

.eyebrow--dark {
	color: var(--on-dark-dim);
}

/* A short rule that trails an eyebrow, as on the reference's plate headers. */
.eyebrow__rule {
	display: block;
	flex: 1;
	min-width: 1.5rem;
	height: 1px;
	background: var(--line);
}

.eyebrow--dark .eyebrow__rule {
	background: var(--line-dark);
}

/* ── 4. Plates — the structural motif ────────────────────────────────────
   Every section of every page is a plate. The markup is always:

     <section class="plate">
       <div class="plate__head">  wordmark left, eyebrow right
       <div class="plate__body">  the actual content
       <div class="plate__foot">  hairline + progress marker

   plate__head and plate__foot are optional; the padding and radius are not.
   ------------------------------------------------------------------------ */
.plate {
	position: relative;
	background: var(--plate);
	border-radius: var(--plate-radius);
	padding: var(--plate-pad);
	margin-bottom: var(--plate-gap);
	box-shadow: var(--lift);
	overflow: hidden;
	isolation: isolate;
}

/* The inverted plate — used once or twice per page for emphasis. */
.plate--dark {
	background: var(--dark);
	color: var(--on-dark);
}

.plate--dark h1,
.plate--dark h2,
.plate--dark h3 {
	color: var(--on-dark);
}

/* A plate that carries a photograph to its own edge needs no padding of its
   own; its children supply theirs. */
.plate--flush {
	padding: 0;
}

/* The last plate on a page should not push a gap into the footer. */
.plate:last-child {
	margin-bottom: 0;
}

/* ── The plate's micro-header ──────────────────────────────────────────── */
.plate__head {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	margin-bottom: clamp(1.25rem, 3vw, 2.25rem);
}

.plate__mark {
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-100);
	white-space: nowrap;
}

.plate--dark .plate__mark {
	color: var(--on-dark);
}

.plate__rule {
	flex: 1;
	height: 1px;
	background: var(--line);
}

.plate--dark .plate__rule {
	background: var(--line-dark);
}

.plate__eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-400);
	white-space: nowrap;
}

.plate--dark .plate__eyebrow {
	color: var(--on-dark-dim);
}

/* On a phone the mark and the eyebrow cannot share a row: the eyebrow is a
   long phrase and would wrap into the rule. The rule is dropped and the
   eyebrow moves under the mark. */
@media (max-width: 640px) {
	.plate__head {
		flex-wrap: wrap;
		row-gap: 0.4rem;
	}

	.plate__rule {
		display: none;
	}

	.plate__eyebrow {
		flex-basis: 100%;
		white-space: normal;
	}
}

/* ── The plate's footer hairline ───────────────────────────────────────── */
.plate__foot {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
}

.plate__foot-rule {
	flex: 1;
	height: 1px;
	background: var(--line);
}

.plate--dark .plate__foot-rule {
	background: var(--line-dark);
}

/* The short solid marker that terminates the hairline — the reference's
   progress indicator. Purely graphic furniture. */
.plate__marker {
	width: clamp(56px, 9vw, 104px);
	height: 6px;
	border-radius: 3px;
	background: var(--ink-100);
	flex-shrink: 0;
}

.plate--dark .plate__marker {
	background: var(--on-dark);
}

/* ── The plate's own section heading ───────────────────────────────────── */
.plate__title {
	font-family: var(--font-display);
	font-size: var(--fs-display);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: var(--track-tight);
	color: var(--ink-100);
	max-width: 20ch;
	text-wrap: balance;
}

.plate--dark .plate__title {
	color: var(--on-dark);
}

/* The headline row: title left, the logo glyph parked top-right as in the
   reference, where a small mark floats opposite the heading. */
.plate__titlerow {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--gap-lg);
	margin-bottom: clamp(1.5rem, 3.2vw, 2.5rem);
}

.plate__glyph {
	flex-shrink: 0;
	width: clamp(26px, 3vw, 38px);
	color: var(--ink-100);
	margin-top: 0.35em;
}

.plate--dark .plate__glyph {
	color: var(--on-dark);
}

.plate__glyph svg {
	width: 100%;
	height: auto;
}

@media (max-width: 640px) {
	.plate__glyph {
		display: none;
	}
}

/* The standfirst under a plate title. */
.plate__sub {
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--ink-400);
	max-width: 62ch;
	margin-top: 0.9rem;
}

.plate--dark .plate__sub {
	color: var(--on-dark-dim);
}

/* The page's outer rhythm: plates are laid in a column with the board
   showing between them. */
.site-main {
	padding-block: var(--plate-gap) clamp(1.5rem, 3vw, 2.5rem);
}

.deck {
	display: block;
}

/* ── 5. Buttons, pills, chips, badges ───────────────────────────────────
   The reference's control vocabulary is a row of pills: one filled black,
   the rest outlined, several trailing a circular chevron badge.
   ------------------------------------------------------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7em;
	padding: 0.85em 1.6em;
	/* Every pill stands the same height whether or not it carries a badge.
	   The badge circle is taller than the text line box, so without this the
	   pill was sized by its CONTENTS: one with a badge grew past its
	   neighbours, and once the badge was pulled out of the flow (see
	   .btn .arrow-badge) a small pill collapsed to less than its padding
	   implied. Stating the height on the button settles both cases. */
	min-height: 2.85em;
	border: 1px solid var(--ink-100);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--ink-100);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
		border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
	white-space: nowrap;
}

.btn:hover {
	background: var(--ink-100);
	color: var(--plate-pure);
	transform: translateY(-1px);
}

/* The filled pill — one per row, the primary action. */
.btn--primary {
	background: var(--ink-100);
	color: var(--plate-pure);
	border-color: var(--ink-100);
}

.btn--primary:hover {
	background: var(--dark-3);
	border-color: var(--dark-3);
	color: var(--plate-pure);
}

/* Outlined on a DARK ground — the inverse pair. */
.btn--light {
	border-color: var(--on-dark);
	color: var(--on-dark);
}

.btn--light:hover {
	background: var(--on-dark);
	color: var(--ink-100);
}

/* Filled on a dark ground. */
.btn--solid-light {
	background: var(--on-dark);
	color: var(--ink-100);
	border-color: var(--on-dark);
}

.btn--solid-light:hover {
	background: var(--plate-pure);
	border-color: var(--plate-pure);
	color: var(--ink-100);
}

/* A quiet pill: hairline border, muted label. The "rest" of a pill row. */
.btn--ghost {
	border-color: var(--line-firm);
	color: var(--ink-300);
}

.btn--ghost:hover {
	background: var(--ink-100);
	border-color: var(--ink-100);
	color: var(--plate-pure);
}

.btn--lg {
	padding: 1.05em 2em;
	font-size: var(--fs-body);
	min-height: 3.4em;
}

.btn--sm {
	padding: 0.6em 1.1em;
	font-size: var(--fs-xs);
	min-height: 2.6em;
}

.btn[disabled],
.btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

/* A row of pills, wrapping on narrow screens. */
.pillrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

/* ── The circular chevron badge ────────────────────────────────────────
   Trails a label inside a pill or after a link. The glyph is KNOCKED OUT of
   a filled circle: the badge takes currentColor as its ground and the arrow
   paints in the surface colour behind it. */
.arrow-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.85em;
	height: 1.85em;
	border-radius: 50%;
	border: 1px solid currentColor;
	color: inherit;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}

.arrow-badge svg {
	width: 0.72em;
	height: 0.72em;
	/* The chevron sits a hair right of centre: its ink hangs left of the
	   point, so a mathematically centred path reads as shifted left. */
	transform: translateX(0.04em);
}

/* Inside a pill the badge must not set the button's height.
   ------------------------------------------------------------------------
   The circle is 1.85em against a 1em line box, so as a normal flex item it
   added ~12px to the content box and a pill carrying a badge stood 52px tall
   next to 40px neighbours in the same row.

   The pill's own min-height (see .btn) now fixes the outer size, and this
   keeps the circle from pushing the content box past it: the badge overflows
   its line box symmetrically instead, staying optically centred. */
.btn .arrow-badge {
	margin-block: -0.425em;
	align-self: center;
}

/* The larger circle overflows further, so it needs the matching offset. */
.btn .arrow-badge--lg {
	margin-block: -0.7em;
}

/* On hover the badge inverts along with its host: the circle fills with
   currentColor and the chevron is knocked out of it.
   ------------------------------------------------------------------------
   The circle always fills with currentColor, so the knocked-out glyph must
   paint whatever sits BEHIND that circle:

     - inside a pill, that is the pill's own hover fill (near-black), because
       the badge sits on the filled pill rather than on the page;
     - on a BARE link, nothing fills, so it is the plate itself.

   Those two are opposites, and using one value for both is what produced an
   invisible arrow — light-on-light in a pill, dark-on-dark on a bare link.
   --knockout therefore defaults to the plate and each pill overrides it. */
.arrow-badge {
	--knockout: var(--plate);
}

.btn .arrow-badge {
	--knockout: var(--ink-100);
}

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

.btn:hover .arrow-badge svg,
a:hover > .arrow-badge svg {
	stroke: var(--knockout);
}

/* A filled pill already carries light text, so its badge inverts to the
   pill's own dark fill. */
.btn--primary .arrow-badge,
.btn--solid-light .arrow-badge {
	border-color: currentColor;
}

.btn--primary:hover .arrow-badge {
	--knockout: var(--dark-3);
}

.btn--solid-light:hover .arrow-badge {
	--knockout: var(--plate-pure);
}

/* On an inverted plate everything flips: a ghost pill fills with the light
   ink, and a bare link there sits on the dark ground rather than the plate.
   Both therefore knock out to the dark. */
.plate--dark .arrow-badge,
.site-footer .arrow-badge,
.plate--dark .btn .arrow-badge,
.site-footer .btn .arrow-badge,
.btn--light .arrow-badge {
	--knockout: var(--dark);
}

/* The drawer's subscribe link is a dark PILL built from a bare anchor, so it
   takes the pill treatment rather than the bare-link one. */
.nav-subscribe .arrow-badge {
	--knockout: var(--ink-100);
}

.arrow-badge--lg {
	width: 2.4em;
	height: 2.4em;
}

/* A pre-filled badge — the reference's solid circular arrow on the hero. */
.arrow-badge--solid {
	background: currentColor;
}

.arrow-badge--solid svg {
	stroke: var(--plate);
}

.plate--dark .arrow-badge--solid svg {
	stroke: var(--dark);
}

/* ── Chips: the category tag ───────────────────────────────────────────
   Monochrome by default — an outlined micro-cap pill. Category colour is
   carried only as a small leading dot, so a nine-colour palette never fights
   the design's black-and-white discipline. --chip-bg arrives inline from
   st_term_color(). */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.42em 0.85em;
	border: 1px solid var(--line-firm);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--ink-300);
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.chip::before {
	content: "";
	width: 0.45em;
	height: 0.45em;
	border-radius: 50%;
	background: var(--chip-bg, var(--ink-400));
	flex-shrink: 0;
}

.chip:hover {
	background: var(--ink-100);
	border-color: var(--ink-100);
	color: var(--plate-pure);
}

.chip:hover::before {
	background: var(--plate-pure);
}

.chip--sm {
	padding: 0.36em 0.72em;
	font-size: 0.625rem;
}

/* On a photograph or a dark plate the chip inverts. */
.chip--on-media,
.plate--dark .chip,
.trending .chip {
	border-color: var(--line-dark);
	color: var(--on-dark);
	background: rgba(18, 20, 23, 0.5);
	backdrop-filter: blur(6px);
}

.chip--on-media::before,
.plate--dark .chip::before,
.trending .chip::before {
	background: var(--chip-bg, var(--on-dark));
}

.chip--on-media:hover,
.plate--dark .chip:hover,
.trending .chip:hover {
	background: var(--on-dark);
	border-color: var(--on-dark);
	color: var(--ink-100);
}

.chip--on-media:hover::before,
.plate--dark .chip:hover::before,
.trending .chip:hover::before {
	background: var(--ink-100);
}

/* ── The live pip ──────────────────────────────────────────────────────── */
.pip {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	animation: st-pulse 2.4s var(--ease) infinite;
}

@keyframes st-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.35; transform: scale(0.72); }
}

/* ── The numbered index card ───────────────────────────────────────────
   The reference's "01 / 02 / 03 / 04" problem cards: a rounded outlined
   panel, the numeral large at the top, a hairline under it, then the copy.
   Alternating members of the set are INVERTED — that checkerboard is the
   whole visual idea of that slide, and it is reused here for any numbered
   set (trending ranks, key figures, archive stats).
   ------------------------------------------------------------------------ */
.idxcard {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.1rem, 2vw, 1.6rem);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: transparent;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
		transform var(--dur) var(--ease);
	min-height: clamp(140px, 15vw, 180px);
}

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

.idxcard__num {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 700;
	letter-spacing: var(--track-tight);
	color: var(--ink-100);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.idxcard__rule {
	display: block;
	height: 1px;
	background: var(--line);
	margin-block: 0.85rem 1rem;
}

/* The card's copy block. It carries the title and the count, and is pushed to
   the foot of the card so the numeral stays pinned at the top however tall a
   neighbouring card grows. */
.idxcard__text {
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--ink-300);
	margin-top: auto;
	position: static;
}

.idxcard__title {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 700;
	letter-spacing: var(--track-tight);
	line-height: 1.15;
	color: var(--ink-100);
	margin-bottom: 0.4rem;
}

/* The inverted member of the set. */
.idxcard--dark {
	background: var(--dark);
	border-color: var(--dark);
	color: var(--on-dark);
}

.idxcard--dark .idxcard__num,
.idxcard--dark .idxcard__title {
	color: var(--on-dark);
}

.idxcard--dark .idxcard__rule {
	background: var(--line-dark);
}

.idxcard--dark .idxcard__text {
	color: var(--on-dark-dim);
}

.idxcard--dark:hover {
	background: var(--dark-2);
	border-color: var(--dark-2);
}

/* A whole card that is a link: the anchor's ::after covers the panel, so the
   card is clickable with exactly one anchor in the accessibility tree. */
.idxcard__link {
	display: block;
}

.idxcard__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* The title sits inside the stretched link, so it inherits the hover rather
   than carrying its own. */
.idxcard__link .idxcard__title {
	display: block;
	transition: opacity var(--dur) var(--ease);
}

.idxcard:hover .idxcard__link .idxcard__title {
	opacity: 0.62;
}

/* The desks plate's overflow row — every beat that did not get a card. */
.desks__more {
	margin-top: clamp(0.85rem, 1.8vw, 1.15rem);
}

/* ── 6. Header / navigation ─────────────────────────────────────────────
   The masthead is itself a plate: a rounded white bar floating on the board,
   sticky at the top of the viewport. Wordmark left, desks inline, utilities
   right — collapsing to a drawer below 1080px.
   ------------------------------------------------------------------------ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	padding-top: var(--plate-gap);
	padding-bottom: 0;
	/* The board shows through above the bar as it scrolls, so the bar reads as
	   a plate rather than as a docked toolbar. */
	background: linear-gradient(var(--board) 0 70%, transparent);
	transition: padding var(--dur) var(--ease);
}

.masthead {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
	padding: 0.85rem clamp(1rem, 2.2vw, 1.6rem);
	background: var(--plate);
	border-radius: var(--radius-pill);
	box-shadow: var(--lift);
	transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}

.site-header--scrolled .masthead {
	box-shadow: var(--lift-hi);
	background: var(--plate-pure);
}

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

.site-logo,
.masthead__brand .custom-logo-link {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-display);
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-100);
	line-height: 1;
}

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

/* ── The desk list ─────────────────────────────────────────────────────── */
.nav-primary {
	flex: 1;
	min-width: 0;
}

.nav-menu {
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.15rem;
}

.nav-list a {
	display: inline-block;
	padding: 0.5em 0.85em;
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--ink-400);
	letter-spacing: 0.02em;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
	white-space: nowrap;
}

.nav-list a:hover {
	background: var(--plate-2);
	color: var(--ink-100);
}

.nav-list .current-menu-item > a,
.nav-list .current_page_item > a,
.nav-list .current-cat > a {
	background: var(--ink-100);
	color: var(--plate-pure);
}

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

/* ── Utilities: the menu toggle ────────────────────────────────────────── */
.masthead__util {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
	margin-left: auto;
}

/* The masthead's one filled pill. It carries more vertical presence than a
   plain --sm pill: it is the only solid control in the bar, and at the small
   size it read as slight against the wordmark and the nav row. The extra
   height comes from the button rather than from padding alone, so the badge
   inside it stays centred (see .btn .arrow-badge). */
.masthead__cta {
	display: inline-flex;
	min-height: 3.15em;
	padding-inline: 1.35em;
}

.menu-pill {
	display: none;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6em 1.1em;
	border: 1px solid var(--line-firm);
	border-radius: var(--radius-pill);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-100);
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.menu-pill:hover {
	background: var(--ink-100);
	border-color: var(--ink-100);
	color: var(--plate-pure);
}

.menu-pill__bars {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	width: 15px;
}

.menu-pill__bars span {
	display: block;
	height: 1.5px;
	background: currentColor;
	border-radius: 1px;
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.menu-pill__bars span:nth-child(1) { width: 100%; }
.menu-pill__bars span:nth-child(2) { width: 70%; }
.menu-pill__bars span:nth-child(3) { width: 100%; }

[aria-expanded="true"] .menu-pill__bars span:nth-child(1) {
	transform: translateY(4.5px) rotate(45deg);
}

[aria-expanded="true"] .menu-pill__bars span:nth-child(2) {
	opacity: 0;
}

[aria-expanded="true"] .menu-pill__bars span:nth-child(3) {
	width: 100%;
	transform: translateY(-4.5px) rotate(-45deg);
}

.nav-scrim {
	display: none;
}

/* ── Drawer breakpoint ─────────────────────────────────────────────────── */
@media (max-width: 1080px) {
	.menu-pill {
		display: inline-flex;
	}

	.masthead__cta {
		display: none;
	}

	.nav-primary {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(88vw, 380px);
		z-index: 300;
		display: flex;
		flex-direction: column;
		background: var(--plate);
		padding: 1.25rem;
		transform: translateX(100%);
		transition: transform var(--dur) var(--ease-out);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		flex: none;
	}

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

	.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-body);
		font-size: var(--fs-micro);
		font-weight: 600;
		letter-spacing: var(--track-eyebrow);
		text-transform: uppercase;
		color: var(--ink-400);
	}

	.nav-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border: 1px solid var(--line);
		border-radius: 50%;
		color: var(--ink-100);
		transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
	}

	.nav-close:hover {
		background: var(--ink-100);
		color: var(--plate-pure);
	}

	.nav-close svg {
		width: 15px;
		height: 15px;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		fill: none;
	}

	.nav-menu {
		display: block;
	}

	.nav-list {
		display: block;
	}

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

	.nav-list a {
		display: block;
		padding: 0.9em 0.5em;
		border-radius: var(--radius-sm);
		font-family: var(--font-display);
		font-size: 1.15rem;
		font-weight: 700;
		letter-spacing: var(--track-tight);
		color: var(--ink-100);
	}

	.nav-subscribe {
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;
		margin-top: 1.5rem;
		padding: 0.95em 1.2em;
		background: var(--ink-100);
		color: var(--plate-pure);
		border-radius: var(--radius-pill);
		font-size: var(--fs-sm);
		font-weight: 500;
	}

	.nav-subscribe .arrow-badge {
		border-color: currentColor;
	}

	.nav-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 290;
		background: rgba(17, 19, 21, 0.5);
		backdrop-filter: blur(3px);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
	}

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

	body.nav-open {
		overflow: hidden;
	}
}

@media (max-width: 560px) {
	.masthead {
		padding: 0.7rem 0.9rem;
		border-radius: var(--radius-lg);
	}
}

/* ── The reading-progress bar on single posts ──────────────────────────── */
.read-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 400;
	background: transparent;
	pointer-events: none;
}

.read-progress__fill {
	height: 100%;
	width: 0;
	background: var(--ink-100);
	transition: width 0.1s linear;
}

/* ── 7. Cards — the shared article vocabulary ──────────────────────────
   Inside a plate, an article is a card: photograph in a rounded frame, chip
   row, display headline, meta line. The card has no border and no shadow of
   its own — it sits on the plate, which is already lifted off the board.
   ------------------------------------------------------------------------ */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.card__media {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--plate-3);
	aspect-ratio: 4 / 3;
}

.card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease-out), filter var(--dur) var(--ease);
}

.card:hover .card__img {
	transform: scale(1.04);
}

/* The card's text column. The card itself is a flex column so the media frame
   and this body are spaced by the card's own gap; inside, the chips, headline,
   meta and excerpt get a tighter rhythm of their own. */
.card__body {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	min-width: 0;
}

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

.card__title {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: var(--track-tight);
	color: var(--ink-100);
	text-wrap: balance;
}

.card__title a {
	transition: opacity var(--dur) var(--ease);
}

.card__title a:hover {
	opacity: 0.6;
}

.card__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
}

.card__sep {
	opacity: 0.5;
}

.card__excerpt {
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--ink-400);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── The wide cover card ───────────────────────────────────────────────
   The photograph fills the frame and the headline burns into its lower
   third. Used to break the two-up rhythm of a card grid. */
.card--wide {
	grid-column: 1 / -1;
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	min-height: clamp(260px, 34vw, 400px);
	isolation: isolate;
	gap: 0;
}

.card--wide .card__media {
	position: absolute;
	inset: 0;
	border-radius: 0;
	aspect-ratio: auto;
	z-index: -2;
}

.card--wide .card__img {
	width: 100%;
	height: 100%;
}

.card__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		rgba(10, 12, 14, 0.88) 0%,
		rgba(10, 12, 14, 0.55) 38%,
		rgba(10, 12, 14, 0.08) 72%,
		transparent 100%
	);
}

.card--wide .card__body {
	margin-top: auto;
	padding: clamp(1.1rem, 2.5vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.card--wide .card__title {
	font-size: var(--fs-h2);
	color: var(--on-dark);
	max-width: 24ch;
}

.card--wide .card__meta {
	color: var(--on-dark-dim);
}

.card--wide .card__title a:hover {
	opacity: 0.75;
}

/* ── The card grid ─────────────────────────────────────────────────────── */
.card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.25rem, 2.6vw, 2rem);
}

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

/* ── The tile: a compact three-up entry ────────────────────────────────
   Used by "You May Have Missed", Related Posts and the 404 recovery row.
   The headline's ::after stretches over the whole tile, so the entire card
   is clickable while only one anchor exists. */
.tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.tile__media {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--plate-3);
	aspect-ratio: 4 / 3;
}

.tile__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease-out);
}

.tile:hover .tile__img {
	transform: scale(1.04);
}

/* A post with no artwork: a ruled placeholder keeps the row's headlines
   aligned rather than leaving a hole. */
.tile__media--empty {
	background:
		repeating-linear-gradient(
			-45deg,
			var(--plate-3) 0 8px,
			var(--plate-2) 8px 16px
		);
}

.tile__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.tile__rail {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.tile__title {
	font-family: var(--font-display);
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--track-tight);
	color: var(--ink-100);
	transition: opacity var(--dur) var(--ease);
}

.tile__title::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius);
}

.tile:hover .tile__title {
	opacity: 0.6;
}

.tile__date {
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
}

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

.byline__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--plate-3);
}

.byline--lg .byline__avatar {
	width: 44px;
	height: 44px;
}

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

.byline__stack {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	line-height: 1.25;
}

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

.byline__role {
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
}

.byline__sep {
	opacity: 0.5;
}

/* ── The meta row: reading time + date ─────────────────────────────────── */
.metarow {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
}

.metarow__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}

.metarow__item svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
}

.metarow--on-dark {
	color: var(--on-dark-dim);
}

/* ── The minilist: a thumbnail + headline row ─────────────────────────── */
.minilist {
	display: flex;
	flex-direction: column;
}

.minilist__item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding-block: 0.9rem;
}

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

.minilist__item:first-child {
	padding-top: 0;
}

.minilist__item:last-child {
	padding-bottom: 0;
}

.minilist__media {
	flex-shrink: 0;
	width: 68px;
	height: 52px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--plate-3);
}

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

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

.minilist__title {
	font-family: var(--font-display);
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: var(--track-tight);
	color: var(--ink-100);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.minilist__title a {
	transition: opacity var(--dur) var(--ease);
}

.minilist__title a:hover {
	opacity: 0.6;
}

.minilist__date {
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
}

/* Inverted, for the footer. */
.site-footer .minilist__item + .minilist__item {
	border-top-color: var(--line-dark-soft);
}

.site-footer .minilist__title {
	color: var(--on-dark);
}

.site-footer .minilist__date {
	color: var(--on-dark-dim);
}

.site-footer .minilist__media {
	background: var(--dark-3);
}

/* ── 8. Front page sections ────────────────────────────────────────────
   Each is a plate. The hero is the deck's title slide; the rest follow the
   reference's slide types: a numbered set, a figures row, a ranked dark
   board, a three-up grid.
   ------------------------------------------------------------------------ */

/* ── The hero plate ────────────────────────────────────────────────────
   A two-column slide: the lead story's photograph sits left in a tall
   rounded frame, the headline and the pill row sit right. Behind the whole
   thing the wordmark is set enormous and pale — the reference's ghosted
   "TERRIXA" watermark.
   ------------------------------------------------------------------------ */
.hero {
	position: relative;
	min-height: clamp(420px, 52vw, 620px);
	display: flex;
	flex-direction: column;
}

/* The ghosted wordmark. Sized off the viewport so it always spans the plate,
   parked on the baseline of the photograph. */
.hero__ghost {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(0.5rem, 3vw, 2.5rem);
	z-index: 0;
	font-family: var(--font-display);
	font-size: clamp(4rem, 17vw, 15rem);
	font-weight: 700;
	letter-spacing: var(--track-tighter);
	line-height: 0.8;
	text-align: center;
	color: rgba(17, 19, 21, 0.055);
	user-select: none;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
}

.hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 3rem);
	align-items: center;
	flex: 1;
}

/* ── The lead: a tall portrait frame ───────────────────────────────────── */
.hero-lead {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--plate-3);
	aspect-ratio: 4 / 5;
	isolation: isolate;
}

.hero-lead__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ease-out);
}

.hero-lead:hover .hero-lead__img {
	transform: scale(1.03);
}

.hero-lead__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(10, 12, 14, 0.86) 0%,
		rgba(10, 12, 14, 0.4) 42%,
		transparent 72%
	);
}

/* The cover link is its own layer so the caption's own links are not nested
   inside it — nested anchors are invalid and the parser unnests them. */
.hero-lead__link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.hero-lead__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	padding: clamp(1rem, 2.4vw, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	pointer-events: none;
}

.hero-lead__body a {
	pointer-events: auto;
}

.hero-lead__title {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: var(--track-tight);
	color: var(--on-dark);
}

.hero-lead__title a:hover {
	opacity: 0.8;
}

.hero-lead__meta {
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--on-dark-dim);
}

/* ── The hero's right column ───────────────────────────────────────────── */
.hero__stage {
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2.2vw, 1.6rem);
}

.hero__title {
	font-family: var(--font-display);
	font-size: var(--fs-hero);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: var(--track-tighter);
	color: var(--ink-100);
	text-transform: uppercase;
	text-wrap: balance;
}

/* A trailing hairline off the headline, as in the reference. */
.hero__title-rule {
	display: block;
	height: 1px;
	background: var(--line);
	margin-top: 0.35em;
}

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

/* The secondary stories, reduced to headline rows beside the hero. */
.hero__side {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--line);
}

.hero-side {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: 0.85rem;
	position: relative;
}

.hero-side + .hero-side {
	border-top: 1px solid var(--line-soft);
}

.hero-side__media {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--plate-3);
}

.hero-side__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease-out);
}

.hero-side:hover .hero-side__img {
	transform: scale(1.06);
}

.hero-side__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.hero-side__title {
	font-family: var(--font-display);
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: var(--track-tight);
	color: var(--ink-100);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hero-side__title a:hover {
	opacity: 0.6;
}

.hero-side__date {
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
}

/* The excerpt is dead weight in this compact row. */
.hero-side__excerpt {
	display: none;
}

/* The hero's social rail — the reference's small round icon row. */
.hero__social {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.hero__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--line-firm);
	border-radius: 50%;
	color: var(--ink-300);
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.hero__social a:hover {
	background: var(--ink-100);
	border-color: var(--ink-100);
	color: var(--plate-pure);
}

.hero__social svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

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

	.hero-lead {
		aspect-ratio: 16 / 10;
	}

	.hero__ghost {
		font-size: clamp(3rem, 22vw, 8rem);
	}
}

/* ── The figures plate ─────────────────────────────────────────────────
   The reference's results slide: three columns inside one outlined panel,
   divided by vertical hairlines. Here it carries the newsroom's own
   numbers — stories filed, desks covered, today's publishing.
   ------------------------------------------------------------------------ */
.figures {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.figure {
	padding: clamp(1.2rem, 2.6vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.figure + .figure {
	border-left: 1px solid var(--line);
}

.figure__value {
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--track-tighter);
	color: var(--ink-100);
	font-variant-numeric: tabular-nums;
}

.figure__label {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--track-tight);
	color: var(--ink-100);
}

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

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

	.figure + .figure {
		border-left: 0;
		border-top: 1px solid var(--line);
	}
}

/* ── The index grid — the numbered set ─────────────────────────────────── */
.idxgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(0.75rem, 1.6vw, 1.15rem);
}

/* A variant carrying a photograph as the final cell, as in the reference
   where the numbered cards sit beside a tall image.

   The four cards fill columns 1-2 over two rows; the photograph is pinned
   EXPLICITLY to column 3 spanning both of them. Auto-placement cannot do
   this: with four cards the flow fills 1,2 / 1,2 and would drop the picture
   into the next free cell rather than the empty third column. */
.idxgrid--media {
	grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 0.85fr);
	grid-auto-rows: 1fr;
}

.idxgrid__media {
	grid-column: 3;
	grid-row: 1 / span 2;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--dark);
	position: relative;
	min-height: 200px;
}

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

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

	/* The explicit column-3 placement above has to be undone, not just
	   overridden: a third column no longer exists at this width. */
	.idxgrid__media {
		grid-column: 1 / -1;
		grid-row: auto;
		min-height: 160px;
		aspect-ratio: 16 / 7;
	}
}

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

	.idxgrid__media {
		aspect-ratio: 4 / 3;
	}
}

/* ── The layout: main column + sidebar, inside a plate ─────────────────── */
.layout__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(1.5rem, 3vw, 2.75rem);
	align-items: start;
}

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

.layout__main {
	min-width: 0;
}

/* ── The section head inside a plate ───────────────────────────────────── */
.section-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: clamp(1.25rem, 2.6vw, 1.85rem);
}

.section-label {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 700;
	letter-spacing: var(--track-tight);
	color: var(--ink-100);
	line-height: 1;
	white-space: nowrap;
}

.section-head__rule {
	flex: 1;
	height: 1px;
	background: var(--line);
}

.section-head__count,
.missed__count,
.trending__live {
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}

/* ── Trending: the dark ranked board ───────────────────────────────────
   A dark plate. The #1 story runs as a framed lead on the left; ranks 02-05
   are a numbered list on the right, each row divided by a hairline.
   ------------------------------------------------------------------------ */
.trending__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: clamp(1.25rem, 2.6vw, 2rem);
}

.trending .section-label {
	color: var(--on-dark);
}

.trending__rule {
	flex: 1;
	height: 1px;
	background: var(--line-dark);
}

.trending__live {
	color: var(--on-dark-dim);
}

.trending__pip {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	animation: st-pulse 2.4s var(--ease) infinite;
}

.trending__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: start;
}

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

/* ── The trending lead ─────────────────────────────────────────────────── */
.tlead {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.tlead__media {
	position: relative;
	display: block;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--dark-3);
	aspect-ratio: 16 / 10;
}

.tlead__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease-out);
}

.tlead:hover .tlead__img {
	transform: scale(1.04);
}

/* The oversized rank numeral, outlined rather than filled, burned into the
   corner of the photograph. */
.tlead__rank {
	position: absolute;
	left: clamp(0.75rem, 2vw, 1.25rem);
	bottom: clamp(0.5rem, 1.5vw, 0.85rem);
	font-family: var(--font-display);
	font-size: clamp(3rem, 7vw, 5.5rem);
	font-weight: 700;
	line-height: 0.8;
	letter-spacing: var(--track-tighter);
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(242, 244, 247, 0.75);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.tlead__body {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.tlead__title {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: var(--track-tight);
	color: var(--on-dark);
	text-wrap: balance;
}

.tlead__title a:hover {
	opacity: 0.72;
}

.tlead__excerpt {
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--on-dark-dim);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tlead__date {
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--on-dark-faint);
}

/* ── The ranked rows ───────────────────────────────────────────────────── */
.trending__list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--line-dark);
}

.trank {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(0.85rem, 2vw, 1.4rem);
	align-items: start;
	padding-block: clamp(0.9rem, 2vw, 1.25rem);
	padding-inline: 0.5rem;
	margin-inline: -0.5rem;
	border-bottom: 1px solid var(--line-dark-soft);
	border-radius: var(--radius-sm);
	transition: background var(--dur) var(--ease);
}

.trank:hover {
	background: rgba(242, 244, 247, 0.04);
}

.trank__num {
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 1.8vw, 1.35rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--track-tight);
	color: var(--on-dark-faint);
	font-variant-numeric: tabular-nums;
	transition: color var(--dur) var(--ease);
}

.trank:hover .trank__num {
	color: var(--on-dark);
}

.trank__body {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	min-width: 0;
}

.trank__title {
	font-family: var(--font-display);
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: var(--track-tight);
	color: var(--on-dark);
}

.trank__title a:hover {
	opacity: 0.72;
}

.trank__date {
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--on-dark-faint);
}

/* ── "You May Have Missed" / Related — the three-up grid ───────────────── */
.missed__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: clamp(1.25rem, 2.6vw, 1.85rem);
}

.missed__rule {
	flex: 1;
	height: 1px;
	background: var(--line);
}

.missed__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 2.6vw, 2rem);
}

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

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

/* ── Desk strip: the category tiles ────────────────────────────────────
   A horizontal row of tall portrait tiles, each carrying a desk's cover art
   with the name burned in at the foot. The row scrolls on narrow screens
   rather than reflowing into a grid — it reads as a filmstrip.
   ------------------------------------------------------------------------ */
.deskstrip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(180px, 1fr);
	gap: clamp(0.6rem, 1.4vw, 1rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.25rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.desktile {
	position: relative;
	display: block;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--dark);
	aspect-ratio: 3 / 4;
	scroll-snap-align: start;
	isolation: isolate;
}

.desktile__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.06);
	transition: transform 0.7s var(--ease-out), filter var(--dur) var(--ease);
}

.desktile:hover .desktile__img {
	transform: scale(1.05);
	filter: grayscale(0.3) contrast(1);
}

.desktile__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(10, 12, 14, 0.9) 0%,
		rgba(10, 12, 14, 0.35) 45%,
		transparent 75%
	);
}

.desktile__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(0.75rem, 1.6vw, 1.1rem);
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.desktile__name {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: var(--track-tight);
	line-height: 1.1;
	color: var(--on-dark);
}

.desktile__count {
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--on-dark-dim);
}

/* ── Pagination ────────────────────────────────────────────────────────── */
.pagination {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

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

.pagination a,
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 0.65rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink-300);
	font-variant-numeric: tabular-nums;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.pagination a:hover {
	background: var(--ink-100);
	border-color: var(--ink-100);
	color: var(--plate-pure);
}

.pagination .current {
	background: var(--ink-100);
	border-color: var(--ink-100);
	color: var(--plate-pure);
}

.pagination .dots {
	border-color: transparent;
	min-width: 24px;
}

/* ── Empty state ───────────────────────────────────────────────────────── */
.empty {
	padding: clamp(2rem, 5vw, 4rem) 0;
	text-align: center;
	color: var(--ink-400);
}

.empty__title {
	font-size: var(--fs-h2);
	margin-bottom: 0.6rem;
}

/* ── 9. Sidebar panels ─────────────────────────────────────────────────
   Inside the layout plate the sidebar is a column of small outlined panels.
   They are NOT plates of their own — a plate inside a plate reads as a
   mistake — so they take a hairline border and the plate's own ground.
   ------------------------------------------------------------------------ */
.sidebar {
	display: flex;
	flex-direction: column;
	gap: clamp(0.9rem, 1.8vw, 1.25rem);
	min-width: 0;
}

.panel {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(1.1rem, 2.2vw, 1.5rem);
	background: transparent;
}

/* The panel heading: display face, a trailing dot as in the reference's
   small section marks. */
.panel__heading {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 700;
	letter-spacing: var(--track-tight);
	line-height: 1.15;
	color: var(--ink-100);
	margin-bottom: 1rem;
}

.panel__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ink-100);
	flex-shrink: 0;
}

.panel__intro {
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--ink-400);
	margin-bottom: 1rem;
}

/* ── The subscribe panel — inverted, the sidebar's one loud element ────── */
.panel--subscribe {
	background: var(--dark);
	border-color: var(--dark);
	color: var(--on-dark);
}

.panel--subscribe .panel__heading {
	color: var(--on-dark);
	margin-bottom: 0.85rem;
}

.panel--subscribe .panel__dot {
	background: var(--on-dark);
}

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

.cat-list__item + .cat-list__item {
	border-top: 1px solid var(--line-soft);
}

.cat-list__link {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding-block: 0.7rem;
	font-size: var(--fs-sm);
	color: var(--ink-300);
	transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}

/* The category's colour survives only as this small leading dot. */
.cat-list__link::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cat-accent, var(--ink-400));
	flex-shrink: 0;
	transition: transform var(--dur) var(--ease);
}

.cat-list__link:hover {
	color: var(--ink-100);
	padding-left: 0.3rem;
}

.cat-list__link:hover::before {
	transform: scale(1.35);
}

.cat-list__name {
	flex: 1;
	min-width: 0;
	font-weight: 500;
}

.cat-list__count {
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--ink-500);
	font-variant-numeric: tabular-nums;
}

/* ── The market snapshot ───────────────────────────────────────────────── */
.market-list {
	display: flex;
	flex-direction: column;
}

.market-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.7rem;
	transition: background var(--dur) var(--ease);
}

.market-row + .market-row {
	border-top: 1px solid var(--line-soft);
}

.market-row__id {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.market-row__label {
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--ink-200);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.market-row__sym {
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
}

/* The sparkline takes the row's direction colour through currentColor. */
.market-row__spark {
	width: 54px;
	height: 22px;
	flex-shrink: 0;
	color: var(--ink-600);
}

.market-row__spark svg {
	width: 100%;
	height: 100%;
}

.market-row__figures {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.1rem;
}

.market-row__price {
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--ink-100);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--track-tight);
}

.market-row__change {
	font-size: var(--fs-micro);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink-500);
}

/* Direction is the ONE place the design admits colour beyond the monochrome:
   a red/green market row is a convention readers depend on, and a monochrome
   ticker would be actively misleading. Both are deep enough to clear AA. */
.market-row.is-up .market-row__change,
.market-row.is-up .market-row__spark {
	color: #0F6E45;
}

.market-row.is-down .market-row__change,
.market-row.is-down .market-row__spark {
	color: #B3261E;
}

.market-row.is-flat .market-row__change {
	color: var(--ink-500);
}

/* A price that just changed flashes its row. */
.market-row.is-tick {
	background: var(--plate-2);
}

.market-foot {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.9rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--line-soft);
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
}

.market-foot__pulse {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	animation: st-pulse 2.4s var(--ease) infinite;
	flex-shrink: 0;
}

/* ── 10. Footer ────────────────────────────────────────────────────────
   The deck's closing slide: one dark plate carrying three columns, over a
   base bar with the legal menu. It is a plate like every other section, so
   the board still shows below it.
   ------------------------------------------------------------------------ */
.site-footer {
	padding-bottom: var(--plate-gap);
}

.footer__plate {
	background: var(--dark);
	color: var(--on-dark);
	border-radius: var(--plate-radius);
	padding: var(--plate-pad);
	box-shadow: var(--lift);
	overflow: hidden;
}

.footer__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3.2vw, 3rem);
}

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

.footer-col {
	min-width: 0;
}

.footer-col__heading {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 700;
	letter-spacing: var(--track-tight);
	color: var(--on-dark);
	margin-bottom: 1.1rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--line-dark);
}

/* ── The footer's base bar ─────────────────────────────────────────────── */
.footer-base {
	margin-top: var(--plate-gap);
}

.footer-base__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1rem clamp(1rem, 2.2vw, 1.6rem);
	background: var(--plate);
	border-radius: var(--radius-pill);
	box-shadow: var(--lift);
}

@media (max-width: 640px) {
	.footer-base__inner {
		border-radius: var(--radius-lg);
		justify-content: center;
		text-align: center;
	}
}

.footer-copy {
	font-size: var(--fs-xs);
	color: var(--ink-500);
}

.footer-legal__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1.25rem;
	font-size: var(--fs-xs);
}

.footer-legal__menu a {
	color: var(--ink-400);
	transition: color var(--dur) var(--ease);
}

.footer-legal__menu a:hover {
	color: var(--ink-100);
}

/* ── 11. Archive / category ────────────────────────────────────────────
   The archive's own title slide: an oversized term name, its description,
   and the post count — then the listing plate underneath.
   ------------------------------------------------------------------------ */
.archive-head {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.archive-head__kicker {
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-400);
}

.archive-head__title {
	font-family: var(--font-display);
	font-size: var(--fs-display);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: var(--track-tighter);
	color: var(--ink-100);
	text-transform: uppercase;
}

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

/* ── 12. Single post ───────────────────────────────────────────────────
   The article's own deck: a hero plate carrying the headline over the lead
   photograph, then the body plate beside the sidebar, then related.
   ------------------------------------------------------------------------ */
.single-hero {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--dark);
	min-height: clamp(280px, 40vw, 460px);
	display: flex;
	align-items: flex-end;
	isolation: isolate;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.single-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.single-hero__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		rgba(10, 12, 14, 0.92) 0%,
		rgba(10, 12, 14, 0.55) 40%,
		rgba(10, 12, 14, 0.15) 75%,
		transparent 100%
	);
}

.single-hero__body {
	padding: clamp(1.25rem, 3vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	width: 100%;
}

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

.single-hero__title {
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: var(--track-tighter);
	color: var(--on-dark);
	max-width: 24ch;
	text-wrap: balance;
}

.single-hero__meta {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--on-dark-dim);
}

.single-hero__meta svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
}

/* ── The headless variant: no artwork, ink on the plate ────────────────── */
.single-head {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding-bottom: clamp(1.25rem, 2.6vw, 1.85rem);
	margin-bottom: clamp(1.25rem, 2.6vw, 1.85rem);
	border-bottom: 1px solid var(--line);
}

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

.single-head__title {
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: var(--track-tighter);
	color: var(--ink-100);
	text-wrap: balance;
}

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

.single-head__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
}

/* ── The share row ─────────────────────────────────────────────────────── */
.share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-block: clamp(1rem, 2vw, 1.35rem);
	border-block: 1px solid var(--line);
}

.share__label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-right: 0.5rem;
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-400);
}

.share__label svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

/* The brand colour arrives inline as --share-bg and is held back until
   hover: at rest the row is monochrome like everything else. */
.share__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.5em 0.95em;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--ink-300);
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
		border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.share__btn svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
}

.share__btn:hover {
	background: var(--share-bg, var(--ink-100));
	border-color: var(--share-bg, var(--ink-100));
	color: #FFFFFF;
	transform: translateY(-1px);
}

.single-share-bottom {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.single-share-bottom .share {
	border-top: 0;
}

/* ── The article body ──────────────────────────────────────────────────── */
.single-content,
.entry-content {
	font-size: 1.0625rem;
	line-height: 1.72;
	color: var(--ink-200);
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

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

.entry-content p {
	max-width: 70ch;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: 1.9em;
	margin-bottom: 0.6em;
	text-wrap: balance;
}

.entry-content h2 {
	font-size: var(--fs-h2);
}

.entry-content h3 {
	font-size: var(--fs-h3);
}

.entry-content h4 {
	font-size: 1.05rem;
}

.entry-content a {
	color: var(--ink-100);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--line-firm);
	transition: text-decoration-color var(--dur) var(--ease);
}

.entry-content a:hover {
	text-decoration-color: var(--ink-100);
}

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

.entry-content ul,
.entry-content ol {
	padding-left: 1.4em;
	max-width: 70ch;
}

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

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

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

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

.entry-content blockquote {
	margin-block: 1.8em;
	padding: clamp(1.1rem, 2.4vw, 1.75rem);
	background: var(--plate-2);
	border-radius: var(--radius-lg);
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--track-tight);
	color: var(--ink-100);
}

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

.entry-content blockquote cite {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: 500;
	font-style: normal;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
}

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

.entry-content figure {
	margin-block: 1.8em;
}

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

.entry-content code {
	padding: 0.15em 0.4em;
	background: var(--plate-2);
	border-radius: 4px;
	font-size: 0.9em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.entry-content pre {
	padding: clamp(1rem, 2vw, 1.5rem);
	background: var(--dark);
	color: var(--on-dark);
	border-radius: var(--radius);
	overflow-x: auto;
	font-size: var(--fs-sm);
	line-height: 1.6;
}

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

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

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

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

.entry-content th {
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-400);
	border-bottom-color: var(--line-firm);
}

.entry-content tbody tr:nth-child(odd) {
	background: var(--plate-2);
}

/* ── Tags ──────────────────────────────────────────────────────────────── */
.single-tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.45rem;
	padding-top: clamp(1.25rem, 2.4vw, 1.75rem);
	border-top: 1px solid var(--line);
}

.single-tags__label {
	margin-right: 0.4rem;
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-400);
}

.single-tags a {
	display: inline-flex;
	align-items: center;
	padding: 0.42em 0.85em;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--ink-300);
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.single-tags a:hover {
	background: var(--ink-100);
	border-color: var(--ink-100);
	color: var(--plate-pure);
}

/* ── Previous / next ───────────────────────────────────────────────────── */
.postnav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.6vw, 1.15rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

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

.postnav__item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1rem, 2vw, 1.4rem);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
	min-height: 96px;
}

.postnav__item:hover {
	border-color: var(--line-firm);
	background: var(--plate-2);
}

.postnav__item:empty {
	display: none;
}

.postnav__item--next {
	text-align: right;
	align-items: flex-end;
}

.postnav__label {
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
}

.postnav__title {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: var(--track-tight);
	color: var(--ink-100);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── 13. Static page ───────────────────────────────────────────────────── */
.page-header {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-bottom: clamp(1.25rem, 2.6vw, 1.85rem);
	border-bottom: 1px solid var(--line);
}

.page-header__title {
	font-family: var(--font-display);
	font-size: var(--fs-display);
	font-weight: 700;
	line-height: 0.99;
	letter-spacing: var(--track-tighter);
	color: var(--ink-100);
	text-transform: uppercase;
}

.page-header__updated {
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
}

.page-hero {
	margin-top: clamp(1.25rem, 2.6vw, 1.85rem);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--plate-3);
}

.page-hero__img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* ── 14. Thank-you / 404 ───────────────────────────────────────────────── */
.thanks__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
	padding-block: clamp(1.5rem, 4vw, 3rem);
	max-width: 62ch;
	margin-inline: auto;
}

.thanks__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: var(--ink-100);
	color: var(--plate-pure);
	margin-bottom: 0.5rem;
}

.thanks__badge svg {
	width: 28px;
	height: 28px;
}

.thanks__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-400);
}

.thanks__pip {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	animation: st-pulse 2.4s var(--ease) infinite;
}

.thanks__title {
	font-family: var(--font-display);
	font-size: var(--fs-display);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: var(--track-tighter);
	color: var(--ink-100);
	text-wrap: balance;
}

.thanks__sub {
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--ink-300);
}

.thanks__note {
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--ink-500);
}

.thanks__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 0.75rem;
}

/* ── 404 ───────────────────────────────────────────────────────────────── */
.error404 {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	isolation: isolate;
	min-height: clamp(300px, 36vw, 420px);
}

/* The oversized numeral, outlined and parked behind the copy. */
.error404__code {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: -1;
	font-family: var(--font-display);
	font-size: clamp(9rem, 26vw, 22rem);
	font-weight: 700;
	line-height: 0.78;
	letter-spacing: var(--track-tighter);
	color: transparent;
	-webkit-text-stroke: 2px rgba(17, 19, 21, 0.1);
	user-select: none;
	pointer-events: none;
	font-variant-numeric: tabular-nums;
}

.error404__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 60ch;
}

.error404__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-400);
}

.error404__kicker .brief__pip,
.brief__pip {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	animation: st-pulse 2.4s var(--ease) infinite;
}

.error404__title {
	font-family: var(--font-display);
	font-size: var(--fs-display);
	font-weight: 700;
	line-height: 1.01;
	letter-spacing: var(--track-tighter);
	color: var(--ink-100);
	text-transform: uppercase;
	text-wrap: balance;
}

.error404__desc {
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--ink-400);
}

.error404__search {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.error404__input {
	flex: 1;
	min-width: 200px;
	padding: 0.85em 1.2em;
	border: 1px solid var(--line-firm);
	border-radius: var(--radius-pill);
	background: var(--plate-pure);
	color: var(--ink-100);
	font-size: var(--fs-sm);
	transition: border-color var(--dur) var(--ease);
}

.error404__input::placeholder {
	color: var(--ink-500);
}

.error404__input:focus {
	outline: none;
	border-color: var(--ink-100);
}

.error404__back a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink-100);
	transition: gap var(--dur) var(--ease);
}

.error404__back a:hover {
	gap: 0.85rem;
}

/* ── The search form (core markup) ─────────────────────────────────────── */
.search-form {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 1rem;
}

.search-form label {
	flex: 1;
	min-width: 200px;
}

.search-field {
	width: 100%;
	padding: 0.85em 1.2em;
	border: 1px solid var(--line-firm);
	border-radius: var(--radius-pill);
	background: var(--plate-pure);
	color: var(--ink-100);
	font-size: var(--fs-sm);
}

.search-field:focus {
	outline: none;
	border-color: var(--ink-100);
}

.search-submit {
	padding: 0.85em 1.6em;
	border: 1px solid var(--ink-100);
	border-radius: var(--radius-pill);
	background: var(--ink-100);
	color: var(--plate-pure);
	font-size: var(--fs-sm);
	font-weight: 500;
	cursor: pointer;
	transition: background var(--dur) var(--ease);
}

.search-submit:hover {
	background: var(--dark-3);
}

/* ── 15. Utilities, motion, print ──────────────────────────────────────── */

/* Scroll reveal. Content must never DEPEND on the observer firing, so the
   no-JS case is visible from the start. */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.js [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

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

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

	.js [data-reveal] {
		opacity: 1;
		transform: none;
	}
}

@media print {
	.site-header,
	.site-footer,
	.sidebar,
	.share,
	.single-share-bottom,
	.postnav,
	.missed,
	.trending,
	.read-progress,
	.nav-scrim {
		display: none !important;
	}

	body {
		background: #FFFFFF;
		color: #000000;
	}

	.plate {
		box-shadow: none;
		border-radius: 0;
		padding: 0;
		background: #FFFFFF;
	}
}