/* ==========================================================================
   Sovereign Terminal v4 — dark navy finance newsroom
   --------------------------------------------------------------------------
   Palette and typography are lifted from the design references: a deep
   indigo ground, one electric blue-violet accent that carries every CTA and
   feature panel, condensed heavy uppercase display type, and letterspaced
   micro-caps for kickers and bylines.

   Sections in order:
     1  Tokens
     2  Reset / base
     3  Typography primitives
     4  Buttons, chips, badges
     5  Header / navigation
     6  Cards (the shared article-card vocabulary)
     7  Front page sections
     8  Newsletter band
     9  Footer
    10  Archive / category
    11  Single post
    12  Static page
    13  404
    14  Utilities, motion, print
   ========================================================================== */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root {
	/* Ground. Three steps of navy: the page, raised panels, and the deepest
	   wells used for inset media and form fields. */
	--navy-900: #0B0530;
	--navy-850: #100840;
	--navy-800: #150B45;
	--navy-750: #1B1054;
	--navy-700: #221563;
	--navy-600: #2E1F7A;

	/* The single accent. Everything that must be pressed, or must read as a
	   feature panel, is this violet. */
	--violet-500: #4A47F5;
	--violet-400: #5F5CFF;
	--violet-600: #3B38DB;
	--violet-300: #8C8AFF;

	/* Ink on dark. Four steps so hierarchy survives without changing size. */
	--ink-100: #FFFFFF;
	--ink-200: #E4E1FB;
	--ink-300: #B3ADDD;
	--ink-400: #8981B8;
	--ink-500: #635B92;

	/* Hairlines. Two weights: a whisper for card divisions, a firmer one for
	   section rules that need to hold a heading. */
	--line-soft: rgba(255, 255, 255, 0.09);
	--line-firm: rgba(255, 255, 255, 0.17);

	/* Category accents. Sampled from the reference's colour-block collages. */
	--amber: #F0A830;
	--red: #D93A2B;
	--green: #3E8E5A;
	--sky: #6E9BE8;
	--rose: #E8607F;
	--teal: #2AA79B;

	/* Type. Archivo carries display at 800 with tight tracking; Inter takes
	   body copy where Archivo's apertures would cost readability. */
	--font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Fluid display scale. Every headline size is a clamp so the layout never
	   needs a breakpoint purely to resize type. */
	--fs-display: clamp(2.6rem, 6.4vw, 5.4rem);
	--fs-h1: clamp(2rem, 4.4vw, 3.4rem);
	--fs-h2: clamp(1.6rem, 3vw, 2.5rem);
	--fs-h3: clamp(1.15rem, 1.8vw, 1.55rem);
	--fs-lead: clamp(1.02rem, 1.4vw, 1.2rem);
	--fs-body: 1rem;
	--fs-sm: 0.875rem;
	--fs-xs: 0.75rem;
	--fs-micro: 0.6875rem;

	/* Rhythm */
	--gap: clamp(1.1rem, 2.2vw, 1.75rem);
	--gap-lg: clamp(1.75rem, 3.5vw, 3rem);
	--pad-section: clamp(3rem, 6.5vw, 5.5rem);
	--container: 1320px;
	--container-narrow: 760px;
	--radius: 4px;
	--radius-lg: 10px;
	--radius-pill: 999px;

	--logo-h: 40px;

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

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Fixed header height plus breathing room, so an in-page anchor never
	   lands with its heading tucked under the masthead. */
	scroll-padding-top: 120px;
}

body {
	background: var(--navy-800);
	color: var(--ink-200);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

img {
	height: auto;
}

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

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

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

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

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

::selection {
	background: var(--violet-500);
	color: #fff;
}

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

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

.section-pad {
	padding-block: var(--pad-section);
}

.section-pad--tight {
	padding-block: clamp(2rem, 4vw, 3.25rem);
}

/* Raised band: one step lighter than the page, used to separate a section
   without introducing a second hue. */
.is-raised {
	background: var(--navy-850);
}

.is-deep {
	background: var(--navy-900);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--violet-500);
	color: #fff;
	padding: 0.75rem 1.25rem;
	font-weight: 600;
}

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

/* ── 3. Typography primitives ────────────────────────────────────────────── */

/* The reference's signature: heavy condensed uppercase, tracked tight, with
   a line-height under 1 so multi-line headlines lock into a block. */
.display,
.hero-lead__title,
.sec-head__title,
.feature__title,
.error-page__title {
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.015em;
	line-height: 0.96;
	color: var(--ink-100);
}

/* Kicker: the small letterspaced label above a headline. Reads as the desk
   or story angle — "RACE TO REDUCE", "GAME GUIDE" in the reference. */
.kicker {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ink-400);
	margin-bottom: 0.55rem;
}

.kicker--accent {
	color: var(--violet-300);
}

/* Byline: uppercase, tracked, quiet. Never competes with the headline. */
.byline {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-400);
	line-height: 1.4;
}

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

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

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

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

.byline__name {
	color: var(--ink-300);
}

.byline--lg .byline__name {
	font-size: var(--fs-xs);
	color: var(--ink-200);
}

.byline__role,
.byline__sep,
.byline time {
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--ink-500);
	text-transform: none;
}

.byline__role {
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

/* Meta row: reading time and date, hairline separated. */
.metarow {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-500);
}

.metarow__item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.metarow svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	opacity: 0.75;
}

/* Section heading: the rule-and-title pattern that opens every band. */
.sec-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gap);
	flex-wrap: wrap;
	padding-bottom: 1.1rem;
	margin-bottom: var(--gap-lg);
	border-bottom: 1px solid var(--line-firm);
}

.sec-head__title {
	font-size: var(--fs-h2);
}

.sec-head__kicker {
	font-size: var(--fs-sm);
	color: var(--ink-400);
	max-width: 44ch;
}

/* Centred variant — the reference's "ON THE PULSE" band. */
.sec-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-bottom: 0;
	gap: 0.5rem;
	margin-bottom: var(--gap-lg);
}

.sec-head--center .sec-head__title {
	font-size: var(--fs-h1);
}

/* ── 4. Buttons, chips, badges ───────────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1.4rem;
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid transparent;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
		border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

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

.btn:active {
	transform: translateY(0);
}

.btn--primary {
	background: var(--violet-500);
	color: #fff;
}

.btn--primary:hover {
	background: var(--violet-400);
}

.btn--ghost {
	border-color: var(--line-firm);
	color: var(--ink-200);
}

.btn--ghost:hover {
	border-color: var(--violet-400);
	color: #fff;
	background: rgba(95, 92, 255, 0.12);
}

.btn--light {
	background: #fff;
	color: var(--navy-900);
}

.btn--light:hover {
	background: var(--ink-200);
}

.btn--sm {
	padding: 0.55rem 1.05rem;
	font-size: var(--fs-micro);
}

.btn--lg {
	padding: 0.95rem 1.9rem;
	font-size: var(--fs-sm);
}

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

/* The circular chevron affordance that trails "Read now" / "View all". */
.arrow-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
	transition: transform var(--dur) var(--ease);
}

.arrow-badge svg {
	width: 11px;
	height: 11px;
	/* The glyph inherits the BADGE's background as its own colour, so the
	   chevron is knocked out of the filled circle. */
	color: var(--navy-800);
}

.btn--ghost .arrow-badge svg,
a:hover > .arrow-badge svg {
	color: var(--navy-800);
}

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

.arrow-badge--violet {
	background: var(--violet-500);
}

.arrow-badge--violet svg {
	color: #fff;
}

.arrow-badge--lg {
	width: 30px;
	height: 30px;
}

.arrow-badge--lg svg {
	width: 15px;
	height: 15px;
}

/* Category chip. Colour arrives on inline custom properties from
   st_term_color(), because the palette is assigned per install. */
.chip {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.65rem;
	border-radius: var(--radius);
	background: var(--chip-bg, var(--violet-500));
	color: var(--chip-fg, #fff);
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	line-height: 1.2;
	transition: opacity var(--dur) var(--ease);
}

.chip:hover {
	opacity: 0.85;
}

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

/* Eyebrow with a pulsing dot — used on archive and 404 heroes. */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--violet-300);
}

.badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--violet-400);
	box-shadow: 0 0 0 0 rgba(95, 92, 255, 0.6);
	animation: st-pulse 2.4s infinite;
}

@keyframes st-pulse {
	70% {
		box-shadow: 0 0 0 8px rgba(95, 92, 255, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(95, 92, 255, 0);
	}
}

/* ── 5. Header / navigation ──────────────────────────────────────────────── */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--navy-800);
	border-bottom: 1px solid var(--line-soft);
	transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}

.site-header--scrolled {
	background: rgba(21, 11, 69, 0.92);
	backdrop-filter: blur(14px);
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
}

.masthead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	min-height: 74px;
}

/* Brand. The customizer logo is inherited untouched — only its height is
   ours, driven by --logo-h from st_customizer_css(). */
.masthead__brand .custom-logo-link,
.masthead__brand .custom-logo {
	display: block;
}

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

.site-logo {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.35rem;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	color: var(--ink-100);
}

/* Desktop nav sits inline in the masthead, as in the reference: wordmark
   left, the desk list immediately beside it, utilities right. */
.nav-primary {
	flex: 1;
	min-width: 0;
}

.nav-list {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 1.8vw, 1.9rem);
	flex-wrap: wrap;
}

.nav-list a {
	display: inline-block;
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: var(--ink-300);
	padding-block: 0.35rem;
	position: relative;
	transition: color var(--dur) var(--ease);
}

.nav-list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--violet-400);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}

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

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

.masthead__util {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-shrink: 0;
}

/* Mobile menu toggle — hidden until the desk row can no longer fit. */
.menu-pill {
	display: none;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.95rem;
	border: 1px solid var(--line-firm);
	border-radius: var(--radius-pill);
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink-200);
}

.menu-pill__bars {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 14px;
}

.menu-pill__bars span {
	display: block;
	height: 1.5px;
	background: currentColor;
	/* Quick, so the bars-to-X morph keeps pace with the drawer, which opens
	   instantly. At the full --dur the icon visibly trailed the panel. */
	transition: transform 0.12s var(--ease), opacity 0.12s var(--ease);
}

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

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

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

/* Drawer-only subscribe link. Hidden by default; the 1080px block below
   turns it on, where the masthead pill is hidden. */
.nav-subscribe {
	display: none;
}

@media (max-width: 1080px) {
	.menu-pill {
		display: inline-flex;
	}

	/* Hidden below the desktop breakpoint, so the masthead carries only the
	   wordmark and the MENU toggle. The newsletter is still reachable — the
	   drawer sits over the page and the footer band is a scroll away — and the
	   pill was competing with the toggle for the same corner. */
	.masthead__util .btn {
		display: none;
	}

	/* Below this width the desk row becomes a drawer. */
	.nav-primary {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--navy-850);
		border-bottom: 1px solid var(--line-soft);
		flex: none;
	}

	/* Opens instantly. This was previously a grid-template-rows 0fr→1fr
	   transition, which made the whole list unfurl over ~0.3s and read as lag
	   on a tap. Navigation should respond immediately, so the drawer is simply
	   shown or hidden with no animation. */
	.nav-menu {
		display: none;
	}

	.nav-menu.is-open {
		display: block;
	}

	.nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-inline: clamp(1rem, 3.5vw, 2.5rem);
	}

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

	.nav-list li:last-child {
		border-bottom: 0;
	}

	.nav-list a {
		padding-block: 0.9rem;
		font-size: var(--fs-xs);
	}

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

	.nav-subscribe {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		margin: 0 clamp(1rem, 3.5vw, 2.5rem) 1rem;
		padding: 0.8rem 1.1rem;
		background: var(--violet-500);
		border-radius: var(--radius-pill);
		color: #fff;
		font-size: var(--fs-micro);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.12em;
	}

	.nav-subscribe .arrow-badge {
		background: #fff;
	}

	.nav-subscribe .arrow-badge svg {
		color: var(--violet-500);
	}
}

@media (max-width: 640px) {
	.masthead {
		min-height: 62px;
	}
}

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

.read-progress__fill {
	height: 100%;
	width: 0;
	background: var(--violet-400);
}

/* ── 6. Cards ────────────────────────────────────────────────────────────── */

/* The shared vertical card: media over a body of kicker, headline, byline.
   Every grid on the site composes from this. */
.card {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	min-width: 0;
}

.card__media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--navy-750);
}

.card__media-clip {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.card__img,
.feature__img,
.hcard__img,
.spot__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.card:hover .card__img,
.hcard:hover .hcard__img,
.spot:hover .spot__img {
	transform: scale(1.045);
}

/* No-thumbnail fallback: a tinted well with a diagonal hatch, so a missing
   image reads as deliberate rather than as a hole. */
.card__media--empty {
	background:
		repeating-linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.035) 0 10px,
			transparent 10px 20px
		),
		var(--navy-750);
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	min-width: 0;
}

.card__title {
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.01em;
	color: var(--ink-100);
}

.card__title a {
	background-image: linear-gradient(var(--violet-300), var(--violet-300));
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}

.card__title a:hover {
	color: var(--violet-300);
	background-size: 100% 1px;
}

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

.card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 0.15rem;
}

/* Compact card: the reference's "ON THE PULSE" row — a short landscape
   image, a kicker, a two-line headline, a byline. Nothing else. */
.card--compact .card__media-clip {
	aspect-ratio: 16 / 10;
}

.card--compact .card__title {
	font-size: 1.05rem;
	line-height: 1.28;
}

/* Horizontal card: thumbnail left, copy right. The reference's right-hand
   headline column and the Latest rail both use it. */
.hcard {
	display: grid;
	grid-template-columns: 1fr 96px;
	gap: 0.9rem;
	align-items: start;
	padding-bottom: 1.05rem;
	border-bottom: 1px solid var(--line-soft);
	min-width: 0;
}

.hcard:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.hcard__media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	aspect-ratio: 1 / 1;
	background: var(--navy-750);
	order: 2;
}

.hcard__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.hcard__title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink-100);
}

.hcard__title a:hover {
	color: var(--violet-300);
}

/* Grids */
.grid-2,
.grid-3,
.grid-4 {
	display: grid;
	gap: var(--gap);
}

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

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

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

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

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

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

/* ── 7. Front page sections ──────────────────────────────────────────────── */

/* 7.1 Hero — the opening screen from the reference: one big lead story on
   the left, a stacked headline column on the right, split by a hairline. */
.hero {
	padding-block: clamp(1.75rem, 3.5vw, 3rem) clamp(2.5rem, 5vw, 4rem);
	position: relative;
	overflow: hidden;
}

/* A soft violet bloom bleeding off the top-right corner. It gives the flat
   navy some depth without introducing a second surface colour. */
.hero::before {
	content: "";
	position: absolute;
	top: -30%;
	right: -10%;
	width: min(760px, 70vw);
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(74, 71, 245, 0.28), transparent 68%);
	pointer-events: none;
	z-index: 0;
}

.hero > .container {
	position: relative;
	z-index: 1;
}

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

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

.hero-lead__media {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	aspect-ratio: 16 / 10;
	background: var(--navy-750);
}

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

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

.hero-lead__title {
	font-size: var(--fs-h1);
}

.hero-lead__title a:hover {
	color: var(--violet-300);
}

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

.hero-lead__foot {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Right column: five headlines with square thumbs, hairline-divided. The
   most recognisable module in the reference. */
.hero-side {
	display: flex;
	flex-direction: column;
	gap: 1.05rem;
	min-width: 0;
	padding-left: clamp(0rem, 2vw, 2rem);
	border-left: 1px solid var(--line-soft);
}

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

	.hero-side {
		border-left: 0;
		padding-left: 0;
		padding-top: 1.5rem;
		border-top: 1px solid var(--line-firm);
	}
}

/* 7.2 Ticker strip — a marquee of desk names under the hero. Editorial
   furniture that advertises breadth at a glance. */
.tickerbar {
	border-block: 1px solid var(--line-soft);
	background: var(--navy-850);
	overflow: hidden;
	padding-block: 0.7rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.tickerbar__label {
	flex-shrink: 0;
	margin-left: clamp(1rem, 3.5vw, 2.5rem);
	padding: 0.28rem 0.7rem;
	border-radius: var(--radius);
	background: var(--violet-500);
	color: #fff;
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.tickerbar__viewport {
	flex: 1;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 3%, #000 92%, transparent);
}

.tickerbar__track {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	width: max-content;
	animation: st-marquee 46s linear infinite;
}

.tickerbar:hover .tickerbar__track,
.tickerbar:focus-within .tickerbar__track {
	animation-play-state: paused;
}

.tickerbar__item {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-400);
	white-space: nowrap;
	transition: color var(--dur) var(--ease);
}

.tickerbar__item:hover {
	color: var(--ink-100);
}

.tickerbar__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--cat-bg, var(--violet-400));
	flex-shrink: 0;
}

/* Translating by -25% moves the track by exactly one copy of the list, which
   the template prints four times — so the wrap lands on a point visually
   identical to the start and the loop is seamless.
   The fraction and the copy count in front-page.php must stay in step: at two
   copies and -50% the travel was narrower than the viewport on a 1440 screen
   and a gap opened at the right edge before the wrap. */
@keyframes st-marquee {
	to {
		transform: translateX(-25%);
	}
}

/* 7.3 Feature panel — the violet block: a photo on one side, oversized
   uppercase headline on the other, set on solid accent. */
.feature {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	background: var(--violet-500);
	border-radius: var(--radius-lg);
	overflow: hidden;
	min-height: 340px;
}

.feature__media {
	position: relative;
	overflow: hidden;
	min-height: 260px;
	background: var(--violet-600);
}

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

/* The reference dissolves its photos into the accent along a hard diagonal.
   A clip-path on an overlay reproduces that without touching the image. */
.feature__wedge {
	position: absolute;
	inset: 0;
	background: var(--violet-500);
	clip-path: polygon(100% 0, 100% 100%, 62% 100%);
	pointer-events: none;
}

.feature__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.9rem;
	padding: clamp(1.5rem, 3.2vw, 2.75rem);
	color: #fff;
}

.feature__title {
	font-size: clamp(1.75rem, 3.2vw, 2.9rem);
}

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

.feature__excerpt {
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, 0.86);
	max-width: 48ch;
}

.feature .kicker {
	color: rgba(255, 255, 255, 0.72);
	margin-bottom: 0;
}

.feature .byline,
.feature .byline__name,
.feature .metarow {
	color: rgba(255, 255, 255, 0.8);
}

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

	.feature__media {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	/* Stacked, the diagonal reads as a wedge across the bottom instead. */
	.feature__wedge {
		clip-path: polygon(0 100%, 100% 62%, 100% 100%);
	}
}

/* 7.4 Spotlight — a wide photo with the headline set alongside it rather
   than over it, as in the reference. */
.spot {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 2.6vw, 2.25rem);
	align-items: center;
}

.spot__media {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	aspect-ratio: 16 / 10;
	background: var(--navy-750);
}

/* A translucent violet corner wash, echoing the colour-blocked photo
   treatment throughout the reference. */
.spot__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(215deg, rgba(74, 71, 245, 0.55), transparent 46%);
	pointer-events: none;
}

.spot__body {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	min-width: 0;
}

.spot__title {
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.015em;
	line-height: 0.98;
	font-size: clamp(1.6rem, 2.9vw, 2.6rem);
	color: var(--ink-100);
}

.spot__title a:hover {
	color: var(--violet-300);
}

.spot__excerpt {
	font-size: var(--fs-sm);
	color: var(--ink-400);
	max-width: 46ch;
}

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

/* 7.5 Desk board — a static directory, not a carousel.
   A 3x2 board where the first panel spans both rows and keeps a photograph,
   and the remaining five are flat plates in their own desk colour. Each panel
   carries the desk's newest headline, so the section is navigation into live
   coverage rather than a strip of labels. */
.deskboard {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: minmax(178px, auto);
	gap: var(--gap);
}

.deskcard {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.25rem;
	overflow: hidden;
	border-radius: var(--radius);
	padding: 1.15rem;
	isolation: isolate;
	background: var(--navy-800);
	border: 1px solid var(--line-soft);
	transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* The desk's own colour arrives as a full-bleed wash that rises on hover,
   so the board reads as a set of coloured plates without nine hard-coded
   background rules. */
.deskcard::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--cat-bg, var(--violet-500));
	opacity: 0.16;
	transition: opacity var(--dur) var(--ease);
}

.deskcard:hover {
	transform: translateY(-3px);
	border-color: var(--cat-bg, var(--violet-500));
}

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

/* Lead panel: spans two rows in the first column and reveals its cover art.
   Which card holds this class rotates on an interval (see main.js), so every
   desk takes a turn as the photographed panel.

   The grid position is NOT animated — moving a grid item between tracks
   cannot tween, and trying produces a jump. Only the artwork cross-fades; the
   panel geometry changes instantly underneath it, which reads as the photo
   moving rather than the box resizing. */
.deskcard--lead {
	grid-row: span 2;
	justify-content: flex-end;
	min-height: 380px;
	padding: 1.4rem;
	border-color: transparent;
}

/* Every card carries its image; only the lead shows it. Fading opacity rather
   than toggling display keeps the swap smooth and lets the browser decode the
   next photo before it is needed. */
.deskcard__img,
.deskcard__scrim {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.55s var(--ease);
}

.deskcard__img {
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.deskcard__scrim {
	z-index: -1;
	background: linear-gradient(to top, rgba(11, 5, 48, 0.95) 8%, rgba(11, 5, 48, 0.35) 55%, rgba(11, 5, 48, 0.1));
}

.deskcard--lead .deskcard__img,
.deskcard--lead .deskcard__scrim {
	opacity: 1;
}

.deskcard--lead:hover .deskcard__img {
	transform: scale(1.05);
	transition: opacity 0.55s var(--ease), transform 0.7s var(--ease);
}

/* On the photographed panel the colour wash would drown the image, so the
   scrim does the legibility work and the wash is held back. */
.deskcard--lead::before {
	opacity: 0;
}

.deskcard--lead:hover::before {
	opacity: 0.34;
}

.deskcard__top {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.deskcard--lead .deskcard__top {
	order: -1;
	margin-bottom: auto;
}

.deskcard__name {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.1rem, 1.9vw, 1.5rem);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.05;
	color: #fff;
}

.deskcard--lead .deskcard__name {
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
}

.deskcard__count {
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.62);
	transition: color var(--dur) var(--ease);
}

.deskcard:hover .deskcard__count {
	color: rgba(255, 255, 255, 0.82);
}

.deskcard__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.85rem;
}

.deskcard__latest {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.deskcard__latest-label {
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: rgba(255, 255, 255, 0.5);
}

.deskcard__latest-title {
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.92);
	/* Two lines, so an unusually long headline cannot stretch one plate and
	   knock the whole row out of alignment. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.deskcard--lead .deskcard__latest-title {
	font-size: var(--fs-body);
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.deskcard__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #fff;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}

.deskcard__go svg {
	width: 15px;
	height: 15px;
}

.deskcard:hover .deskcard__go {
	background: #fff;
	border-color: #fff;
	color: var(--navy-900);
	transform: translateX(3px);
}

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

	/* The lead stops spanning rows here: at two columns a double-height panel
	   leaves a hole beside it on an odd count. */
	.deskcard--lead {
		grid-row: auto;
		grid-column: span 2;
		min-height: 300px;
	}
}

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

	.deskcard--lead {
		grid-column: auto;
		min-height: 260px;
	}
}

/* 7.65 The Wire — a dated timeline.
   Stories hang off a vertical spine, grouped under the day they were filed.
   The only section on the page with a sense of time passing, which is what
   keeps it distinct from the desk board above and the ranked list below. */
.wire {
	position: relative;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* The spine. Drawn as a pseudo-element on the list rather than a border on
   each row, so it runs continuously through the date marks too. */
.wire::before {
	content: "";
	position: absolute;
	top: 0.6rem;
	bottom: 0.6rem;
	left: 7px;
	width: 1px;
	background: linear-gradient(
		to bottom,
		transparent,
		var(--line-firm) 6%,
		var(--line-firm) 94%,
		transparent
	);
}

/* Date rule — "Today", "Yesterday", then real dates. */
.wire__daymark {
	position: relative;
	padding-left: 2.75rem;
	margin-block: 1.5rem 0.85rem;
}

.wire__daymark:first-child {
	margin-top: 0;
}

.wire__day {
	display: inline-block;
	padding: 0.28rem 0.7rem;
	border-radius: var(--radius);
	background: var(--navy-750);
	border: 1px solid var(--line-soft);
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ink-300);
}

.wire__item {
	position: relative;
	padding-left: 2.75rem;
}

/* The node sitting on the spine, in the story's desk colour. A ring rather
   than a filled dot so it reads against the line at any colour. */
.wire__node {
	position: absolute;
	left: 0;
	top: 1.5rem;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--navy-800);
	border: 3px solid var(--cat-bg, var(--violet-500));
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.wire__item:hover .wire__node {
	transform: scale(1.25);
	box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.06);
}

.wire__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 132px;
	gap: 1.25rem;
	align-items: center;
	padding-block: 1.15rem;
	border-bottom: 1px solid var(--line-soft);
}

.wire__item:last-child .wire__card {
	border-bottom: 0;
}

.wire__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.wire__meta {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

/* Monospaced-feel timestamp: tabular figures keep the column aligned down
   the feed even though the times differ. */
.wire__time {
	color: var(--ink-200);
	font-variant-numeric: tabular-nums;
}

.wire__desk {
	position: relative;
	padding-left: 0.75rem;
	color: var(--cat-bg, var(--violet-300));
}

.wire__desk::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 50%;
	background: currentColor;
}

.wire__title {
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--ink-100);
}

.wire__title a:hover {
	color: var(--violet-300);
}

.wire__excerpt {
	font-size: var(--fs-sm);
	color: var(--ink-400);
	max-width: 62ch;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wire__media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	aspect-ratio: 4 / 3;
	background: var(--navy-750);
}

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

.wire__item:hover .wire__img {
	transform: scale(1.06);
}

@media (max-width: 700px) {
	.wire__daymark,
	.wire__item {
		padding-left: 1.9rem;
	}

	.wire::before {
		left: 5px;
	}

	.wire__node {
		width: 11px;
		height: 11px;
		border-width: 2px;
		top: 1.35rem;
	}

	/* The thumbnail leads on narrow screens rather than being squeezed into a
	   sliver beside the copy. */
	.wire__card {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.85rem;
	}

	.wire__media {
		order: -1;
		aspect-ratio: 16 / 9;
	}

	.wire__excerpt {
		display: none;
	}
}

/* 7.7 Stat band — a full-width violet strip breaking the grid, giving the
   long homepage a change of pace between card sections. */
.statband {
	background: var(--violet-500);
	color: #fff;
}

.statband__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gap);
	padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

.statband__item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.statband__num {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	line-height: 1;
	letter-spacing: -0.02em;
}

.statband__label {
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgba(255, 255, 255, 0.76);
}

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

/* 7.8 Closing block — latest stories beside a desk index, so the page ends
   on navigation rather than yet another card grid. */
.closing {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3.5vw, 3rem);
	align-items: start;
}

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

.ranklist {
	display: flex;
	flex-direction: column;
}

.rank {
	display: grid;
	grid-template-columns: 3.25rem 1fr;
	gap: 1rem;
	align-items: start;
	padding-block: 1.05rem;
	border-bottom: 1px solid var(--line-soft);
}

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

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

.rank__num {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--violet-500);
	letter-spacing: -0.03em;
}

.rank__title {
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink-100);
	margin-bottom: 0.3rem;
}

.rank__title a:hover {
	color: var(--violet-300);
}

/* Desk index — a compact list of every category with a hover sweep in that
   desk's own colour. Shared by the closing block and the single sidebar. */
.cat-list {
	display: flex;
	flex-direction: column;
}

.cat-list a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.8rem 0.9rem;
	border-bottom: 1px solid var(--line-soft);
	overflow: hidden;
	isolation: isolate;
	transition: color var(--dur) var(--ease);
}

.cat-list a:last-child {
	border-bottom: 0;
}

.cat-list__name {
	position: relative;
	z-index: 1;
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink-200);
	transition: color var(--dur) var(--ease);
}

.cat-list__count {
	position: relative;
	z-index: 1;
	font-size: var(--fs-micro);
	font-weight: 600;
	color: var(--ink-500);
	transition: color var(--dur) var(--ease);
}

.cat-list__fill {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--cat-bg, var(--violet-500));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}

.cat-list a:hover .cat-list__fill {
	transform: scaleX(1);
}

.cat-list a:hover .cat-list__name,
.cat-list a:hover .cat-list__count {
	color: var(--cat-fg, #fff);
}

/* ── 8. Newsletter ───────────────────────────────────────────────────────── */

/* The target of every SUBSCRIBE button in the theme. Field names and the
   honeypot are fixed by the AJAX handler in inc/newsletter.php — restyle
   freely, never rename.

   A full-bleed violet band with a contained card floating on it: the band
   gives the section the same page-wide presence the old layout had, while the
   card keeps the copy on a dark ground so the form and stats stay legible
   against it. */
.brief {
	position: relative;
	padding-block: clamp(2.5rem, 5.5vw, 4.5rem);
	background: var(--violet-500);
	overflow: hidden;
}

/* Colour-block collage across the band, echoing the mosaics in the design
   reference. Built from gradients rather than an image so it costs nothing
   to load. Sits behind the card, bleeding off both edges. */
.brief::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(var(--amber) 0 0) 4% 12% / 13% 34% no-repeat,
		linear-gradient(var(--red) 0 0) 15% 62% / 9% 26% no-repeat,
		linear-gradient(var(--green) 0 0) 2% 84% / 16% 18% no-repeat,
		linear-gradient(rgba(255, 255, 255, 0.18) 0 0) 24% 26% / 7% 40% no-repeat,
		linear-gradient(var(--sky) 0 0) 88% 18% / 12% 30% no-repeat,
		linear-gradient(var(--rose) 0 0) 78% 66% / 9% 24% no-repeat,
		linear-gradient(var(--amber) 0 0) 96% 74% / 14% 20% no-repeat,
		linear-gradient(rgba(255, 255, 255, 0.14) 0 0) 70% 8% / 8% 22% no-repeat;
	opacity: 0.5;
	pointer-events: none;
}

@media (max-width: 900px) {
	/* The collage lives in the margins either side of the card. Once the card
	   fills the width there is nowhere for it to sit without showing through. */
	.brief::before {
		display: none;
	}
}

.brief__card {
	position: relative;
	z-index: 1;
	max-width: 780px;
	margin-inline: auto;
	padding: clamp(2rem, 4.5vw, 3.25rem) clamp(1.25rem, 4vw, 3.25rem);
	text-align: center;
	/* Near-opaque rather than solid: a little of the violet band reads through
	   the panel, which ties the card to its ground instead of punching a hole
	   in it. */
	background: rgba(11, 5, 48, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-lg);
	box-shadow: 0 30px 70px rgba(6, 2, 28, 0.5);
	overflow: hidden;
}

/* A violet glow bleeding down from the top edge, so the card has depth
   rather than reading as a flat plate. */
.brief__card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -55%);
	width: min(680px, 90%);
	aspect-ratio: 2 / 1;
	background: radial-gradient(ellipse, rgba(95, 92, 255, 0.55), transparent 70%);
	pointer-events: none;
}

/* A hairline of accent across the very top of the card. */
.brief__card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--violet-400) 30%,
		var(--violet-400) 70%,
		transparent
	);
}

.brief__card > * {
	position: relative;
	z-index: 1;
}

.brief__kicker {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	margin-bottom: 1.1rem;
	border: 1px solid var(--violet-400);
	border-radius: var(--radius-pill);
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--violet-300);
}

.brief__title {
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 0.98;
	font-size: clamp(1.65rem, 3.6vw, 2.75rem);
	color: var(--ink-100);
	margin-bottom: 0.9rem;
	/* Wide enough that the headline breaks into two balanced lines rather than
	   stranding its last word — at 20ch the trailing "7." fell to a third line
	   on its own. text-wrap:balance evens the two lines where supported. */
	max-width: 26ch;
	margin-inline: auto;
	text-wrap: balance;
}

.brief__sub {
	font-size: var(--fs-lead);
	color: var(--ink-300);
	max-width: 56ch;
	margin-inline: auto;
	margin-bottom: 1.75rem;
}

/* Field and button share one pill, so the form reads as a single control. */
.brief__field {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	max-width: 480px;
	margin-inline: auto;
	padding: 0.4rem 0.4rem 0.4rem 1.25rem;
	background: var(--navy-900);
	border: 1px solid var(--line-firm);
	border-radius: var(--radius-pill);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.brief__field:focus-within {
	border-color: var(--violet-400);
	box-shadow: 0 0 0 4px rgba(74, 71, 245, 0.18);
}

/* Overrides the shared .newsletter-form__input, which is styled for the
   filled violet sidebar panel and would show a second border inside the pill. */
.brief__field .newsletter-form__input {
	flex: 1;
	min-width: 0;
	padding: 0.65rem 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--ink-100);
	font-size: var(--fs-sm);
}

.brief__field .newsletter-form__input:focus {
	outline: none;
	background: none;
}

.brief__field .newsletter-form__input::placeholder {
	color: var(--ink-500);
}

.brief__field .newsletter-form__btn {
	flex-shrink: 0;
}

.brief .newsletter-form__msg {
	margin-top: 0.9rem;
	font-size: var(--fs-sm);
	font-weight: 600;
}

.brief .newsletter-form__msg--success {
	color: #6FE3A6;
}

.brief .newsletter-form__msg--error {
	color: #FF9A8F;
}

.brief__note {
	margin-top: 0.9rem;
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-500);
}

/* Proof points — a rule of stats rather than a numbered benefit list. */
.brief__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin: 2rem 0 0;
	padding-top: 1.75rem;
	border-top: 1px solid var(--line-soft);
}

.brief__fact {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding-inline: 0.5rem;
	border-left: 1px solid var(--line-soft);
}

.brief__fact:first-child {
	border-left: 0;
}

.brief__facts dt {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.2rem, 2.2vw, 1.6rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--violet-300);
	text-transform: uppercase;
}

.brief__facts dd {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--ink-400);
	line-height: 1.35;
}

@media (max-width: 620px) {
	/* The field stacks below 620px: at that width the button and a usable
	   input cannot share one row without the placeholder truncating. */
	.brief__field {
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
		padding: 0.75rem;
		border-radius: var(--radius-lg);
	}

	.brief__field .newsletter-form__input {
		padding: 0.55rem 0.5rem;
		text-align: center;
	}

	.brief__facts {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
		text-align: center;
	}

	.brief__fact {
		border-left: 0;
		padding-inline: 0;
	}
}

/* ── 9. Footer ───────────────────────────────────────────────────────────── */

/* Asymmetric two-track footer: a tall brand rail on the left, the desk index
   beside it, and a thin base bar. Deliberately not the stacked full-width
   bands used elsewhere. */
.site-footer {
	position: relative;
	background: var(--navy-900);
	padding-bottom: 1.75rem;
}

/* Spectrum rule — one band per desk in its own colour, spanning the full
   width. Doubles as a legend for the colour coding used across the site. */
.footer-spectrum {
	display: flex;
	height: 4px;
	width: 100%;
}

.footer-spectrum span {
	flex: 1;
	background: var(--cat-bg, var(--violet-500));
}

.footer-grid {
	display: grid;
	/* The brand rail is fixed-ish and the index takes the rest, rather than
	   the two sharing equal tracks — the asymmetry is the point. */
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
	gap: clamp(2rem, 5vw, 5rem);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

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

/* ── Brand rail */
.footer-id {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.1rem;
	/* A hairline down the inner edge separates the two tracks without a box. */
	position: relative;
}

@media (min-width: 901px) {
	.footer-id::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: clamp(-2.5rem, -2.5vw, -1rem);
		width: 1px;
		background: var(--line-soft);
	}
}

.footer-id__logo img {
	max-height: 46px;
	width: auto;
}

.footer-id__name {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.6rem;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	color: var(--ink-100);
}

.footer-id__desc {
	font-size: var(--fs-sm);
	color: var(--ink-400);
	max-width: 38ch;
}

/* Live status stamp — shows when the wire last moved, so the footer reads as
   a running newsroom rather than a static sitemap. */
.footer-status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-pill);
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-300);
}

.footer-status__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #3ED598;
	box-shadow: 0 0 0 0 rgba(62, 213, 152, 0.6);
	animation: st-pulse 2.4s infinite;
}

.footer-contact {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: var(--fs-sm);
	color: var(--ink-300);
}

.footer-contact a {
	transition: color var(--dur) var(--ease);
}

.footer-contact a:hover {
	color: #fff;
}

/* ── Desk index */
.footer-heading {
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ink-500);
	margin-bottom: 1.1rem;
}

/* Tag cloud sized by output: the busiest desks set larger, so the shape of
   the coverage is legible at a glance. --scale is set per link in PHP. */
.deskcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.deskcloud__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.85rem;
	border-radius: var(--radius-pill);
	border: 1px solid var(--line-soft);
	background: var(--navy-850);
	/* Scaled with calc rather than transform: transform would leave the
	   original box in flow and the chips would overlap. */
	font-size: calc(var(--fs-xs) * var(--scale, 1));
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.2;
	color: var(--ink-200);
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
		color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.deskcloud__link:hover {
	background: var(--cat-bg, var(--violet-500));
	border-color: var(--cat-bg, var(--violet-500));
	color: var(--cat-fg, #fff);
	transform: translateY(-2px);
}

.deskcloud__count {
	font-size: 0.72em;
	font-weight: 600;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}

/* ── Base bar */
.footer-base {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	flex-wrap: wrap;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line-soft);
}

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

.footer-legal {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	font-size: var(--fs-xs);
	color: var(--ink-500);
	/* Pushed to sit beside the copyright, leaving the Top link at the far
	   right regardless of how many legal links there are. */
	margin-right: auto;
	margin-left: 1.25rem;
}

.footer-legal a {
	transition: color var(--dur) var(--ease);
}

.footer-legal a:hover {
	color: var(--ink-200);
}

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

.footer-top {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-pill);
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-300);
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
		color var(--dur) var(--ease);
}

.footer-top svg {
	width: 13px;
	height: 13px;
	transition: transform var(--dur) var(--ease);
}

.footer-top:hover {
	background: var(--violet-500);
	border-color: var(--violet-500);
	color: #fff;
}

.footer-top:hover svg {
	transform: translateY(-2px);
}

@media (max-width: 640px) {
	.footer-base {
		justify-content: flex-start;
	}

	.footer-legal {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		order: 3;
	}

	.footer-top {
		order: 2;
		margin-left: auto;
	}
}

/* ── 10. Archive / category ──────────────────────────────────────────────── */

/* Hero: the term name on the left, its stats on the right, over a band
   washed in the term's own colour. */
.deskhero {
	position: relative;
	background: var(--navy-850);
	border-bottom: 1px solid var(--line-soft);
	padding-block: clamp(2.25rem, 5vw, 3.75rem);
	overflow: hidden;
}

/* A broad diagonal wash in the desk colour, anchored to the left edge so it
   sits behind the name rather than across the stats. */
.deskhero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		var(--chip-bg, var(--violet-500)) -20%,
		transparent 52%
	);
	opacity: 0.2;
	pointer-events: none;
}

/* A thick bar of the desk colour down the leading edge — the strongest
   colour cue on the page, and the thing that makes each desk feel distinct. */
.deskhero::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 6px;
	background: var(--chip-bg, var(--violet-500));
}

.deskhero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: end;
}

@media (max-width: 780px) {
	.deskhero__grid {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 1.5rem;
	}
}

.deskhero__lede {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
	min-width: 0;
}

.deskhero__title {
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 0.9;
	font-size: var(--fs-display);
	color: var(--ink-100);
	/* Long search queries and tag names must not push the stats off-screen. */
	overflow-wrap: anywhere;
}

.deskhero__desc {
	font-size: var(--fs-lead);
	color: var(--ink-300);
	max-width: 60ch;
}

/* Stat block — count and freshness, rules between them. */
.deskstats {
	display: flex;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin: 0;
	flex-shrink: 0;
}

.deskstats__item {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding-left: clamp(1.25rem, 3vw, 2.5rem);
	border-left: 1px solid var(--line-firm);
}

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

.deskstats dt {
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ink-500);
	order: 2;
}

.deskstats dd {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ink-100);
	white-space: nowrap;
}

/* ── Two-column spread */
.archive-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: start;
}

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

.archive-side {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	position: sticky;
	top: 100px;
}

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

/* ── Lead story: picture first, copy beneath. */
.deskled {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	padding-bottom: var(--gap-lg);
	margin-bottom: 0.5rem;
	border-bottom: 1px solid var(--line-firm);
}

.deskled__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--navy-750);
}

.deskled__clip {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

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

.deskled:hover .deskled__img {
	transform: scale(1.03);
}

/* Corner flag in the desk colour, inherited from the hero's --chip-bg. */
.deskled__tag {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0.4rem 0.85rem;
	background: var(--chip-bg, var(--violet-500));
	/* Paired with the background rather than fixed white: the light swatches
	   (sand, amber, sky, rose) carry dark text, and white would vanish. */
	color: var(--chip-fg, #fff);
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	border-bottom-right-radius: var(--radius);
}

.deskled__body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: flex-start;
}

.deskled__title {
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.018em;
	line-height: 0.98;
	font-size: clamp(1.6rem, 3.2vw, 2.6rem);
	color: var(--ink-100);
}

.deskled__title a:hover {
	color: var(--violet-300);
}

.deskled__excerpt {
	font-size: var(--fs-lead);
	color: var(--ink-300);
	max-width: 60ch;
}

/* ── Numbered story rows */
.deskrow {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) 148px;
	gap: 1.25rem;
	align-items: start;
	padding-block: 1.5rem;
	border-bottom: 1px solid var(--line-soft);
}

.deskrow:last-of-type {
	border-bottom: 0;
}

.deskrow__num {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.35rem;
	line-height: 1.2;
	letter-spacing: -0.03em;
	/* Numbers in the desk colour, tying the list to the hero band. */
	color: var(--chip-bg, var(--violet-400));
	font-variant-numeric: tabular-nums;
}

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

.deskrow__meta {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-500);
}

.deskrow__desk {
	position: relative;
	padding-left: 0.75rem;
	color: var(--violet-300);
}

.deskrow__desk::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 50%;
	background: currentColor;
}

.deskrow__title {
	font-size: clamp(1.1rem, 1.7vw, 1.35rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--ink-100);
}

.deskrow__title a:hover {
	color: var(--violet-300);
}

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

.deskrow__media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	aspect-ratio: 4 / 3;
	background: var(--navy-750);
}

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

.deskrow:hover .deskrow__img {
	transform: scale(1.06);
}

@media (max-width: 640px) {
	/* The number moves inline with the meta row and the thumbnail leads, so a
	   narrow screen is not trying to hold three columns. */
	.deskrow {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.85rem;
	}

	.deskrow__num {
		display: none;
	}

	.deskrow__media {
		order: -1;
		aspect-ratio: 16 / 9;
	}
}

/* Pagination */
.pagination {
	margin-top: var(--gap-lg);
	padding-top: var(--gap-lg);
	border-top: 1px solid var(--line-soft);
}

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

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 0.75rem;
	border-radius: var(--radius);
	border: 1px solid var(--line-soft);
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--ink-300);
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
		color var(--dur) var(--ease);
}

.pagination .page-numbers:hover {
	border-color: var(--violet-400);
	color: #fff;
}

.pagination .page-numbers.current {
	background: var(--violet-500);
	border-color: var(--violet-500);
	color: #fff;
}

.pagination .dots {
	border: 0;
}

.no-results {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	padding-block: clamp(2.5rem, 6vw, 5rem);
	max-width: 50ch;
}

.no-results p {
	font-size: var(--fs-lead);
	color: var(--ink-300);
}

/* ── 11. Single post ─────────────────────────────────────────────────────── */
.single-main {
	padding-bottom: var(--pad-section);
}

/* 11.1 Hero — the article opens on its photograph, headline set over it. */
.phero {
	position: relative;
	display: flex;
	align-items: flex-end;
	isolation: isolate;
	margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.phero--art {
	min-height: clamp(360px, 56vh, 620px);
	padding-block: clamp(2rem, 5vw, 4rem);
}

/* No artwork: a banded header instead, so the page still opens deliberately
   rather than dropping the reader straight into body copy. */
.phero--plain {
	padding-block: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.25rem);
	background: var(--navy-850);
	border-bottom: 1px solid var(--line-soft);
}

.phero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

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

/* Two-stop scrim: heavy at the foot where the type sits, light at the head so
   the photograph is still legible as an image. */
.phero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, var(--navy-800) 2%, rgba(21, 11, 69, 0.82) 34%, rgba(21, 11, 69, 0.35) 70%, rgba(21, 11, 69, 0.45)),
		linear-gradient(to right, rgba(11, 5, 48, 0.6), transparent 60%);
}

.phero__inner {
	position: relative;
	max-width: 60rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.phero__title {
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 0.94;
	font-size: clamp(2rem, 5.2vw, 4rem);
	color: var(--ink-100);
	text-wrap: balance;
}

.phero--art .phero__title {
	/* Lifts the headline off a busy photograph without a solid plate behind it. */
	text-shadow: 0 2px 24px rgba(6, 2, 28, 0.55);
}

.phero__standfirst {
	font-size: var(--fs-lead);
	color: var(--ink-200);
	max-width: 62ch;
}

.phero--art .phero__standfirst {
	text-shadow: 0 1px 12px rgba(6, 2, 28, 0.6);
}

.phero__caption {
	margin-top: -1rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	padding-left: 0.85rem;
	border-left: 2px solid var(--chip-bg, var(--violet-500));
	font-size: var(--fs-xs);
	color: var(--ink-500);
}

/* 11.2 Body — three tracks: detail rail, article, sidebar. */
.single-layout {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr) 320px;
	gap: clamp(1.5rem, 3.5vw, 3rem);
	align-items: start;
}

@media (max-width: 1180px) {
	/* Sidebar drops under the article first; the detail rail is narrow enough
	   to keep its column a while longer. */
	.single-layout {
		grid-template-columns: 180px minmax(0, 1fr);
	}

	.single-sidebar {
		grid-column: 1 / -1;
	}
}

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

/* Detail rail */
.postrail {
	display: flex;
	flex-direction: column;
	gap: 1.35rem;
	position: sticky;
	top: 100px;
	padding-right: 1.25rem;
	border-right: 1px solid var(--line-soft);
}

@media (max-width: 860px) {
	/* Folds into a single row above the copy, so it reads as a byline strip
	   rather than a stranded column. */
	.postrail {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1.5rem;
		padding-right: 0;
		padding-bottom: 1.25rem;
		border-right: 0;
		border-bottom: 1px solid var(--line-soft);
	}
}

.postrail__block {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.postrail__label {
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ink-500);
}

.postrail__value {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--ink-200);
}

.postrail__author {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.postrail__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.postrail__name {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--ink-100);
	line-height: 1.2;
}

.postrail__role {
	display: block;
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink-500);
}

/* Article body. Long-form copy is the one place the page steps back from
   uppercase display and lets Inter run at a comfortable measure. */
.article-content,
.page-content {
	font-size: 1.0625rem;
	line-height: 1.78;
	color: var(--ink-200);
	max-width: 68ch;
}

/* Drop cap in the desk colour, opening the article the way print does. */
.article-content > p:first-of-type::first-letter {
	float: left;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 3.4em;
	line-height: 0.82;
	margin: 0.06em 0.12em 0 0;
	color: var(--chip-bg, var(--violet-400));
}

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

.article-content h2,
.page-content h2 {
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.08;
	font-size: clamp(1.4rem, 2.4vw, 1.95rem);
	color: var(--ink-100);
	margin-top: 2.2em;
}

.article-content h3,
.page-content h3 {
	font-size: clamp(1.15rem, 1.8vw, 1.4rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--ink-100);
	margin-top: 1.9em;
}

.article-content h4,
.page-content h4 {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ink-100);
	margin-top: 1.7em;
}

.article-content a,
.page-content a {
	color: var(--violet-300);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color var(--dur) var(--ease);
}

.article-content a:hover,
.page-content a:hover {
	color: #fff;
}

.article-content strong,
.page-content strong {
	color: var(--ink-100);
	font-weight: 700;
}

.article-content ul,
.article-content ol,
.page-content ul,
.page-content ol {
	padding-left: 1.4rem;
	list-style: revert;
}

.article-content li,
.page-content li {
	margin-block: 0.45em;
}

.article-content li::marker,
.page-content li::marker {
	color: var(--chip-bg, var(--violet-400));
}

.article-content blockquote,
.page-content blockquote {
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--chip-bg, var(--violet-500));
	background: var(--navy-850);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: 1.12rem;
	line-height: 1.55;
	color: var(--ink-100);
}

.article-content blockquote p + p,
.page-content blockquote p + p {
	margin-top: 0.8em;
}

.article-content blockquote cite,
.page-content blockquote cite {
	display: block;
	margin-top: 0.75rem;
	font-size: var(--fs-micro);
	font-style: normal;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-500);
}

.article-content img,
.page-content img {
	border-radius: var(--radius);
}

.article-content figure,
.page-content figure {
	margin-inline: 0;
}

.article-content figcaption,
.page-content figcaption {
	margin-top: 0.55rem;
	font-size: var(--fs-xs);
	color: var(--ink-500);
}

.article-content code,
.page-content code {
	background: var(--navy-900);
	border: 1px solid var(--line-soft);
	border-radius: 3px;
	padding: 0.1em 0.4em;
	font-size: 0.9em;
}

.article-content pre,
.page-content pre {
	background: var(--navy-900);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	padding: 1.15rem;
	overflow-x: auto;
}

.article-content pre code,
.page-content pre code {
	background: none;
	border: 0;
	padding: 0;
}

.article-content table,
.page-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
	/* Wide tables must scroll inside their own box rather than pushing the
	   page sideways. */
	display: block;
	overflow-x: auto;
}

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

.article-content th,
.page-content th {
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink-300);
}

.article-content hr,
.page-content hr {
	border: 0;
	border-top: 1px solid var(--line-soft);
	margin-block: 2.4em;
}

/* End-of-article mark, in the post's desk colour. */
.article-end {
	margin-top: 2.25rem;
}

.article-end__mark {
	display: block;
	width: 34px;
	height: 5px;
	border-radius: 3px;
	background: var(--chip-bg, var(--violet-500));
}

.article-tags {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line-soft);
}

.article-tags__label {
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ink-500);
	margin-right: 0.25rem;
}

.article-tags .chip {
	background: var(--navy-750);
	color: var(--ink-300);
}

.article-tags .chip:hover {
	background: var(--chip-bg, var(--violet-500));
	color: var(--chip-fg, #fff);
	opacity: 1;
}

/* Prev / next */
.article-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap);
	margin-top: 1.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--line-soft);
}

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

.article-nav__item {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1rem 1.15rem;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.article-nav__item:hover {
	border-color: var(--chip-bg, var(--violet-400));
	background: var(--navy-850);
}

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

.article-nav__label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--violet-300);
}

.article-nav__title {
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink-200);
}

.related {
	margin-top: var(--gap-lg);
	padding-top: var(--gap-lg);
	border-top: 1px solid var(--line-firm);
}

/* 11.3 Sidebar */
.single-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	position: sticky;
	top: 100px;
}

@media (max-width: 1180px) {
	.single-sidebar {
		position: static;
		/* Below the article the panels read better side by side than as one
		   tall stack. */
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		margin-top: var(--gap-lg);
		padding-top: var(--gap-lg);
		border-top: 1px solid var(--line-firm);
	}
}

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

/* Sidebar newsletter — a bordered brief card echoing the footer band, rather
   than the old filled violet block. */
.sidebrief {
	position: relative;
	padding: 1.5rem 1.35rem;
	background: var(--navy-850);
	border: 1px solid var(--line-firm);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-align: center;
}

/* Accent hairline across the top, in the post's desk colour. */
.sidebrief::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--chip-bg, var(--violet-500));
}

/* A soft bloom behind the copy, the same device the footer card uses. */
.sidebrief::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -60%);
	width: 120%;
	aspect-ratio: 2 / 1;
	background: radial-gradient(ellipse, rgba(95, 92, 255, 0.3), transparent 70%);
	pointer-events: none;
}

.sidebrief > * {
	position: relative;
	z-index: 1;
}

.sidebrief__kicker {
	display: inline-block;
	margin-bottom: 0.6rem;
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--violet-300);
}

.sidebrief__title {
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.04;
	font-size: 1.25rem;
	color: var(--ink-100);
	margin-bottom: 0.5rem;
}

.sidebrief__sub {
	font-size: var(--fs-xs);
	color: var(--ink-400);
	margin-bottom: 1.1rem;
}

/* Stacked field and button: the column is too narrow for a row. Overrides the
   shared .newsletter-form__input, which is sized for the footer pill. */
.sidebrief__input {
	width: 100%;
	margin-bottom: 0.55rem;
	padding: 0.7rem 1rem;
	background: var(--navy-900);
	border: 1px solid var(--line-firm);
	border-radius: var(--radius-pill);
	color: var(--ink-100);
	font-size: var(--fs-sm);
	text-align: center;
}

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

.sidebrief__input:focus {
	outline: none;
	background: var(--navy-900);
	border-color: var(--violet-400);
	box-shadow: 0 0 0 3px rgba(74, 71, 245, 0.2);
}

.sidebrief__btn {
	width: 100%;
}

.sidebrief .newsletter-form__msg {
	margin-top: 0.75rem;
	font-size: var(--fs-xs);
}

.sidebrief .newsletter-form__msg--success {
	color: #6FE3A6;
}

.sidebrief .newsletter-form__msg--error {
	color: #FF9A8F;
}

/* Sidebar panels — flush blocks led by a colour tab rather than bordered
   boxes. Shared by the archive and single-post sidebars. */
.panel {
	position: relative;
	padding: 1.4rem 0 0;
	background: none;
	border: 0;
	border-top: 2px solid var(--line-firm);
}

/* The heading sits ON the top rule as a tab in the desk colour, which is
   what replaces the old boxed-in look. --chip-bg is inherited from <main>
   on archives; elsewhere it falls back to the house violet. */
.panel__heading {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(-50%);
	padding: 0.32rem 0.7rem;
	background: var(--chip-bg, var(--violet-500));
	/* See .deskled__tag — the fill and its text colour travel together. */
	color: var(--chip-fg, #fff);
	border-radius: 2px;
	font-size: var(--fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	margin: 0;
	border: 0;
}

.panel .cat-list a {
	padding-inline: 0;
}

/* ── Ranked story list */
.side-list {
	display: flex;
	flex-direction: column;
	padding-top: 0.35rem;
}

.side-item {
	display: grid;
	grid-template-columns: 1.6rem minmax(0, 1fr);
	gap: 0.8rem;
	align-items: start;
	padding-block: 0.9rem;
	border-bottom: 1px solid var(--line-soft);
}

.side-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* The lead item carries artwork, so it takes a third track. Keyed off
   :first-child rather than :has(), which Safari below 15.4 does not support —
   and only the first item is ever given a thumbnail. */
.side-item:first-child {
	grid-template-columns: 1.6rem minmax(0, 1fr) 64px;
}

/* Outline numerals — the rank reads as a marker rather than as content, and
   stays quiet next to the headline it labels. */
.side-item__rank {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px var(--ink-500);
	font-variant-numeric: tabular-nums;
	transition: -webkit-text-stroke-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* The top rank fills in, in the desk colour. */
.side-item:first-child .side-item__rank {
	color: var(--chip-bg, var(--violet-400));
	-webkit-text-stroke: 0;
}

.side-item:hover .side-item__rank {
	-webkit-text-stroke-color: var(--chip-bg, var(--violet-400));
}

.side-item__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.side-item__title {
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.32;
	color: var(--ink-100);
}

.side-item__title a:hover {
	color: var(--violet-300);
}

.side-item__time {
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-500);
}

.side-item__media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	aspect-ratio: 1 / 1;
	background: var(--navy-750);
}

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

.side-item:hover .side-item__media img {
	transform: scale(1.07);
}

/* Widget-area defaults, so an added widget inherits the panel treatment. */
.widget {
	padding: 1.4rem 0 0;
	border-top: 2px solid var(--line-firm);
}

.widget ul li {
	padding-block: 0.45rem;
	border-bottom: 1px solid var(--line-soft);
	font-size: var(--fs-sm);
}

.widget ul li:last-child {
	border-bottom: 0;
}

/* ── 12. Static page ─────────────────────────────────────────────────────── */
.page-main {
	padding-block: clamp(2rem, 5vw, 3.5rem) var(--pad-section);
}

.page-header {
	padding-bottom: 1.5rem;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--line-firm);
}

.page-header__title {
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.018em;
	line-height: 0.98;
	font-size: clamp(2rem, 4.4vw, 3.2rem);
	color: var(--ink-100);
}

.page-header__updated {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: var(--fs-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-500);
}

.page-hero {
	margin-bottom: 1.75rem;
}

.page-hero__img {
	width: 100%;
	border-radius: var(--radius);
}

/* ── 13. 404 ─────────────────────────────────────────────────────────────── */
.error-main {
	padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--pad-section);
}

.error-page {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.1rem;
	max-width: 62ch;
	padding-bottom: var(--pad-section);
}

/* The oversized ghost numeral behind the copy. Pushed off the right edge and
   clipped, so it reads as a graphic rather than as text to be read. */
.error-page__code {
	position: absolute;
	top: -0.28em;
	right: -0.08em;
	z-index: -1;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(9rem, 26vw, 20rem);
	line-height: 0.8;
	letter-spacing: -0.05em;
	color: var(--violet-500);
	opacity: 0.16;
	pointer-events: none;
	user-select: none;
}

.error-page__title {
	font-size: var(--fs-h1);
}

.error-page__desc {
	font-size: var(--fs-lead);
	color: var(--ink-300);
}

.error-page__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 0.4rem;
}

.error-recent {
	padding-top: var(--gap-lg);
	border-top: 1px solid var(--line-firm);
}

/* ── 14. Utilities, motion, print ────────────────────────────────────────── */
.u-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Stretches a link over its whole card. Used where the card cannot be an
   <a> because it already contains links (chips, bylines). */
.stretch-hit::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Scroll reveal. The hidden initial state is gated on .js so a visitor
   without JavaScript never sees permanently invisible content. */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

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

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

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

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

	.tickerbar__track {
		animation: none;
	}
}

@media print {
	.site-header,
	.site-footer,
	.brief,
	.single-sidebar,
	.postrail,
	.related,
	.article-nav,
	.read-progress,
	.tickerbar {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.single-layout {
		grid-template-columns: 1fr;
	}

	.phero__title,
	.article-content {
		color: #000;
	}
}