@charset "UTF-8";
/* ==========================================================================
   Sovereign Terminal v8 — "Brutalist Grid"
   --------------------------------------------------------------------------
   The v7 deck is gone. No floating plates, no rounded panels, no shadows,
   no pale blue-grey board. In its place:

   THE GRID. The page is one off-white field ruled by hairlines. Sections are
   full-bleed bands separated by a single 1px line, each stamped with a
   monospace section number (/01, /02 …) in the top-left of its own gutter.
   Where rules cross, a small plus mark is drawn — the register marks of a
   technical drawing. Nothing floats; everything is pinned to the rule.

   COLOUR. Off-white ground, near-black ink, and exactly two accents:
   electric violet carries every interactive and live state; acid lime is
   reserved for the single loudest affirmative on a page (the operational
   strip, one CTA). They are never used decoratively side by side — lime
   appears once per screen at most, which is what keeps it loud.

   TYPE. Three faces, each with one job:
     Archivo      — headlines. Set in caps, maximum width, tracking negative,
                    leading below 0.9. This is the voice of the design.
     Inter        — body copy and UI labels. Nothing else.
     JetBrains Mono — every number, code, timestamp, section marker, eyebrow
                    and status readout. If it is machine output, it is mono.

   RADIUS. Zero. Everywhere. --radius exists as a token set to 0 so that any
   component still asking for one gets a square corner rather than a value
   that has to be hunted down.

   Sections in order:
      1  Tokens
      2  Reset / base
      3  The grid — bands, gutters, rules, register marks
      4  Typography primitives
      5  Buttons, chips, badges, status furniture
      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, search, modal)
     16  Utilities, motion, print
   ========================================================================== */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root {
	/* ── Ground ──────────────────────────────────────────────────────────
	   Off-white with a trace of warmth — paper, not screen-white. The whole
	   design sits directly on this; there is no second surface behind it. */
	--ground: #F2F2EF;
	--surface: #F7F7F5;
	--surface-raise: #FFFFFF;

	/* ── Ink ─────────────────────────────────────────────────────────────
	   A true near-black. The reference's type is unapologetically black, so
	   the top of the ramp does not hedge. Every step below clears AA on the
	   ground. */
	--ink: #0A0A0A;
	--ink-100: #0A0A0A;
	--ink-200: #1C1C1C;
	--ink-300: #333333;
	--ink-400: #5C5C5C;
	/* -500 carries almost every 11px micro-cap in the design — dates, band
	   notes, the footer line. At #787878 it measured 3.94:1 on the ground,
	   just under AA for text that small, so it is a step darker than it looks
	   like it wants to be. -600 is for RULES and decorative marks only, never
	   for text. */
	--ink-500: #6B6B6B;
	--ink-600: #9A9A9A;

	/* Ink washes, for meter tracks and dotted plates. Kept as flat colours
	   rather than alphas so they composite predictably over the ground. */
	--ink-025: #EDEDEA;
	--ink-050: #E4E4E0;

	/* ── Inverted ────────────────────────────────────────────────────────
	   The dark bands. Not pure black: a hair of lift keeps display type from
	   vibrating, and lets the violet read against it. */
	--dark: #0D0D0D;
	--dark-2: #141414;
	--dark-3: #1E1E1E;
	--on-dark: #F2F2EF;
	--on-dark-dim: #A0A0A0;
	--on-dark-faint: rgba(242, 242, 239, 0.38);

	/* ── Accents ─────────────────────────────────────────────────────────
	   Violet is the system colour: links, live pips, meters, focus, the
	   active state of everything. Lime is the one affirmative — it appears
	   once per screen and never as a second decorative hue. */
	--accent: #7C3AED;
	--accent-deep: #5B21B6;
	--accent-soft: #EDE6FD;
	--lime: #D4FF3F;
	--lime-deep: #B8E62E;

	/* ── Rules ───────────────────────────────────────────────────────────
	   One hairline weight for the whole design. A "hairline" that is 1px on
	   every display is what makes the grid read as a drawing rather than a
	   set of boxes, so it is a hard pixel and never scales. */
	--hair: 1px;
	--line: rgba(10, 10, 10, 0.22);
	--line-soft: rgba(10, 10, 10, 0.11);
	--line-firm: var(--ink);
	--line-dark: rgba(242, 242, 239, 0.20);
	--line-dark-soft: rgba(242, 242, 239, 0.10);

	/* ── Type ────────────────────────────────────────────────────────────── */
	--font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Display ramp. The reference's headline fills its column edge to edge in
	   two or three lines, so the top of the ramp is large and the tracking
	   goes hard negative as it grows. */
	--fs-mega: clamp(2.75rem, 9vw, 7.5rem);
	--fs-hero: clamp(2.25rem, 6.5vw, 5rem);
	--fs-display: clamp(1.85rem, 4.6vw, 3.4rem);
	--fs-h1: clamp(1.7rem, 3.6vw, 2.75rem);
	--fs-h2: clamp(1.35rem, 2.5vw, 2rem);
	--fs-h3: clamp(1.05rem, 1.5vw, 1.3rem);

	/* The reading sizes, raised. The design leans hard on mono micro-caps, and
	   an audit of the live front page found 36% of all rendered text sitting
	   below 14px — 11px alone carried 1762 characters across 201 elements.
	   That is a lot of the page to set at a size people have to lean in for.

	   The bottom of the ramp is raised MOST and the top is left alone: the
	   display sizes above were never the problem, and scaling them too would
	   have pushed the hero past 86px and forced every headline to rewrap. The
	   result is a flatter, calmer scale rather than a uniformly bigger page. */
	--fs-lead: clamp(1.0625rem, 1.35vw, 1.1875rem);
	--fs-body: 1.0625rem;
	--fs-sm: 0.9375rem;
	--fs-xs: 0.875rem;
	/* 11px → 13px. This one token sets every eyebrow, date, section number,
	   status readout and nav item in the design, so it is the single biggest
	   legibility win available. Its wide tracking makes it read smaller than
	   it measures, which is why it needs the largest jump of the ramp. */
	--fs-micro: 0.8125rem;

	--track-eyebrow: 0.14em;
	--track-tight: -0.02em;
	--track-tighter: -0.035em;
	--track-mega: -0.045em;

	/* ── Rhythm ──────────────────────────────────────────────────────────── */
	--gap: clamp(0.9rem, 1.6vw, 1.4rem);
	--gap-lg: clamp(1.5rem, 3vw, 2.5rem);
	--container: 1440px;
	--container-narrow: 760px;

	/* The band: a full-bleed horizontal section. --band-pad is its vertical
	   breathing room; --gutter is the left rail the section number sits in,
	   which collapses to nothing on a phone. */
	--band-pad: clamp(2.25rem, 5vw, 4.5rem);
	--gutter: clamp(0rem, 4vw, 4.5rem);

	/* Zero, everywhere. Kept as a token so a component that still asks for a
	   radius gets a square corner instead of a stray value. */
	--radius: 0;
	--radius-sm: 0;
	--radius-lg: 0;
	--radius-pill: 0;

	--logo-h: 40px;

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

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

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

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

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* The grid is built from borders that must not be able to push a
	   horizontal scrollbar on a narrow viewport. */
	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.
   Anything that must genuinely paint while carrying the attribute should stop
   carrying it instead. */
[hidden] {
	display: none !important;
}

img { height: auto; }

a {
	color: inherit;
	text-decoration-thickness: var(--hair);
	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 violet outline offset off the
   element, so it reads on the ground, on a dark band and over a photograph
   without a per-context override. Violet is too dark to read against
   near-black, so on an inverted ground lime takes the focus role. */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.band--dark :focus-visible,
.band--accent :focus-visible,
.panel--subscribe :focus-visible {
	outline-color: var(--lime);
}

::selection {
	background: var(--accent);
	color: var(--ground);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--ink);
	color: var(--ground);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
}

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

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

/* ── 3. The grid ─────────────────────────────────────────────────────────
   A BAND is a full-bleed section. Bands stack with one hairline between
   them — drawn as a border-top so the first band has no rule above it and
   consecutive bands never double up.

   Inside a band, .band__inner is the measured container. The band's own
   vertical rules are drawn on the inner element, which is what produces the
   ruled left and right gutters the section numbers sit in. */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.container--narrow { max-width: var(--container-narrow); }

.band {
	position: relative;
	border-top: var(--hair) solid var(--line);
	padding-block: var(--band-pad);
}

/* The first band on a page sits directly under the masthead, which already
   draws its own bottom rule. */
.band:first-child { border-top: 0; }

/* Flush: the band's content runs to the viewport edge (the hero photograph,
   the dark ranked board). Vertical padding is dropped and the child takes
   responsibility for its own inset. */
.band--flush { padding-block: 0; }

.band--tight { padding-block: clamp(1.25rem, 2.5vw, 2rem); }

/* Inverted band. */
.band--dark {
	background: var(--dark);
	color: var(--on-dark);
	border-top-color: var(--ink);
}

.band--dark a { color: var(--on-dark); }

/* The violet band — used once, for the newsletter call. */
.band--accent {
	background: var(--accent);
	color: var(--surface-raise);
	border-top-color: var(--accent-deep);
}

.band__inner {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 2.5rem);
	position: relative;
}

/* ── The band's head: section number, label, and the rule between ───────
   /01  SELECTED WORK ───────────────────────────  note
   The number is mono and violet; the label is mono caps in ink; the rule
   runs out to the right edge and the optional note closes it. */
.band__head {
	display: flex;
	align-items: baseline;
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	margin-bottom: clamp(1.25rem, 2.5vw, 2.25rem);
	min-width: 0;
}

.band__num {
	flex: none;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--accent);
	/* Aligns the number column across every band regardless of digit count. */
	min-width: 2.25rem;
}

.band--dark .band__num { color: var(--lime); }
.band--accent .band__num { color: var(--lime); }

.band__label {
	flex: none;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink);
}

.band--dark .band__label,
.band--accent .band__label { color: var(--on-dark); }

.band__rule {
	flex: 1;
	min-width: 1rem;
	height: var(--hair);
	background: var(--line);
	/* Baseline-aligned with mono caps rather than centred in the row. */
	transform: translateY(-0.25em);
}

.band--dark .band__rule,
.band--accent .band__rule { background: var(--line-dark); }

.band__note {
	flex: none;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-500);
	white-space: nowrap;
}

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

/* The violet ground is mid-luminance, so the grey used on the BLACK bands
   fails against it (2.2:1). The note joins the rest of the band's text
   instead, held back by weight rather than by lightness. */
.band--accent .band__note { color: rgba(255, 255, 255, 0.88); }

@media (max-width: 620px) {
	/* The note is the first thing to go: it is always secondary to the
	   label, and keeping it wraps the head onto two lines. */
	.band__note { display: none; }
}

/* ── Register marks ──────────────────────────────────────────────────────
   The small plus drawn where rules cross. Decorative and aria-hidden; they
   are what turn a set of borders into a technical drawing. Absolutely
   positioned against a .band, one per corner. */
.band__marks {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.band__mark {
	position: absolute;
	width: 9px;
	height: 9px;
	color: var(--ink-600);
}

/* Two strokes, centred — cheaper than an SVG and it inherits currentColor. */
.band__mark::before,
.band__mark::after {
	content: "";
	position: absolute;
	background: currentColor;
}

.band__mark::before {
	inset: 50% 0 auto 0;
	height: var(--hair);
	transform: translateY(-50%);
}

.band__mark::after {
	inset: 0 auto 0 50%;
	width: var(--hair);
	transform: translateX(-50%);
}

.band__mark--tl { top: -5px; left: clamp(1rem, 3vw, 2.5rem); }
.band__mark--tr { top: -5px; right: clamp(1rem, 3vw, 2.5rem); }

.band--dark .band__mark { color: var(--on-dark-faint); }

/* ── The plus rail ───────────────────────────────────────────────────────
   The vertical column of plus marks that runs down the outer edge of the
   reference's work section. Hidden below the point where there is no gutter
   left to draw it in. */
.plusrail {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1rem;
	display: grid;
	align-content: space-between;
	justify-items: center;
	color: var(--ink-600);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	line-height: 1;
	pointer-events: none;
}

.plusrail--left { left: 0.5rem; }
.plusrail--right { right: 0.5rem; }

@media (max-width: 1200px) {
	.plusrail { display: none; }
}

/* ── The vertical edge label ─────────────────────────────────────────────
   The rotated "WEB DESIGN REIMAGINED" strip on the reference's left edge.
   Set on the hero only, and dropped entirely once the gutter closes. */
.edgelabel {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-rl;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	/* Real text, not a rule: it takes the text grey rather than the decorative
	   one -600 is reserved for. */
	color: var(--ink-500);
	pointer-events: none;
}

@media (max-width: 1200px) {
	.edgelabel { display: none; }
}

/* ── 4. Typography primitives ────────────────────────────────────────────── */
/* The house headline: caps, widest weight the face has, tracking negative,
   leading tight enough that two lines read as one mass. */
.h-display {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	text-transform: uppercase;
	line-height: 0.88;
	letter-spacing: var(--track-tighter);
	color: var(--ink);
	/* Caps at this weight sit optically low; a hair of negative top margin
	   pulls the block back onto its rule. */
	margin-block-start: -0.06em;
}

.h-mega {
	font-size: var(--fs-mega);
	letter-spacing: var(--track-mega);
	line-height: 0.85;
}

.h-hero    { font-size: var(--fs-hero); }
.h-display { font-size: var(--fs-display); }
.h-1       { font-size: var(--fs-h1); }
.h-2       { font-size: var(--fs-h2); }

/* The eyebrow / micro-cap. Every label, kicker and status string in the
   design is this. */
.eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-400);
}

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

/* Mono is not styling, it is a signal: anything wearing it is machine
   output. Numbers, codes, timestamps, coordinates. */
.mono {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

/* ── 5. Buttons, chips, badges, status furniture ─────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.875rem 1.125rem;
	border: var(--hair) solid var(--ink);
	background: none;
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--dur) var(--ease),
	            color var(--dur) var(--ease),
	            border-color var(--dur) var(--ease);
}

/* The filled black control — the reference's one solid button in a row of
   outlined ones. */
.btn--primary {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--ground);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--surface-raise);
}

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

/* The violet control. Used for the subscribe action, which is the one thing
   on the page that is neither navigation nor an article. */
.btn--accent {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--surface-raise);
}

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

/* The lime control — at most one per screen. */
.btn--lime {
	background: var(--lime);
	border-color: var(--ink);
	color: var(--ink);
}

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

/* On a dark band. */
.btn--light {
	border-color: var(--line-dark);
	color: var(--on-dark);
}

.btn--light:hover,
.btn--light:focus-visible {
	background: var(--on-dark);
	border-color: var(--on-dark);
	color: var(--ink);
}

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

.btn--solid-light:hover,
.btn--solid-light:focus-visible {
	background: var(--lime);
	border-color: var(--lime);
	color: var(--ink);
}

.btn--sm { padding: 0.625rem 0.875rem; }
.btn--lg { padding: 1.0625rem 1.5rem; font-size: var(--fs-xs); }

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

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

/* ── The arrow badge ─────────────────────────────────────────────────────
   The chevron that trails a label. In v7 this was a circle; here it is a
   square that fills on hover, which is the only shape the design allows. */
.arrow-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
	border: var(--hair) solid currentColor;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.arrow-badge svg {
	width: 0.6875rem;
	height: 0.6875rem;
	/* The glyph is drawn pointing up-right in its own path data (see
	   st_arrow_badge) rather than rotated here: a CSS transform on an <svg>
	   element has no fill-box to resolve against, so a rotate() on it computes
	   to none and the arrow silently ends up sideways. */
}

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

/* The knock-out colour: what the glyph is cut out IN once the square fills.
   A badge is always cut out of the surface behind it, so the page ground is
   the default; a context on a different surface overrides this ONE property
   rather than restating the whole hover treatment.

   Declared on :root, NOT on .arrow-badge. A property set directly on the badge
   would beat any value inherited from the hovered ancestor, however specific
   that ancestor's selector — which silently killed every per-context override
   below. Inheritance is the mechanism here, so the default must only ever be
   inherited too.

   Getting this wrong makes the arrow vanish rather than look slightly off: the
   fill and the glyph both resolve from currentColor, so a knock-out that
   matches the fill gives an invisible icon in a solid block. */
:root { --badge-knockout: var(--ground); }

/* Filled at rest. */
.arrow-badge--solid {
	background: currentColor;
}

.arrow-badge--solid svg { color: var(--badge-knockout); }

/* Inside a control that inverts on hover, the badge inverts with it. */
.btn:hover .arrow-badge,
.btn:focus-visible .arrow-badge,
a:hover > .arrow-badge,
a:focus-visible > .arrow-badge {
	background: currentColor;
}

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

/* On a filled control the square fills with the LABEL colour, so the glyph is
   knocked out in the control's own background instead of the page ground. */
.btn--primary:hover .arrow-badge,
.btn--primary:focus-visible .arrow-badge { --badge-knockout: var(--ink); }

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

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

/* On a dark band the ground is the dark surface, not the page's off-white. */
.band--dark .arrow-badge,
.panel--subscribe .arrow-badge { --badge-knockout: var(--dark); }

.band--accent .arrow-badge { --badge-knockout: var(--accent); }

/* Over a photograph the badge sits on its own dark scrim. */
.feedlead__flag ~ * .arrow-badge,
.card--wide .arrow-badge,
.deskcell--feature .arrow-badge { --badge-knockout: var(--dark); }

/* ── Chips: the category tag ─────────────────────────────────────────────
   A squared micro-cap tag. The category's own colour survives only as the
   leading block the chip draws from --chip-bg, so nine hues identify desks
   without putting a second colour system beside the violet one. */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3125rem 0.5rem;
	border: var(--hair) solid var(--line);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--dur) var(--ease),
	            color var(--dur) var(--ease),
	            border-color var(--dur) var(--ease);
}

.chip::before {
	content: "";
	width: 7px;
	height: 7px;
	flex: none;
	background: var(--chip-bg, var(--accent));
}

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

.chip--sm {
	padding: 0.25rem 0.4375rem;
	font-size: 0.75rem;
}

/* Over a photograph. The ground is unknown, so the chip carries its own. */
.chip--on-media {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--ground);
}

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

/* On a dark band, and in the sidebar's inverted subscribe panel. */
.band--dark .chip,
.panel--subscribe .chip {
	border-color: var(--line-dark);
	color: var(--on-dark);
}

.band--dark .chip::before,
.panel--subscribe .chip::before {
	/* The desk colours are chosen to sit on the pale ground; several are too
	   deep to register as a 7px block on near-black, so on an inverted ground
	   the swatch gives way to lime and the chip's TEXT carries the desk. */
	background: var(--lime);
}

.band--dark .chip:hover,
.band--dark .chip:focus-visible,
.panel--subscribe .chip:hover,
.panel--subscribe .chip:focus-visible {
	background: var(--on-dark);
	border-color: var(--on-dark);
	color: var(--ink);
}

.band--dark .chip:hover::before,
.band--dark .chip:focus-visible::before,
.panel--subscribe .chip:hover::before,
.panel--subscribe .chip:focus-visible::before {
	background: var(--ink);
}

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

.band--dark .pip { background: var(--lime); }

@keyframes st-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
	.pip { animation: none; }
}

/* ── The status bar ──────────────────────────────────────────────────────
   The strip that closes the reference's page: CONNECTION SECURE ·
   > ACCESS GRANTED_ · SCN:0007. Three cells, the middle one violet. */
.statusbar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	border-top: var(--hair) solid var(--line);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.statusbar__cell {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6875rem clamp(1rem, 3vw, 2.5rem);
	color: var(--ink-400);
	min-width: 0;
}

.statusbar__cell--end { justify-content: flex-end; }

.statusbar__cell--key {
	background: var(--accent);
	color: var(--surface-raise);
	font-weight: 600;
	justify-content: center;
	/* The caret that blinks at the end of the string. */
	white-space: nowrap;
}

.statusbar__caret {
	display: inline-block;
	width: 0.5em;
	height: 1em;
	background: currentColor;
	animation: st-caret 1.1s steps(1) infinite;
	vertical-align: -0.12em;
}

@keyframes st-caret {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.statusbar__caret { animation: none; }
}

@media (max-width: 720px) {
	/* The flanking cells are ambient; the violet one is the message. */
	.statusbar { grid-template-columns: 1fr; }
	.statusbar__cell:not(.statusbar__cell--key) { display: none; }
}

/* ── 6. Header / navigation ──────────────────────────────────────────────
   A flat sticky bar, not a floating pill: full width, hairline under it, and
   internal vertical rules separating brand / nav / clock / CTA exactly as
   the reference's masthead is divided. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--ground);
	border-bottom: var(--hair) solid var(--line);
}

.site-header--scrolled {
	border-bottom-color: var(--ink);
}

.masthead {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: stretch;
	gap: 0;
	min-height: 4.25rem;
}

.masthead__brand {
	display: flex;
	align-items: center;
	padding-right: clamp(0.9rem, 2vw, 1.75rem);
	border-right: var(--hair) solid var(--line);
}

.site-logo {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: 1.0625rem;
	letter-spacing: var(--track-tight);
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* The underscore that terminates the reference's wordmark — a terminal
   cursor parked after the name. */
.site-logo::after {
	content: "_";
	color: var(--accent);
}

.custom-logo-link { display: flex; align-items: center; }

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

/* ── The desk list ───────────────────────────────────────────────────────── */
.nav-primary {
	display: flex;
	align-items: center;
	min-width: 0;
}

.nav-list {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0;
	min-width: 0;
	overflow: hidden;
}

.nav-list li { display: flex; align-items: center; }

/* The slash between desk names, as in WORK / SERVICES / ABOUT. */
.nav-list li + li::before {
	content: "/";
	color: var(--ink-600);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	padding-inline: 0.1rem;
}

.nav-list a {
	display: block;
	padding: 0.5rem clamp(0.5rem, 1.1vw, 0.9rem);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--dur) var(--ease);
}

.nav-list a:hover,
.nav-list a:focus-visible,
.nav-list .current-menu-item > a,
.nav-list .current_page_item > a {
	color: var(--accent);
}

.nav-head { display: none; }

.nav-subscribe { display: none; }

/* ── The masthead clock and utilities ────────────────────────────────────── */
.masthead__clock {
	display: flex;
	align-items: stretch;
}

.masthead__util {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-left: clamp(0.75rem, 1.5vw, 1.25rem);
	border-left: var(--hair) solid var(--line);
}

.masthead__cta { align-self: center; }

/* The drawer toggle: the three-dot "more" mark from the reference's masthead
   at desktop, a labelled burger below the breakpoint. */
.menu-pill {
	display: none;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	border: var(--hair) solid var(--ink);
	background: none;
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.menu-pill:hover,
.menu-pill:focus-visible {
	background: var(--ink);
	color: var(--ground);
}

.menu-pill__bars {
	display: grid;
	gap: 3px;
	width: 15px;
}

.menu-pill__bars span {
	height: var(--hair);
	background: currentColor;
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.menu-pill__label {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
}

/* Under 420px the label goes and the toggle becomes the mark alone: at that
   width the wordmark and a labelled button do not both fit on the row. */
@media (max-width: 420px) {
	.menu-pill__label { display: none; }
	.menu-pill { padding: 0.625rem; }
}

/* ── Drawer breakpoint ───────────────────────────────────────────────────
   Below 1080px the desk list becomes a full-height panel behind the MENU
   button. The clock goes with it: at that width the masthead has room for
   the wordmark and one control, and the clock is the least load-bearing. */
@media (max-width: 1080px) {
	.masthead {
		grid-template-columns: 1fr auto;
		min-height: 3.75rem;
	}

	.masthead__brand {
		border-right: 0;
		padding-right: 0;
	}

	.masthead__clock { display: none; }

	.masthead__cta { display: none; }

	.masthead__util {
		border-left: 0;
		padding-left: 0;
	}

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

	.nav-primary {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(24rem, 88vw);
		z-index: 200;
		display: grid;
		grid-template-rows: auto 1fr;
		align-content: start;
		background: var(--ground);
		border-left: var(--hair) solid var(--ink);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--dur) var(--ease-out),
		            visibility var(--dur) var(--ease-out);
		overflow-y: auto;
	}

	.nav-primary.is-open {
		transform: none;
		visibility: visible;
	}

	.nav-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 1.125rem clamp(1rem, 4vw, 1.75rem);
		border-bottom: var(--hair) solid var(--line);
	}

	.nav-head__title {
		font-family: var(--font-mono);
		font-size: var(--fs-micro);
		font-weight: 600;
		letter-spacing: var(--track-eyebrow);
		text-transform: uppercase;
	}

	.nav-close {
		display: grid;
		place-items: center;
		width: 2.25rem;
		height: 2.25rem;
		border: var(--hair) solid var(--ink);
		background: none;
		color: var(--ink);
	}

	.nav-close:hover,
	.nav-close:focus-visible {
		background: var(--ink);
		color: var(--ground);
	}

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

	.nav-menu {
		display: grid;
		/* Pins the list to the top of the menu ROW. .nav-primary's own
		   align-content governs the placement of its two rows, not the
		   contents of either, so without this the links float mid-panel. */
		align-content: start;
		align-self: start;
		gap: 0;
		padding: clamp(1rem, 4vw, 1.75rem);
	}

	.nav-list {
		display: grid;
		overflow: visible;
	}

	.nav-list li { display: block; }

	/* The slash separator is a horizontal-row device; in a stacked drawer
	   each item gets a rule instead. */
	.nav-list li + li::before { content: none; }

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

	.nav-list a {
		padding: 0.9375rem 0;
		font-family: var(--font-display);
		font-weight: 800;
		font-stretch: 112%;
		font-size: 1.25rem;
		line-height: 1;
		letter-spacing: var(--track-tight);
	}

	.nav-subscribe {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		margin-top: 1.5rem;
		padding: 0.9375rem 1rem;
		background: var(--accent);
		color: var(--surface-raise);
		font-family: var(--font-mono);
		font-size: var(--fs-micro);
		font-weight: 600;
		letter-spacing: var(--track-eyebrow);
		text-transform: uppercase;
		text-decoration: none;
	}

	body.nav-open { overflow: hidden; }

	/* The drawer is a child of the sticky masthead, which is its own stacking
	   context at z-index:100 — so the panel's own z-index is resolved INSIDE
	   that layer and cannot rise above the scrim (z-index:150) sitting on the
	   body. Lifting the whole header above the scrim while the drawer is open
	   is what lets its links be clicked; without this the scrim covers the
	   panel and swallows every tap on it. */
	body.nav-open .site-header { z-index: 200; }

	.nav-scrim {
		position: fixed;
		inset: 0;
		z-index: 150;
		background: rgba(10, 10, 10, 0.55);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
	}

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

@media (min-width: 1081px) {
	/* Above the breakpoint the scrim is not merely hidden but absent, so it
	   can never intercept a click on the page behind it. */
	.nav-scrim { display: none; }
}

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

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

/* ── 7. Cards — the shared article vocabulary ───────────────────────────── */
.card {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 0.875rem;
	/* Only the right and bottom edges: the grid draws the top and left, so
	   adjacent cells share one rule rather than stacking two. */
	border-right: var(--hair) solid var(--line);
	border-bottom: var(--hair) solid var(--line);
	background: var(--surface);
	padding: clamp(0.75rem, 1.4vw, 1rem);
	transition: background var(--dur) var(--ease);
}

.card:hover {
	background: var(--surface-raise);
}

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

.card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Desaturated at rest, full colour on hover: it keeps a grid of
	   photographs from fighting the violet, and gives the hover somewhere
	   to go that is not a shadow. */
	filter: grayscale(1) contrast(1.05);
	transition: filter var(--dur) var(--ease), transform 0.5s var(--ease-out);
}

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

.card__body {
	display: grid;
	align-content: start;
	gap: 0.5rem;
}

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

.card__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: var(--fs-h3);
	line-height: 1.02;
	letter-spacing: var(--track-tight);
	text-transform: uppercase;
	color: var(--ink);
}

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

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

.card__meta,
.meta-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-500);
}

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

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

/* ── The wide cover card ─────────────────────────────────────────────────
   Full width, headline burned into the lower third of the photograph. */
.card--wide {
	grid-template-rows: none;
	grid-column: 1 / -1;
	border-right: 0;
	padding: 0;
	min-height: clamp(16rem, 34vw, 24rem);
	display: grid;
	align-items: end;
	overflow: hidden;
	background: var(--dark);
}

.card--wide .card__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

.card--wide .card__img {
	filter: grayscale(1) contrast(1.1) brightness(0.85);
}

.card--wide:hover .card__img {
	filter: contrast(1.05) brightness(0.85);
}

.card__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(10, 10, 10, 0.92) 0%,
		rgba(10, 10, 10, 0.55) 38%,
		rgba(10, 10, 10, 0.05) 75%);
}

.card--wide .card__body {
	position: relative;
	padding: clamp(1.25rem, 3vw, 2.25rem);
	gap: 0.625rem;
	max-width: 46rem;
}

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

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

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

/* ── The card grid ───────────────────────────────────────────────────────── */
/* Cells share their hairlines instead of floating with gutters: the rules are
   the layout, as everywhere else in this design. The outer border is drawn on
   the grid and each cell draws only its right and bottom edge, so no rule is
   ever doubled and the last row needs no special case. */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 0;
	border-top: var(--hair) solid var(--ink);
	border-left: var(--hair) solid var(--line);
}

/* ── The byline ──────────────────────────────────────────────────────────── */
.byline {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-500);
}

.byline__avatar {
	width: 1.875rem;
	height: 1.875rem;
	flex: none;
	object-fit: cover;
	filter: grayscale(1);
	border: var(--hair) solid var(--line);
}

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

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

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

/* The separator between the name and the date, in the inline variant. */
.byline__sep { color: var(--ink-500); }

/* The stacked variant: name over role, with the portrait beside the pair
   rather than beside the name alone. st_the_byline() emits .byline--stacked
   on the wrapper and wraps the text in .byline__stack. */
.byline--stacked { align-items: center; }

.byline__stack {
	display: grid;
	gap: 0;
	line-height: 1.3;
	min-width: 0;
}

/* The portrait is suppressed rather than merely hidden: st_the_byline() skips
   emitting the <img> when 'byline--plain' is in the class string, so this rule
   only ever catches a caller that set the class some other way. */
.byline--plain .byline__avatar { display: none; }

/* ── The minilist: a thumbnail + headline row ───────────────────────────── */
.minilist {
	display: grid;
	gap: 0;
}

.minilist__item {
	display: grid;
	grid-template-columns: 4rem 1fr;
	gap: 0.75rem;
	align-items: start;
	padding-block: 0.75rem;
	border-top: var(--hair) solid var(--line-soft);
}

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

.minilist__media {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--ink-050);
}

.minilist__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter var(--dur) var(--ease);
}

.minilist__item:hover .minilist__img { filter: none; }

.minilist__body {
	display: grid;
	gap: 0.25rem;
	min-width: 0;
}

.minilist__title {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
}

.minilist__title a {
	color: var(--ink);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

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

.minilist__date {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-500);
}

/* On a dark band. */
.band--dark .minilist__item { border-top-color: var(--line-dark-soft); }
.band--dark .minilist__title a { color: var(--on-dark); }
.band--dark .minilist__title a:hover,
.band--dark .minilist__title a:focus-visible { color: var(--lime); }
.band--dark .minilist__date { color: var(--on-dark-dim); }

/* ── 8. Front page sections ─────────────────────────────────────────────── */
/* ── The hero ────────────────────────────────────────────────────────────
   Two columns: the claim on the left, the lead photograph on the right in a
   hard-bordered frame with coordinate readouts pinned to it. On a phone the
   frame drops under the claim. */
.hero {
	position: relative;
	border-top: 0;
}

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(1.5rem, 3.5vw, 3.5rem);
	align-items: start;
}

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

.hero__stage {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	align-content: start;
	/* The hero column is the only place the type is allowed to get this
	   large, and it needs the full column to do it. */
	min-width: 0;
}

.hero__marker {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--accent);
}

.hero__marker-date {
	color: var(--ink-500);
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
}

.hero__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: var(--fs-hero);
	line-height: 0.85;
	letter-spacing: var(--track-mega);
	text-transform: uppercase;
	color: var(--ink);
	margin-block-start: -0.06em;
}

/* The violet rule under the claim, then the standfirst. */
.hero__tagline {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
}

.hero__sub {
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--ink-400);
	max-width: 44ch;
}

/* The lead story, named under the claim so the photograph is attached to a
   headline rather than floating as decoration. */
.hero__lead {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 1rem;
	padding: 0.9375rem 0;
	border-top: var(--hair) solid var(--line);
	border-bottom: var(--hair) solid var(--line);
	text-decoration: none;
	transition: border-color var(--dur) var(--ease);
}

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

.hero__lead-body { display: grid; gap: 0.3rem; min-width: 0; }

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

.hero__lead-title {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
}

.hero__lead:hover .hero__lead-title { color: var(--accent); }

/* ── The hero frame: the photograph and its instrumentation ──────────────── */
.hero__frame {
	position: relative;
	border: var(--hair) solid var(--ink);
	background: var(--ink-050);
	aspect-ratio: 4 / 3.2;
	overflow: hidden;
}

.hero__bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.15);
}

/* The dot screen laid over the photograph — the reference's dithered
   rendering. Multiply keeps it reading as a screen rather than a haze. */
.hero__grain {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(10, 10, 10, 0.55) 1px, transparent 1px);
	background-size: 4px 4px;
	mix-blend-mode: multiply;
	opacity: 0.5;
	pointer-events: none;
}

/* The violet blocks scattered over the render, as in the reference. Drawn as
   a single element with box-shadow copies rather than five divs. */
.hero__blocks {
	position: absolute;
	top: 18%;
	left: 12%;
	width: 14px;
	height: 14px;
	background: var(--accent);
	box-shadow:
		 46px  62px 0 var(--accent),
		112px  24px 0 var(--lime),
		 88px 138px 0 var(--accent),
		168px  96px 0 var(--accent),
		 22px 172px 0 var(--lime);
	opacity: 0.9;
	pointer-events: none;
}

/* The coordinate readout, pinned inside the frame. */
.hero__coords {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	display: grid;
	gap: 1px;
	padding: 0.5rem 0.625rem;
	background: var(--lime);
	border: var(--hair) solid var(--ink);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ink);
	pointer-events: none;
}

/* The render-status tag, top-left. */
.hero__render {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	display: grid;
	gap: 2px;
	padding: 0.4375rem 0.5625rem;
	background: var(--surface-raise);
	border: var(--hair) solid var(--ink);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
	pointer-events: none;
}

.hero__render-row {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

/* The scan label under the frame's bottom-right corner. */
.hero__scan {
	margin-top: 0.5rem;
	text-align: right;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.06em;
	color: var(--ink-500);
}

/* ── The hero rail: the runner-up stories ───────────────────────────────── */
.hero__rail {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0;
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
	border-top: var(--hair) solid var(--line);
}

.hero-side {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.75rem;
	align-items: start;
	padding: 1rem clamp(0.75rem, 1.5vw, 1.25rem);
	border-right: var(--hair) solid var(--line);
	transition: background var(--dur) var(--ease);
}

.hero-side:hover { background: var(--surface-raise); }

.hero__rail > *:last-child { border-right: 0; }

.hero-side__rank {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--accent);
}

.hero-side__body { display: grid; gap: 0.3rem; min-width: 0; }

.hero-side__title {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.35;
}

.hero-side__title a {
	color: var(--ink);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

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

.hero-side__date {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-500);
}

/* The rail's closing cell — "ALL STORIES ↗". */
.hero__more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem clamp(0.75rem, 1.5vw, 1.25rem);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	background: var(--lime);
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.hero__more:hover,
.hero__more:focus-visible {
	background: var(--ink);
	color: var(--lime);
	/* The badge fills with the label colour (lime), so the glyph is knocked
	   out in the cell's own ground rather than the page's off-white — lime and
	   off-white are near-identical in luminance and the arrow disappeared. */
	--badge-knockout: var(--ink);
}

/* ── Hero layout: COVER ──────────────────────────────────────────────────
   The full-bleed alternative to the frame layout. One photograph fills the
   band, the headline is knocked out over its lower third, and the runner-ups
   run as a ruled strip beneath.

   The register furniture the rest of the design uses — corner marks, the plus
   rail, coordinate readouts — is deliberately absent here. Those belong to a
   ruled drawing; over a photograph they read as litter. What carries the
   machine register instead is the section marker and the mono meta line. */
.hero--cover {
	border-top: 0;
}

.cover {
	position: relative;
	display: grid;
	align-items: end;
	/* Tall enough to be cinematic, capped so it never costs more than a
	   screen: a hero the reader has to scroll past twice is a toll, not a
	   welcome. */
	min-height: clamp(26rem, 68vh, 40rem);
	overflow: hidden;
	background: var(--dark);
	/* The band is flush, so the cover draws the rule that would otherwise
	   separate it from the masthead. */
	border-bottom: var(--hair) solid var(--ink);
}

.cover__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Desaturated and darkened: the headline is knocked out of this, and a
	   full-colour photograph under display type is a legibility lottery. */
	filter: grayscale(1) contrast(1.15) brightness(0.62);
}

/* The dot screen, as on the frame layout's panel — it is what makes the
   photograph read as rendered output rather than as stock art. */
.cover__grain {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(10, 10, 10, 0.5) 1px, transparent 1px);
	background-size: 4px 4px;
	opacity: 0.45;
	pointer-events: none;
}

/* The scrim that guarantees the type's ground regardless of what the
   photograph happens to be doing behind it. */
.cover__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(10, 10, 10, 0.92) 0%,
		rgba(10, 10, 10, 0.72) 32%,
		rgba(10, 10, 10, 0.28) 62%,
		rgba(10, 10, 10, 0.12) 100%);
	pointer-events: none;
}

.cover__inner {
	position: relative;
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2.5rem);
	display: grid;
	gap: clamp(0.75rem, 1.5vw, 1.125rem);
	justify-items: start;
}

.cover__marker {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--lime);
}

.cover__marker-date {
	color: var(--on-dark-dim);
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
}

.cover__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

/* The headline. Larger than the frame layout's, because here it is the only
   thing on screen competing for the eye. */
.cover__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: clamp(2rem, 5.2vw, 4.25rem);
	line-height: 0.88;
	letter-spacing: var(--track-mega);
	text-transform: uppercase;
	color: var(--on-dark);
	/* The measure is capped in characters rather than pixels: a headline set
	   across a 1440px band is unreadable however large the type. */
	max-width: 19ch;
	margin-block-start: -0.06em;
}

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

.cover__title a:hover,
.cover__title a:focus-visible { color: var(--lime); }

.cover__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--on-dark-dim);
}

.cover__actions {
	margin-top: 0.375rem;
}

/* ── The runner-up strip ─────────────────────────────────────────────────
   Two cells sharing hairlines, closed by the ALL STORIES link — the same
   seamless-cell idea as the rest of the page, so the cover reads as part of
   the design rather than as a banner bolted to the top of it. */
.coverrail {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	border-bottom: var(--hair) solid var(--line);
}

.coverside {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.875rem;
	align-items: start;
	padding: clamp(0.875rem, 1.8vw, 1.25rem) clamp(1rem, 3vw, 2.5rem);
	border-right: var(--hair) solid var(--line);
	transition: background var(--dur) var(--ease);
}

.coverside:hover { background: var(--surface-raise); }

.coverside__rank {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}

.coverside__body {
	display: grid;
	gap: 0.4rem;
	min-width: 0;
}

.coverside__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

.coverside__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: 1.0625rem;
	line-height: 1.05;
	letter-spacing: var(--track-tight);
	text-transform: uppercase;
	color: var(--ink);
}

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

/* Stretched over the whole cell: one anchor, one announced target. */
.coverside__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.coverside:hover .coverside__title { color: var(--accent); }

.coverside__date {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-500);
}

/* The closing cell — the layout's one lime element, matching the frame
   layout's rail so the two versions share a vocabulary. */
.coverrail__more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: clamp(0.875rem, 1.8vw, 1.25rem) clamp(1rem, 3vw, 2.5rem);
	background: var(--lime);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.coverrail__more:hover,
.coverrail__more:focus-visible {
	background: var(--ink);
	color: var(--lime);
	/* The badge fills with the label colour, so the glyph is cut out of the
	   cell's own ground rather than the page's — see --badge-knockout. */
	--badge-knockout: var(--ink);
}

@media (max-width: 760px) {
	/* Stacked, each cell needs its own rule and the vertical divider goes. */
	.coverside { border-right: 0; border-bottom: var(--hair) solid var(--line); }

	.cover {
		min-height: clamp(22rem, 62vh, 30rem);
	}

	.cover__title { max-width: 100%; }
}

/* ── Latest News — Design 2: the mosaic ──────────────────────────────────
   Six photographic tiles in an asymmetric grid. The newest runs tall down the
   left, two half-height tiles stack beside it, three run along the bottom.
   Cells share their hairlines, as everywhere else in this design.

   Every tile is a photograph with the headline knocked out over its lower
   third — the same treatment the Design 2 hero uses, so the band reads as that
   idea continued rather than as a different component. */
.mosaic {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* Two rows: the tall cell spans both of the first, the bottom row is its
	   own. Fixed in vw so the tiles keep their proportions as the band
	   widens, floored so they never collapse on a laptop. */
	grid-auto-rows: minmax(11rem, 17vw);
	border-top: var(--hair) solid var(--ink);
	border-left: var(--hair) solid var(--line);
}

.mosaic__cell {
	position: relative;
	display: grid;
	align-items: end;
	overflow: hidden;
	background: var(--dark);
	border-right: var(--hair) solid var(--line);
	border-bottom: var(--hair) solid var(--line);
	min-width: 0;
}

/* Cell 1: tall, two rows down the left. */
.mosaic__cell--1 { grid-column: 1 / 2; grid-row: 1 / 3; }

/* Cells 2 and 3 stack beside it, spanning the remaining two columns. */
.mosaic__cell--2 { grid-column: 2 / 4; grid-row: 1 / 2; }
.mosaic__cell--3 { grid-column: 2 / 4; grid-row: 2 / 3; }

/* Cells 4-6 run along the bottom. */
.mosaic__cell--4 { grid-column: 1 / 2; grid-row: 3 / 4; }
.mosaic__cell--5 { grid-column: 2 / 3; grid-row: 3 / 4; }
.mosaic__cell--6 { grid-column: 3 / 4; grid-row: 3 / 4; }

.mosaic__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.15) brightness(0.68);
	transition: filter var(--dur) var(--ease), transform 0.6s var(--ease-out);
}

.mosaic__cell:hover .mosaic__img {
	filter: contrast(1.05) brightness(0.74);
	transform: scale(1.03);
}

.mosaic__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(10, 10, 10, 0.92) 0%,
		rgba(10, 10, 10, 0.6) 38%,
		rgba(10, 10, 10, 0.1) 78%);
	pointer-events: none;
}

.mosaic__body {
	position: relative;
	display: grid;
	gap: 0.5rem;
	padding: clamp(0.875rem, 1.6vw, 1.375rem);
	min-width: 0;
}

.mosaic__rail {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.mosaic__num {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--lime);
	font-variant-numeric: tabular-nums;
}

.mosaic__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: 1.0625rem;
	line-height: 1.05;
	letter-spacing: var(--track-tight);
	text-transform: uppercase;
	color: var(--on-dark);
}

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

/* One stretched anchor per cell: the whole tile is clickable, one target is
   announced. */
.mosaic__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mosaic__cell:hover .mosaic__title { color: var(--lime); }

/* The tall cell carries the band's display type. */
.mosaic__cell--1 .mosaic__title {
	font-size: clamp(1.25rem, 2.2vw, 1.875rem);
	line-height: 0.98;
	letter-spacing: var(--track-tighter);
}

.mosaic__excerpt {
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--on-dark-dim);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 46ch;
}

.mosaic__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--on-dark-dim);
}

/* A story with no artwork: a ruled panel on the page ground rather than a
   black hole in the mosaic. */
.mosaic__cell--bare {
	background: var(--surface);
	background-image: repeating-linear-gradient(
		-45deg,
		var(--ink-050) 0 6px,
		transparent 6px 12px
	);
}

.mosaic__cell--bare .mosaic__title { color: var(--ink); }
.mosaic__cell--bare .mosaic__meta,
.mosaic__cell--bare .mosaic__excerpt { color: var(--ink-400); }
.mosaic__cell--bare .mosaic__num { color: var(--accent); }
.mosaic__cell--bare:hover .mosaic__title { color: var(--accent); }

@media (max-width: 900px) {
	/* Two columns: the tall cell keeps its prominence, the rest pair up. */
	.mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.mosaic__cell--1 { grid-column: 1 / 3; grid-row: auto; min-height: 15rem; }
	.mosaic__cell--2,
	.mosaic__cell--3,
	.mosaic__cell--4,
	.mosaic__cell--5,
	.mosaic__cell--6 { grid-column: auto; grid-row: auto; }
}

@media (max-width: 560px) {
	.mosaic { grid-template-columns: minmax(0, 1fr); }
	.mosaic__cell--1 { grid-column: 1 / -1; }
	.mosaic { grid-auto-rows: minmax(10rem, 40vw); }
}

/* ── Trending — Design 2: the countdown board ────────────────────────────
   The leader takes a wide photographed cell with an oversized numeral; ranks
   02-05 chase it in a column beside. Where Design 1's table makes every row
   equal, this says plainly that one story won. */
.board {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	border-top: var(--hair) solid var(--line-dark);
}

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

/* ── The leader ──────────────────────────────────────────────────────────── */
.board__lead {
	position: relative;
	display: grid;
	align-items: end;
	min-height: clamp(18rem, 30vw, 26rem);
	overflow: hidden;
	background: var(--dark-2);
	border-right: var(--hair) solid var(--line-dark);
}

@media (max-width: 900px) {
	.board__lead {
		border-right: 0;
		border-bottom: var(--hair) solid var(--line-dark);
	}
}

.board__media { position: absolute; inset: 0; }

.board__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.15) brightness(0.6);
	transition: filter var(--dur) var(--ease), transform 0.6s var(--ease-out);
}

.board__lead:hover .board__img {
	filter: contrast(1.05) brightness(0.68);
	transform: scale(1.03);
}

.board__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(10, 10, 10, 0.94) 0%,
		rgba(10, 10, 10, 0.62) 42%,
		rgba(10, 10, 10, 0.1) 84%);
	pointer-events: none;
}

/* The oversized rank, parked top-left of the cell. This is the board's one
   piece of display type. */
.board__rank {
	position: absolute;
	top: clamp(0.5rem, 1.5vw, 1.25rem);
	left: clamp(0.75rem, 2vw, 1.5rem);
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: clamp(3.5rem, 8vw, 7rem);
	line-height: 0.8;
	letter-spacing: var(--track-mega);
	color: transparent;
	-webkit-text-stroke: 2px var(--lime);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.board__body {
	position: relative;
	display: grid;
	gap: 0.625rem;
	padding: clamp(1rem, 2.2vw, 1.75rem);
	min-width: 0;
}

.board__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.board__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: clamp(1.375rem, 2.6vw, 2.125rem);
	line-height: 0.95;
	letter-spacing: var(--track-tighter);
	text-transform: uppercase;
	color: var(--on-dark);
	max-width: 24ch;
}

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

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

.board__lead:hover .board__title { color: var(--lime); }

.board__excerpt {
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--on-dark-dim);
	max-width: 48ch;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.board__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--on-dark-faint);
}

/* ── The chasing ranks ───────────────────────────────────────────────────── */
.board__chase { display: grid; align-content: start; }

.chase {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	align-items: center;
	padding: clamp(0.75rem, 1.5vw, 1.125rem) clamp(0.875rem, 1.8vw, 1.5rem);
	border-bottom: var(--hair) solid var(--line-dark-soft);
	transition: background var(--dur) var(--ease);
}

.chase:last-child { border-bottom: 0; }

.chase:hover { background: rgba(255, 255, 255, 0.04); }

.chase__rank {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 0.8;
	letter-spacing: var(--track-tighter);
	color: var(--on-dark-faint);
	font-variant-numeric: tabular-nums;
	transition: color var(--dur) var(--ease);
	min-width: 2ch;
}

.chase:hover .chase__rank { color: var(--lime); }

.chase__body { display: grid; gap: 0.35rem; min-width: 0; }

.chase__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: 1.0625rem;
	line-height: 1.05;
	letter-spacing: var(--track-tight);
	text-transform: uppercase;
}

.chase__title a { color: var(--on-dark); text-decoration: none; }

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

.chase:hover .chase__title a { color: var(--lime); }

.chase__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--on-dark-dim);
}

/* ── The principles row ──────────────────────────────────────────────────
   The reference's /02 CORE PRINCIPLES: four columns divided by vertical
   hairlines with a plus mark sitting on each division. */
.principles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0;
}

.principle {
	position: relative;
	display: grid;
	gap: 0.625rem;
	align-content: start;
	padding: 0 clamp(0.9rem, 2vw, 1.75rem);
	border-left: var(--hair) solid var(--line);
}

.principle:first-child {
	border-left: 0;
	padding-left: 0;
}

/* The plus mark on the division, centred on the rule. */
.principle:not(:first-child)::before {
	content: "+";
	position: absolute;
	top: -0.55em;
	left: 0;
	transform: translateX(-50%);
	font-family: var(--font-mono);
	font-size: 0.875rem;
	line-height: 1;
	color: var(--ink-600);
	background: var(--ground);
	padding-inline: 2px;
}

.principle__icon {
	width: 2.25rem;
	height: 2.25rem;
	color: var(--ink);
}

.principle__icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.principle__title {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--accent);
	line-height: 1.3;
}

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

@media (max-width: 760px) {
	.principles {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.principle {
		border-left: 0;
		border-top: var(--hair) solid var(--line);
		padding: 1.125rem 0 0;
	}

	.principle:first-child { border-top: 0; padding-top: 0; }

	.principle:not(:first-child)::before { content: none; }
}

/* ── The figures row ─────────────────────────────────────────────────────
   Three oversized numerals on a ruled row. */
.figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0;
}

.figure {
	display: grid;
	gap: 0.5rem;
	align-content: start;
	padding: 0 clamp(0.9rem, 2vw, 1.75rem);
	border-left: var(--hair) solid var(--line);
}

.figure:first-child { border-left: 0; padding-left: 0; }

.figure__value {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: clamp(2.5rem, 6vw, 4.25rem);
	line-height: 0.85;
	letter-spacing: var(--track-mega);
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.figure__label {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--accent);
}

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

/* On a dark band. The figures are used on the inverted readout band, where
   their ink numerals would otherwise be black on near-black, and the violet
   label is too dark to read there — lime takes it, as everywhere else on an
   inverted ground. */
.band--dark .figure {
	border-left-color: var(--line-dark);
}

.band--dark .figure__value { color: var(--on-dark); }
.band--dark .figure__label { color: var(--lime); }
.band--dark .figure__note  { color: var(--on-dark-dim); }

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

	.figure {
		border-left: 0;
		border-top: var(--hair) solid var(--line);
		padding: 1.125rem 0 0;
	}

	.figure:first-child { border-top: 0; padding-top: 0; }

	.band--dark .figure { border-top-color: var(--line-dark); }
}

/* ── The layout: main column + sidebar ──────────────────────────────────── */
.layout__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	gap: clamp(1.5rem, 3vw, 3rem);
	/* stretch, not start: the two columns are rarely the same height (the
	   sidebar's panel stack is fixed, the main column's length depends on how
	   many posts survived de-duplication), and letting the shorter one stop
	   early leaves a visible hole beside the longer. Children that should not
	   stretch opt out with align-self. */
	align-items: stretch;
}

/* The main column distributes its own height, so a short feed still reaches
   the foot of the band rather than ending halfway down it. */
.layout__main {
	display: flex;
	flex-direction: column;
}

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

.layout__main { min-width: 0; }

/* ── The section head inside a band ─────────────────────────────────────── */
.section-head {
	display: flex;
	align-items: baseline;
	gap: 0.875rem;
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
	min-width: 0;
}

.section-label {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: var(--fs-h2);
	line-height: 0.9;
	letter-spacing: var(--track-tighter);
	text-transform: uppercase;
	color: var(--ink);
	white-space: nowrap;
}

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

.section-head__rule {
	flex: 1;
	min-width: 1rem;
	height: var(--hair);
	background: var(--line);
	transform: translateY(-0.35em);
}

.band--dark .section-head__rule { background: var(--line-dark); }

.section-head__count {
	flex: none;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-500);
	white-space: nowrap;
}

.band--dark .section-head__count { color: var(--on-dark-dim); }

/* ── The news feed: one lead plus five wire rows ─────────────────────────
   Replaces the uniform card grid. The band's job is "what is newest", and a
   grid of equal boxes says nothing about which of them matters — so the
   newest story is given a photograph and the measure, and the rest are dense
   rows sharing one hairline each.

   Cells butt against each other with no gutters; the rules ARE the layout. */
.newsfeed {
	display: grid;
	/* One full-width column. Without it the implicit column sizes to the
	   widest item's CONTENT, and the lead — which has a grid of its own —
	   ended up narrower than the band it sits in. */
	grid-template-columns: minmax(0, 1fr);
	/* The feed absorbs whatever height the column has spare. The lead keeps its
	   own size and the wire rows share the remainder, so a band with nine rows
	   and a band with eleven both close flush against the sidebar instead of
	   stopping short of it. */
	flex: 1;
	grid-auto-rows: auto;
	align-content: stretch;
	border-top: var(--hair) solid var(--ink);
	border-bottom: var(--hair) solid var(--line);
}

/* A row may stretch to take up slack, but only so far. Past this it stops
   reading as a wire row and starts reading as a broken box, so on a very thin
   library the remaining slack falls below the feed as plain empty space
   instead — which is honest, and far less conspicuous than a 325px row
   containing one headline. */
.wire {
	min-height: 5rem;
	max-height: 8.5rem;
}

/* ── The lead ────────────────────────────────────────────────────────────── */
.feedlead {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: stretch;
	border-bottom: var(--hair) solid var(--ink);
}

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

.feedlead__media {
	display: block;
	position: relative;
	/* NO aspect-ratio here. The row's height is set by the body column and by
	   the feed's stretch, so a ratio would resolve to a WIDTH — and on a long
	   headline that width overflowed the column and painted the photograph
	   over the text. The cell defines the box; object-fit crops the picture
	   into it. A floor keeps the frame photographic when the body is short. */
	min-height: 15rem;
	overflow: hidden;
	background: var(--ink-050);
	border-right: var(--hair) solid var(--line);
	/* Belt and braces: never allow this cell to exceed its grid column. */
	max-width: 100%;
	min-width: 0;
}

@media (max-width: 720px) {
	.feedlead__media {
		border-right: 0;
		border-bottom: var(--hair) solid var(--line);
		/* Stacked, the media is no longer competing with a text column for
		   width, so a ratio is safe here and gives the picture a shape. */
		aspect-ratio: 16 / 9;
		min-height: 0;
	}
}

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

.feedlead:hover .feedlead__img {
	filter: none;
	transform: scale(1.02);
}

.feedlead__body {
	display: grid;
	align-content: center;
	gap: 0.75rem;
	padding: clamp(1rem, 2.2vw, 1.75rem);
	min-width: 0;
	/* The body sets the row's height, so it must never be squeezed by the
	   media beside it. */
	position: relative;
	z-index: 1;
}

.feedlead__rail {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
}

/* The one lime flag in the band — it marks the newest story and nothing else. */
.feedlead__flag {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.4375rem;
	background: var(--lime);
	border: var(--hair) solid var(--ink);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
}

.feedlead__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: var(--fs-h2);
	line-height: 0.95;
	letter-spacing: var(--track-tighter);
	text-transform: uppercase;
	color: var(--ink);
}

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

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

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

.feedlead__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-500);
}

/* ── A wire row ──────────────────────────────────────────────────────────
   Rank | thumbnail | headline + meta | arrow. Dense enough that five of them
   occupy roughly the height two cards used to. */
.wire {
	position: relative;
	display: grid;
	grid-template-columns: 2.5rem 6rem minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	padding: 0.875rem clamp(0.5rem, 1.2vw, 1rem);
	border-top: var(--hair) solid var(--line-soft);
	transition: background var(--dur) var(--ease);
}

.wire:first-child { border-top: 0; }

.wire:hover { background: var(--surface-raise); }

.wire__num {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}

.wire__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--ink-050);
}

.wire__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	transition: filter var(--dur) var(--ease);
}

.wire:hover .wire__img { filter: none; }

/* No artwork: a ruled placeholder, so the headlines stay aligned. */
.wire__media--empty {
	background-image: repeating-linear-gradient(
		-45deg,
		var(--ink-050) 0 5px,
		transparent 5px 10px
	);
	border: var(--hair) solid var(--line-soft);
}

.wire__body {
	display: grid;
	gap: 0.3rem;
	min-width: 0;
}

.wire__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: 1.0625rem;
	line-height: 1.05;
	letter-spacing: var(--track-tight);
	text-transform: uppercase;
	color: var(--ink);
}

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

/* Stretched over the whole row: the entry is clickable end to end while only
   one anchor exists, so screen readers announce one target per row. */
.wire__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.wire:hover .wire__title { color: var(--accent); }

.wire__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-500);
}

.wire .arrow-badge {
	color: var(--ink-500);
	transition: color var(--dur) var(--ease);
}

/* The row's badge fills violet. The generic knock-out rule only repaints the
   glyph inside a `.btn` or an `a`, and a wire row's badge is inside neither —
   so this states both halves itself: the fill, and the colour the chevron is
   cut out in. Leaving `color` as the fill colour (which is what makes
   `background: currentColor` work elsewhere) would paint a violet arrow on a
   violet square. */
.wire:hover .arrow-badge,
.wire:focus-within .arrow-badge {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--badge-knockout);
}

@media (max-width: 620px) {
	/* The thumbnail and the arrow go; the row becomes number + headline. */
	.wire {
		grid-template-columns: 2.25rem minmax(0, 1fr);
		gap: 0.75rem;
	}

	.wire__media,
	.wire .arrow-badge { display: none; }
}

/* ── Trending: the ranked table ──────────────────────────────────────────
   Full-width rows rather than a lead beside a list. The rank is the thing the
   eye lands on, and the headline gets the whole measure. */
.ranktable {
	display: grid;
	border-top: var(--hair) solid var(--line-dark);
}

.ranktable__head,
.rankrow {
	display: grid;
	grid-template-columns: 5.5rem 9.5rem minmax(0, 1fr) 6.75rem;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.5rem);
}

.ranktable__head {
	padding: 0.625rem clamp(0.5rem, 1.2vw, 1rem);
	border-bottom: var(--hair) solid var(--line-dark);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--on-dark-faint);
}

.ranktable__head > :last-child { text-align: right; }

.rankrow {
	position: relative;
	padding: clamp(0.75rem, 1.6vw, 1.125rem) clamp(0.5rem, 1.2vw, 1rem);
	border-bottom: var(--hair) solid var(--line-dark-soft);
	transition: background var(--dur) var(--ease);
}

.rankrow:hover { background: rgba(255, 255, 255, 0.04); }

/* The rank numeral, set large — this is the band's display type. */
.rankrow__num {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	line-height: 0.8;
	letter-spacing: var(--track-tighter);
	color: var(--on-dark-faint);
	font-variant-numeric: tabular-nums;
	transition: color var(--dur) var(--ease);
}

.rankrow:hover .rankrow__num { color: var(--lime); }

/* The top-ranked row is the one that is loud at rest. */
.rankrow--top .rankrow__num { color: var(--lime); }

.rankrow__desk {
	display: flex;
	min-width: 0;
}

.rankrow__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: clamp(1rem, 1.7vw, 1.375rem);
	line-height: 1.05;
	letter-spacing: var(--track-tight);
	text-transform: uppercase;
	min-width: 0;
}

.rankrow__title a {
	color: var(--on-dark);
	text-decoration: none;
}

/* One stretched anchor per row. */
.rankrow__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.rankrow:hover .rankrow__title a { color: var(--lime); }

.rankrow__date {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	color: var(--on-dark-dim);
	text-align: right;
	white-space: nowrap;
}

@media (max-width: 900px) {
	/* The desk column folds under the headline; the date stays on the rank. */
	.ranktable__head { display: none; }

	.rankrow {
		grid-template-columns: 3.5rem minmax(0, 1fr) auto;
		row-gap: 0.4rem;
	}

	.rankrow__num  { grid-row: span 2; }
	.rankrow__title { grid-column: 2 / 3; }
	.rankrow__date { grid-column: 3 / 4; align-self: start; }
	.rankrow__desk { grid-column: 2 / -1; }
}

/* ── Desks: one seamless grid ────────────────────────────────────────────
   Every desk in a single grid whose cells share their hairlines, replacing
   the four-card checkerboard plus a separate scrolling strip. One layout, one
   component. The first cell spans two columns and carries artwork, which is
   what gives the grid its asymmetry. */
.deskgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: var(--hair) solid var(--ink);
	border-left: var(--hair) solid var(--line);
}

.deskcell {
	position: relative;
	display: grid;
	align-content: end;
	gap: 0.3rem;
	min-height: clamp(8rem, 12vw, 10.5rem);
	padding: clamp(0.75rem, 1.4vw, 1.125rem);
	border-right: var(--hair) solid var(--line);
	border-bottom: var(--hair) solid var(--line);
	background: var(--surface);
	overflow: hidden;
	transition: background var(--dur) var(--ease);
}

.deskcell:hover { background: var(--surface-raise); }

/* The wide photographed cell. */
.deskcell--feature {
	grid-column: span 2;
	grid-row: span 2;
	background: var(--dark);
}

.deskcell__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.15) brightness(0.72);
	transition: filter var(--dur) var(--ease), transform 0.6s var(--ease-out);
}

.deskcell--feature:hover .deskcell__img {
	filter: contrast(1.05) brightness(0.78);
	transform: scale(1.03);
}

.deskcell__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(10, 10, 10, 0.9) 0%,
		rgba(10, 10, 10, 0.3) 55%,
		rgba(10, 10, 10, 0) 100%);
}

.deskcell__num {
	position: relative;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--accent);
}

.deskcell__title {
	position: relative;
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: var(--fs-h3);
	line-height: 1;
	letter-spacing: var(--track-tight);
	text-transform: uppercase;
	color: var(--ink);
}

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

/* One stretched anchor per cell. */
.deskcell__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.deskcell:hover .deskcell__title { color: var(--accent); }

.deskcell__count {
	position: relative;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-500);
}

/* The feature cell sits on its own photograph, so its text inverts and lime
   takes the accent role — violet is too dark to read there. */
.deskcell--feature .deskcell__num { color: var(--lime); }
.deskcell--feature .deskcell__title { color: var(--on-dark); }
.deskcell--feature .deskcell__count { color: var(--on-dark-dim); }
.deskcell--feature:hover .deskcell__title { color: var(--lime); }

.deskcell--feature .deskcell__title {
	font-size: var(--fs-h2);
}

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

@media (max-width: 480px) {
	.deskgrid { grid-template-columns: 1fr; }
	.deskcell--feature { grid-column: span 1; }
	.deskcell { min-height: 6.5rem; }
}

/* ── The archive index ───────────────────────────────────────────────────
   A numbered list, not a fourth grid of thumbnails. Line | date | desk |
   headline | reading time — the form an index takes. */
.indexlist {
	display: grid;
	border-top: var(--hair) solid var(--ink);
}

.indexrow {
	position: relative;
	display: grid;
	grid-template-columns: 2.75rem 5.75rem 9.5rem minmax(0, 1fr) 4.5rem;
	align-items: baseline;
	gap: clamp(0.75rem, 1.8vw, 1.5rem);
	padding: 0.8125rem clamp(0.5rem, 1.2vw, 1rem);
	border-bottom: var(--hair) solid var(--line-soft);
	transition: background var(--dur) var(--ease);
}

.indexrow:hover { background: var(--surface-raise); }

.indexrow__num,
.indexrow__date,
.indexrow__read {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.indexrow__num  { font-weight: 600; color: var(--accent); }
.indexrow__date { color: var(--ink-500); }

.indexrow__read {
	color: var(--ink-500);
	text-align: right;
}

.indexrow__desk { display: flex; min-width: 0; }

.indexrow__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: 1.0625rem;
	line-height: 1.1;
	letter-spacing: var(--track-tight);
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	min-width: 0;
}

/* One stretched anchor per row. */
.indexrow__title::after {
	content: "";
	position: absolute;
	inset: 0;
}

.indexrow:hover .indexrow__title { color: var(--accent); }

@media (max-width: 1000px) {
	/* The desk chip and reading time are the first to go. */
	.indexrow { grid-template-columns: 2.75rem 5.75rem minmax(0, 1fr); }
	.indexrow__desk,
	.indexrow__read { display: none; }
}

@media (max-width: 560px) {
	.indexrow {
		grid-template-columns: 2.5rem minmax(0, 1fr);
		row-gap: 0.25rem;
	}

	.indexrow__date { grid-column: 2; order: 2; }
	.indexrow__title { grid-column: 2; order: 1; }
}

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

.pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.pagination__list li { display: flex; }

.page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: 0.5rem;
	border: var(--hair) solid var(--line);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	transition: background var(--dur) var(--ease),
	            color var(--dur) var(--ease),
	            border-color var(--dur) var(--ease);
}

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

.page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--surface-raise);
}

.page-numbers.dots {
	border-color: transparent;
	color: var(--ink-600);
}

.page-numbers.dots:hover {
	background: none;
	color: var(--ink-600);
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty {
	display: grid;
	gap: 0.875rem;
	justify-items: start;
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
	border-block: var(--hair) solid var(--line);
	color: var(--ink-400);
}

.empty__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: var(--fs-h2);
	line-height: 0.9;
	letter-spacing: var(--track-tighter);
	text-transform: uppercase;
	color: var(--ink);
}

/* ── 9. Sidebar panels ──────────────────────────────────────────────────── */
.sidebar {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	/* The grid now stretches its columns, so this has to be explicit: the
	   panels keep their natural heights and any slack falls below the stack,
	   rather than a subscribe box being stretched to fill the column. */
	align-content: start;
	align-self: stretch;
	min-width: 0;
}

.panel {
	display: grid;
	gap: 0.875rem;
	align-content: start;
	border: var(--hair) solid var(--line);
	background: var(--surface);
	padding: clamp(0.9rem, 1.8vw, 1.25rem);
}

.panel__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink);
	padding-bottom: 0.625rem;
	border-bottom: var(--hair) solid var(--line);
}

.panel__dot {
	width: 6px;
	height: 6px;
	flex: none;
	background: var(--accent);
}

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

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

.panel--subscribe .panel__heading {
	color: var(--on-dark);
	border-bottom-color: var(--line-dark);
}

.panel--subscribe .panel__intro { color: var(--on-dark-dim); }

/* ── The category list ───────────────────────────────────────────────────── */
.cat-list { display: grid; }

.cat-list__item { display: block; }

.cat-list__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.625rem 0;
	border-top: var(--hair) solid var(--line-soft);
	text-decoration: none;
	transition: padding-left var(--dur) var(--ease), color var(--dur) var(--ease);
}

.cat-list__item:first-child .cat-list__link { border-top: 0; }

.cat-list__name {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
	min-width: 0;
}

/* The desk's colour, as the leading block. */
.cat-list__name::before {
	content: "";
	width: 7px;
	height: 7px;
	flex: none;
	background: var(--cat-accent, var(--accent));
}

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

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

/* ── The market snapshot ─────────────────────────────────────────────────── */
.market-list { display: grid; }

.market-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5625rem 0;
	border-top: var(--hair) solid var(--line-soft);
}

.market-row:first-child { border-top: 0; }

.market-row__id { display: grid; gap: 1px; min-width: 0; }

.market-row__label {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.market-row__sym {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	/* The ticker IS the instrument's name — information, not decoration — so
	   it takes the text grey even at 9px. */
	color: var(--ink-500);
}

.market-row__spark {
	width: 3.25rem;
	height: 1.25rem;
	color: var(--ink-500);
}

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

.market-row.is-up .market-row__spark { color: var(--accent); }
.market-row.is-down .market-row__spark { color: var(--ink-400); }

.market-row__figures {
	display: grid;
	gap: 1px;
	justify-items: end;
}

.market-row__price {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

.market-row__change {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink-500);
}

.market-row.is-up .market-row__change { color: var(--accent); }
.market-row.is-down .market-row__change { color: var(--ink-300); }

/* A quote that came back unchanged. main.js sets this alongside is-up and
   is-down, so it needs a resting value of its own rather than inheriting
   whichever direction the row last carried. */
.market-row.is-flat .market-row__change { color: var(--ink-500); }
.market-row.is-flat .market-row__spark { color: var(--ink-500); }

/* The tick flash when a quote updates. */
.market-row.is-tick {
	animation: st-tick 0.6s var(--ease);
}

@keyframes st-tick {
	0%   { background: var(--accent-soft); }
	100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
	.market-row.is-tick { animation: none; }
}

.market-foot {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding-top: 0.625rem;
	border-top: var(--hair) solid var(--line);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-500);
}

.market-foot__pulse {
	width: 6px;
	height: 6px;
	flex: none;
	background: var(--accent);
	border-radius: 50%;
	animation: st-blink 2s var(--ease) infinite;
}

@media (prefers-reduced-motion: reduce) {
	.market-foot__pulse { animation: none; }
}

/* ── 10. Footer ─────────────────────────────────────────────────────────── */
.site-footer {
	border-top: var(--hair) solid var(--ink);
	background: var(--ground);
}

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

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

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

.footer-col {
	display: grid;
	gap: 0.875rem;
	align-content: start;
	padding: 0 clamp(0.9rem, 2vw, 1.75rem);
	border-left: var(--hair) solid var(--line);
	min-width: 0;
}

.footer-col:first-child {
	border-left: 0;
	padding-left: 0;
}

@media (max-width: 1080px) {
	.footer-col {
		padding: clamp(1rem, 2vw, 1.5rem) clamp(0.9rem, 2vw, 1.5rem);
		border-top: var(--hair) solid var(--line);
	}

	.footer-col:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}

	.footer-col:nth-child(-n+2) { border-top: 0; }
}

@media (max-width: 600px) {
	.footer-col {
		border-left: 0;
		padding-inline: 0;
	}

	.footer-col:first-child { border-top: 0; }
	.footer-col:nth-child(2) { border-top: var(--hair) solid var(--line); }
}

/* The brand column. */
.footer-brand {
	display: grid;
	gap: 0.75rem;
	align-content: start;
}

/* The footer carries the SAME mark as the masthead, printed by st_brand_mark():
   core's linked <img> when a logo is set in the Customizer, the text wordmark
   otherwise. Both paths are styled here.

   The footer logo is sized by WIDTH, not height: it fills its column edge to
   edge and takes whatever height its own aspect ratio gives it. That is the
   opposite of the masthead, where --logo-h (the Customizer's setting) caps the
   height and the width follows — a masthead has a fixed bar to sit in, a
   footer column has a fixed width.

   So --logo-h is deliberately NOT consulted here. Changing the header logo
   height in the Customizer leaves the footer mark alone. */
.footer-brand .custom-logo-link {
	display: block;
	width: 100%;
}

.footer-brand .custom-logo {
	display: block;
	/* Sized as a share of the column rather than filling it: at 100% the mark
	   was 356x96 and read as a banner competing with the headline bands, which
	   is louder than a footer signature should be. */
	width: 72%;
	max-width: 15rem;
	height: auto;
	max-height: none;
}

@media (max-width: 1080px) {
	/* Once the footer stacks, the column is the full content width and a
	   percentage of it would be enormous; the cap does the work instead. */
	.footer-brand .custom-logo { width: 100%; }
}

.footer-brand__mark {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: 1.25rem;
	letter-spacing: var(--track-tight);
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
}

/* .site-logo already draws the terminal underscore (see the masthead rules),
   so the footer mark must not add a second one. */
.footer-brand__mark.site-logo::after {
	content: "_";
	color: var(--accent);
}

.footer-brand__text {
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--ink-400);
	max-width: 34ch;
}

.footer-col__heading {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink);
	padding-bottom: 0.625rem;
	border-bottom: var(--hair) solid var(--line);
}

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

.footer-links a {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-400);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

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

/* ── The footer's base bar ───────────────────────────────────────────────── */
.footer-base {
	border-top: var(--hair) solid var(--line);
}

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

.footer-copy {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-500);
}

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

.footer-legal__menu a {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-500);
	text-decoration: none;
}

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

/* ── 11. Archive / category ─────────────────────────────────────────────── */
.archive-head {
	display: grid;
	gap: 0.75rem;
	align-content: start;
	max-width: 60ch;
}

.archive-head__kicker {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--accent);
}

.archive-head__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: var(--fs-hero);
	line-height: 0.85;
	letter-spacing: var(--track-mega);
	text-transform: uppercase;
	color: var(--ink);
	margin-block-start: -0.06em;
}

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

/* ── 12. Single post ────────────────────────────────────────────────────── */
.single-hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: clamp(18rem, 40vw, 30rem);
	border: var(--hair) solid var(--ink);
	background: var(--dark);
	overflow: hidden;
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.single-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.15) brightness(0.8);
}

.single-hero__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(10, 10, 10, 0.94) 0%,
		rgba(10, 10, 10, 0.55) 42%,
		rgba(10, 10, 10, 0.05) 82%);
}

.single-hero__body {
	position: relative;
	display: grid;
	gap: 0.875rem;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	max-width: 52rem;
}

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

.single-hero__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: var(--fs-display);
	line-height: 0.9;
	letter-spacing: var(--track-tighter);
	text-transform: uppercase;
	color: var(--on-dark);
}

.single-hero__meta {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--on-dark-dim);
}

.single-hero__meta svg {
	width: 0.875rem;
	height: 0.875rem;
	stroke: currentColor;
	fill: none;
}

/* ── The headless variant: no artwork, ink on the ground ─────────────────── */
.single-head {
	display: grid;
	gap: 0.875rem;
	padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
	border-bottom: var(--hair) solid var(--line);
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

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

.single-head__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: var(--fs-display);
	line-height: 0.88;
	letter-spacing: var(--track-tighter);
	text-transform: uppercase;
	color: var(--ink);
	margin-block-start: -0.06em;
}

.single-head__standfirst {
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--ink-300);
	max-width: 62ch;
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
	padding-left: 1rem;
	border-left: 3px solid var(--accent);
}

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

/* ── The share row ───────────────────────────────────────────────────────── */
.share-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-block: 0.875rem;
	border-block: var(--hair) solid var(--line);
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.share-row__label {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
	margin-right: auto;
}

.share-row__link {
	display: grid;
	place-items: center;
	width: 2.125rem;
	height: 2.125rem;
	border: var(--hair) solid var(--line);
	color: var(--ink);
	transition: background var(--dur) var(--ease),
	            color var(--dur) var(--ease),
	            border-color var(--dur) var(--ease);
}

.share-row__link:hover,
.share-row__link:focus-visible {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--surface-raise);
}

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

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

/* ── The article body ────────────────────────────────────────────────────── */
.entry-content {
	font-size: var(--fs-body);
	line-height: 1.75;
	color: var(--ink-200);
	max-width: 68ch;
}

.entry-content > * + * { margin-top: 1.25rem; }

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	line-height: 1;
	letter-spacing: var(--track-tight);
	text-transform: uppercase;
	color: var(--ink);
	margin-top: 2.25rem;
}

.entry-content h2 { font-size: var(--fs-h2); }
.entry-content h3 { font-size: var(--fs-h3); }
.entry-content h4 { font-size: 1.0625rem; }

/* The section rule under an h2 — the grid asserting itself inside prose. */
.entry-content h2 {
	padding-bottom: 0.5rem;
	border-bottom: var(--hair) solid var(--line);
}

.entry-content a {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: var(--hair);
	text-underline-offset: 0.2em;
}

.entry-content a:hover,
.entry-content a:focus-visible {
	background: var(--accent);
	color: var(--surface-raise);
	text-decoration: none;
}

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

.entry-content ul,
.entry-content ol {
	padding-left: 1.5rem;
	display: grid;
	gap: 0.5rem;
}

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

/* A square bullet, set in the accent. */
.entry-content ul > li {
	position: relative;
}

.entry-content ul > li::before {
	content: "";
	position: absolute;
	left: -1.125rem;
	top: 0.65em;
	width: 6px;
	height: 6px;
	background: var(--accent);
}

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

.entry-content ol > li::marker {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	color: var(--accent);
}

.entry-content blockquote {
	padding: clamp(1rem, 2vw, 1.5rem);
	border: var(--hair) solid var(--ink);
	background: var(--surface);
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--ink);
}

.entry-content blockquote p + p { margin-top: 0.75rem; }

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

.entry-content img,
.entry-content figure img {
	width: 100%;
	border: var(--hair) solid var(--line);
}

.entry-content figcaption {
	margin-top: 0.5rem;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-500);
}

.entry-content code {
	font-family: var(--font-mono);
	font-size: 0.875em;
	padding: 0.1em 0.35em;
	background: var(--ink-050);
	border: var(--hair) solid var(--line-soft);
}

.entry-content pre {
	padding: clamp(0.9rem, 2vw, 1.25rem);
	background: var(--dark);
	color: var(--on-dark);
	border: var(--hair) solid var(--ink);
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

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

.entry-content hr {
	border: 0;
	border-top: var(--hair) solid var(--line);
	margin-block: 2rem;
}

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

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

.entry-content th {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	background: var(--ink-025);
}

/* Tables and pre are the two things allowed to be wider than the measure,
   each inside its own scroll container. */
.entry-content > table,
.entry-content > pre {
	max-width: none;
}

/* ── Tags ────────────────────────────────────────────────────────────────── */
.single-tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	padding-top: 1rem;
	border-top: var(--hair) solid var(--line);
}

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

.single-tags a {
	display: inline-flex;
	align-items: center;
	padding: 0.3125rem 0.5rem;
	border: var(--hair) solid var(--line);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

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

/* ── Previous / next ─────────────────────────────────────────────────────── */
.postnav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	border-top: var(--hair) solid var(--line);
}

.postnav__item {
	display: grid;
	gap: 0.4rem;
	align-content: start;
	padding: 1.125rem clamp(0.9rem, 2vw, 1.5rem);
	border-left: var(--hair) solid var(--line);
	transition: background var(--dur) var(--ease);
}

.postnav__item:first-child { border-left: 0; padding-left: 0; }

.postnav__item:hover { background: var(--surface-raise); }

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

.postnav__label {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--accent);
}

.postnav__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: 1.0625rem;
	line-height: 1.05;
	letter-spacing: var(--track-tight);
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
}

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

@media (max-width: 620px) {
	.postnav__item {
		border-left: 0;
		border-top: var(--hair) solid var(--line);
		padding-inline: 0;
		text-align: left;
	}

	.postnav__item:first-child { border-top: 0; }
	.postnav__item--next { text-align: left; }
}

/* ── 13. Static page ────────────────────────────────────────────────────── */
.page-header {
	display: grid;
	gap: 0.75rem;
	padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
	border-bottom: var(--hair) solid var(--line);
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.page-header__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: var(--fs-hero);
	line-height: 0.85;
	letter-spacing: var(--track-mega);
	text-transform: uppercase;
	color: var(--ink);
	margin-block-start: -0.06em;
}

.page-header__updated {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-500);
}

.page-hero {
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
	border: var(--hair) solid var(--ink);
	overflow: hidden;
}

.page-hero__img {
	width: 100%;
	filter: grayscale(1) contrast(1.1);
}

/* ── 14. Thank-you / 404 ────────────────────────────────────────────────── */
.thanks__inner {
	display: grid;
	gap: 1.125rem;
	justify-items: start;
	max-width: 52rem;
}

.thanks__badge {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: var(--hair) solid var(--ink);
	background: var(--lime);
	color: var(--ink);
}

.thanks__badge svg { width: 1.5rem; height: 1.5rem; }

.thanks__kicker {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--accent);
}

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

@media (prefers-reduced-motion: reduce) {
	.thanks__pip { animation: none; }
}

.thanks__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: var(--fs-hero);
	line-height: 0.85;
	letter-spacing: var(--track-mega);
	text-transform: uppercase;
	color: var(--ink);
	margin-block-start: -0.06em;
}

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

.thanks__note {
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--ink-400);
	max-width: 56ch;
	padding-left: 1rem;
	border-left: 3px solid var(--line);
}

.thanks__actions { margin-top: 0.5rem; }

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.notfound {
	display: grid;
	/* Both tracks are bounded. `auto` on the numeral column let it claim the
	   whole row from its max-content width and collapsed the copy beside it. */
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: start;
}

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

/* The oversized outlined numeral. */
.notfound__code {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	/* Capped against the COLUMN as well as the viewport: 18vw alone overflowed
	   its cell on a wide screen, and a transparent glyph with a stroke gives no
	   visual clue that it has. */
	font-size: clamp(4.5rem, 13vw, 11rem);
	line-height: 0.8;
	letter-spacing: var(--track-mega);
	color: transparent;
	-webkit-text-stroke: 2px var(--ink);
	font-variant-numeric: tabular-nums;
	/* A grid item defaults to min-width:auto, which refuses to shrink below
	   its content. Without this the numeral would still force the row wider
	   than the viewport. */
	min-width: 0;
	max-width: 100%;
	margin: 0;
}

.notfound__body {
	display: grid;
	gap: 1rem;
	align-content: start;
	justify-items: start;
	max-width: 46rem;
	min-width: 0;
}

.notfound__kicker {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--accent);
}

.notfound__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: var(--fs-display);
	line-height: 0.88;
	letter-spacing: var(--track-tighter);
	text-transform: uppercase;
	color: var(--ink);
	margin-block-start: -0.06em;
}

.notfound__desc {
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--ink-400);
	max-width: 56ch;
}

.notfound__search {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	width: 100%;
	max-width: 32rem;
}

.notfound__input {
	flex: 1;
	min-width: 0;
	padding: 0.875rem 1rem;
	border: var(--hair) solid var(--ink);
	border-right: 0;
	background: var(--surface-raise);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--ink);
}

.notfound__input::placeholder {
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.notfound__input:focus-visible { outline-offset: -2px; }

.notfound__back a {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
}

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

/* ── 15. Forms ──────────────────────────────────────────────────────────── */
/* The core search form. */
.search-form {
	display: flex;
	gap: 0;
	width: 100%;
	max-width: 28rem;
}

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

.search-field {
	width: 100%;
	padding: 0.8125rem 1rem;
	border: var(--hair) solid var(--ink);
	border-right: 0;
	background: var(--surface-raise);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--ink);
}

.search-field::placeholder {
	color: var(--ink-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.search-submit {
	padding: 0.8125rem 1.125rem;
	border: var(--hair) solid var(--ink);
	background: var(--ink);
	color: var(--ground);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.search-submit:hover,
.search-submit:focus-visible {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--surface-raise);
}

/* ── The newsletter band ─────────────────────────────────────────────────
   The violet full-width call. Two columns: the claim and the form. */
.signup {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: start;
}

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

.signup__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: var(--fs-display);
	line-height: 0.88;
	letter-spacing: var(--track-tighter);
	text-transform: uppercase;
	color: var(--surface-raise);
	margin-block-start: -0.06em;
}

.signup__sub {
	margin-top: 0.875rem;
	font-size: var(--fs-body);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
	max-width: 44ch;
}

/* ── 16. Utilities, motion, print ───────────────────────────────────────── */
/* The reveal-on-scroll used by the front page bands. */
[data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

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

/* Scripting off: nothing adds .is-visible, so the content must not depend
   on it to be seen. */
.no-js [data-reveal] {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

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

/* WordPress alignment classes. */
.alignleft  { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }

.alignwide,
.alignfull { max-width: none; }

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

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

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

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

	.band { border-top: 1px solid #000000; padding-block: 1rem; }

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

	a { text-decoration: underline; }
}