@charset "UTF-8";
/* ==========================================================================
   Sovereign Terminal v11 — "Field"
   --------------------------------------------------------------------------
   A men's health publication, rebuilt against a performance-medicine
   reference. The clinical blue-grey build this replaces was a broadsheet in
   a lab coat: cool ground, navy ink, a serif carrying every headline. None
   of it survives.

   THE GROUND. Warm sand — paper that has been handled, not bleached. White
   is reserved for tiles that need to lift off it, so a card reads as an
   object on a surface rather than as a slightly different white.

   COLOUR. One brand colour does everything: a deep forest green, dark enough
   to hold white text at any size, saturated enough to read as a decision
   rather than as a neutral. Every button, every link, every dark panel is
   this green. A warm clay is held back as a FLAG — new, live, urgent — and
   appears at most twice on a page. A palette with an accent everywhere has
   no accent.

   TYPE. One family. Inter Tight does display, body, navigation and data,
   separated by weight and size rather than by a second face. At display
   sizes it is set tight (-0.035em) and heavy (700) with the line-height
   pulled under 1 — the headline becomes a block of texture, which is the
   reference's single strongest typographic move. Labels are sentence case.
   Nothing on this site is tracked-out capitals.

   PHOTOGRAPHY. The design assumes real photographs and gives them room:
   full-bleed at the hero, edge-to-edge in the goals mosaic, and knocked-out
   text sitting IN the image rather than floating above it. Every image
   treatment carries a scrim, because a headline over an unknown stock
   photograph is otherwise a contrast failure waiting for the first editor
   who uploads a bright one.

   RADIUS. Controls are pills. Everything else is 4px — nearly square, the
   way a printed photograph is square. The pillowy 20px corner belongs to a
   storefront.

   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 ──────────────────────────────────────────────────────────
	   Warm sand with real yellow in it. --paper is the lifted tile;
	   --sand-deep is the inset plate a quiet band sits on; --bone is the
	   hairline-adjacent fill used inside form controls on the light ground. */
	--sand: #F2EEE7;
	--paper: #FFFFFF;
	--sand-deep: #E8E2D8;
	--sand-tint: #EDE7DC;
	--bone: #FAF8F4;

	/* ── Ink ─────────────────────────────────────────────────────────────
	   Near-black with a trace of warmth, so it sits on sand rather than
	   floating over it as pure #000 does. Every step is measured against
	   --sand: -400 is the lightest that still clears AA at body size, -500
	   clears it at 13px and above, and -600 is for rules and decorative
	   marks only, never for text. */
	--ink: #14100D;
	--ink-200: #2A241E;
	--ink-300: #4A4239;
	--ink-400: #6B6358;
	--ink-500: #8A8175;
	--ink-600: #C3BBAE;

	/* ── Brand ───────────────────────────────────────────────────────────
	   The deep forest green. It carries every action, link and live state.
	   Dark enough that white text on it clears AAA, which is what lets the
	   same value serve as both a button fill and a full-page panel without
	   needing a second, darker variant for the panel. */
	--forest: #1F4A42;
	--forest-deep: #143029;
	--forest-lift: #2C6459;
	--forest-tint: #D8E3E0;
	--forest-wash: #EBF1EF;

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

	/* ── Compatibility aliases ───────────────────────────────────────────
	   Earlier builds named the system colour --accent and a second voice
	   --lav, and both names are still used across the sidebar, archive,
	   single-post and utility sections. Rather than rename several hundred
	   call sites to change nothing visible, they are aliased onto the brand
	   green here.

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

	/* The topic hues. These match st_chip_palette() in functions.php — a
	   change in one has to be made in the other. Every one is earthed enough
	   to sit beside the forest green without competing with it for an
	   action, and deep enough to hold white text. */
	--moss: #3F6B3A;
	--slate: #3C4F5C;
	--bronze: #8A5A18;
	--plum: #6A3A52;

	/* ── Lines and shadow ────────────────────────────────────────────────
	   Lines are warm and quiet: this design separates with space and with
	   flat tint, and uses an edge only where a tile genuinely needs
	   containing. Shadow stays tight — a large soft drop under every card is
	   the kit default and makes unequal tiles read as equal ones. */
	--line: rgba(20, 16, 13, 0.12);
	--line-soft: rgba(20, 16, 13, 0.07);
	--line-firm: rgba(20, 16, 13, 0.22);

	--shade: 0 1px 2px rgba(20, 16, 13, 0.05);
	--shade-lift: 0 2px 4px rgba(20, 16, 13, 0.05), 0 14px 30px -20px rgba(20, 16, 13, 0.3);
	--shade-panel: 0 30px 70px -50px rgba(20, 16, 13, 0.55);

	/* ── Type ────────────────────────────────────────────────────────────
	   One family. Inter Tight covers display, body, navigation and data; the
	   separation between them is weight, size and tracking, not a second
	   face. --font-display is kept as a distinct token so a future build can
	   reintroduce a display face at one place rather than at 200 call
	   sites. */
	--font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-display: var(--font-body);

	/* Display ramp. Set tight and heavy, with the line-height pulled under 1
	   at the largest steps so a two-line claim reads as a single block of
	   texture rather than as two sentences. */
	--fs-claim: clamp(2.75rem, 6.4vw, 5.25rem);
	--fs-h1: clamp(2.25rem, 4.8vw, 3.75rem);
	--fs-h2: clamp(1.75rem, 3.4vw, 2.75rem);
	--fs-h3: clamp(1.1875rem, 1.9vw, 1.5rem);
	--fs-h4: 1.0625rem;

	/* The figure ramp — the large numbers on data tiles. */
	--fs-figure: clamp(2.5rem, 4.6vw, 3.75rem);

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

	/* Tracking tightens as size grows, which is how a grotesque stays even
	   in colour across a 16px label and a 84px claim. */
	--track-tight: -0.02em;
	--track-claim: -0.035em;

	/* ── Radius ──────────────────────────────────────────────────────────
	   Controls are pills; everything else is near-square. */
	--r-pill: 999px;
	--r-img: 4px;
	--r-card: 4px;
	--r-plate: 6px;
	--r-panel: 8px;

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

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

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

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

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

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

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

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

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

img { height: auto; }

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

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

button { cursor: pointer; }

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

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

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

.site-footer :focus-visible,
.signal :focus-visible,
.guides :focus-visible,
.hero :focus-visible,
.goals :focus-visible,
.st-modal__dialog :focus-visible {
	outline-color: #FFFFFF;
}

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

   .band--flush hands vertical space to the plate inside, which is what the
   hero, the dark panels and the goals mosaic all need: their padding
   belongs to the coloured box, not to the section around it. */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.band {
	position: relative;
}

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

.band--flush > .band__inner {
	padding-block: 0;
}

/* The full-bleed band: breaks the container entirely so a photograph or a
   coloured slab can run edge to edge. Used by the hero and the proof rail. */
.band--bleed > .band__inner {
	max-width: none;
	padding-inline: 0;
	padding-block: 0;
}

/* The tinted band: a flat inset plate, no shadow. */
.band--tint {
	isolation: isolate;
}

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

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

/* ── The band head ───────────────────────────────────────────────────
   The section's name set at display weight, with an optional one-line
   standfirst beneath it and the "view all" control pushed to the far right
   on the heading's own baseline.

   The previous build put a coloured rule and a small label above every
   heading. That device is gone: a label that says "Newest first" above a
   heading that says "Just published" is the same sentence twice, and the
   rule was decoration standing in for hierarchy. Size and weight carry it
   now. The eyebrow element is KEPT in the markup contract and repurposed as
   a genuine standfirst below the title — see .band__eyebrow. */
.band__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 0.5rem clamp(1rem, 3vw, 2.5rem);
	margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

.band__title {
	grid-column: 1;
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: var(--track-claim);
	text-wrap: balance;
	max-width: 22ch;
}

/* The second line of a display pair. The previous build set this in a serif
   italic as its recurring gesture; with one grotesque family doing every
   job, the pair separates by COLOUR instead — the second line drops to a
   quieter ink so the phrase still reads as two beats. */
.band__title em,
.claim-tile__title em,
.guides__title em,
.signal__title em,
.st-modal__title em,
.hero__title em {
	font-style: normal;
	color: var(--ink-400);
}

.guides__title em,
.signal__title em,
.st-modal__title em,
.hero__title em {
	color: rgba(255, 255, 255, 0.58);
}

/* Repurposed from label-above to standfirst-below. */
.band__eyebrow {
	grid-column: 1;
	grid-row: 2;
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--ink-400);
	max-width: 52ch;
	text-wrap: pretty;
}

.band__link {
	grid-column: 2;
	grid-row: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--forest);
	text-decoration: none;
	white-space: nowrap;
	padding-bottom: 0.2em;
	border-bottom: 2px solid transparent;
	transition: border-color var(--speed) var(--ease);
}

.band__link:hover,
.band__link:focus-visible {
	border-bottom-color: var(--forest);
}

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

	.band__link {
		grid-column: 1;
		grid-row: 3;
		justify-self: start;
		margin-top: 0.25rem;
	}
}

/* ── 4. Typography primitives ────────────────────────────────────────────── */
.u-display {
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: var(--track-claim);
	text-wrap: balance;
}

.u-measure {
	max-width: var(--measure);
}

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--forest);
	color: #FFFFFF;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--r-plate) 0;
}

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

/* ── 5. Buttons, chips, marks ────────────────────────────────────────────── */
/* The control vocabulary is two pills: a filled forest one for the primary
   action and a hairline one for everything else. On a dark ground both
   invert. There is no third variant and no ghost button — a page with four
   button styles has no primary action. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.9rem 1.6rem;
	border: 1.5px solid var(--ink);
	border-radius: var(--r-pill);
	background: var(--ink);
	color: var(--sand);
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: -0.008em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--speed) var(--ease),
	            border-color var(--speed) var(--ease),
	            color var(--speed) var(--ease),
	            transform var(--speed) var(--ease);
}

.btn:hover,
.btn:focus-visible {
	background: var(--forest);
	border-color: var(--forest);
	color: #FFFFFF;
}

.btn:active { transform: translateY(1px); }

.btn--accent {
	background: var(--forest);
	border-color: var(--forest);
	color: #FFFFFF;
}

.btn--accent:hover,
.btn--accent:focus-visible {
	background: var(--forest-deep);
	border-color: var(--forest-deep);
}

/* The hairline pill: the secondary action on the light ground. */
.btn--quiet {
	background: transparent;
	border-color: var(--line-firm);
	color: var(--ink);
}

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

/* Both variants on a dark ground. */
.btn--on-accent {
	background: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--forest-deep);
}

.btn--on-accent:hover,
.btn--on-accent:focus-visible {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.5);
	color: #FFFFFF;
}

.btn--outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.45);
	color: #FFFFFF;
}

.btn--outline-light:hover,
.btn--outline-light:focus-visible {
	background: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--forest-deep);
}

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

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

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

/* ── The arrow badge ─────────────────────────────────────────────────
   A round chevron that trails a label. At rest it is a hairline circle; on
   hover of the control around it the circle FILLS with currentColor and the
   glyph is knocked out. It sits inside buttons and links alike, so it
   inherits rather than setting its own colour. */
.arrow-badge {
	display: inline-grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	border: 1.25px solid currentColor;
	border-radius: 50%;
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

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

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

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

.arrow-badge--lg {
	width: 2.5rem;
	height: 2.5rem;
	border-width: 1.5px;
}

.arrow-badge--lg svg {
	width: 0.95rem;
	height: 0.95rem;
}

/* On hover the circle FILLS with currentColor and the glyph is knocked out
   of it.
 *
 * The knockout is done by PAINTING THE GLYPH IN THE BUTTON'S OWN BACKGROUND,
 * carried on --badge-knockout. An earlier version named the colour per
 * context instead — .btn got --forest, .btn--accent got --forest-deep, and so
 * on — which meant every new button variant had to remember to add a matching
 * rule, and the ones that were missed drew a dark glyph inside a dark circle
 * and looked like the arrow had simply vanished. That is the bug this
 * replaces: .btn--on-accent and .btn--outline-light both go transparent on
 * hover, so there was no surface colour to name at all.
 *
 * Each variant declares what is behind it once, beside its own background,
 * and the badge reads that. A variant that declares nothing inherits the
 * page ground, which is correct for any button sitting on it. */
.arrow-badge {
	--badge-knockout: var(--sand);
}

/* ANY hovered or focused link or button fills its badge, plus the card,
   whose badge sits inside the article rather than inside a control.
 *
 * Written as a descendant rule on the element types rather than as a list of
 * component classes. The list version had to be extended by hand every time
 * a new control gained an arrow — .btn, then .band__link, then .card, then
 * `a:hover > .arrow-badge`, which only matched a DIRECT child and so missed
 * the drawer's subscribe control entirely. Every one of those omissions
 * showed up as the same bug: a badge that never filled, or filled without
 * its glyph changing. Matching a:hover / button:hover covers every control
 * the theme has now and every one it gains later. */
a:hover .arrow-badge,
a:focus-visible .arrow-badge,
button:hover .arrow-badge,
button:focus-visible .arrow-badge,
.card:hover .arrow-badge {
	background: currentColor;
	border-color: currentColor;
}

a:hover .arrow-badge svg,
a:focus-visible .arrow-badge svg,
button:hover .arrow-badge svg,
button:focus-visible .arrow-badge svg,
.card:hover .arrow-badge svg {
	stroke: var(--badge-knockout);
}

/* What sits behind each control on hover. Every one of these is declared on
   the BADGE, for the specificity reason set out under .btn--on-accent below.
 *
 * The plain .btn and .btn--accent both end up filled forest on hover, so
 * their glyph is knocked out in that green. */
.btn:hover .arrow-badge,
.btn:focus-visible .arrow-badge {
	--badge-knockout: var(--forest);
}

.btn--accent:hover .arrow-badge,
.btn--accent:focus-visible .arrow-badge {
	--badge-knockout: var(--forest-deep);
}

/* .btn--on-accent is a WHITE pill on a dark panel at rest and goes
   TRANSPARENT on hover, so what is behind its badge changes with the state:
   white at rest, the dark panel once hovered.
 *
 * Both are declared ON THE BADGE rather than on the button. A button-level
 * `--badge-knockout` is overridden by any badge-level one that sets the rest
 * value — `.btn--on-accent .arrow-badge` is more specific than
 * `.btn--on-accent:hover` for the badge's own custom property — which left
 * the glyph white inside a white filled circle and made the arrow disappear
 * exactly where it was most visible. Keeping both states on the same element
 * puts them in one specificity race that the :hover rule wins on order. */
.btn--on-accent .arrow-badge,
.btn--outline-light .arrow-badge {
	--badge-knockout: #FFFFFF;
}

.btn--on-accent:hover .arrow-badge,
.btn--on-accent:focus-visible .arrow-badge,
.btn--outline-light:hover .arrow-badge,
.btn--outline-light:focus-visible .arrow-badge {
	--badge-knockout: var(--forest-deep);
}

.btn--quiet:hover .arrow-badge,
.btn--quiet:focus-visible .arrow-badge {
	--badge-knockout: var(--ink);
}

.card:hover .arrow-badge {
	background: var(--forest);
	border-color: var(--forest);
	--badge-knockout: var(--sand);
}

.arrow-badge--solid {
	background: currentColor;
}

/* ── Chips ───────────────────────────────────────────────────────────
   A topic marker. On the light ground it is a hairline pill carrying a small
   dot in the topic's own colour; over a photograph it fills solid so it
   stays legible whatever is behind it. Sentence case — the capitals this
   design does not use would make a four-chip row shout. */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.7rem 0.3rem 0.55rem;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--paper);
	color: var(--ink-200);
	font-size: var(--fs-micro);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.chip::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	flex: none;
	border-radius: 50%;
	background: var(--chip-bg, var(--forest));
}

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

/* Over media: solid, no dot, no border. */
.chip--on-media {
	padding-inline: 0.7rem;
	background: rgba(255, 255, 255, 0.94);
	border-color: transparent;
	color: var(--ink);
	backdrop-filter: blur(4px);
}

.chip--on-media::before {
	display: none;
}

/* ── The flag ────────────────────────────────────────────────────────
   Clay, and the only thing on the site allowed to use it. Reserved for a
   genuinely live or new marker. */
.flag {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.28rem 0.65rem;
	border-radius: var(--r-pill);
	background: var(--clay);
	color: #FFFFFF;
	font-size: var(--fs-micro);
	font-weight: 600;
	line-height: 1.4;
}

/* ── The meta row ────────────────────────────────────────────────────
   Date and reading time. Separated by a thin rule rather than by a middle
   dot: a dot between every pair of facts is the default meta string and it
   reads as filler. */
.meta-row {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: var(--fs-meta);
	font-weight: 500;
	color: var(--ink-400);
}

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

.card__sep {
	width: 1px;
	height: 0.8em;
	background: currentColor;
	opacity: 0.35;
}

/* ── 6. Header / navigation ──────────────────────────────────────────────── */
/* The masthead sits ON the ground with no bar of its own until the page
   scrolls, at which point main.js adds .site-header--scrolled and it takes a
   near-opaque plate. So the top of the page reads as open paper rather than
   as chrome, while a scrolled masthead stays readable over a photograph.

   There is no site search — the endpoint is closed in functions.php and the
   design offers no affordance for it. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
	transition: background var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.site-header--scrolled {
	background: rgba(242, 238, 231, 0.94);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 var(--line-soft), 0 10px 24px -22px rgba(20, 16, 13, 0.5);
}

/* The hero runs full-bleed dark photography directly under the masthead, so
   on the front page the un-scrolled masthead paints its own text white. The
   class is added by front-page.php via body_class. */
.home .site-header:not(.site-header--scrolled) {
	color: #FFFFFF;
}

.home .site-header:not(.site-header--scrolled) .site-logo,
.home .site-header:not(.site-header--scrolled) .nav-list > li > a {
	color: #FFFFFF;
}

/* Over the hero photograph the masthead's Subscribe control inverts: a WHITE
   pill with forest text, so it reads against the picture the way the rest of
   the unscrolled masthead does.
 *
 * That inversion also changes what is behind its arrow badge, and the badge
 * has to be told. It carries .btn--accent, whose knockout is the forest green
 * that variant is normally filled with — but here the fill is white and the
 * badge's circle takes currentColor, which is now forest. Without the
 * override below the circle and the glyph were both forest and the arrow
 * disappeared into it. The knockout has to follow the button's ACTUAL
 * background, not the one its class usually implies. */
.home .site-header:not(.site-header--scrolled) .masthead__cta {
	background: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--forest-deep);
}

.home .site-header:not(.site-header--scrolled) .masthead__cta .arrow-badge,
.home .site-header:not(.site-header--scrolled) .masthead__cta:hover .arrow-badge,
.home .site-header:not(.site-header--scrolled) .masthead__cta:focus-visible .arrow-badge {
	--badge-knockout: #FFFFFF;
}

.home .site-header:not(.site-header--scrolled) .menu-pill {
	border-color: rgba(255, 255, 255, 0.5);
	color: #FFFFFF;
}

.masthead {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: 4.75rem;
}

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

/* The wordmark fallback, used when no Customizer logo is set. Set tight and
   heavy so it reads as a mark rather than as running text. The terminal
   underscore the previous build drew after it is gone — it belonged to the
   trading-desk conceit. */
.site-logo {
	font-size: clamp(1.125rem, 1.7vw, 1.4rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	text-decoration: none;
	color: var(--ink);
	white-space: nowrap;
}

/* The Customizer logo. --logo-h is written by functions.php from the
   st_logo_height setting, so the control works on the front end and not only
   in the preview. */
.custom-logo-link {
	display: block;
	line-height: 0;
}

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

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

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

.nav-list > li > a {
	display: inline-block;
	padding-block: 0.4rem;
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--ink-200);
	text-decoration: none;
	position: relative;
	transition: color var(--speed) var(--ease);
}

/* The underline grows from the left on hover rather than fading in, so the
   gesture has a direction. */
.nav-list > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0.1rem;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--speed) var(--ease);
}

.nav-list > li > a:hover,
.nav-list > li > a:focus-visible {
	color: var(--ink);
}

.nav-list > li > a:hover::after,
.nav-list > li > a:focus-visible::after,
.nav-list > li.current-menu-item > a::after {
	transform: scaleX(1);
}

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

/* The drawer header and the drawer's own subscribe link exist only below the
   breakpoint; above it there is no drawer to head. */
.nav-head,
.nav-subscribe {
	display: none;
}

.menu-pill {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1.5px solid var(--line-firm);
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
}

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

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

.nav-scrim {
	display: none;
}

/* ── The drawer ──────────────────────────────────────────────────────
   Below 1080px the menu becomes a panel sliding in from the right over a
   scrim. */
@media (max-width: 1080px) {
	.menu-pill {
		display: inline-flex;
	}

	.masthead {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.nav-primary {
		position: fixed;
		inset: 0 0 0 auto;
		z-index: 200;
		width: min(24rem, 86vw);
		background: var(--sand);
		box-shadow: var(--shade-panel);
		transform: translateX(101%);
		visibility: hidden;
		transition: transform 260ms var(--ease), visibility 260ms var(--ease);
		overflow-y: auto;
	}

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

	.nav-menu {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		padding: 1.25rem var(--gutter) 2rem;
	}

	.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 {
		font-size: var(--fs-small);
		font-weight: 600;
		color: var(--ink-400);
	}

	.nav-close {
		display: grid;
		place-items: center;
		width: 2.5rem;
		height: 2.5rem;
		padding: 0;
		border: 1.5px solid var(--line-firm);
		border-radius: 50%;
		background: transparent;
		color: var(--ink);
	}

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

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

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

	.nav-list > li > a {
		display: block;
		padding-block: 0.95rem;
		font-size: 1.125rem;
		font-weight: 600;
		letter-spacing: var(--track-tight);
	}

	.nav-list > li > a::after {
		display: none;
	}

	.nav-subscribe {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		margin-top: auto;
		padding: 1rem 1.5rem;
		border-radius: var(--r-pill);
		background: var(--forest);
		color: #FFFFFF;
		font-size: var(--fs-small);
		font-weight: 600;
		text-decoration: none;
		justify-content: center;
		transition: background var(--speed) var(--ease);
	}

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

	/* The drawer's subscribe control is a FOREST pill, so its badge knocks out
	   in forest. It is not a .btn, so none of the button variants' knockout
	   rules reach it — it fell through to the badge default, which is the sand
	   ground, and on hover drew an off-white glyph inside a white circle. The
	   arrow was there and all but invisible. */
	.nav-subscribe .arrow-badge {
		--badge-knockout: var(--forest);
	}

	.nav-subscribe:hover .arrow-badge,
	.nav-subscribe:focus-visible .arrow-badge {
		--badge-knockout: var(--forest-deep);
	}

	.masthead__cta {
		display: none;
	}

	.nav-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 150;
		background: rgba(20, 16, 13, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 260ms var(--ease), visibility 260ms var(--ease);
	}

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

	/* ── Lifting the masthead above the scrim ────────────────────────
	   The drawer lives INSIDE .site-header, and that header is
	   `position: sticky; z-index: 100`, which makes it a stacking context.
	   The drawer's own `z-index: 200` therefore only ranks it against its
	   siblings inside the header — to the rest of the page the whole header
	   is one layer at 100, which is BELOW the scrim at 150.

	   So the scrim painted over the open drawer: the panel rendered behind a
	   50%-black veil, its links greyed out and the article showing through,
	   while every computed style on the panel still read as a solid
	   background. That is the bug — it could not be fixed on the panel,
	   because the panel was never the element being out-ranked.

	   Raising the HEADER itself is the fix, and only while the drawer is
	   open, so the masthead goes back to its ordinary layer the moment the
	   drawer closes. body.nav-open is already toggled by main.js alongside
	   the scroll lock. */
	body.nav-open .site-header {
		z-index: 200;
	}

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

/* ── The reading-progress bar ────────────────────────────────────────
   Single posts only. Sits at the very top of the viewport, above the
   masthead. */
.read-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 300;
	height: 2px;
	background: transparent;
	pointer-events: none;
}

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

/* ── 7. Cards ────────────────────────────────────────────────────────────── */
/* One article vocabulary, two treatments.

   .card--photo   the lead treatment: a photograph at 4:3, then the topic,
                  the headline, a standfirst and a foot carrying the read
                  time against the circular arrow.

   .card--plate   the quiet treatment: no photography, a tinted plate. Used
                  where a band needs volume without competing with the
                  picture cards above it, and as the automatic fallback for
                  any post with no featured image.

   The card does not lift on hover. A translateY on every card in a grid is
   the kit default; here the photograph zooms very slightly inside its own
   frame and the arrow fills, which is a response located where the reader is
   actually looking. */
.card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: transparent;
}

.card__media {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--r-img);
	background: var(--sand-deep);
	aspect-ratio: 4 / 3;
	margin-bottom: 1.1rem;
}

.card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease);
}

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

.card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.card__topic {
	align-self: flex-start;
	margin-bottom: 0.55rem;
	font-size: var(--fs-micro);
	font-weight: 600;
	color: var(--card-accent, var(--forest));
	text-decoration: none;
	transition: opacity var(--speed) var(--ease);
}

.card__topic:hover {
	opacity: 0.7;
}

.card__title {
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: var(--track-tight);
	text-wrap: balance;
	margin-bottom: 0.5rem;
}

/* The headline underline grows from the left on hover of the whole card,
   drawn as a background so it animates without reflowing the text. */
.card__title a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 260ms var(--ease);
}

.card:hover .card__title a,
.card__title a:focus-visible {
	background-size: 100% 1px;
}

.card__text {
	font-size: var(--fs-small);
	line-height: 1.55;
	color: var(--ink-400);
	margin-bottom: 1.1rem;
	max-width: 42ch;
}

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

.card__read {
	font-size: var(--fs-meta);
	font-weight: 500;
}

/* The plate treatment: a filled tile carrying the topic's colour as a top
   edge, so a photograph-less card is a deliberate object rather than a card
   with a hole where the picture should be. */
.card--plate {
	padding: clamp(1.25rem, 2vw, 1.75rem);
	border-radius: var(--r-card);
	background: var(--paper);
	border-top: 3px solid var(--card-accent, var(--forest));
	box-shadow: var(--shade);
}

/* ── The card row ────────────────────────────────────────────────────
   Three across, collapsing to two then one. */
.cardrow {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 2.6vw, 2.5rem);
}

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

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

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

/* ── 8.1 The hero ────────────────────────────────────────────────────
   A full-bleed photograph with the lead story knocked out of it, and the
   trust bar WELDED to its bottom edge — three claims sitting inside the
   image rather than floating on a strip below it. That weld is the one bold
   move on the page; everything under it stays quiet.

   The photograph is the newest lead story's own artwork, so the hero is
   editorial rather than decorative: it links to that article. */
.hero {
	position: relative;
	background: var(--forest-deep);
}

.hero__frame {
	position: relative;
	min-height: clamp(30rem, 78vh, 46rem);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	isolation: isolate;
}

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

/* One gradient, four stops. A plain top-to-bottom fade either washes out the
   photograph or leaves the claim unreadable over a bright sky; this darkens
   the bottom hard for the copy, clears the middle so the picture survives,
   and puts a light veil back at the very top so the masthead's white
   wordmark holds over any image an editor uploads. */
.hero__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(10, 24, 20, 0.93) 0%,
		rgba(10, 24, 20, 0.62) 34%,
		rgba(10, 24, 20, 0.14) 66%,
		rgba(10, 24, 20, 0.42) 100%
	);
}

/* The top padding clears the sticky masthead and nothing more. It was
   11rem, which ADDED to the frame's min-height rather than sitting inside
   it — the column is already bottom-aligned, so the padding pushed the
   frame to twice the height it was asked for. */
.hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding: 6rem var(--gutter) 0;
	margin-top: auto;
}

/* The measure is set in rem, not ch. A ch unit resolves against the
   element's OWN font size, and this block's headline is 84px — so `34ch`
   there is about four characters per line and the claim becomes a vertical
   stack of single words. A fixed measure keeps the headline at a readable
   line length whatever size it renders at. */
.hero__copy {
	max-width: 42rem;
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	color: #FFFFFF;
}

.hero__flag {
	margin-bottom: 1.25rem;
}

.hero__title {
	font-size: var(--fs-claim);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: var(--track-claim);
	text-wrap: balance;
	margin-bottom: 1.1rem;
}

.hero__title a {
	text-decoration: none;
}

.hero__title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.12em;
}

.hero__text {
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: 1.75rem;
	max-width: 46ch;
}

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

/* The trust bar: three claims on the image's bottom edge, divided by
   hairlines. This is the weld — it has no plate of its own, only a top rule
   over the scrim already there, so it reads as part of the photograph rather
   than as a separate strip below it. */
.hero__trust {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.hero__trustgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.hero__trustitem {
	padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1rem, 2vw, 1.75rem) clamp(1.35rem, 2.4vw, 1.9rem) 0;
	color: #FFFFFF;
}

.hero__trustitem + .hero__trustitem {
	padding-left: clamp(1rem, 2vw, 1.75rem);
	border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.hero__trusttitle {
	display: block;
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: var(--track-tight);
	margin-bottom: 0.2rem;
}

.hero__trusttext {
	display: block;
	font-size: var(--fs-meta);
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.68);
}

@media (max-width: 800px) {
	.hero__frame {
		min-height: 0;
		display: block;
	}

	.hero__inner {
		padding-top: clamp(5rem, 22vw, 8rem);
	}

	.hero__copy {
		max-width: none;
	}

	.hero__trustgrid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero__trustitem {
		padding: 0.9rem 0;
	}

	.hero__trustitem + .hero__trustitem {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
	}
}

/* ── 8.2 The proof rail ──────────────────────────────────────────────
   A dark strip directly under the hero carrying one claim and the archive's
   real figures.

   The reference runs press logos here. A publication that has not actually
   been cited in those mastheads should not print them, so this carries
   numbers it can stand behind instead — from st_newsroom_figures(), which
   counts the archive rather than inventing a reach. */
.proof {
	background: var(--ink);
	color: var(--sand);
}

.proof__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.25rem, 3vw, 3rem);
	max-width: var(--container);
	margin-inline: auto;
	padding: clamp(1.5rem, 2.6vw, 2.25rem) var(--gutter);
}

.proof__claim {
	font-size: var(--fs-lead);
	font-weight: 600;
	letter-spacing: var(--track-tight);
	max-width: 32ch;
}

.proof__figures {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 3rem);
}

.proof__figure {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.proof__value {
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: var(--track-claim);
	line-height: 1;
}

.proof__label {
	font-size: var(--fs-meta);
	color: rgba(242, 238, 231, 0.62);
}

/* ── 8.3 The topic index ─────────────────────────────────────────────
   The beats, as full-width rows on hairlines rather than as a row of cards.

   The previous build ran four white plates, each with a line-art glyph in a
   tinted disc above a name and a count. Two things were wrong with it. It was
   the icon-in-a-circle features row every SaaS landing page ships, which says
   nothing about a men's health publication and appears nowhere in the
   reference. And it was empty: a 200px-tall card carrying a 24px glyph, two
   words and a count told the reader only that the section exists, which the
   navigation already told them.

   A row here states the section's name at display size, the headline it is
   currently leading with, and how deep the archive goes. The headline is the
   argument for clicking; the rest is the label.

   The section's colour enters as a short bar at the left edge that grows on
   hover — the one place the topic palette appears in this band, and it is
   attached to the row it identifies rather than floated behind everything. */
.topicindex {
	display: grid;
	border-top: 1px solid var(--line);
}

.topicindex__row {
	border-bottom: 1px solid var(--line);
}

/* The whole row is the link, so the target is the full width rather than the
   section name alone. */
.topicindex__link {
	display: grid;
	grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto auto;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding: clamp(1.1rem, 2vw, 1.6rem) 0 clamp(1.1rem, 2vw, 1.6rem) 1.35rem;
	position: relative;
	text-decoration: none;
	color: inherit;
	transition: padding-left var(--speed) var(--ease);
}

/* The accent bar. Short at rest, full-height on hover — the row's own
   response, in the section's own colour. */
.topicindex__link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 1.5rem;
	border-radius: 2px;
	background: var(--row-accent, var(--forest));
	transition: height var(--speed) var(--ease);
}

.topicindex__link:hover::before,
.topicindex__link:focus-visible::before {
	height: calc(100% - 1.5rem);
}

.topicindex__link:hover {
	padding-left: 1.75rem;
}

.topicindex__name {
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	font-weight: 700;
	letter-spacing: var(--track-claim);
	line-height: 1.05;
	min-width: 0;
}

/* The section's current lead. Quieter than the name beside it — it is the
   evidence, not the label — and clamped to one line so every row keeps the
   same height whatever the headline's length. */
.topicindex__latest {
	font-size: var(--fs-small);
	line-height: 1.4;
	color: var(--ink-400);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color var(--speed) var(--ease);
}

.topicindex__link:hover .topicindex__latest {
	color: var(--ink);
}

.topicindex__count {
	font-size: var(--fs-meta);
	color: var(--ink-400);
	white-space: nowrap;
}

@media (max-width: 1080px) {
	/* The headline drops to its own line under the name, so neither has to be
	   squeezed. The count and the arrow stay on the name's line. */
	.topicindex__link {
		grid-template-columns: minmax(0, 1fr) auto auto;
		gap: 0.35rem 1.25rem;
	}

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

	.topicindex__count {
		grid-column: 2;
		grid-row: 1;
	}

	.topicindex__link .arrow-badge {
		grid-column: 3;
		grid-row: 1;
	}

	/* Two lines, then clipped. `overflow` stays HIDDEN here: -webkit-line-clamp
	   only truncates inside an overflow-hidden box, and setting it to visible
	   let a long headline run to a third line with the clamp's ellipsis
	   stranded mid-sentence on the second. */
	.topicindex__latest {
		grid-column: 1 / -1;
		grid-row: 2;
		white-space: normal;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}

@media (max-width: 560px) {
	/* The arrow goes: at this width it competes with the count for the last
	   scrap of the name's line, and the whole row is already the target. */
	.topicindex__link .arrow-badge {
		display: none;
	}

	.topicindex__link {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.topicindex__count {
		grid-column: 2;
	}
}

/* ── 8.4 The feature band ────────────────────────────────────────────
   One story at full width: a large photograph on the left, the copy on a
   sand plate to the right of it, the two locked together with no gap. The
   reference's product hero, turned into an article.

   This is the page's second-largest tile and it exists to break the rhythm
   between two card grids — without it, Latest and Goals read as one long
   undifferentiated run of pictures. */
.feature__frame {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: stretch;
	border-radius: var(--r-panel);
	overflow: hidden;
	background: var(--paper);
	box-shadow: var(--shade-lift);
}

.feature__media {
	position: relative;
	display: block;
	min-height: clamp(20rem, 40vw, 30rem);
	overflow: hidden;
	background: var(--sand-deep);
}

.feature__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--ease);
}

.feature__frame:hover .feature__img {
	transform: scale(1.03);
}

.feature__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
	padding: clamp(2rem, 4vw, 3.5rem);
}

.feature__topic {
	align-self: flex-start;
	font-size: var(--fs-micro);
	font-weight: 600;
	color: var(--card-accent, var(--forest));
	text-decoration: none;
}

.feature__title {
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: var(--track-claim);
	text-wrap: balance;
}

.feature__title a {
	text-decoration: none;
}

.feature__title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.1em;
}

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

.feature__foot {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
}

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

	.feature__media {
		min-height: clamp(14rem, 55vw, 22rem);
	}
}

/* ── 8.5 Guides — the dark band ──────────────────────────────────────
   The long reads, on a forest slab. The first dark section after the proof
   rail, and the one that says "stop scrolling and sit down with this".

   The band is ordered by reading time rather than by date, and 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; the others are the alternatives. */
.guides > .band__inner {
	padding-block: 0;
}

.guides__panel {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-panel);
	background: var(--forest);
	color: #FFFFFF;
	padding: clamp(2.25rem, 5vw, 4rem);
}

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

/* Repurposed from a label above the heading to a standfirst below it, for
   the same reason the band head was: the label restated the heading. */
.guides__eyebrow {
	display: none;
}

.guides__title {
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: var(--track-claim);
	text-wrap: balance;
	margin-bottom: 0.85rem;
}

.guides__sub {
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.72);
}

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

.guide {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: clamp(1.25rem, 2vw, 1.75rem);
	border-radius: var(--r-card);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
	transition: background var(--speed) var(--ease);
}

.guide:hover {
	background: rgba(255, 255, 255, 0.12);
}

.guide--feature {
	grid-column: span 2;
	background: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--ink);
}

.guide--feature:hover {
	background: #FFFFFF;
}

/* The reading time leads the plate as a FIGURE. On a band whose whole
   premise is "these are the long ones", the length is the reason to click,
   so it is set at figure scale rather than buried in a meta line. */
.guide__time {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin-bottom: 0.35rem;
}

.guide__timevalue {
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: var(--track-claim);
}

.guide--feature .guide__timevalue {
	font-size: var(--fs-figure);
	color: var(--forest);
}

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

.guide--feature .guide__timeunit {
	color: var(--ink-400);
}

.guide__label {
	font-size: var(--fs-micro);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.72);
}

.guide--feature .guide__label {
	color: var(--forest);
}

.guide__title {
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: var(--track-tight);
	text-wrap: balance;
}

.guide--feature .guide__title {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 700;
	line-height: 1.08;
}

.guide__title a {
	text-decoration: none;
}

.guide__title a:hover,
.guide__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.14em;
}

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

.guide__date {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.9rem;
	font-size: var(--fs-meta);
	color: rgba(255, 255, 255, 0.55);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.guide--feature .guide__date {
	color: var(--ink-400);
	border-top-color: var(--line-soft);
}

/* The inline dot separator used in the single-post meta line. */
.guide__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.45;
}

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

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

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

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

/* ── 8.7 The goals mosaic ────────────────────────────────────────────
   Six photographs with the topic knocked out of each, edge to edge. The
   reference's "Your goals, our treatments" row — here it is "what you came
   here to fix", which is how a reader of a men's health title actually
   navigates: by the problem, not by the taxonomy.

   The tiles are UNEQUAL: the first takes two columns and full height, the
   rest are single. Size carries which goal the site leads on rather than
   presenting six interchangeable options. */
/* Four columns, two rows: eight cells. The lead spans 2x2 and takes four of
   them, so FIVE tiles fill the block exactly — the lead plus four singles.
   front-page.php requests exactly five for that reason.
 *
 * The rules below re-shape the grid for sites with fewer categories than
 * that, so the band is never a full row short of its own layout. */
.goalgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: clamp(10.5rem, 16vw, 14rem);
	grid-auto-flow: dense;
	gap: clamp(0.5rem, 0.9vw, 0.875rem);
}

/* Four tiles: the 2x2 lead plus three singles is seven of eight cells, which
   leaves one empty square in the bottom-right corner. Dropping to three
   columns makes it a 2x2 lead beside a stack of two, with the fourth tile
   running full width beneath — six cells, all filled. */
.goalgrid:has(.goal:nth-child(4)):not(:has(.goal:nth-child(5))) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.goalgrid:has(.goal:nth-child(4)):not(:has(.goal:nth-child(5))) .goal:last-child {
	grid-column: span 3;
}

/* Three tiles: the 2x2 lead plus two singles leaves a visible gap
   in a four-column grid, so the row drops to three columns and the lead
   takes a single full-height cell beside them. */
.goalgrid:has(.goal:nth-child(3)):not(:has(.goal:nth-child(4))) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.goalgrid:has(.goal:nth-child(3)):not(:has(.goal:nth-child(4))) .goal--lead {
	grid-column: span 1;
	grid-row: span 2;
}

/* Two tiles: a simple pair, no lead emphasis — with only two routes there is
   no hierarchy to express. */
.goalgrid:not(:has(.goal:nth-child(3))) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.goalgrid:not(:has(.goal:nth-child(3))) .goal--lead {
	grid-column: span 1;
	grid-row: span 1;
}

.goal {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	border-radius: var(--r-img);
	background: var(--forest-deep);
	color: #FFFFFF;
	text-decoration: none;
	isolation: isolate;
}

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

.goal__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	transition: transform 700ms var(--ease);
}

.goal:hover .goal__img,
.goal:focus-visible .goal__img {
	transform: scale(1.05);
}

.goal::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(10, 24, 20, 0.88) 0%,
		rgba(10, 24, 20, 0.35) 55%,
		rgba(10, 24, 20, 0.05) 100%
	);
	transition: background var(--speed) var(--ease);
}

.goal:hover::after {
	background: linear-gradient(
		to top,
		rgba(10, 24, 20, 0.92) 0%,
		rgba(10, 24, 20, 0.5) 60%,
		rgba(10, 24, 20, 0.15) 100%
	);
}

.goal__body {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: clamp(0.9rem, 1.6vw, 1.35rem);
}

.goal__title {
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: var(--track-tight);
	line-height: 1.18;
	text-wrap: balance;
}

.goal--lead .goal__title {
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	font-weight: 700;
	line-height: 1.05;
}

.goal__count {
	font-size: var(--fs-meta);
	color: rgba(255, 255, 255, 0.7);
	white-space: nowrap;
}

/* A goal tile with no artwork behind it. Rather than dropping it from the
   grid, it takes a flat forest plate — the grid should show every route the
   site actually has. */
.goal--plain {
	background: var(--forest);
}

.goal--plain::after {
	background: none;
}

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

	.goal--lead {
		grid-column: span 2;
		grid-row: span 1;
		min-height: clamp(12rem, 40vw, 16rem);
	}
}

/* ── 8.8 The reading list ────────────────────────────────────────────
   The archive index: the volume band, and the only section on the page that
   is not made of pictures.

   It is NOT numbered. The previous build numbered these rows 01, 02, 03 —
   but a reverse-chronological archive slice is not a sequence a reader
   follows in order, so the numerals were decoration pretending to be
   structure. What replaces them is the date, set at the same scale: it is
   the fact that actually orders the list. */
.readlist {
	display: grid;
	gap: 0;
}

.readlist__row {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr) auto;
	align-items: start;
	gap: clamp(1rem, 2.5vw, 2.5rem);
	padding-block: clamp(1.25rem, 2vw, 1.75rem);
	border-top: 1px solid var(--line);
}

.readlist__row:last-child {
	border-bottom: 1px solid var(--line);
}

/* The date stands where the numeral used to. */
.readlist__num {
	font-size: var(--fs-meta);
	font-weight: 600;
	color: var(--row-accent, var(--forest));
	padding-top: 0.3em;
	white-space: nowrap;
}

.readlist__body {
	min-width: 0;
}

.readlist__title {
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: var(--track-tight);
	margin-bottom: 0.35rem;
	text-wrap: balance;
}

.readlist__title a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 260ms var(--ease);
}

.readlist__row:hover .readlist__title a,
.readlist__title a:focus-visible {
	background-size: 100% 1px;
}

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

.readlist__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.3rem;
	text-align: right;
	padding-top: 0.3em;
}

.readlist__topic {
	font-size: var(--fs-micro);
	font-weight: 600;
	color: var(--row-accent, var(--forest));
	white-space: nowrap;
}

.readlist__facts {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--fs-meta);
	color: var(--ink-400);
	white-space: nowrap;
}

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

	.readlist__num {
		grid-row: 1;
		grid-column: 1;
		padding-top: 0;
	}

	.readlist__body {
		grid-row: 2;
		grid-column: 1 / -1;
	}

	.readlist__meta {
		grid-row: 1;
		grid-column: 2;
		flex-direction: row;
		align-items: center;
		gap: 0.6rem;
		padding-top: 0;
	}
}

/* ── 8.9 The newsletter panel ────────────────────────────────────────
   The band that closes the page. A forest slab split in two: the offer and
   the form on the left, the four commitments stacked on the right.

   The previous build ran a decorative illustration in the corner. It is gone
   — the panel now says what the newsletter is and what the publication will
   not do, and an illustration of a man reading added nothing a reader needed
   to decide. */
.signal > .band__inner {
	padding-block: 0;
}

.signal__panel {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
	border-radius: var(--r-panel);
	background: var(--forest);
	color: #FFFFFF;
	padding: clamp(2.25rem, 5vw, 4rem);
}

.signal__copy {
	min-width: 0;
}

.signal__title {
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: var(--track-claim);
	text-wrap: balance;
	margin-bottom: 0.9rem;
	max-width: 20ch;
}

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

.signal__form {
	max-width: 30rem;
}

/* The commitments. A plain stacked list against a hairline rule rather than
   a 2x2 grid of icon tiles: four icon cards next to a form is two competing
   card systems in one panel. */
.promises {
	display: grid;
	gap: 0;
	align-self: stretch;
}

.promise {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding-block: clamp(0.8rem, 1.4vw, 1.1rem);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.promise:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.promise__icon {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	color: rgba(255, 255, 255, 0.85);
	margin-top: 0.1rem;
}

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

.promise__text {
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.9);
}

/* Retired: the corner illustration. Kept as a rule rather than removed from
   the template alone, so an older cached template cannot reintroduce it. */
.signal__art {
	display: none;
}

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

/* ── 9. Sidebar panels ───────────────────────────────────────────────────── */
/* The article column. Three panels: the newsletter, the topic list, and
   something else to read. Each is a flat plate on the sand ground — no
   shadow, because the sidebar sits beside body copy and a shadowed box there
   competes with the text it is meant to support. */
.sidebar {
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 2vw, 1.75rem);
	min-width: 0;
}

.panel {
	padding: clamp(1.25rem, 2vw, 1.75rem);
	border-radius: var(--r-card);
	background: var(--paper);
	border: 1px solid var(--line-soft);
}

.panel__heading {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: var(--track-tight);
	line-height: 1.2;
	margin-bottom: 0.5rem;
}

.panel__intro {
	font-size: var(--fs-small);
	line-height: 1.5;
	color: var(--ink-400);
	margin-bottom: 1.1rem;
}

/* The subscribe panel inverts, because it is the one thing in this column
   asking for an action. */
.panel--subscribe {
	background: var(--forest);
	border-color: var(--forest);
	color: #FFFFFF;
}

.panel--subscribe .panel__intro {
	color: rgba(255, 255, 255, 0.74);
}

/* ── The topic list ──────────────────────────────────────────────────
   Each row carries its topic colour as a leading bar that grows on hover. */
.cat-list {
	display: grid;
}

.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: 0.75rem;
	padding: 0.7rem 0 0.7rem 0.85rem;
	position: relative;
	font-size: var(--fs-small);
	font-weight: 500;
	text-decoration: none;
	transition: color var(--speed) var(--ease);
}

.cat-list__link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 0.9rem;
	border-radius: 2px;
	background: var(--cat-accent, var(--forest));
	transition: height var(--speed) var(--ease);
}

.cat-list__link:hover::before,
.cat-list__link:focus-visible::before {
	height: 1.6rem;
}

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

.cat-list__count {
	font-size: var(--fs-meta);
	color: var(--ink-400);
}

/* ── The mini list ───────────────────────────────────────────────────
   A compact article row: a small square thumbnail beside two lines. Used in
   the sidebar and again in the footer. */
.minilist {
	display: grid;
	gap: 0;
}

.minilist__item {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding-block: 0.9rem;
	min-width: 0;
}

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

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

.minilist__media {
	display: block;
	flex: none;
	width: 4.5rem;
	height: 4.5rem;
	overflow: hidden;
	border-radius: var(--r-img);
	background: var(--sand-deep);
}

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

.minilist__body {
	min-width: 0;
}

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

.minilist__title {
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin-bottom: 0.25rem;
}

.minilist__title a {
	text-decoration: none;
}

.minilist__title a:hover,
.minilist__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.minilist__meta {
	font-size: var(--fs-meta);
	color: var(--ink-400);
}

/* An ink slab in two parts: the brand block beside a row of short link
   columns, then the legal bar at the foot.

   Ink rather than forest: the newsletter panel directly above the footer is
   already forest, and two green slabs stacked read as one very tall panel
   with a seam in it.

   The previous build led with a "Latest" module — four full article rows
   carrying topic, headline and date. That is content, not navigation: it took
   half the footer's height, restated what the front page had already shown
   three times, and left a column of dead space beside it because nothing else
   was tall enough to sit next to it. The footer is now the site's map, which
   is what a footer is for. */
.site-footer {
	margin-top: clamp(3.5rem, 7vw, 6.5rem);
	background: var(--ink);
	color: var(--sand);
	padding-block: clamp(2.5rem, 5vw, 4rem) 0;
}

/* The brand block takes a fixed, generous share and the columns divide what
   is left. A 1fr/1fr split let the four columns squeeze to the point where
   topic names wrapped, which is the one thing a link column must not do. */
.footer-top {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
	gap: clamp(2rem, 5vw, 5rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

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

.footer-brand .site-logo,
.footer-brand__mark {
	display: inline-block;
	color: var(--sand);
	margin-bottom: 1rem;
}

/* The footer logo sits on the ink slab, so a dark uploaded mark disappears
   there exactly as it does over the hero photograph. brightness(0) flattens
   it to solid black first, so a coloured mark inverts to clean white rather
   than to its colour complement. */
.footer-brand .custom-logo {
	filter: brightness(0) invert(1);
	width: 78%;
	max-width: 15rem;
	max-height: none;
	height: auto;
}

.footer-brand__text {
	font-size: var(--fs-small);
	line-height: 1.55;
	color: rgba(242, 238, 231, 0.6);
	max-width: 34ch;
	margin-bottom: 1.5rem;
}

.footer-brand__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* ── The link columns ────────────────────────────────────────────────
   Four equal columns: two of topics, one of pages, one of commitments. Equal
   widths rather than auto, so the headings sit on one line and the block
   reads as a single grid. */
.footer-nav {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	min-width: 0;
}

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

.footer-col__heading {
	font-size: var(--fs-micro);
	font-weight: 600;
	color: rgba(242, 238, 231, 0.45);
	margin-bottom: 0.9rem;
}

/* The second topic column's heading. It has to be invisible but still hold
   its line, so the four columns align on their first link — .screen-reader-text
   would take it out of the flow with position:absolute and the column would
   start a line higher than the three beside it.

   `color: transparent` rather than `visibility: hidden`: visibility removes
   the element from the accessibility tree as well as from the page, and this
   heading is the only thing telling a screen-reader user that the column is a
   continuation of the topic list rather than a new unlabelled one. */
.footer-col__heading--continued {
	color: transparent;
	user-select: none;
}

.footer-links {
	display: grid;
	gap: 0.55rem;
}

.footer-links a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
	font-size: var(--fs-small);
	line-height: 1.35;
	color: rgba(242, 238, 231, 0.82);
	text-decoration: none;
	transition: color var(--speed) var(--ease);
}

.footer-links a:hover,
.footer-links a:focus-visible {
	color: var(--sand);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* The article count trails its topic, quiet enough that the column still
   reads as a list of names rather than as a table of figures. */
.footer-links__count {
	flex: none;
	font-size: var(--fs-micro);
	color: rgba(242, 238, 231, 0.35);
}

/* The commitments are statements, not links, so they carry no bullet and no
   hover — a marker beside each one made them read as a fourth nav column
   whose links had stopped working. */
.footer-notes {
	display: grid;
	gap: 0.6rem;
	margin-bottom: 1.25rem;
}

.footer-notes li {
	font-size: var(--fs-meta);
	line-height: 1.5;
	color: rgba(242, 238, 231, 0.6);
}

.footer-contact {
	display: inline-block;
	font-size: var(--fs-meta);
	font-weight: 600;
	color: var(--sand);
	text-decoration: none;
	border-bottom: 1px solid rgba(242, 238, 231, 0.3);
	padding-bottom: 0.15em;
	transition: border-color var(--speed) var(--ease);
	overflow-wrap: anywhere;
}

.footer-contact:hover,
.footer-contact:focus-visible {
	border-bottom-color: var(--sand);
}

/* ── The base bar ────────────────────────────────────────────────────
   Copyright on the left, the standing disclaimer on the right. */
.footer-base {
	border-top: 1px solid rgba(242, 238, 231, 0.14);
}

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

.footer-copy {
	font-size: var(--fs-meta);
	color: rgba(242, 238, 231, 0.5);
}

/* A health publication should carry this somewhere, and the last line of the
   last screen is where a reader looks for it. */
.footer-disclaimer {
	font-size: var(--fs-meta);
	color: rgba(242, 238, 231, 0.4);
	max-width: 52ch;
	text-align: right;
}

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

	.footer-brand .custom-logo {
		width: auto;
		max-width: 13rem;
	}
}

@media (max-width: 700px) {
	.footer-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem 1.5rem;
	}

	/* The second topic column continues the first, so on a two-column layout
	   its hidden heading would leave it starting at a different height than
	   its neighbour. Revealing nothing and simply letting it sit in the grid
	   is correct — the gap does the separating. */
	.footer-disclaimer {
		text-align: left;
	}
}

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

	/* One column: the topic lists now stack vertically, so the invisible
	   heading is no longer holding two columns level — it is just a blank
	   line between two halves of the same list. Collapsed outright here, and
	   the columns read as one continuous list, which at this width is exactly
	   what they are. */
	.footer-col__heading--continued {
		display: none;
	}

	/* The row gap drops to the link gap so the two halves of the topic list
	   run continuously, and each column restores the full separation below
	   itself with its own padding. Done on the grid rather than with a
	   negative margin on the continued column, which would have to cancel a
	   clamp() exactly and would drift the moment the gap changed. */
	.footer-nav {
		row-gap: 0.55rem;
	}

	.footer-col:not(:has(+ .footer-col .footer-col__heading--continued)) {
		padding-bottom: 1.25rem;
	}
}

/* ── 11. Archive / category ──────────────────────────────────────────────── */
/* The page head: the listing's name set at claim scale with its count
   beneath. It sits directly on the sand rather than in a plate — an archive
   is a continuation of the site, not a destination that needs framing. */
.band--head > .band__inner {
	padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.page-head {
	max-width: 40ch;
}

/* The eyebrow here is genuine information — it names the KIND of listing
   (topic, tag, archive), which the title alone does not say. So unlike the
   band head's, it is kept above the title. */
.page-head__eyebrow {
	display: inline-block;
	font-size: var(--fs-meta);
	font-weight: 600;
	color: var(--forest);
	margin-bottom: 0.6rem;
}

.page-head__title {
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--track-claim);
	text-wrap: balance;
	margin-bottom: 0.75rem;
}

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

/* The two-column body shared by archives and single posts. */
.layout__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

.layout__main {
	min-width: 0;
}

.layout--single > .band__inner {
	padding-block: clamp(2rem, 4vw, 3.5rem) 0;
}

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

	.sidebar {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

.archive-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.75rem, 3vw, 2.75rem);
}

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

/* ── Pagination ──────────────────────────────────────────────────────── */
.pagination {
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	padding-top: clamp(1.5rem, 2.5vw, 2rem);
	border-top: 1px solid var(--line);
}

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

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

.pagination .page-numbers:hover,
.pagination .page-numbers:focus-visible {
	border-color: var(--ink);
}

.pagination .page-numbers.current {
	background: var(--forest);
	border-color: var(--forest);
	color: #FFFFFF;
}

.pagination .page-numbers.dots {
	border-color: transparent;
	min-width: 1.5rem;
	padding-inline: 0;
}

/* ── The empty listing ───────────────────────────────────────────────── */
.notice-page {
	padding-block: clamp(3rem, 6vw, 5rem);
}

.notice-page__inner {
	max-width: 44ch;
}

.notice-page__title {
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: var(--track-claim);
	margin-bottom: 0.75rem;
}

.notice-page__text {
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--ink-400);
	margin-bottom: 1.75rem;
}

.notice-page__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* ── 12. Single post ─────────────────────────────────────────────────────── */
/* The article's head is typeset on the sand and the photograph follows it.
   Knocking a headline into the lead image is right where the picture IS the
   news; on a health article the lead image is usually stock, and burning a
   headline into it costs contrast for nothing.

   No byline anywhere: this publication does not attribute its articles to a
   named writer, and functions.php 404s the author archives to match. */
.post-head {
	max-width: 46rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.post-head__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1rem;
}

.post-head__title {
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--track-claim);
	text-wrap: balance;
	margin-bottom: 1rem;
}

.post-head__standfirst {
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--ink-400);
	margin-bottom: 1.25rem;
	max-width: 58ch;
}

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

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

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

.post-hero__img {
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

/* ── Article body ────────────────────────────────────────────────────
   The measure is capped in ch so it holds whatever the reader's font size
   is, rather than at a pixel width that gets long when text is scaled up. */
.single-content {
	max-width: var(--measure);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ink-200);
}

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

.single-content h2 {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: var(--track-claim);
	margin-top: 2.2em;
	color: var(--ink);
}

.single-content h3 {
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: var(--track-tight);
	margin-top: 1.9em;
	color: var(--ink);
}

.single-content h4 {
	font-size: 1.125rem;
	font-weight: 600;
	margin-top: 1.7em;
	color: var(--ink);
}

.single-content a {
	color: var(--forest);
	text-decoration-color: color-mix(in srgb, var(--forest) 40%, transparent);
	transition: text-decoration-color var(--speed) var(--ease);
}

.single-content a:hover {
	text-decoration-color: var(--forest);
}

.single-content ul,
.single-content ol {
	padding-left: 1.4em;
}

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

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

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

.single-content blockquote {
	padding: 0.25em 0 0.25em 1.5em;
	border-left: 3px solid var(--forest);
	font-size: 1.1875rem;
	line-height: 1.5;
	font-weight: 500;
	color: var(--ink);
}

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

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

.single-content code {
	padding: 0.15em 0.4em;
	border-radius: 3px;
	background: var(--sand-deep);
	font-size: 0.9em;
}

.single-content pre {
	padding: 1.25rem;
	border-radius: var(--r-plate);
	background: var(--ink);
	color: var(--sand);
	overflow-x: auto;
}

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

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

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

.single-content th {
	font-weight: 600;
	background: var(--sand-deep);
}

.single-content hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin-block: 2.5em;
}

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

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

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

.single-tags a:hover,
.single-tags a:focus-visible {
	border-color: var(--ink);
	background: var(--paper);
}

.single-share {
	margin-top: clamp(1.5rem, 2.5vw, 2rem);
	max-width: var(--measure);
}

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

.share-row__label {
	font-size: var(--fs-meta);
	font-weight: 600;
	color: var(--ink-400);
	margin-right: 0.35rem;
}

/* Every share control is the same hairline square filling forest on hover.
   The networks' own brand colours are deliberately not used: this design
   carries one accent, and four brand hues in a row would be a second colour
   system living in the article footer. */
.share-row__link {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	color: var(--ink-300);
	transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

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

.share-row__link:hover,
.share-row__link:focus-visible {
	background: var(--forest);
	border-color: var(--forest);
	color: #FFFFFF;
}

.postnav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	max-width: var(--measure);
}

.postnav__item {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--paper);
	text-decoration: none;
	transition: border-color var(--speed) var(--ease);
}

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

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

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

.postnav__title {
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

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

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

/* ── 13. Static page ─────────────────────────────────────────────────────── */
.page-content {
	max-width: var(--measure);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ink-200);
}

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

.page-content h2,
.page-content h3 {
	font-weight: 700;
	letter-spacing: var(--track-claim);
	line-height: 1.1;
	margin-top: 2em;
	color: var(--ink);
}

.page-content h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.page-content h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); letter-spacing: var(--track-tight); }

.page-content a {
	color: var(--forest);
}

.page-content ul,
.page-content ol {
	padding-left: 1.4em;
}

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

/* ── 14. Thank-you / 404 ─────────────────────────────────────────────────── */
.notice-hero {
	display: flex;
	align-items: center;
	min-height: clamp(24rem, 55vh, 34rem);
	padding-block: clamp(3rem, 6vw, 5rem);
}

.notice-hero__inner {
	max-width: 48ch;
}

.notice-hero__code {
	display: inline-block;
	font-size: var(--fs-meta);
	font-weight: 600;
	color: var(--forest);
	margin-bottom: 0.75rem;
}

.notice-hero__title {
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--track-claim);
	text-wrap: balance;
	margin-bottom: 1rem;
}

.notice-hero__text {
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--ink-400);
	margin-bottom: 1.75rem;
}

.notice-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* ── 16. Utilities, motion, print ────────────────────────────────────────── */
/* Scroll reveal. One gesture, used once per band: the band fades up a short
   distance as it enters. main.js adds .is-in; the initial hidden state is
   gated on .js so a reader without scripting sees everything.

   Deliberately restrained — a stagger on every card in every grid is the
   generated-page default. Bands reveal; their contents do not. */
.js .reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}

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

@media (prefers-reduced-motion: reduce) {
	.js .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

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

/* WordPress core alignment classes. */
.alignleft {
	float: left;
	margin: 0.4em 1.5em 1em 0;
}

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

.aligncenter {
	margin-inline: auto;
}

.alignwide {
	width: min(100vw - (var(--gutter) * 2), 78rem);
	max-width: none;
	margin-inline: calc(50% - min(50vw - var(--gutter), 39rem));
}

.alignfull {
	width: calc(100vw - (var(--gutter) * 2));
	max-width: none;
	margin-inline: calc(50% - (50vw - var(--gutter)));
}

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

.sticky .card__title::after {
	content: "";
}

@media print {
	.site-header,
	.site-footer,
	.sidebar,
	.read-progress,
	.share-row,
	.postnav,
	.signal,
	.st-modal,
	.nav-scrim {
		display: none !important;
	}

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

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

	a {
		text-decoration: underline;
	}
}

/* The guide foot carries the date and, where the figure was dropped, the
   reading time beside it. */

/* ── The front page's floating masthead ──────────────────────────────
   The hero is a full-bleed photograph and the masthead is meant to sit ON
   it, not above it on a strip of sand. Sticky positioning keeps the header
   in flow, so the hero began below it and the top 76px of the page was an
   empty bar.

   Pulling the main element up by the header's height puts the photograph
   under the masthead; the hero's own top padding already reserves the space
   the copy needs to clear it. Only on the front page, and only while the
   header is transparent — once scrolled it takes its own plate. */
.home .site-header {
	position: fixed;
	left: 0;
	right: 0;
}

.home .site-main {
	padding-top: 0;
}

/* Every other template keeps the sticky masthead in flow, so its first band
   is not hidden underneath. */
.home .hero {
	margin-top: 0;
}

/* A dark Customizer logo over the front page's dark hero photograph. The
   image cannot be recoloured, so it is inverted to white until the masthead
   takes its own light plate on scroll. brightness(0) flattens it to solid
   black first, so a coloured mark inverts to clean white rather than to its
   colour complement. */
.st-invert-hero-logo .site-header:not(.site-header--scrolled) .custom-logo {
	filter: brightness(0) invert(1);
}

/* ── Notice pages — 404 and thank-you ────────────────────────────────
   Both carry a mark, a headline, an explanation and two routes out. The mark
   is a hairline circle rather than a filled badge: it identifies the state
   without shouting at a reader who has either hit a dead link or just done
   what was asked. */
.notice-page__mark {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: 1.5rem;
	border: 1.5px solid var(--line-firm);
	border-radius: 50%;
	color: var(--ink-300);
}

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

/* The confirmation mark is the one place the forest fills a circle: the
   reader has completed the action and the page should say so. */
.notice-page__mark--ok {
	background: var(--forest);
	border-color: var(--forest);
	color: #FFFFFF;
}

.notice-page__note {
	font-size: var(--fs-small);
	line-height: 1.55;
	color: var(--ink-400);
	margin-top: -0.75rem;
	margin-bottom: 1.75rem;
	max-width: 52ch;
}

/* ── The static page band ────────────────────────────────────────────
   A page is read straight through with no sidebar, so its band simply
   carries the measured column. */
.page-band > .band__inner {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.page-main .page-head {
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

/* The archive head and its listing are one unit, so the listing band does not
   re-apply a full band's top padding under a head that already has its own
   bottom padding — that stacked into a screen of empty sand between the
   title and the first card. */
.listing > .band__inner {
	padding-block: 0 var(--band-y);
}

/* ── The drawer is not part of the transparent masthead ──────────────
   Below 1080px the nav panel is a child of .site-header, so the front page's
   "paint my text white over the hero photograph" rules reached inside it and
   the drawer rendered as grey-on-grey with no plate of its own.

   These re-assert the drawer's own surface at drawer widths, where the
   masthead's transparency is irrelevant because the panel covers it. */
@media (max-width: 1080px) {
	.home .site-header:not(.site-header--scrolled) .nav-list > li > a {
		color: var(--ink);
	}

	/* The drawer's own "Menu" label stays the quieter ink the panel header
	   uses everywhere else, rather than the full-strength ink the links take. */
	.home .site-header:not(.site-header--scrolled) .nav-head__title {
		color: var(--ink-400);
	}

	.home .site-header:not(.site-header--scrolled) .nav-close {
		color: var(--ink);
		border-color: var(--line-firm);
	}

	/* The drawer's subscribe pill keeps its white text on the front page too —
	   it is a forest pill inside the panel, not part of the transparent
	   masthead, so the white-over-photograph rules must not repaint it.
	 *
	 * Its badge knockout has to be restated HERE rather than left to the
	 * .nav-subscribe rule further up: that rule lives in a different media
	 * block and loses to this selector's higher specificity. Without it the
	 * knockout fell back to the sand default and the hovered badge drew an
	 * off-white glyph inside a white circle — a 32-point colour difference,
	 * which is invisible at 10px. */
	.home .site-header:not(.site-header--scrolled) .nav-subscribe {
		color: #FFFFFF;
	}

	.home .site-header:not(.site-header--scrolled) .nav-subscribe .arrow-badge {
		--badge-knockout: var(--forest);
	}

	.home .site-header:not(.site-header--scrolled) .nav-subscribe:hover .arrow-badge,
	.home .site-header:not(.site-header--scrolled) .nav-subscribe:focus-visible .arrow-badge {
		--badge-knockout: var(--forest-deep);
	}

	/* The panel is fixed-position, so it needs its own stacking context above
	   the scrim rather than inheriting the header's. */
	.nav-primary {
		color: var(--ink);
	}
}

/* A notice page sits in a plain .band, whose inner already carries a full
   band's vertical padding — and .notice-page then added its own on top, so
   the mark started a third of the way down an empty screen. The notice
   supplies its own rhythm inside the band instead. */
.band > .band__inner > .notice-page {
	padding-block: 0;
}