@charset "UTF-8";
/* ==========================================================================
   Sovereign Terminal v11 — "Signal Dark"
   --------------------------------------------------------------------------
   A men's health publication, rebuilt as one committed dark world.

   The clinical build this replaces was a cool pale blue-grey field carrying a
   mosaic of unequal flat tiles, navy ink, a serif headline and a true italic
   as its recurring gesture. It read as a medical report. This reader is not
   filing a report — he is deciding what to do this week — and the design now
   reads like a modern men's health brand rather than a journal.

   THE GROUND. Near-black with a blue-grey cast, the whole way down: front
   page, archive, article, footer. One world, no light escape hatch. Content
   sits on RAISED SURFACES that are lifted by value rather than by shadow,
   which is how depth actually works on a dark UI — a drop shadow under a card
   on near-black is invisible, so elevation is carried by a lighter surface
   plus a hairline top highlight.

   COLOUR. Amber is the only bright thing on the page. Every action, every
   link, every live state, the focus ring and the recurring display gesture
   are amber; nothing else competes with it. The topic hues are retuned to sit
   on charcoal — each is brighter and slightly desaturated compared with the
   light build, because a colour that read as "teal" on pale blue-grey reads
   as "black" on near-black. Amber is deliberately kept OUT of the topic
   palette so it never stops meaning "this is actionable".

   TYPE. One family. Inter Tight does everything — display, body, navigation,
   figures, labels — at a wide weight range. The serif is gone, and with it
   the italic gesture. Its replacement is the AMBER SECOND LINE: where a
   display pair wants emphasis, the second line is set in amber at the same
   size and weight. The <em> elements the templates already carry are restyled
   into that gesture rather than removed, so the markup did not have to churn.

   Headlines are set at 700 with tight negative tracking. That heavy, tight
   sans is the single biggest contributor to the reference's feel; nothing
   else in the file matters as much.

   No tracked-out capitals anywhere. Section labels stay sentence case,
   preceded by a small amber dot and a short rule.

   RADIUS. Generous and soft — 28px on panels, 24px on cards, 999px on every
   control. The clinical build's 10px corners belonged to a document; this is
   a publication a reader chooses to spend time in.

   SPACE. Considerably more of it than the build this replaces. The reference's
   authority comes largely from how much room it gives each section, and a
   dark ground needs that room even more, because dark surfaces read heavier.

   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 ──────────────────────────────────────────────────────────
	   Near-black carrying a blue-grey cast rather than a warm one: the warmth
	   on this page comes from the amber, and a warm-black ground underneath
	   it would leave nothing for the amber to be warm AGAINST.

	   Four steps, each a real step in value so elevation is legible without
	   shadow:
	     --ground       the page
	     --ground-lift  a band that needs to separate from the page
	     --surface      a card
	     --surface-hi   a card being hovered, and every input well */
	--ground: #101216;
	--ground-lift: #171A20;
	--surface: #1C2027;
	--surface-hi: #242932;
	--surface-deep: #0C0E11;

	/* ── Text ────────────────────────────────────────────────────────────
	   Warm off-white rather than pure white. Pure white on near-black is a
	   contrast ratio of 19:1 and reads as glare at body size; pulling it
	   warm and slightly down lands at 15:1, which is still far past AA and
	   is markedly more comfortable over a long article.

	   Every step below is measured against --ground:
	     --text        15.1:1  body and headlines
	     --text-muted   8.2:1  standfirsts, secondary copy
	     --text-dim     4.9:1  meta, timestamps, counts — clears AA at all sizes
	     --text-faint   3.1:1  rules and decorative numerals ONLY, never text */
	--text: #F3F1ED;
	--text-muted: #A8AFBA;
	--text-dim: #7F8896;
	--text-faint: #4A515C;

	/* ── Amber — the action colour ───────────────────────────────────────
	   One hue carries every action, link, live state and display accent.
	   --amber clears AA as text on the ground (7.1:1) and on --surface
	   (5.9:1), so a link never needs a second lighter variant to be
	   readable inside a card.

	   --amber-ink is the text colour used ON a filled amber control: near
	   black, because white on amber is 2.4:1 and fails outright. */
	--amber: #E58A3C;
	--amber-lift: #F2A15C;
	--amber-deep: #C46E27;
	--amber-ink: #17120C;
	--amber-wash: rgba(229, 138, 60, 0.10);
	--amber-tint: rgba(229, 138, 60, 0.18);
	--amber-edge: rgba(229, 138, 60, 0.34);

	/* The alert flag. Reserved for genuinely wrong states — a failed form,
	   an error notice. Never decorative. */
	--flag: #E5604A;
	--flag-wash: rgba(229, 96, 74, 0.14);
	--ok: #6FBF73;
	--ok-wash: rgba(111, 191, 115, 0.14);

	/* ── Compatibility aliases ───────────────────────────────────────────
	   The previous builds named the system colour --accent and the ink ramp
	   --ink-N, and both names are still used across several hundred lines of
	   sidebar, archive, single-post and utility rules. Renaming every call
	   site would touch far more than it changes, so they are aliased onto the
	   new scale here.

	   --ink now resolves to TEXT, not to a dark value: on a dark ground the
	   "ink" is the light colour. Anything that used --ink as a dark FILL has
	   been rewritten to --surface explicitly rather than aliased, because
	   there is no single correct alias for a token that meant both. */
	--ink: var(--text);
	--ink-200: var(--text);
	--ink-300: var(--text-muted);
	--ink-400: var(--text-muted);
	--ink-500: var(--text-dim);
	--ink-600: var(--text-faint);

	--accent: var(--amber);
	--accent-deep: var(--amber-deep);
	--accent-tint: var(--amber-tint);
	--accent-wash: var(--amber-wash);
	--signal: var(--amber);
	--signal-deep: var(--amber-deep);
	--signal-lift: var(--amber-lift);
	--signal-tint: var(--amber-tint);
	--signal-wash: var(--amber-wash);
	--lav: var(--amber);
	--flag-tint: var(--flag-wash);

	--ground-alias: var(--ground);
	--tile-blue: var(--surface);
	--tile-blue-deep: var(--surface-hi);
	--surface-sink: var(--ground-lift);

	/* ── The topic hues ──────────────────────────────────────────────────
	   Retuned for the dark ground. These match st_chip_palette() in
	   functions.php — a change in one has to be made in the other.

	   Every value clears AA (4.5:1) as text on --ground AND on --surface,
	   which is the constraint that set them: the light build's #0F6F73 teal
	   is 1.9:1 on this ground and would have been unreadable. Amber is
	   absent on purpose — it belongs to actions alone. */
	--teal: #4FB3B0;
	--slate: #8CA4DC;
	--moss: #7DB26B;
	--sand: #D9A05B;
	--cool: #6E9BE8;
	--neutral: #9AA4B2;

	/* Retained alias: several rules still reference --amber as a TOPIC hue
	   from the light build. Pointed at sand so a topic never collides with
	   the action colour. */
	--topic-amber: var(--sand);

	/* Tints for tinted plates, as translucent overlays rather than solid
	   values — on a dark ground a translucent tint picks up whatever surface
	   it sits on, so one token works on the page and inside a card. */
	--tint-blue: rgba(110, 155, 232, 0.10);
	--tint-teal: rgba(79, 179, 176, 0.10);
	--tint-slate: rgba(140, 164, 220, 0.10);
	--tint-sand: rgba(217, 160, 91, 0.10);

	/* ── Lines and elevation ─────────────────────────────────────────────
	   Lines are light-on-dark at low alpha. --edge-hi is the hairline
	   highlight along a raised surface's top edge: it is what makes a card
	   read as lifted on a ground too dark to take a shadow. */
	--line: rgba(243, 241, 237, 0.09);
	--line-soft: rgba(243, 241, 237, 0.06);
	--line-firm: rgba(243, 241, 237, 0.16);
	--edge-hi: rgba(255, 255, 255, 0.06);

	/* Shadow still exists, but it is doing a different job than on the light
	   build: it separates a floating element from what is DIRECTLY behind it
	   (a modal, a drawer, a scrolled masthead) rather than lifting cards. */
	--shade: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shade-lift: 0 2px 6px rgba(0, 0, 0, 0.3), 0 18px 40px -24px rgba(0, 0, 0, 0.8);
	--shade-panel: 0 32px 80px -40px rgba(0, 0, 0, 0.9);

	/* ── Type ────────────────────────────────────────────────────────────
	   One family. The --font-display alias is kept pointing at the same
	   stack so the several dozen rules that ask for it need no edit; there
	   is simply no longer a second family for it to resolve to. */
	--font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-display: var(--font-body);

	/* Display ramp. Larger and heavier than the clinical build at every step
	   — the reference's headlines are big, tight and bold, and a ramp that
	   tops out at 68px in a 400-weight serif cannot get there. */
	--fs-claim: clamp(2.75rem, 6vw, 5rem);
	--fs-h1: clamp(2.25rem, 4.5vw, 3.5rem);
	--fs-h2: clamp(1.75rem, 3.2vw, 2.5rem);
	--fs-h3: clamp(1.25rem, 2vw, 1.5rem);
	--fs-h4: 1.0625rem;

	--fs-figure: clamp(2.75rem, 4.8vw, 4rem);

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

	/* Display tracking is tighter than the light build's, because weight 700
	   at large sizes opens up optically and needs pulling back in. */
	--track-tight: -0.022em;
	--track-claim: -0.035em;

	/* ── Radius ──────────────────────────────────────────────────────────
	   Soft throughout. Controls are pills; everything else is generously
	   rounded. */
	--r-pill: 999px;
	--r-img: 16px;
	--r-card: 24px;
	--r-plate: 20px;
	--r-panel: 28px;
	--r-sm: 12px;

	/* ── Measure and rhythm ──────────────────────────────────────────────
	   --band-y is roughly 40% larger than the clinical build's. The space
	   between sections is doing real work here. */
	--measure: 68ch;
	--container: 1280px;

	/* The breakout grid's other two widths.

	   --w-wide is the track the panel bands sit on. It is only 80px wider
	   than --container, not the 200px first tried: the step between a
	   full-bleed panel and an ordinary section has to read as a deliberate
	   tier rather than as two sections that failed to line up, and at a
	   200px difference the page looked misaligned at every viewport below
	   about 1500px, where the wide track simply ate the whole page margin.

	   --w-narrow is the reading measure. It is close to --measure (68ch) but
	   set in rem so the grid track does not change width with the font, which
	   would relayout the whole page. */
	--w-wide: 1360px;
	--w-narrow: 46rem;
	--gutter: clamp(1.125rem, 3.5vw, 2.5rem);
	--band-y: clamp(4rem, 8vw, 7rem);
	--gap: clamp(1rem, 1.4vw, 1.5rem);

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

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

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Tells the UA to draw form controls, scrollbars and the overscroll
	   gutter dark. Without it a dark page gets a white scrollbar and white
	   native selects, which is the tell that a site was recoloured rather
	   than designed dark. */
	color-scheme: dark;
}

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

body {
	margin: 0;
	background: var(--ground);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.65;
	font-weight: 400;
	/* Dark text on a light ground benefits from subpixel smoothing; LIGHT
	   text on a dark ground does not — it renders too heavy and the
	   counters fill in. Antialiased is the correct choice for an inverted
	   UI and it is why this rule exists. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

/* Photography on a dark ground reads brighter and more saturated than it
   does on white, because the eye adapts to the surround. A very slight pull
   on both brings editorial images back to where they were intended, and
   stops a stock photograph glaring out of a card. */
.card__img,
.post-hero__img,
.minilist__img {
	filter: saturate(0.94) brightness(0.96);
}

a {
	color: var(--amber);
	text-decoration: none;
}

a:hover {
	color: var(--amber-lift);
}

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

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: var(--track-tight);
	color: var(--text);
	text-wrap: balance;
}

p {
	margin: 0 0 1em;
}

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

ul, ol {
	margin: 0;
	padding: 0;
}

/* ── The display gesture ──────────────────────────────────────────────
   The clinical build set the second line of a display pair in a true serif
   italic. There is no serif here, so the gesture is now COLOUR: an <em>
   inside a display heading is amber, upright, and at the same weight as the
   line above it.

   Scoped to the headings that actually carry the device rather than applied
   to every <em> on the site — an <em> inside article prose is emphasis in
   running text and must stay italic, which is what a reader and a screen
   reader both expect of it. */
.claim-tile__title em,
.guides__title em,
.signal__title em,
.band__title em,
.page-head__title em,
.st-modal__title em,
.footer-brand__text em,
.hero__claim em {
	display: block;
	color: var(--amber);
	font-style: normal;
	font-weight: inherit;
}

/* ── Selection and focus ──────────────────────────────────────────────
   One focus ring for the whole site, in the action colour, with an offset
   so it never sits on top of the thing it is ringing. */
::selection {
	background: var(--amber);
	color: var(--amber-ink);
}

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

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.85rem 1.5rem;
	border-radius: var(--r-pill);
	background: var(--amber);
	color: var(--amber-ink);
	font-size: var(--fs-small);
	font-weight: 600;
}

.skip-link:focus {
	left: var(--gutter);
	top: 1rem;
	color: var(--amber-ink);
}

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

/* The read-progress bar on single posts. */
.read-progress {
	position: fixed;
	inset: 0 0 auto;
	z-index: 120;
	height: 3px;
	background: transparent;
	pointer-events: none;
}

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

/* ── 3. Bands ────────────────────────────────────────────────────────────
   Every section on every template is a band: a full-width strip with a
   measured inner container. Modifiers change the band's GROUND, which is how
   the page gets its rhythm — on a single-value dark site the alternative
   would be an undifferentiated column of cards from masthead to footer. */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

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

/* ── The breakout grid ────────────────────────────────────────────────
   .band__inner was a centred max-width box: one column, the same for every
   band, and anything that needed to be wider than it had to escape with
   negative margins computed against a clamp() — which is fragile, and which
   is why the hero and the two panel bands each carried their own bespoke
   padding instead of using it.

   It is now a GRID of named tracks. Children are placed on `content` by
   default and can opt into a wider one by name, so a full-bleed panel is a
   class on the panel rather than a rule on its parent, and the element that
   wants the width is the one that asks for it.

       full ─┤                                              ├─ full
             │  wide ─┤                            ├─ wide  │
             │        │  content ─┤      ├─ content│        │
             │        │           │narrow│         │        │
       ┌─────┴────────┴───────────┴──────┴─────────┴────────┴─────┐
       │      │        │          │ 68ch │         │        │     │
       └──────────────────────────────────────────────────────────┘

   The outer `minmax(--gutter, 1fr)` columns are the page margin: they hold
   the gutter at minimum and absorb everything left over at wide viewports,
   which is what centres the whole thing without a max-width on the box.

   The inner tracks are expressed as the DIFFERENCE between each width, so
   the named lines nest correctly at any viewport and collapse to zero rather
   than going negative when the screen is narrower than the track. min() is
   what does that clamping. */
.band__inner {
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--gutter), 1fr)
		[wide-start] minmax(0, calc((var(--w-wide) - var(--container)) / 2))
		[content-start] minmax(0, calc((var(--container) - var(--w-narrow)) / 2))
		[narrow-start] min(var(--w-narrow), 100% - var(--gutter) * 2) [narrow-end]
		minmax(0, calc((var(--container) - var(--w-narrow)) / 2)) [content-end]
		minmax(0, calc((var(--w-wide) - var(--container)) / 2)) [wide-end]
		minmax(var(--gutter), 1fr) [full-end];
}

/* Everything lands on `content` unless it says otherwise. */
.band__inner > * {
	grid-column: content;
	min-width: 0;
}

/* The three opt-outs. `is-full` also drops the gutter, because a full-bleed
   element is edge-to-edge by definition. */
.band__inner > .is-wide {
	grid-column: wide;
}

.band__inner > .is-narrow {
	grid-column: narrow;
}

.band__inner > .is-full {
	grid-column: full;
}

/* A band whose whole content is one panel: the panel takes the wide track
   and the band__inner adds nothing of its own. Used by the hero, the guides
   slab and the closing signal panel, each of which previously hardcoded its
   own horizontal padding. */
.band--flush > .band__inner > * {
	grid-column: wide;
}

/* A band that carries its own full-bleed panel handles its own inner
   padding, so the band contributes only the vertical rhythm. */
.band--flush {
	padding-block: clamp(2rem, 4vw, 3.5rem);
}

/* The lifted band — one step up from the page. Used where a section needs to
   separate without going to a full panel. */
.band--tint {
	background: var(--ground-lift);
}

/* A hairline above a band, for where two same-value bands meet and the join
   would otherwise be invisible. */
.band--ruled {
	border-top: 1px solid var(--line-soft);
}

.band--head {
	padding-block: clamp(3rem, 6vw, 5rem) 0;
}

/* The listing that follows an archive's head closes the gap between them:
   both bands carry their own vertical rhythm, and stacked they left a hole
   the height of a card between the title and the first row. */
.band--head + .listing {
	padding-top: clamp(2rem, 4vw, 3rem);
}

.band__body {
	margin-top: clamp(2rem, 3.5vw, 3rem);
}

/* ── The band head ────────────────────────────────────────────────────
   The eyebrow behind a small amber dot and rule, the heading beneath it, and
   an optional "view all" link pushed to the right on the heading's baseline.

   The clinical build put the link on the eyebrow's baseline. It sits with the
   HEADING here because the heading is now considerably larger and heavier,
   and a link floating beside a small label above a big headline reads as
   detached from both. */
.band__head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 1rem 2rem;
}

.band__eyebrow {
	grid-column: 1 / -1;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.85rem;
	color: var(--text-muted);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0;
}

/* The dot and the rule. The dot is the amber; the rule carries it away into
   the page. Together they are this design's section marker, replacing the
   light build's solid coloured bar. */
.band__eyebrow::before {
	content: "";
	flex: none;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--amber);
	box-shadow: 0 0 0 4px var(--amber-wash);
}

.band__eyebrow::after {
	content: "";
	width: 1.75rem;
	height: 1px;
	background: var(--line-firm);
}

.band__title {
	grid-column: 1;
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 700;
	letter-spacing: var(--track-tight);
}

.band__link {
	grid-column: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--text-muted);
	font-size: var(--fs-small);
	font-weight: 600;
	white-space: nowrap;
	transition: color var(--speed) var(--ease);
}

.band__link:hover {
	color: var(--amber);
}

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

	.band__link {
		grid-column: 1;
	}
}

/* The split band puts the head in a narrow left column beside its body at
   wide widths. Retained from the previous build — the front page's Latest
   and Related bands both ask for it. */
@media (min-width: 1080px) {
	.band--split .band__head {
		grid-template-columns: 1fr auto;
	}
}

/* ── 4. Typography primitives ─────────────────────────────────────────── */
.lead {
	max-width: 58ch;
	color: var(--text-muted);
	font-size: var(--fs-lead);
	line-height: 1.6;
}

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

/* The separator between meta items, drawn rather than typed so it never
   ends up read aloud. */
.meta-row > * + *::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-right: 0.85rem;
	border-radius: 50%;
	background: var(--text-faint);
	vertical-align: middle;
}

.guide__dot {
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--text-faint);
}

/* ── 5. Buttons, chips, marks ─────────────────────────────────────────
   Every control is a pill. There is one filled style (amber), one outlined
   style, and one quiet style; a page should never show more than one filled
   amber control in a single view, because that is the whole basis on which
   amber means "do this". */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.95rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	background: var(--surface-hi);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	cursor: pointer;
	transition: background var(--speed) var(--ease),
	            color var(--speed) var(--ease),
	            border-color var(--speed) var(--ease),
	            transform var(--speed) var(--ease);
}

.btn:hover {
	background: var(--surface);
	color: var(--text);
	transform: translateY(-1px);
}

.btn:active {
	transform: none;
}

/* The filled control. Amber ground, near-black text — white on amber fails
   contrast outright, so the dark ink is not a stylistic choice. */
.btn--accent {
	background: var(--amber);
	border-color: var(--amber);
	color: var(--amber-ink);
}

.btn--accent:hover {
	background: var(--amber-lift);
	border-color: var(--amber-lift);
	color: var(--amber-ink);
}

/* The outlined control — the secondary route out of a page. */
.btn--ghost {
	background: transparent;
	border-color: var(--line-firm);
	color: var(--text);
}

.btn--ghost:hover {
	background: transparent;
	border-color: var(--amber);
	color: var(--amber);
}

/* On a panel that is itself amber-washed or lifted, the filled control
   inverts to the light value so it still reads as the filled one. */
.btn--on-accent {
	background: var(--text);
	border-color: var(--text);
	color: var(--ground);
}

.btn--on-accent:hover {
	background: #fff;
	border-color: #fff;
	color: var(--ground);
}

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

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

.btn--block {
	display: flex;
	width: 100%;
}

/* ── The arrow badge ──────────────────────────────────────────────────
   A small circled arrow that rides inside buttons and beside "view all"
   links. Decorative in every placement — the text beside it is always the
   accessible label. */
.arrow-badge {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: currentColor;
	transition: transform var(--speed) var(--ease);
}

.arrow-badge svg {
	width: 0.7rem;
	height: 0.7rem;
	/* The glyph knocks out of the filled disc, so it takes the ground's
	   value rather than currentColor. */
	stroke: var(--ground);
	stroke-width: 2.5;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

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

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

/* On the filled amber control the disc would be amber-on-amber, so it
   inverts: a dark disc with an amber glyph. */
.btn--accent .arrow-badge {
	background: var(--amber-ink);
}

.btn--accent .arrow-badge svg {
	stroke: var(--amber);
}

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

/* ── Topic chips ──────────────────────────────────────────────────────
   A category's colour appears wherever that category appears, so a reader
   can recognise a beat by hue. On the dark ground the chip is a tinted well
   in the topic's colour with the colour itself as the text — a solid filled
   chip at this size is a loud block of colour in a quiet layout, and there
   are often three of them in a card.

   --card-accent is set inline by the templates from st_term_color(). */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.75rem;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--card-accent, var(--amber)) 16%, transparent);
	color: var(--card-accent, var(--amber));
	font-size: var(--fs-micro);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	white-space: nowrap;
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

a.chip:hover {
	background: color-mix(in srgb, var(--card-accent, var(--amber)) 28%, transparent);
	color: var(--card-accent, var(--amber));
}

.chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Browsers without color-mix() get a flat translucent well and the topic
   colour as text — the hue is still carried by the text, which is the part
   that matters. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.chip {
		background: rgba(243, 241, 237, 0.08);
	}
}

/* ── 6. Header / navigation ───────────────────────────────────────────
   The masthead: brand left, menu centred, one filled control and the drawer
   toggle right. Structure is unchanged from the previous build — the logo
   still comes from the Customizer, the menu is still the same menu, and
   there is still no search.

   What changed is how it meets the page. It starts TRANSPARENT over the
   hero, so the page opens as one uninterrupted dark field rather than with
   a bar across the top; main.js adds .site-header--scrolled once the page
   moves, at which point it takes a blurred translucent plate. On a dark UI
   the blur is what sells it — a solid bar over a scrolling dark page reads
   as a seam, where a blurred one reads as glass. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	padding-block: 1rem;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background var(--speed) var(--ease),
	            box-shadow var(--speed) var(--ease),
	            border-color var(--speed) var(--ease);
}

.site-header--scrolled {
	background: rgba(16, 18, 22, 0.82);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom-color: var(--line-soft);
	box-shadow: 0 8px 32px -24px rgba(0, 0, 0, 0.9);
}

/* Without backdrop-filter the translucent plate would show the page
   scrolling through it as a smear, so those browsers get the solid ground. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header--scrolled {
		background: var(--ground);
	}
}

.masthead {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.5rem;
}

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

/* The Customizer logo. Height-capped by --logo-h, which st_enqueue_assets()
   writes inline from the saved theme mod. */
.masthead__brand .custom-logo-link {
	display: block;
	line-height: 0;
}

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

/* The Customizer logo is rendered exactly as uploaded — no invert, no blend
   mode, no recolouring. An earlier build inverted it so a dark mark drawn for
   a light header would show up here, but that mangles a logo whose colours
   are already right: this one carries its own amber, and inverting it shifted
   the brand's colour to suit the theme. A mark is the one thing on the page
   the theme does not get to restyle. If a logo does not read on this ground,
   the fix is a light version uploaded in the Customizer. */

/* The wordmark fallback, shown when no logo is uploaded. */
.site-logo {
	color: var(--text);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.site-logo:hover {
	color: var(--text);
}

.nav-primary {
	display: flex;
	justify-content: center;
	min-width: 0;
}

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

.nav-list {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-list a {
	position: relative;
	display: block;
	padding: 0.55rem 0.9rem;
	border-radius: var(--r-pill);
	color: var(--text-muted);
	font-size: var(--fs-small);
	font-weight: 500;
	white-space: nowrap;
	transition: color var(--speed) var(--ease), background var(--speed) var(--ease);
}

.nav-list a:hover,
.nav-list .current-menu-item > a,
.nav-list .current_page_item > a,
.nav-list .current-menu-parent > a {
	color: var(--text);
	background: rgba(243, 241, 237, 0.06);
}

/* The current section takes an amber dot under it rather than a filled
   background, so "where I am" and "what I am hovering" never look alike. */
.nav-list .current-menu-item > a::after,
.nav-list .current_page_item > a::after,
.nav-list .current-menu-parent > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0.15rem;
	width: 0.25rem;
	height: 0.25rem;
	margin-left: -0.125rem;
	border-radius: 50%;
	background: var(--amber);
}

.masthead__util {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* The drawer's own header and its subscribe link: both belong to the mobile
   panel and are hidden until the drawer exists. */
.nav-head,
.nav-subscribe {
	display: none;
}

/* The burger. Hidden above the breakpoint, where the full menu is on screen. */
.menu-pill {
	display: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--line-firm);
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--text);
	cursor: pointer;
	transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}

.menu-pill:hover {
	border-color: var(--amber);
}

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

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

/* The burger becomes a cross while the drawer is open. */
.menu-pill[aria-expanded="true"] .menu-pill__bars span:nth-child(1) {
	transform: translateY(5.5px) rotate(45deg);
}

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

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

.nav-scrim {
	display: none;
}

/* ── Below 1080px: the drawer ─────────────────────────────────────────
   The menu leaves the masthead and becomes a panel sliding in from the
   right, with its own header and its own subscribe link. */
@media (max-width: 1079px) {
	.menu-pill {
		display: grid;
	}

	/* Three cells become two: the brand, then the utility group. The nav
	   is a fixed-position drawer here and is taken out of flow, but it is
	   still a grid ITEM — left in the auto-placement flow it claimed the
	   second column and pushed the burger onto a row of its own under the
	   logo. Pinning both remaining children to explicit cells is what keeps
	   the masthead one row. */
	.masthead {
		grid-template-columns: auto 1fr;
	}

	.masthead__brand {
		grid-column: 1;
		grid-row: 1;
	}

	.masthead__util {
		grid-column: 2;
		grid-row: 1;
		justify-content: flex-end;
	}

	.nav-primary {
		position: static;
		grid-column: 1;
		grid-row: 1;
	}

	.nav-menu {
		position: fixed;
		inset: 0 0 0 auto;
		z-index: 160;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		width: min(22rem, 86vw);
		padding: 1.25rem var(--gutter) 2rem;
		background: var(--ground-lift);
		border-left: 1px solid var(--line);
		box-shadow: var(--shade-panel);
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 280ms var(--ease-out), visibility 280ms;
	}

	/* main.js toggles .is-open on #nav-primary — the <nav> WRAPPER — not on
	   the panel itself. The panel is the styled element, so the open state
	   has to be read off its parent. Matching the script rather than
	   changing it: the same handler also drives the scrim, the body lock,
	   focus management and the breakpoint resync, and re-pointing it at a
	   different element to suit one selector is the more fragile edit. */
	.nav-primary.is-open .nav-menu {
		transform: none;
		visibility: visible;
	}

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

	.nav-head__title {
		color: var(--text-dim);
		font-size: var(--fs-meta);
		font-weight: 600;
	}

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

	.nav-close:hover {
		border-color: var(--amber);
		color: var(--amber);
	}

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

	.nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0.15rem;
	}

	.nav-list a {
		padding: 0.85rem 0.9rem;
		border-radius: var(--r-sm);
		color: var(--text);
		font-size: 1.0625rem;
		font-weight: 600;
	}

	.nav-list .current-menu-item > a::after,
	.nav-list .current_page_item > a::after,
	.nav-list .current-menu-parent > a::after {
		left: auto;
		right: 0.9rem;
		top: 50%;
		bottom: auto;
		margin: -0.125rem 0 0;
	}

	/* The drawer's own subscribe route, so the newsletter stays one tap away
	   when the masthead control is hidden. */
	.nav-subscribe {
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		margin-top: auto;
		padding: 1rem 1.25rem;
		border-radius: var(--r-pill);
		background: var(--amber);
		color: var(--amber-ink);
		font-size: var(--fs-small);
		font-weight: 600;
	}

	.nav-subscribe:hover {
		background: var(--amber-lift);
		color: var(--amber-ink);
	}

	.nav-subscribe .arrow-badge {
		background: var(--amber-ink);
	}

	.nav-subscribe .arrow-badge svg {
		stroke: var(--amber);
	}

	/* The masthead control is hidden here — the drawer carries it instead. */
	.masthead__cta {
		display: none;
	}

	.nav-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 150;
		background: rgba(8, 9, 11, 0.72);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 280ms var(--ease), visibility 280ms;
	}

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

	/* The drawer lives inside .site-header, which is position:sticky with a
	   z-index — so it is a STACKING CONTEXT, and the panel's z-index:160 is
	   only resolved against its siblings inside the header, never against
	   the scrim at root level. The panel therefore rendered UNDER the scrim
	   and read as translucent, even though it is fully opaque.
	
	   Raising the whole header above the scrim while the drawer is open is
	   the fix: the panel goes with it, and the header itself is what the
	   close button and the burger sit on, so both stay reachable. Scoped to
	   the open state so the masthead keeps its normal z-index the rest of
	   the time. */
	body.nav-open .site-header {
		z-index: 170;
	}

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

@media (prefers-reduced-motion: reduce) {
	.nav-menu,
	.nav-scrim {
		transition: none;
	}
}

/* ── 7. Cards ─────────────────────────────────────────────────────────
   One article vocabulary, shared by the front page, the archives and the
   related band. Two styles: 'photo' carries a featured image, 'plate' is the
   same card without one. card.php picks between them and degrades a photo
   card with no image to a plate on its own.

   On the dark ground the card is a raised SURFACE with a hairline top
   highlight. The image bleeds to the card's top edge rather than sitting in
   an inset well — the inset well was a light-build device for separating a
   photograph from white paper, and on a dark card it just draws a box. */
.cardrow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	gap: var(--gap);
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--surface);
	transition: background var(--speed) var(--ease),
	            border-color var(--speed) var(--ease),
	            transform var(--speed) var(--ease);
}

/* The top-edge highlight: a 1px light line along the card's upper rim,
   fading out at the sides. This is what makes a surface read as lifted on a
   ground too dark to take a shadow. */
.card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--edge-hi) 22%, var(--edge-hi) 78%, transparent);
	pointer-events: none;
	z-index: 3;
}

.card:hover {
	background: var(--surface-hi);
	border-color: var(--line-firm);
	transform: translateY(-3px);
}

.card__media {
	position: relative;
	z-index: 2;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--surface-hi);
}

.card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The zoom grows the image from its BOTTOM edge, not its centre.
	   Scaling from the centre pushes the photograph's foot down past the
	   fade below, so the enlarged bottom edge lands on the card body as a
	   hard line — the fade is drawn at a fixed height and cannot follow it.
	   Anchoring the transform to the bottom keeps that edge exactly where
	   the gradient already covers it, and the zoom reads the same. */
	transform-origin: 50% 100%;
	transition: transform 400ms var(--ease-out), filter var(--speed) var(--ease);
}

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

/* A gradient at the image's foot, so the card's surface and the photograph
   meet in a fade rather than on a hard line.

   It is raised above the image (z-index) and overshoots the media box by a
   pixel at the bottom, so no subpixel rounding during the zoom's transition
   can leave a sliver of un-faded photograph showing beneath it. */
.card__media::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px;
	z-index: 1;
	height: 48%;
	background: linear-gradient(to top, var(--surface) 12%, transparent);
	pointer-events: none;
}

.card:hover .card__media::after {
	background: linear-gradient(to top, var(--surface-hi) 12%, transparent);
}

.card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.65rem;
	padding: 1.35rem 1.5rem 1.5rem;
}

/* The photo card's body overlaps the image's fade, which is what closes the
   gap between the picture and the text. */
.card--photo .card__body {
	position: relative;
	z-index: 2;
	margin-top: -1.5rem;
}

.card__topic {
	position: relative;
	z-index: 2;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.7rem;
	border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--card-accent, var(--amber)) 16%, transparent);
	color: var(--card-accent, var(--amber));
	font-size: var(--fs-micro);
	font-weight: 600;
	line-height: 1.3;
}

.card__topic:hover {
	background: color-mix(in srgb, var(--card-accent, var(--amber)) 28%, transparent);
	color: var(--card-accent, var(--amber));
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.card__topic { background: rgba(243, 241, 237, 0.08); }
}

.card__title {
	margin: 0;
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

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

.card__title a:hover {
	color: var(--amber);
}

/* The whole card is clickable via a stretched link on the headline, so the
   target is the card rather than three words of it. The media link and the
   topic chip are raised above it so they keep their own behaviour. */
.card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.card__text {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--fs-small);
	line-height: 1.6;
}

.card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--line-soft);
	color: var(--text-dim);
	font-size: var(--fs-meta);
	font-weight: 500;
}

.card__foot .arrow-badge {
	color: var(--text-faint);
	transition: color var(--speed) var(--ease);
}

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

/* The plate card — no photograph. It takes a very soft wash in the topic's
   colour so a run of plates is not a run of identical grey boxes. */
.card--plate {
	background: linear-gradient(
		160deg,
		color-mix(in srgb, var(--card-accent, var(--amber)) 7%, var(--surface)),
		var(--surface) 60%
	);
}

.card--plate:hover {
	background: linear-gradient(
		160deg,
		color-mix(in srgb, var(--card-accent, var(--amber)) 11%, var(--surface-hi)),
		var(--surface-hi) 60%
	);
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.card--plate { background: var(--surface); }
	.card--plate:hover { background: var(--surface-hi); }
}

.card--plate .card__body {
	padding-block: 1.6rem;
}

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

/* ── The hero — the diagonal ──────────────────────────────────────────
   Every earlier version of this section was a STACK: a block of type, then
   a row of cards under it. Swapping which cards were in the row never
   changed that — it still read as two horizontal bands.

   This has no rows at all. A 12-column × 12-row grid in which nothing
   shares a baseline with anything else: the claim's two lines sit on
   different indents, the three cards step down and left at three different
   sizes, and the figures run vertically down the left edge instead of as a
   strip underneath.

   The colours are unchanged — same amber, same charcoal, same wash. Only
   the composition is new. */
.hero {
	position: relative;
	padding-top: clamp(1rem, 2vw, 1.75rem);
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
	overflow: hidden;
}

/* The wash, angled to follow the diagonal the content runs along rather
   than sitting square in the corner. */
.hero::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto;
	height: 130%;
	background:
		radial-gradient(48% 52% at 82% 14%, rgba(229, 138, 60, 0.34), transparent 64%),
		radial-gradient(38% 40% at 58% 46%, rgba(229, 138, 60, 0.14), transparent 62%),
		radial-gradient(44% 46% at 16% 84%, rgba(110, 155, 232, 0.12), transparent 64%);
	pointer-events: none;
	z-index: 0;
}

/* ── The grid ─────────────────────────────────────────────────────────
   12 columns; rows are auto so the section takes the height its content
   needs. Every child is placed explicitly — there is no auto-flow here,
   because the whole point is that the positions are composed. */
.herox {
	grid-column: wide;
	position: relative;
	z-index: 1;
	display: grid;
	/* Two independent zones, not twelve shared columns.
	
	   The first attempt placed the type and the cards on one 12-column grid
	   with shared rows. Because a grid row is as tall as its tallest item,
	   each card's height then drove the row its neighbouring paragraph sat
	   in — which opened a 400px hole down the middle of the text column and
	   pushed the section to 1674px.
	
	   Splitting them means the diagonal is built INSIDE the right-hand zone,
	   where it is a composition of three cards, while the left zone stacks
	   normally. The two only have to agree on total height. */
	grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
	column-gap: clamp(1.5rem, 3vw, 3.5rem);
	/* STRETCH, not start. The copy zone has to be as tall as the card stack
	   for its own 1fr row to have anything to distribute — at `start` it
	   stayed 369px tall, the flexible row computed to 0px, and the type
	   never moved. Stretching hands it the stack's full height, and the
	   push-to-bottom inside it then works. */
	align-items: stretch;
}

/* The left zone: claim, standfirst, buttons — a normal stack, with the
   figure rail running down its outer edge. */
.herox__copy {
	display: grid;
	/* Three rows: the type sits in the middle one, and the figure rail spans
	   all of them down the left. The empty first and third rows are what let
	   the copy centre itself against the card stack WITHOUT the section
	   growing — a fixed top offset left a dead quadrant under the buttons,
	   because the copy is much shorter than three stacked cards. */
	grid-template-columns: auto minmax(0, 1fr);
	/* One flexible row ABOVE the type, none below: the block is pushed to
	   the bottom of its column rather than centred in it.
	
	   Centred, the type sat opposite card 1 and left a dead quadrant under
	   the buttons — the copy is roughly 370px against a 760px stack, so
	   centring splits that 390px difference into two visible holes. Pushed
	   down, the whole difference becomes ONE gap at the top, where the
	   amber wash already lives and reads as deliberate space rather than as
	   something missing. It also puts the claim opposite the lower pair of
	   cards, which steepens the diagonal. */
	/* 0.55fr above, 0.45fr below — pushed down, but not all the way.
	
	   At a full 1fr-above/none-below the claim started 499px down the page:
	   the hole was gone, but on a 900px screen the publication's own name
	   sat almost at the fold with nothing but cards above it. Splitting the
	   difference 55/45 drops the type opposite the lower pair of cards —
	   which is what steepens the diagonal — while keeping the claim on the
	   first screen. The remaining space above is where the amber wash sits,
	   so it reads as the composition breathing rather than as a gap. */
	grid-template-rows: 0.55fr auto auto auto 0.45fr;
	column-gap: clamp(1rem, 2vw, 1.75rem);
	align-items: start;
}

.herox__claim { grid-row: 2; }
.herox__text { grid-row: 3; align-self: start; }
.herox__actions { grid-row: 4; align-self: start; }

/* The right zone: the diagonal itself. A 12-column grid of its own, so the
   three cards can overlap columns without involving the type. */
.herox__stack {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: clamp(0.5rem, 1vw, 0.85rem);
	align-content: start;
}

/* ── The claim ────────────────────────────────────────────────────────
   Two lines on different indents. The second is pushed right by a third of
   its own measure, which sets the angle everything else follows. */
.herox__claim {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	margin: 0;
	/* Sized to hold "Men's health," on ONE line in this column. At 6.6vw it
	   broke to three lines, which destroys the two-line step the whole
	   composition is built on. */
	font-size: clamp(2.25rem, 4.2vw, 4rem);
	font-weight: 700;
	line-height: 0.96;
	letter-spacing: var(--track-claim);
	/* The claim overlaps the first card's column a little, so the type and
	   the photography interlock rather than sitting in separate zones. */
	padding-top: clamp(1rem, 3vw, 2.5rem);
}

/* Each line is one line. The composition is a two-line step: if "Men's
   health," wraps, there are three lines on two indents and the step reads
   as a wrapping accident. nowrap guarantees the shape at any width the
   clamp() produces, and the clamp is sized so it never has to shrink far
   to honour it. */
.herox__line1,
.herox__line2 {
	white-space: nowrap;
}

.herox__line1 {
	align-self: start;
}

/* The amber line, stepped right. This is the design's recurring gesture
   carrying the layout's angle as well as its colour. */
.herox__line2 {
	align-self: start;
	margin-left: clamp(1rem, 3.5vw, 3rem);
	color: var(--amber);
	font-style: normal;
	font-weight: inherit;
}

.herox__text {
	grid-column: 2;
	max-width: 34ch;
	margin: clamp(1.25rem, 2.2vw, 1.75rem) 0 0;
	margin-left: clamp(1rem, 3.5vw, 3rem);
	color: var(--text-muted);
	font-size: var(--fs-lead);
	line-height: 1.6;
}

.herox__actions {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: clamp(1.25rem, 2.2vw, 1.75rem);
	margin-left: clamp(1rem, 3.5vw, 3rem);
	align-self: start;
}

/* ── The vertical figure rail ─────────────────────────────────────────
   Rotated a quarter turn and run down the left edge. As a horizontal strip
   these three numbers re-imposed exactly the stacked rhythm this layout
   exists to break; turned on their side they become a rule the claim sits
   against.

   writing-mode rather than transform: rotate() — a rotated block keeps its
   unrotated box for layout, so it would have reserved a wide, short area
   and left a hole. writing-mode changes the box itself. */
.herox__figures {
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: stretch;
	/* The rail runs the full height of the copy zone, which is now as tall
	   as the card stack — so it reads as a vertical rule holding the
	   section's left edge rather than as a label floating beside the
	   claim. */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	padding-bottom: 0.5rem;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.vfig {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	white-space: nowrap;
}

.vfig__value {
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--amber);
}

.vfig__label {
	color: var(--text-dim);
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* ── The three stepped cards ──────────────────────────────────────────
   Different column spans, different rows, different sizes. Card 1 is small
   and high on the right, card 2 is the largest and sits in the middle,
   card 3 is medium and lowest — so the set reads top-right to bottom-left,
   which is the diagonal.

   Each card is its own component rather than a .card, because the shared
   card has a fixed internal rhythm and these three deliberately do not
   share one. */
.dcard {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--surface);
	transition: transform var(--speed) var(--ease),
	            border-color var(--speed) var(--ease),
	            background var(--speed) var(--ease);
}

.dcard::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--edge-hi) 22%, var(--edge-hi) 78%, transparent);
	pointer-events: none;
	z-index: 3;
}

.dcard:hover {
	background: var(--surface-hi);
	border-color: var(--line-firm);
	transform: translateY(-4px);
}

.dcard__media {
	position: relative;
	z-index: 2;
	display: block;
	overflow: hidden;
	background: var(--surface-hi);
}

.dcard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: 50% 100%;
	transition: transform 450ms var(--ease-out);
}

.dcard:hover .dcard__img {
	transform: scale(1.04);
}

.dcard__media::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px;
	z-index: 1;
	height: 45%;
	background: linear-gradient(to top, var(--surface) 12%, transparent);
	pointer-events: none;
}

.dcard:hover .dcard__media::after {
	background: linear-gradient(to top, var(--surface-hi) 12%, transparent);
}

.dcard__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: -1.25rem;
	padding: 1rem 1.25rem 1.15rem;
}

.dcard__topic {
	display: inline-flex;
	padding: 0.28rem 0.65rem;
	border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--card-accent, var(--amber)) 16%, transparent);
	color: var(--card-accent, var(--amber));
	font-size: var(--fs-micro);
	font-weight: 600;
	line-height: 1.3;
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.dcard__topic { background: rgba(243, 241, 237, 0.08); }
}

.dcard__title {
	margin: 0;
	font-weight: 600;
	line-height: 1.24;
	letter-spacing: -0.015em;
}

.dcard__title a {
	color: var(--text);
}

.dcard__title a:hover {
	color: var(--amber);
}

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

.dcard__read {
	color: var(--text-dim);
	font-size: var(--fs-meta);
	font-weight: 500;
}

/* ── The three placements ─────────────────────────────────────────────
   This is the layout. Each card overlaps the previous one's columns so the
   steps interlock rather than sitting in three separate lanes. */

/* TWO rows, not three.

   With one card per row the stack came to 1009px against 369px of copy —
   a 639px hole in the bottom-left that no amount of centring could close,
   because three stacked cards are simply taller than a claim, a paragraph
   and two buttons. Cards 2 and 3 now share the lower row.

   The diagonal survives because the steps are now horizontal as well as
   vertical: card 1 sits high and right, card 2 drops and moves left, card
   3 sits lowest and furthest left via its own top offset. */

/* 1 — wide and shallow, top right. */
.dcard--1 {
	grid-column: 4 / 13;
	grid-row: 1;
	margin-bottom: clamp(1rem, 2vw, 1.75rem);
}

.dcard--1 .dcard__media { aspect-ratio: 21 / 9; }
.dcard--1 .dcard__title { font-size: 0.9375rem; }

/* 2 — lower row, left half, and the taller of the pair. */
.dcard--2 {
	grid-column: 1 / 7;
	grid-row: 2;
}

.dcard--2 .dcard__media { aspect-ratio: 4 / 3; }
.dcard--2 .dcard__title { font-size: 0.9375rem; }

/* 3 — lower row, right half, dropped further down so the pair is not a
   level row. That offset is what keeps the bottom of the composition on
   the diagonal rather than squaring it off. */
.dcard--3 {
	grid-column: 7 / 13;
	grid-row: 2;
	margin-top: clamp(1.5rem, 3.5vw, 3.25rem);
}

.dcard--3 .dcard__media { aspect-ratio: 4 / 3; }
.dcard--3 .dcard__title { font-size: 0.9375rem; }

/* ── Below 1080px ─────────────────────────────────────────────────────
   The diagonal loosens but does not disappear: the claim goes full width
   and the cards become a two-up with the largest spanning both. */
/* ── Below 1080px ─────────────────────────────────────────────────────
   The two zones stack, but the diagonal survives INSIDE the card zone:
   card 1 stays wide across the top, cards 2 and 3 stay a stepped pair
   underneath. Only the copy moves — from beside the stack to above it. */
@media (max-width: 1080px) {
	.herox {
		grid-template-columns: 1fr;
		row-gap: clamp(2rem, 5vw, 3.5rem);
	}

	.herox__copy {
		grid-template-rows: auto auto auto;
	}

	.herox__claim { grid-row: 1; }
	.herox__text { grid-row: 2; }
	.herox__actions { grid-row: 3; }

	.herox__figures {
		grid-row: 1 / -1;
	}
}

/* ── Below 720px ──────────────────────────────────────────────────────
   One column. The figure rail returns to horizontal — vertical type in a
   320px column is unreadable — and the cards become an ordinary stack,
   because at this width there is no horizontal room to step anything. */
@media (max-width: 720px) {
	.herox__copy {
		grid-template-columns: 1fr;
	}

	.herox__claim,
	.herox__text,
	.herox__actions {
		grid-column: 1;
		margin-left: 0;
	}

	.herox__claim {
		grid-row: 2;
		padding-top: 0;
	}

	/* The claim may wrap here: at phone width one line of display type
	   cannot hold, and nowrap would overflow the viewport. */
	.herox__line1,
	.herox__line2 {
		white-space: normal;
	}

	.herox__line2 {
		margin-left: 0;
	}

	.herox__text { grid-row: 3; }
	.herox__actions { grid-row: 4; }

	.herox__figures {
		grid-column: 1;
		grid-row: 5;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 1rem 1.75rem;
		margin-top: clamp(1.75rem, 4vw, 2.25rem);
		padding-top: 1.5rem;
		padding-bottom: 0;
		border-top: 1px solid var(--line);
		writing-mode: horizontal-tb;
		transform: none;
	}

	.herox__stack {
		grid-template-columns: 1fr;
		row-gap: var(--gap);
	}

	.dcard--1,
	.dcard--2,
	.dcard--3 {
		grid-column: 1;
		grid-row: auto;
		margin: 0;
	}

	.dcard--1 .dcard__media,
	.dcard--2 .dcard__media,
	.dcard--3 .dcard__media {
		aspect-ratio: 16 / 10;
		height: auto;
	}

	.dcard__title,
	.dcard--1 .dcard__title,
	.dcard--2 .dcard__title,
	.dcard--3 .dcard__title {
		font-size: 1.0625rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dcard:hover { transform: none; }
}


/* ── Topics ───────────────────────────────────────────────────────────
   The beats, as portrait tiles. Each carries its line-art mark large at the
   top, the beat's name beneath it, and the article count at the foot.

   The mark sits in a soft radial wash in the topic's own colour. That wash
   is the tile's whole identity — without it eight tiles in a row are eight
   identical dark rectangles, which is exactly what a category row must not
   be. */
.topicrow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	gap: var(--gap);
}

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

/* The wash, in the topic's colour, anchored behind the mark. */
.topiccard::before {
	content: "";
	position: absolute;
	inset: -40% 40% 50% -30%;
	background: radial-gradient(
		closest-side,
		color-mix(in srgb, var(--card-accent, var(--amber)) 40%, transparent),
		transparent
	);
	opacity: 0.5;
	pointer-events: none;
	transition: opacity var(--speed) var(--ease), transform 400ms var(--ease-out);
}

.topiccard:hover {
	background: var(--surface-hi);
	border-color: var(--line-firm);
	color: var(--text);
	transform: translateY(-3px);
}

.topiccard:hover::before {
	opacity: 0.8;
	transform: scale(1.15);
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.topiccard::before { background: none; }
}

.topicmark {
	position: relative;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 0.5rem;
	border-radius: var(--r-sm);
	/* st_the_topic_icon() sets --mark-tint inline; --card-accent is the
	   tile's own, set by front-page.php. They are the same value in
	   practice, and either alone is enough for the mark to take its
	   topic's colour. */
	background: color-mix(in srgb, var(--mark-tint, var(--card-accent, var(--amber))) 14%, transparent);
	color: var(--mark-tint, var(--card-accent, var(--amber)));
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.topicmark { background: rgba(243, 241, 237, 0.08); }
}

.topicmark svg {
	width: 1.6rem;
	height: 1.6rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.topiccard__title {
	position: relative;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.012em;
}

.topiccard__count {
	position: relative;
	margin-top: auto;
	padding-top: 0.85rem;
	color: var(--text-dim);
	font-size: var(--fs-meta);
	font-weight: 500;
}

/* ── Latest ───────────────────────────────────────────────────────────
   The newest photographed articles as picture cards. It uses the shared
   card vocabulary, so there is nothing to add beyond the row itself. */
.latest .cardrow {
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

/* ── Guides: the long reads ───────────────────────────────────────────
   The page's tonal shift. The clinical build put this band on a flat navy
   panel; here it is a deep gradient slab pulling toward a dusty slate-blue,
   which gives the page the same "this section is its own world" move the
   reference makes with its blue band.

   The first piece takes a feature slot at twice the width of the two
   beside it: a band about depth should not present three equal options —
   the longest read is the recommendation. */
.guides__panel {
	position: relative;
	overflow: hidden;
	padding: clamp(2.25rem, 5vw, 4rem);
	border: 1px solid var(--line);
	border-radius: var(--r-panel);
	background:
		radial-gradient(70% 60% at 85% 8%, rgba(110, 155, 232, 0.16), transparent 62%),
		radial-gradient(55% 50% at 8% 95%, rgba(229, 138, 60, 0.10), transparent 60%),
		linear-gradient(165deg, #1A2030, #141820 55%, #12151C);
}

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

.guides__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.9rem;
	color: var(--text-muted);
	font-size: var(--fs-meta);
	font-weight: 600;
}

.guides__eyebrow::before {
	content: "";
	flex: none;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--amber);
	box-shadow: 0 0 0 4px var(--amber-wash);
}

.guides__eyebrow::after {
	content: "";
	width: 1.75rem;
	height: 1px;
	background: var(--line-firm);
}

.guides__title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: var(--track-tight);
}

.guides__sub {
	max-width: 52ch;
	margin: 1rem 0 0;
	color: var(--text-muted);
	font-size: var(--fs-lead);
	line-height: 1.6;
}

.guiderow {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--gap);
}

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

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

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

.guide {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 1.5rem;
	border: 1px solid var(--line);
	border-radius: var(--r-plate);
	background: rgba(243, 241, 237, 0.035);
	transition: background var(--speed) var(--ease),
	            border-color var(--speed) var(--ease),
	            transform var(--speed) var(--ease);
}

.guide:hover {
	background: rgba(243, 241, 237, 0.07);
	border-color: var(--amber-edge);
	transform: translateY(-3px);
}

.guide--feature {
	padding: clamp(1.75rem, 3vw, 2.25rem);
	background: rgba(243, 241, 237, 0.06);
}

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

.guide__timevalue {
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
}

.guide__timeunit {
	/* --text-dim clears AA on the page ground, but the guides band sits on a
	   LIGHTER slab (~#272D3B once the plate's wash composites over the
	   gradient), which drops this to 3.85:1 at 13px. Stepping up to
	   --text-muted restores it to 6.6:1. The same substitution is made for
	   every small dim label inside this band. */
	color: var(--text-muted);
	font-size: var(--fs-meta);
	font-weight: 500;
}

.guide__label {
	color: var(--text-muted);
	font-size: var(--fs-micro);
	font-weight: 600;
}

.guide__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

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

.guide__title a {
	color: var(--text);
}

.guide__title a:hover {
	color: var(--amber);
}

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

.guide__text {
	max-width: 48ch;
	margin: 0;
	color: var(--text-muted);
	font-size: var(--fs-small);
	line-height: 1.6;
}

.guide__date {
	margin-top: auto;
	padding-top: 0.75rem;
	color: var(--text-muted);
	font-size: var(--fs-meta);
	font-weight: 500;
}

/* ── Reading: the archive index ───────────────────────────────────────
   The volume band, and the only list on the page. It is numbered, which
   nothing else here is — the numbering is honest because the content is
   genuinely a sequence: the archive in reverse date order.

   The numeral is set large in amber at low opacity, which gives the band an
   anchor down its left edge. On the light build it was a serif figure; here
   it is the body face at weight 700, because there is no serif and a heavy
   numeral holds its shape better at low opacity. */
.readlist {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
}

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

.readlist {
	counter-reset: readrow;
}

.readlist__row:hover {
	background: rgba(243, 241, 237, 0.035);
}

/* The numeral. Generated from the counter rather than written into the
   markup — the list is already an <ol>, so a screen reader announces the
   position itself and reading it twice would be noise. */
.readlist__num::before {
	content: counter(readrow, decimal-leading-zero);
	display: block;
	color: var(--amber);
	opacity: 0.4;
	font-size: clamp(1.75rem, 2.6vw, 2.25rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	transition: opacity var(--speed) var(--ease);
}

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

.readlist__body {
	min-width: 0;
}

.readlist__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.readlist__title a {
	color: var(--text);
}

.readlist__title a:hover {
	color: var(--amber);
}

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

.readlist__text {
	max-width: 62ch;
	margin: 0.4rem 0 0;
	color: var(--text-muted);
	font-size: var(--fs-small);
	line-height: 1.55;
}

.readlist__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.4rem;
	text-align: right;
}

.readlist__topic {
	display: inline-flex;
	padding: 0.25rem 0.65rem;
	border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--row-accent, var(--amber)) 16%, transparent);
	color: var(--row-accent, var(--amber));
	font-size: var(--fs-micro);
	font-weight: 600;
	white-space: nowrap;
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.readlist__topic { background: rgba(243, 241, 237, 0.08); }
}

.readlist__facts {
	display: inline-flex;
	gap: 0.75rem;
	color: var(--text-dim);
	font-size: var(--fs-meta);
	font-weight: 500;
	white-space: nowrap;
}

@media (max-width: 760px) {
	.readlist__row {
		grid-template-columns: 3rem 1fr;
		padding-inline: 0;
	}

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

/* ── Signal: the closing newsletter panel ─────────────────────────────
   The page's last word. An amber-washed slab carrying the heading, the
   form, the four editorial commitments and the reader illustration.

   The wash is stronger here than anywhere else on the page — this is the
   one block asking the reader to do something, and it is allowed to be the
   warmest thing they have seen. */
.signal__panel {
	position: relative;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	overflow: hidden;
	padding: clamp(2.25rem, 5vw, 4rem);
	border: 1px solid var(--amber-edge);
	border-radius: var(--r-panel);
	background:
		radial-gradient(65% 70% at 88% 18%, rgba(229, 138, 60, 0.26), transparent 62%),
		radial-gradient(50% 60% at 5% 90%, rgba(229, 138, 60, 0.10), transparent 60%),
		linear-gradient(155deg, #201A14, #17161A 55%, #121318);
}

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

.signal__copy {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.signal__title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: var(--track-tight);
}

.signal__sub {
	max-width: 50ch;
	margin: 1.1rem 0 0;
	color: var(--text-muted);
	font-size: var(--fs-small);
	line-height: 1.65;
}

.signal__form {
	margin-top: clamp(1.5rem, 3vw, 2rem);
	max-width: 32rem;
}

/* The four commitments, as a 2x2 of amber-marked lines. */
.promises {
	position: relative;
	z-index: 1;
	align-self: start;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

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

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

.promise__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--r-sm);
	background: var(--amber-wash);
	color: var(--amber);
}

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

.promise__text {
	color: var(--text-muted);
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 1.45;
}

/* The reader illustration anchoring the panel's lower-right corner.

   It was drawn for a light build, so on this ground it would sit as a pale
   rectangle pasted onto the slab. `mix-blend-mode: luminosity` drops its own
   colour and lets it take the panel's warmth, and the mask fades its edges
   out into the gradient so it has no border at all. */
.signal__art {
	position: absolute;
	right: clamp(-3rem, -2vw, 0rem);
	bottom: 0;
	z-index: 0;
	width: min(28rem, 38%);
	height: auto;
	opacity: 0.22;
	mix-blend-mode: luminosity;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to top, #000 35%, transparent 92%),
	                    linear-gradient(to left, #000 60%, transparent 98%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to top, #000 35%, transparent 92%),
	            linear-gradient(to left, #000 60%, transparent 98%);
	mask-composite: intersect;
}

/* Below the panel's stack point the illustration would sit behind the form
   rather than beside it, so it goes. */
@media (max-width: 900px) {
	.signal__art {
		display: none;
	}
}

/* ── 9. Sidebar panels ────────────────────────────────────────────────
   The article column's companion: the newsletter, the topic list, and
   something else to read. Each is a raised surface rather than a bordered
   box — the bordered box was the light build's way of separating a panel
   from white paper, and here the surface value does that job on its own. */
/* The article-plus-sidebar split. It sits on the CONTENT track and divides
   it: the main column keeps the reading measure and the sidebar takes a
   fixed 20rem beside it. Placed as a grid child rather than given its own
   max-width, so it lines up with every other band on the page. */
.layout__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.band__inner > .layout__grid {
	grid-column: content;
}

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

.layout__main {
	min-width: 0;
}

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

@media (max-width: 1000px) {
	.sidebar {
		position: static;
	}
}

.panel {
	position: relative;
	overflow: hidden;
	padding: 1.5rem;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--surface);
}

.panel::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--edge-hi) 22%, var(--edge-hi) 78%, transparent);
	pointer-events: none;
}

/* The subscribe panel takes the amber wash, so the one panel asking for an
   action is the one that looks like it. */
.panel--subscribe {
	border-color: var(--amber-edge);
	background:
		radial-gradient(80% 70% at 100% 0%, rgba(229, 138, 60, 0.18), transparent 65%),
		var(--surface);
}

.panel__heading {
	margin: 0 0 0.6rem;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.panel__intro {
	margin: 0 0 1.25rem;
	color: var(--text-muted);
	font-size: var(--fs-small);
	line-height: 1.55;
}

/* ── Topic list ───────────────────────────────────────────────────────── */
.cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.cat-list__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 0;
	color: var(--text-muted);
	font-size: var(--fs-small);
	font-weight: 500;
	transition: color var(--speed) var(--ease), padding-left var(--speed) var(--ease);
}

.cat-list__link:hover {
	color: var(--text);
	padding-left: 0.4rem;
}

/* The topic's own colour as a dot, so the beat is recognisable by hue here
   as it is everywhere else. */
.cat-list__name {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
}

.cat-list__name::before {
	content: "";
	flex: none;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--cat-accent, var(--amber));
}

.cat-list__count {
	flex: none;
	color: var(--text-dim);
	font-size: var(--fs-micro);
	font-weight: 600;
}

/* ── The mini list ────────────────────────────────────────────────────
   Used in the sidebar's "more to read" and in the footer's latest column. */
.minilist {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.minilist__item {
	position: relative;
	display: grid;
	grid-template-columns: 4rem 1fr;
	gap: 0.85rem;
	align-items: center;
}

/* The footer variant carries no thumbnail. */
.minilist--footer .minilist__item {
	grid-template-columns: 1fr;
	gap: 0.3rem;
	padding-left: 0.85rem;
	border-left: 2px solid var(--row-accent, var(--line-firm));
}

.minilist__media {
	display: block;
	overflow: hidden;
	border-radius: var(--r-sm);
	aspect-ratio: 1;
	background: var(--surface-hi);
}

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

.minilist__body {
	min-width: 0;
}

.minilist__topic {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--row-accent, var(--amber));
	font-size: var(--fs-micro);
	font-weight: 600;
}

.minilist__title {
	margin: 0;
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

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

.minilist__title a:hover {
	color: var(--amber);
}

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

.minilist__meta {
	display: block;
	margin-top: 0.2rem;
	color: var(--text-dim);
	font-size: var(--fs-micro);
	font-weight: 500;
}

/* ── 10. Footer ───────────────────────────────────────────────────────
   The deepest surface on the site, so the page has somewhere to land. Three
   parts: the masthead row, the columns, and the base bar. */
.site-footer {
	position: relative;
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: clamp(3rem, 6vw, 4.5rem);
	background: var(--surface-deep);
	border-top: 1px solid var(--line);
}

/* A very soft amber glow at the top edge, so the footer is a deliberate
   ending rather than the page simply running out. */
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 16rem;
	background: radial-gradient(60% 100% at 50% 0%, rgba(229, 138, 60, 0.07), transparent 70%);
	pointer-events: none;
}

.site-footer > .container {
	position: relative;
}

.footer-top {
	display: grid;
	grid-template-columns: minmax(0, 22rem) 1fr;
	gap: clamp(2rem, 4vw, 4rem);
	padding-bottom: clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--line);
}

@media (max-width: 860px) {
	.footer-top {
		grid-template-columns: 1fr;
	}
}

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

.footer-brand .custom-logo-link {
	display: block;
	line-height: 0;
}

.footer-brand .site-logo {
	font-size: 1.375rem;
}

.footer-brand__text {
	max-width: 40ch;
	margin: 1.1rem 0 0;
	color: var(--text-muted);
	font-size: var(--fs-small);
	line-height: 1.6;
}

/* The brand line's second sentence takes the amber gesture, as the last
   place on the page it appears. Inline rather than block here — it is a
   continuation of the sentence, not a display pair. */
.footer-brand__text em {
	display: inline;
	color: var(--amber);
	font-style: normal;
}

.footer-col__heading {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1.1rem;
	color: var(--text);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0;
}

.footer-col__heading::before {
	content: "";
	flex: none;
	width: 0.35rem;
	height: 0.35rem;
	border-radius: 50%;
	background: var(--amber);
}

.footer-beats__rail {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* The beats as outlined pills that fill with their own colour on hover. */
.footer-beat {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--line-firm);
	border-radius: var(--r-pill);
	color: var(--text-muted);
	font-size: var(--fs-meta);
	font-weight: 500;
	transition: color var(--speed) var(--ease),
	            border-color var(--speed) var(--ease),
	            background var(--speed) var(--ease);
}

.footer-beat:hover {
	border-color: var(--beat-accent, var(--amber));
	background: color-mix(in srgb, var(--beat-accent, var(--amber)) 14%, transparent);
	color: var(--beat-accent, var(--amber));
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.footer-beat:hover { background: rgba(243, 241, 237, 0.08); }
}

.footer-beat__count {
	color: var(--text-dim);
	font-size: var(--fs-micro);
	font-weight: 600;
}

.footer-beat:hover .footer-beat__count {
	color: inherit;
	opacity: 0.75;
}

.footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: clamp(2rem, 4vw, 4rem);
	padding-block: clamp(2rem, 4vw, 3rem);
}

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

.footer-col--latest .minilist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

@media (max-width: 560px) {
	.footer-col--latest .minilist {
		grid-template-columns: 1fr;
	}
}

.footer-notes {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.footer-notes li {
	position: relative;
	padding-left: 1.1rem;
	color: var(--text-muted);
	font-size: var(--fs-small);
	line-height: 1.5;
}

.footer-notes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 0.3rem;
	height: 0.3rem;
	border-radius: 50%;
	background: var(--amber);
}

.footer-contact {
	display: inline-block;
	color: var(--amber);
	font-size: var(--fs-small);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--amber-edge);
	text-underline-offset: 3px;
}

.footer-contact:hover {
	text-decoration-color: currentColor;
}

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

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

.footer-copy {
	margin: 0;
	color: var(--text-dim);
	font-size: var(--fs-meta);
}

.footer-copy a {
	color: var(--text-muted);
}

.footer-copy a:hover {
	color: var(--amber);
}

.footer-legal__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-legal__menu a {
	color: var(--text-dim);
	font-size: var(--fs-meta);
	transition: color var(--speed) var(--ease);
}

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

/* ── 11. Archive / category ───────────────────────────────────────────── */
.page-head {
	max-width: 46rem;
}

.page-head__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.9rem;
	color: var(--text-muted);
	font-size: var(--fs-meta);
	font-weight: 600;
}

.page-head__eyebrow::before {
	content: "";
	flex: none;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--amber);
	box-shadow: 0 0 0 4px var(--amber-wash);
}

.page-head__title {
	margin: 0;
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: var(--track-claim);
}

.page-head__text {
	max-width: 56ch;
	margin: 1.1rem 0 0;
	color: var(--text-muted);
	font-size: var(--fs-lead);
	line-height: 1.6;
}

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

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

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

.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: 0.85rem;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	color: var(--text-muted);
	font-size: var(--fs-small);
	font-weight: 600;
	transition: border-color var(--speed) var(--ease),
	            color var(--speed) var(--ease),
	            background var(--speed) var(--ease);
}

.pagination .page-numbers:hover {
	border-color: var(--amber);
	color: var(--amber);
}

.pagination .page-numbers.current {
	background: var(--amber);
	border-color: var(--amber);
	color: var(--amber-ink);
}

.pagination .page-numbers.dots {
	border-color: transparent;
}

.pagination .page-numbers.dots:hover {
	color: var(--text-muted);
}

/* ── 12. Single post ──────────────────────────────────────────────────
   The article on the same dark ground as everything else. The measure is
   held at 68ch and the leading is opened to 1.8 — light text on a dark
   ground needs more line spacing than dark on light, because the glyphs
   bloom optically and lines run together at the leading that would be
   comfortable on paper. */
.single-article {
	min-width: 0;
}

.post-head {
	max-width: 52rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.post-head__chips {
	margin-bottom: 1.1rem;
}

.post-head__title {
	margin: 0;
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: var(--track-claim);
}

.post-head__standfirst {
	max-width: 58ch;
	margin: 1.25rem 0 0;
	color: var(--text-muted);
	font-size: var(--fs-lead);
	line-height: 1.6;
}

.post-head__meta {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
}

/* No byline is rendered anywhere — the publication does not attribute
   articles to a named writer. What is left is the date and the read time. */
.post-head__facts {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	color: var(--text-dim);
	font-size: var(--fs-meta);
	font-weight: 500;
}

.post-hero {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	overflow: hidden;
	border-radius: var(--r-panel);
	background: var(--surface);
}

.post-hero__img {
	width: 100%;
	height: auto;
	max-height: 32rem;
	object-fit: cover;
}

/* ── Article body ─────────────────────────────────────────────────────── */
.entry-content {
	max-width: var(--measure);
	color: var(--text);
	font-size: var(--fs-body);
	line-height: 1.8;
}

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

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: 2.25em;
	margin-bottom: 0.65em;
	letter-spacing: -0.018em;
}

.entry-content h2 {
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	font-weight: 700;
}

.entry-content h3 {
	font-size: clamp(1.25rem, 1.9vw, 1.5rem);
	font-weight: 600;
}

.entry-content h4 {
	font-size: 1.125rem;
	font-weight: 600;
}

.entry-content p {
	margin-bottom: 0;
}

.entry-content a {
	color: var(--amber);
	text-decoration: underline;
	text-decoration-color: var(--amber-edge);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	transition: text-decoration-color var(--speed) var(--ease);
}

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

.entry-content strong {
	color: var(--text);
	font-weight: 700;
}

/* An <em> in running prose stays italic — it is emphasis in a sentence, not
   the display gesture. */
.entry-content em {
	font-style: italic;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.4rem;
}

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

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

.entry-content blockquote {
	margin-inline: 0;
	padding: 0.25rem 0 0.25rem 1.5rem;
	border-left: 3px solid var(--amber);
	color: var(--text);
	font-size: clamp(1.125rem, 1.8vw, 1.3125rem);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.012em;
}

.entry-content blockquote cite {
	display: block;
	margin-top: 0.75rem;
	color: var(--text-dim);
	font-size: var(--fs-meta);
	font-style: normal;
	font-weight: 500;
}

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

.entry-content figcaption {
	margin-top: 0.75rem;
	color: var(--text-dim);
	font-size: var(--fs-meta);
	line-height: 1.5;
}

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

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

.entry-content pre {
	overflow-x: auto;
	padding: 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface);
	font-size: var(--fs-small);
	line-height: 1.6;
}

.entry-content pre code {
	padding: 0;
	background: none;
	color: var(--text);
}

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

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

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

.entry-content td {
	color: var(--text-muted);
}

/* ── Tags, share, post navigation ─────────────────────────────────────── */
.single-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}

.single-tags__label {
	margin-right: 0.35rem;
	color: var(--text-dim);
	font-size: var(--fs-meta);
	font-weight: 600;
}

.single-tags a {
	display: inline-flex;
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--line-firm);
	border-radius: var(--r-pill);
	color: var(--text-muted);
	font-size: var(--fs-micro);
	font-weight: 500;
	transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.single-tags a:hover {
	border-color: var(--amber);
	color: var(--amber);
}

.single-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.share-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.share-row__label {
	color: var(--text-dim);
	font-size: var(--fs-meta);
	font-weight: 600;
}

.share-row__link {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--line-firm);
	border-radius: var(--r-pill);
	color: var(--text-muted);
	transition: border-color var(--speed) var(--ease),
	            color var(--speed) var(--ease),
	            background var(--speed) var(--ease);
}

.share-row__link:hover {
	border-color: var(--amber);
	background: var(--amber-wash);
	color: var(--amber);
}

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

.postnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
	margin-top: clamp(2rem, 4vw, 3rem);
}

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

.postnav__item {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--surface);
	transition: background var(--speed) var(--ease),
	            border-color var(--speed) var(--ease),
	            transform var(--speed) var(--ease);
}

.postnav__item:hover {
	background: var(--surface-hi);
	border-color: var(--line-firm);
	transform: translateY(-2px);
}

.postnav__item--next {
	text-align: right;
}

.postnav__label {
	color: var(--amber);
	font-size: var(--fs-micro);
	font-weight: 600;
}

.postnav__title {
	color: var(--text);
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1.35;
}

/* ── 13. Static page ──────────────────────────────────────────────────
   A static page is read straight through, so its head, its artwork and its
   prose all sit on the NARROW track. Placed by the grid rather than by a
   max-width on each: the artwork then lines up with the text above and below
   it without having to repeat the measure three times. */
.page-band .band__inner > .page-head,
.page-band .band__inner > .page-content,
.page-band .band__inner > .post-hero,
.page-band .band__inner > .pagination {
	grid-column: narrow;
}

.page-band .page-head {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

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

/* ── 14. Thank-you / 404 ──────────────────────────────────────────────── */
.notice-page {
	display: grid;
	place-items: center;
	padding-block: clamp(2rem, 5vw, 4rem);
}

.notice-page__inner {
	max-width: 42rem;
	text-align: center;
}

.notice-page__mark {
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	margin: 0 auto 1.75rem;
	border-radius: var(--r-pill);
	background: var(--amber-wash);
	color: var(--amber);
}

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

.notice-page__mark--ok {
	background: var(--ok-wash);
	color: var(--ok);
}

.notice-page__title {
	margin: 0;
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: var(--track-claim);
}

.notice-page__text {
	max-width: 52ch;
	margin: 1.25rem auto 0;
	color: var(--text-muted);
	font-size: var(--fs-lead);
	line-height: 1.6;
}

.notice-page__note {
	max-width: 52ch;
	margin: 1rem auto 0;
	color: var(--text-dim);
	font-size: var(--fs-small);
	line-height: 1.55;
}

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

/* ── 16. Utilities, motion, print ─────────────────────────────────────── */
.alignwide {
	max-width: min(100%, 68rem);
}

.alignfull {
	max-width: none;
}

.alignleft {
	float: left;
	margin: 0 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0 0 1rem 1.5rem;
}

.aligncenter {
	margin-inline: auto;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	margin-top: 0.75rem;
	color: var(--text-dim);
	font-size: var(--fs-meta);
}

.sticky .card {
	border-color: var(--amber-edge);
}

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

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

@media print {
	body {
		background: #fff;
		color: #000;
	}

	.site-header,
	.site-footer,
	.sidebar,
	.read-progress,
	.signal,
	.postnav,
	.single-share,
	.st-modal {
		display: none !important;
	}

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

	.entry-content a {
		color: #000;
		text-decoration: underline;
	}
}